CSS学习心得（3）

CSS伪类

CSS 伪类用于向某些选择器添加特殊的效果。
伪类的语法：
selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用：
selector.class : pseudo-class {property: value}
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */
伪类可以与 CSS 类配合使用：
a.red : visited {color: #FF0000}
CSS Syntax

CSS 伪元素

CSS 伪元素用于向某些选择器设置特殊效果。
伪元素的语法：
selector:pseudo-element {property:value;}
CSS 类也可以与伪元素配合使用：
selector.class:pseudo-element {property:value;}
:first-line 伪元素：“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化。
例：p:first-line {
color:#ff0000;
font-variant:small-caps;
}
注意：：“first-letter” 伪元素只能用于块级元素。
before 伪元素：":before" 伪元素可以在元素的内容前面插入新内容。
例：下面的例子在每个

元素前面插入一幅图片：
h1:before {
content:url(logo.gif);
}
after 伪元素：":after" 伪元素可以在元素的内容之后插入新内容。
例：下面的例子在每个

元素后面插入一幅图片：
h1:after {
content:url(logo.gif);
}

css初学心得：CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。学习了CSS后对页面的布局有了清晰的认识，特别是对盒子模型的应用，学会了在写网页之前要合理的划分区域在开始动手写。