理解CSS | 青训营笔记

176 阅读2分钟

CSS定义

Cascading Style Sheets 用来定义页面元素的样式

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

CSS是如何工作的

image.png

  • 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 伪元素用于为元素的指定部分设置样式。

例如,它可用于:

  • 为元素的第一个字母或行设置样式
  • 在元素内容之前或之后插入内容