本章主要介绍了CSS的基础知识,包括CSS的概念、引入CSS的方式、基本的选择器类型以及复合选择器的应用。特别关注了盒子的浮动这一重要概念,它是网页布局中的关键部分。
在CSS中,浮动(float)属性是用于元素布局的重要特性。默认情况下,元素遵循标准流(normal flow),按照它们在HTML文档中的顺序排列。当我们将一个元素的float属性设置为left或right时,该元素会尝试向其父元素的相应侧边靠拢。这使得其他元素可以围绕这个浮动元素排列,常用于创建多列布局或者图片文字环绕的效果。值得注意的是,浮动元素不再扩展到其父元素的宽度,而是根据其内容的宽度来确定自身尺寸。
在介绍CSS之前,我们先回顾一下CSS的基本概念。CSS,全称为层叠样式表,是一种用来表现HTML、XHTML、XML等文档样式的语言。通过使用CSS,我们可以实现丰富的网页设计,让网页外观根据我们的创意变化。CSS的代码由一系列简单的语句组成,用于定义各个元素的样式。
引入CSS有多种方法:
1. 行内式:直接在HTML元素的style属性中定义样式。
2. 嵌入式:将CSS代码放在HTML文档<head>部分中。
3. 链接式:通过<link>标签引用外部CSS文件。
4. 导入式:在CSS文件中使用@import规则导入其他CSS文件。
接下来,我们学习了基本CSS选择器:
1. 标记选择器:基于HTML标签名称选择元素,如h1{color:red;font-size:20px;}。
2. 类别选择器:使用类(class)属性选择元素,如<p class="red">黑河学院</p>,.red{color:red;}。
3. ID选择器:使用ID属性选择唯一元素,如<p id="red">黑河学院</p>,#red{color:red;}。
复合选择器则更进一步增强了选择元素的灵活性:
1. “交集”选择器:结合标记和类或ID选择特定元素,如h3.red{color:red;}。
2. “并集”选择器:用逗号分隔多个选择器,同时应用样式到多个不同类型的元素。
此外,本章还提到了其他CSS知识,如盒子模型、文字与图像处理、链接与导航的样式、项目列表的美化、圆角设计、固定宽度和自适应布局的制作,以及分列布局中的背景色问题。这些内容都是构建和美化网页不可或缺的部分。通过理解和熟练运用这些知识点,开发者可以创建出更具吸引力和功能性的网站。