CSS编程基础与考试题库.docxVIP

CSS编程基础与考试题库

引言：CSS在前端开发中的基石作用

第一部分：CSS编程基础

1.1CSS核心概念与语法规则

/*选择器{属性:值;[另一个属性:值;...]}*/

p{

color:#333;

font-size:16px;

line-height:1.5;

}

理解CSS的层叠（Cascade）、继承（Inheritance）和特殊性（Specificity，或称权重）是掌握CSS的关键。层叠性决定了当多个样式规则应用于同一元素时，哪些规则会最终生效；继承性指某些属性会从父元素传递到子元素；特殊性则用于计算不同选择器的优先级，以解决样式冲突。

1.2选择器详解：精准定位页面元素

选择器是CSS的灵魂，能否准确、高效地选中目标元素直接影响样式编写的效率和代码质量。

*基础选择器：

*类选择器：以点号`.`开头，可应用于多个元素，如`.btn`,`.text-center`。

*ID选择器：以井号`#`开头，页面中应唯一，如`#header`,`#main-content`。

*通用选择器：`*`，匹配所有元素，谨慎使用。

*属性选择器：根据元素的属性或属性值进行选择，如`[type=text]`,`[class^=icon-]`。

*组合选择器：

*后代选择器：使用空格分隔，如`ulli`选择ul下的所有li后代。

*子元素选择器：使用``连接，如`ulli`仅选择ul的直接子元素li。

*相邻兄弟选择器：使用`+`连接，选择紧随其后的同级元素，如`h2+p`。

*通用兄弟选择器：使用`~`连接，选择其后所有同级元素，如`h2~p`。

*伪类与伪元素：

*伪类：用于选择处于特定状态的元素，如`:hover`（鼠标悬停）、`:active`（被激活）、`:nth-child(n)`（第n个子元素）、`:first-of-type`（同类型第一个）。

*伪元素：用于创建不在DOM树中的虚拟元素，如`::before`（元素内容前插入）、`::after`（元素内容后插入）、`::first-line`（首行文本）、`::selection`（选中文本）。

选择器的优先级计算是核心难点，通常遵循：内联样式ID选择器类选择器/属性选择器/伪类元素选择器/伪元素。通配符选择器和继承的样式优先级最低。

1.3盒模型：CSS布局的基石

*内容区域（ContentArea）：显示文本和图像的区域，尺寸由`width`和`height`属性定义。

*内边距（Padding）：内容区域与边框之间的空间，可通过`padding-top`,`padding-right`,`padding-bottom`,`padding-left`或简写`padding`控制。

*边框（Border）：围绕内边距和内容区域的线条，可通过`border-width`,`border-style`,`border-color`或简写`border`控制。

*外边距（Margin）：盒子与其他盒子之间的空间，可通过`margin-top`,`margin-right`,`margin-bottom`,`margin-left`或简写`margin`控制。外边距可以为负值，且存在“外边距合并”（MarginCollapse）现象，即垂直方向上相邻的两个外边距会合并为一个较大的外边距。

CSS3引入了`box-sizing`属性，用于改变盒模型的尺寸计算方式：

*`box-sizing:content-box;`（默认值）：元素的总宽度=width+padding+border。

*`box-sizing:border-box;`：元素的总宽度=width（此时width包含了content、padding和border）。这一属性极大地简化了布局计算，已成为现代布局的首选。

1.4文本样式与颜色控制

文本是网页信息传递的主要载体，CSS提供了丰富的属性来控制文本的外观。

*字体相关：`font-family`（字体族）、`font-size`（字体大小）、`font-weight`（字重/粗细）、`font-style`（斜体等）、`line-height`（行高，对文本可读性至关重要）、`font`（字体属性简写）。

*文本外观：`color`（文本颜色，可使用关键字、十六进制、RGB/RGBA、HSL/HSLA等表示）、`text-align`（水平对齐