CSS定义
Cascading Style Sheets 用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
CSS是如何工作的
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
class 选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。
CSS 伪类(Pseudo-classes)
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 伪元素用于为元素的指定部分设置样式。
例如,它可用于:
- 为元素的第一个字母或行设置样式
- 在元素内容之前或之后插入内容