CSS

CSS 层叠样式表 (Cascading Style Sheets) 解决内容与表现分离的问题

多重样式层叠次序：一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1.浏览器缺省设置

2.外部样式表

3.内部样式表（位于 <head> 标签内部）

4.内联样式（在 HTML 元素内部）

格式：

h1 {color:red; font-size:14px;} 如果值为若干单词，则要给值加引号：p {font-family:"sans serif";}

子元素从父元素继承属性，例如<body>设置了verdada字体，那么其子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd字体都是verdada，若想改变字体，需要对子元素重新设置。

选择器：

派生选择器（定义到某一个很深的子元素）：后代选择器、子元素选择器、相邻兄弟选择器

id 选择器：以 "#" 来定义。

类选择器：以”.“定义，class。

属性选择器：

背景：

所有背景属性都不能继承。

background-color：把背景设置成合法颜色值。 background-image：把背景设置为图片。

background-repeat：属性值 repeat 导致图像在水平垂直方向上都平铺。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

background-position ：改变图像在背景中的位置。属性值可以使top，center等关键字，百分数或者长度值

background-attachment ：防止这种滚动

文本

text-indent：文本缩进。text-align ：水平对齐，<CENTER> 不仅影响文本，还会把整个元素居中。text-align 不会控制元素的对齐，而只影响内部内容。

word-spacing ：可以改变字（单词）之间的标准间隔

letter-spacing ：修改字符或字母之间的间隔

text-transform ：处理文本的大小写。属性值：none（保持不变）、uppercase(全大写)、lowercase（全小写）、capitalize（每个单词首字母大写）

text-decoration ：装饰文本。属性值：none 不变；underline 加下划线；overline 文本的顶端加上划线； line-through 在文本中间画一个贯穿线；blink 让文本闪烁。

white-space: 处理空白符。normal只保留一个空格；pre保留输入的全部空格和回车；nowrap只保留空格，不保留换行

direction：文本方向

字体：

CSS通用字体系列：Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体

font-family ：定义文本的字体系列。h1 {font-family: Georgia,serif;} Georgia是自定义的字体，若用户代理上没有安装该字体，那么就选用通用字体serif。字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

font-style 属性最常用于规定斜体文本。

font-variant 属性可以设定小型大写字母。

font-weight 属性设置文本的粗细。normal正常，bold加粗，100~900 9级加粗度，400 等价于 normal，而 700 等价于 bold。

font-size 属性设置文本的大小。

链接（伪类）：

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。a:active 必须被置于 a:hover 之后，才是有效的。

first-child 伪类：first-child 伪类来选择元素的第一个子元素。

匹配第一个元素:p:first-child{ color: red; }

匹配所有 元素中的第一个 元素:p > i:first-child{ font-weight:bold; }

匹配所有作为第一个子元素的 元素中的所有 元素:p:first-child i{ color:blue; }

"first-line" 伪元素用于向文本的首行设置特殊样式。

"first-letter" 伪元素用于向文本的首字母设置特殊样式.p:first-letter{ color: #FF0000; }

伪元素可以与 CSS 类配合使用：p.article:first-letter{ color: #FF0000; }

":after" 伪元素可以在元素的内容之后插入新内容。

列表

表格

轮廓（outline）

框模型（box model）

背景应用于由内容和内边距、边框组成的区域。

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

定位（position）

relative（相对定位）：元素框偏移某个距离。它将出现在它所在的位置上，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

absolute（绝对定位）：未定位之前的元素框删除掉，重新在定位的地方生成一个框（常用）

overflow: scroll/hidden/auto;当元素内容太大而超出规定区域时，overflow 属性可以确定是否显示滚动条等行为。

clip:剪裁图像 Z-index：设置图像位于文字其他图层的上方或者下方

float 属性实现元素的浮动。 clear：clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

CSS

CSS