CSS样式选择器与伪元素详解

"这是一个关于CSS和Div+CSS的文档，涵盖了样式选择器、伪元素样式选择器以及常见的CSS属性和值的介绍。" 在网页设计中，CSS（Cascading Style Sheets）是一种用于定义HTML或XML（包括如SVG、MathML等各种XML方言）文档呈现样式的语言。Div+CSS是网页布局的常用方式，通过使用Div元素配合CSS来控制页面布局，使得网页结构清晰，易于维护。 1. **样式选择器**： - 类选择器：如`.cla1`，`.cla2`，`.cla3`，可以应用于具有相应类名的任何元素。 - ID选择器：如`#one`，ID选择器是唯一的，只能应用于页面上的一个元素。 - 复合选择器：如`div#one.twop`，结合了ID选择器和类选择器，选择同时具有特定ID和类的元素。 - 组合选择器：如`div,#one,.two,p`，可以选择多种类型的元素。 2. **伪元素样式选择器**： - `a:link`：未被点击的超链接状态。 - `a:hover`：鼠标悬停在超链接上的状态。 - `a:active`：正在被点击或已激活的超链接状态。 - `a:visited`：已经被访问过的超链接状态。 - `p:first-letter`：段落中的首字母状态。 - `p:first-line`：段落的第一行状态。 3. **常见CSS属性和值**： - `font-variant`：定义字体是否为小型大写字母，如`normal`或`small-caps`。 - `letter-spacing`：设置字母之间的间距。 - `word-spacing`：调整单词间的距离。 - `text-decoration`：设定文字修饰，如`underline`（下划线），`overline`（上划线），`line-through`（删除线），`blink`（闪烁），或`none`（无修饰）。 - `text-indent`：规定文本块首行的缩进，可以是长度或百分比。 - `text-transform`：转换文本大小写，如`uppercase`（大写）或`lowercase`（小写）。 4. **背景属性**： - `background-color`：定义背景颜色，如`transparent`（透明）或其他颜色代码。 - `background-image`：设置背景图像的URL。 - `background-repeat`：控制背景图像是否重复，如`repeat`（水平和垂直重复），`repeat-x`（仅水平重复），`repeat-y`（仅垂直重复）或`no-repeat`（不重复）。 - `background-attachment`：设置背景随内容滚动或固定，如`scroll`（滚动）或`fixed`（固定）。 - `background-position`：指定背景图像的位置，可以使用关键字如`left`，`center`，`right`，`top`，`bottom`或具体像素值。 5. **综合背景属性**： - `background`：允许在一个声明中设置所有背景属性，如`background: #fff url(http://www.divcss5.com/img2013/logo.gif) no-repeat fixed center;`，分别设置了背景颜色、图像、重复方式、附件和位置。 这些是CSS的基本概念和用法，通过它们，开发者能够精细控制网页的外观和布局，创建出丰富多样的视觉效果。了解并熟练运用这些知识对于进行网页设计和开发至关重要。