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 所有媒体 (默认)
网友评论