CSS选择器与字体属性详解

"CSS基础知识点概览" 在网页设计中，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。本摘要将深入讲解9.20至9.23日期间涉及的CSS基础内容，主要包括选择器的使用和字体属性的设置。 ### CSS选择器 **1. 标签选择器**：通过HTML标签名来选择元素，如`p`、`div`等。例如： ```css p {} // 选择所有的段落 div {} // 选择所有的div元素 ``` **2. 类选择器**：使用`.`前缀，指定元素的class属性值。例如： ```css .div1 {} // 选择class为'div1'的元素 .nav-top {} // 选择class为'nav-top'的元素 ``` **3. 通配符选择器**：`*`选择器可以匹配任何元素。 ```css * {} // 选择页面中的所有元素 ``` **4. 子元素选择器**：使用`>`符号，选择指定父元素的直接子元素。例如： ```css .div1 > a > .image {} // 选择div1下的直接子元素a，然后是a下的直接子元素.image ``` 请注意，子元素选择器不能跨级查找。 **5. 并集选择器**：使用`,`分隔，为多个标签应用相同的样式。 ```css p, a, div, li, input { list-style: none; } // 为所有列出的标签移除列表样式 ``` **6. 后代选择器**：使用空格分隔，选择某个元素的后代元素，不一定是直接子元素。 ```css div ul li { text-decoration: none; } // 选择div内的所有ul列表项，并移除下划线 ``` **7. 链接伪类选择器**：用于定义链接在不同状态下的样式。 - `a:hover`：鼠标悬停时的样式 - `a:active`：鼠标点击时的样式 - `a:link`：未访问链接的样式 - `a:visited`：已访问链接的样式 - `:focus`：用于获取焦点（如输入框）的元素，通常与表单元素配合使用 ### 字体属性 **1. font-family**：定义文本的字体。可以设置多个备选字体，以防浏览器不支持首选字体。例如： ```css font-family: "Arial", sans-serif; // 先尝试使用Arial，如果浏览器不支持，则使用无衬线字体 ``` **2. font-size**：设置文本的大小。可以使用绝对单位（如px, pt）或相对单位（如em, rem）。例如： ```css font-size: 16px; // 设置为16像素 font-size: 1em; // 设置为父元素字体大小的1倍 ``` **3. font-weight**：控制字体的粗细。默认值是`normal`（400），`bold`（900）表示加粗。还可以使用数字值，4到9之间不带单位。例如： ```css font-weight: bold; // 加粗字体 font-weight: 600; // 设置为中等加粗 ``` **4. font-style**：定义字体的风格，如`normal`（正常）、`italic`（斜体）。 **5. font-variant**：用于设置小型大写字母，如`small-caps`。 **6. font-stretch**：调整字体的宽度，但支持度有限。 **7. font**：简写属性，可以一次性设置所有字体属性，如`font: italic bold 16px/1.5 Arial, sans-serif;`。 以上就是关于CSS基础选择器和字体属性的讲解，理解并熟练运用这些概念对于构建美观且响应式的网页至关重要。