重识 Cascading Style Cheets

Cascading Style Sheets (CSS) 是一门指定文档该如何呈现给用户的语言。

为什么要使用CSS

css 帮助我们 将文档的内容和如何展示内容的细节分离开来 ，以便我们能

• 避免重复

• 如您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。

• 更容易维护

• 当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。

• 为不同的目的使用不同样式而内容相同

• 当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。

CSS 如何工作的

浏览器在展现一个文档的时候，必须要把文档内容和相应的样式信息结合起来展示。 这个处理过程一般分两个阶段：

• 浏览器先将标记语言和CSS转换成DOM (文档对象模型)结构。 这时DOM 就代表了电脑内存中的相应文档，因为它已经融合了文档内容和相应的样式表。
• 最后浏览器把 DOM的内容展示出来。

层叠和继承

一个元素的样式，可以通过多种方式来定义，而多种定义方式之间通过复杂的影响关系决定了元素的最终样式。这种复杂既造就了CSS的强大，也导致CSS显得如此“混乱”而且难以调试。
对于层叠来说，共有三种主要的样式来源：

• 浏览器对HTML定义的默认样式。

• 用户定义的样式。

• 开发者定义的样式，可以有三种形式：

  • 定义在外部文件（外链样式）：本教程中案例主要是通过这种形式定义样式。
  • 在页面的头部定义（内联样式）：通过这种形式定义的样式只在本页面内生效。
  • 定义在特定的元素身上（行内样式）：这种形式多用于测试，可维护性较差。

掌握CSS选择器的含义和用法

除了标签名称，你还可以在选择器中使用属性值。这样你就可以更具体的描述你的规则.

• 类选择器

• ID 选择器

• 伪类选择器

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :first-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled

• 基于关系的选择器

  • A E 元素A的任一后代元素E (后代节点指A的子节点，子节点的子节点，以此类推)
  • A > E 元素A的任一子元素E(也就是直系后代)
  • E:first-child 任一是其父母结点的第一个子节点的元素E
  • B + E 元素B的任一下一个兄弟元素E
  • B ~ E B元素后面的拥有共同父元素的兄弟元素E

可以通过添加空白字符和注释来提高样式表的可读性, 也可以把不同的选择器放到一组中来，这样同一样式可以应用到这一组中。

实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

文本样式

font

p {font: italic 75%/125% "Comic Sans MS", cursive;}

这条规则定义了字体的几个属性，使整个段落文本都变成斜体。

字体大小设置为每个段落父元素字体大小的3/4，行高设置为125%（比常规的间隔稍大一些）。

文本字体设置为 Comic Sans MS，假如该字体不被浏览器支持则使用默认字体：cursive。

这条规则还把bold和small-caps这些效果给去掉了（设置它们的值为normal）。

特别的：

• 使用font-style: italic;指定文本为斜体;

• 使用 font-variant: small-caps;指定文本为小型大写字母;

图片内容

特别的：
可以通过将content 属性值设置为某个图片的URL，可以将图片插到元素的前面或后面。

a.glossary::after {content: " " url("../images/glossary-icon.gif");}

列表

下面的规则为不同类的列表项指定了不同的标记：

li.open {list-style: circle;}
li.closed {list-style: disc;}

特别的：

counter 计数器

可以用计数器来计数任何元素，不仅是列表元素。比如，在某些文档中你可能想计数标题和段落。

要想计数，你必须定义一个计数器。

在计数开始前的某个元素上，设置 counter-reset属性以重置计数器。被计数元素的父节点是一个不错的选择。当然，任何出现在被计数元素前面的元素都可以。

设置每个需要计数的元素的counter-increment 属性为你的计数器名。

通过为选择器增加 :before 或 :after 并设置 content 属性来显示计数器。 (如上一节所示, 内容).

在content属性的值中设置 counter()，在括号内填上计数器的名字。可选的是设置计数器类型。其类型和前面一节 有序列表 中相同。

正常情况下，显示计数器的元素也会递增计数器。

h3.numbered {counter-reset: mynum;}
p.numbered:before { content: counter(mynum) ": "; counter-increment: mynum; font-weight: bold;}
}

盒模型

外边距-边框-内边距-内容

盒模型目前有 border-box content-box 两种，前者把边框的宽度也算在 width中，后者则不算

媒体

之前曾经遇到定义打印时候需要隐藏页面部分元素的问题，这个时候才知道 style标签有media 属性以及CSS的 @media 语法

为了网页在被打印的时候去掉无用的信息，我们在样式表中加一条适配规则，使导航区域在打印时是被隐藏起来的:

@media print { \#nav-area {display: none;} }

一些常见的媒介类型：

• screen 彩色计算机显示
• print 打印（分页式媒体）
• projection 投影
• all 所有媒体 (默认)

拓展链接

重识 Cascading Style Cheets