CSS 笔记

CSS 就是 Cascading Style Sheets,中文翻译为“层叠样式表”,简称样式表,它是一种渲染网页的技术。网页设计最初是用HTML标记来定义页面文档及格式,例如标题 <h1>、段落 <p>、表格 <table>、链接 <a> 等,但这些标记不能满足更多的文档样式需求,为了解决这个问题,在 1997 年,W3C(The World Wide Web Consortium)颁布 HTML4 标准的同时也公布了有关样式表的第一个标准 CSS1, 自 CSS1 的版本之后,又在 1998 年 5 月发布了 CSS2 版本,样式表得到了更多的充实。W3C 把 DHTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括 JavaScript、Vbscript 等)、支持动态效果的浏览器(包括 Internet Explorer、Netscape Navigator 等)和 CSS 样式表。

CSS 是什么

层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

CSS 是开放网络的核心语言之一,由 W3C规范 进行标准化。CSS 被分为不同等级:CSS1 现已废弃,CSS2.1 是推荐标准,CSS3 分成多个小模块且正在标准化中。

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一

样式解决了一个普遍的问题
HTML 元素原本被设计为用于定义文档内容。通过使用 <h1><p><table> 这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。

由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。

所有的主流浏览器均支持层叠样式表。

样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。

由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

多重样式将层叠为一个
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序
当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?

一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,它们的优先级按照出现的顺序依次升高,其中数字 4 拥有最高的优先权。

  • 浏览器缺省设置
  • 外部样式表
  • 内部样式表(位于 <head> 标签内部)
  • 内联样式(在 HTML 元素内部)

其实很容易理解,CSS 的样式层叠就像 Java 中的类继承,子类会获得父类的所有属性和方法,并且子类可以重写父类的方法,子类的重写方法优先级更高。在 CSS 中也是这样,从上往下依次继承,如果有冲突 CSS 属性,则以后面(优先级更高,”子类”)的为准,不冲突的则组合起来。

HTML CSS JS 的职责
HTML:专注于文档的内容
CSS:专注于文档的样式
JS:专注于文档的交互

CSS 基础语法

CSS 注释语法:/* 这是 CSS 注释 */
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明

选择器表示你要将这些 CSS 属性应用到哪些 HTML 元素上,即作用范围;
声明由属性和属性值构成,他们之间使用 : 分隔,多条声明之间使用 ; 分隔。
选择器、声明、属性、值

因此,我们学习的重点就分为两个部分:选择器CSS属性
CSS 属性没什么好讲的,就是熟练使用以及记忆,CSS 速查表

CSS 选择器

元素选择器

直接使用 HTML 元素名,如 strong、span、div,因此也称为标签选择器,不过按照 W3C 标准来说,应该叫做类型选择器。除了使用具体的标签名外,还有一个特殊的元素选择器(通配符选择器)*,表示所有 HTML 元素。

类选择器

通过设置元素的 class 属性,可以为元素指定类名。类名由开发者自己指定。文档中的多个元素可以拥有同一个类名。在写样式表时,类选择器是以英文句号(.)开头的。

ID选择器

通过设置元素的 id 属性为该元素指定 ID。ID 由开发者指定。每个 ID 在文档中必须是唯一的。在写样式表时,ID 选择器是以#开头的。

如果有多条规则指定了相同的属性在同一个元素上,CSS 规定拥有更高确定度的选择器优先级更高。ID选择器比类选择器更具确定度,而类选择器比标签选择器(tag selector)更具确定度。在确定度相同的情况下,写在后面的优先级更高。

你也可以将多个选择器组合起来构成更确定的选择器。比如,选择器.key选中所有 class 属性为 key 的元素,选择器 p.key 选中所有 class 属性为 key 的 <p> 元素。

除了 class 和 id,你还可以用方括号的形式指定其他属性。比如,选择器 [type='button'] 选中所有 type 属性为 button 的元素。

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。常见的几种属性选择器如下:

  • [attr]
    表示带有以 attr 命名的属性的元素。
  • [attr=value]
    表示带有以 attr 命名的,且值为”value”的属性的元素。
  • [attr~=value]
    表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少一个值为”value”。
  • [attr|=value]
    表示带有以 attr 命名的属性的元素,属性值为“value”或是以”value-“为前缀(”-“为连字符,Unicode编码为U+002D)开头。典型的应用场景是用来匹配语言简写代码(如zh-CN,zh-TW可以用zh作为value)。
  • [attr^=value]
    表示带有以 attr 命名的,且值是以”value”开头的属性的元素。
  • [attr$=value]
    表示带有以 attr 命名的,且值是以”value”结尾的属性的元素。
  • [attr*=value]
    表示带有以 attr 命名的,且值包含有”value”的属性的元素。

伪类选择器

CSS 伪类是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,:hover 将在用户悬停在选择器指定的元素上时应用样式。

伪类连同伪元素一起,他们允许你不仅仅是根据文档 DOM 树中的内容对元素应用样式,而且还允许你根据诸如像导航历史这样的外部因素来应用样式(:visited,为例),同样的,可以根据内容的状态(例如在一些表单元素上的 :checked),或者鼠标的位置 (例如 :hover 让你知道是否鼠标在一个元素上悬浮)来应用样式。

伪类和伪元素都不是实际存在 class 和 element,伪类是元素的一些特殊状态(如鼠标悬停的链接),伪元素则是为元素的部分内容设置特定的样式(如段落的第一行)。

  • :link,未被访问的链接
    为了可以正确地渲染链接元素的样式,:link伪类选择器应当放在其他伪类选择器的前面,并且遵循LVHA的先后顺序,即:link —> :visited —> :hover —> :active:focus伪类选择器常伴随在:hover伪类选择器左右,需要根据你想要实现的效果确定它们的顺序。
  • :visited,已被访问的链接
  • :active,当前激活的链接(鼠标点击与释放之间发生的事件)
  • :hover,鼠标悬停的链接
  • :focus,获得焦点的元素
  • :first-child,兄弟节点中的第一个元素
  • :last-child,兄弟节点中的最后一个元素
  • :only-child,属于其父节点的独生子的元素
  • :nth-child(an+b),兄弟节点中的第 an+b 个元素(n 为从 0 开始的整数,a、b 为整数),兄弟节点中的元素下标从 1 开始。示例:
    • 0n+33:匹配第 3 个元素
    • 1n+0n:匹配所有的元素
    • 2n+02n:匹配位置为偶数的元素,可以使用even替代
    • 2n+1:匹配位置为奇数的元素,可以使用odd替代
    • 3n+4:匹配位置为 4、7、10、13… 的元素
  • :nth-last-child(an+b),兄弟节点中的第 an+b 个元素(从右往左数起,除此之外,与上面的伪类无区别)。示例:
    • tr:nth-last-child(-n+4):匹配表格中的最后四个 tr 元素
    • span:nth-last-child(even):匹配所有偶数位置(从后往前)的 span 元素
  • :first-of-type,兄弟节点中的同类型的第一个元素
  • :last-of-type,兄弟节点中的同类型的最后一个元素
  • :only-of-type,属于其父节点的同类型的独生子元素
  • :nth-of-type(an+b),兄弟节点中的同类型的第 an+b 个元素
  • :nth-last-of-type(an+b),兄弟节点中的同类型的第 an+b 个元素(从后往前)
  • :read-only,设置了 readonly 只读属性的元素
  • :read-write,未设置 readonly 的可读可写元素
  • :valid,表单元素中的所有已通过类型验证的元素
  • :invalid,表单元素中的所有未通过类型验证的元素
  • :in-range,input 的 value 在其 min 与 max 范围内的元素
  • :out-of-range,input 的 value 不在其 min 与 max 范围内的元素
  • :default,被默认选中的表单元素
  • :checked,被选中的 radio、checkbox、select的option 元素
  • :required,拥有 required 属性的元素(请求的元素)
  • :optional,没有 required 属性的元素(可选的元素)
  • :enabled,被启用的所有元素
  • :disabled,被禁用的所有元素
  • :indeterminate,表单中的状态不确定的元素(该属性由JS设置)
  • :root,根元素,在 HTML 中,<html>元素即为根元素,除了优先级更高外,它和 html 选择器没有区别
  • :empty,没有子元素的元素(叶结点)
  • :target,与当前页面 URL 中的 #target 相同 ID 的元素
  • :lang(zh),语言为 zh 的所有元素,常见的语言有 zh、en
  • :not(selector),所有不被 selector 匹配的元素(否定语义)

伪元素选择器

和伪类一样,伪元素也是非实际存在的元素,但它不是描述处于特殊状态的元素,而是为了给元素的某些部分设置样式。如::first-line伪元素将改变段落第一行的文字样式。伪元素也使用:分隔(CSS3以前),在 CSS3 中,为了与伪类区别开,建议使用::双冒号表示。目前已定义的伪元素有:

  • ::first-letter,块级元素的第一个字母(所处行之前没有其他内容)
  • ::first-line,块级元素的第一行文本
  • ::before,当前元素的前面,通常与contentCSS属性一起使用,用于添加文本
  • ::after,当前元素的后面,通常与contentCSS属性一起使用,用于添加文本
  • ::selection,被用户选中的内容(如鼠标选择的内容)

关系选择器

  • A E:A 的所有后代元素 E
  • A > E:A 的直系后代元素 E
  • B + E:B 的下一个兄弟元素
  • B ~ E:B 后所有的兄弟元素

选择器组合

selector1, selector2, selector3, ..., selectorN { property: value; }

CSS 盒模型

CSS 盒模型

CSS 布局

学习 CSS 布局