第四章 CSS基础

1、CSS是cascading style sheets 层叠样式表。样式定义如何显示html元素，通常存储在样式表中，将样式添加到html中，是为了解决内容与表现分离的问题。

2、外部样式表可以极大提高工作效率，通常存储在CSS文件中，多个样式定义可以层叠为一。

3、程序里有三种方式添加样式：直接添加到标记里 <p style=””>（内联样式表）；<style> 内部样式表；<link rel=”stylesheet” href=”css文件目录” type=”text/css”>外部样式表

#+id名   .+class名

4、浏览器自定义样式和浏览器默认样式。

5、浏览器载入的html解析为dom树，但是此时没有任何样式，然后解析css文件成stylerules，然后两者合并，合成Render树，最后显示。

6、CSS结构：选择器 {声明property:value;}

CSS由两个主要部分构成：选择器，一条或多条声明。每个属性有一个值，不同声明之间用冒号分隔。ps：属性和值之间不能有空格，否则无法解析

7、CSS注释：/*XXXXXX*/

8、CSS样式：

8.1、background-color背景颜色；background-image:url();背景图片;background-repeat：no-repeat;设置背景图片重复方式;background-position:背景位置 center/right/bottom，可以用百分比也可以用具体像素值（按左上角开始计算）;background-attachment:scroll/fixed设置背景是否随鼠标滚动而滚动。

8.2、text-indent文本缩进 ;

text-align:left,right,center 水平对齐方式（左、右、居中），和<center>的区别在于text-align只控制文本居中，center会控制整个元素居中 justify 两端对齐;

word-spacing:X px单词之间的距离（空格）;

letter-spacing:X px字母之间的间距;

text-transform 文本大小写(upercase/lowercase/capitalize(首字母大写));

text-decoration 文本装饰(underline/overline/line-through);

white-space处理空白符(pre/nowrap/pre-wrap/pre-line)pre不允许自动换行，pre-wrap允许自动换行;

direction 文本方向 rtl 和右对齐方式差不多。

8.3、font-famlily 字体样式(可设置多个字体样式，如未找到则换一种);

font-sytle  字体风格(italic文本斜体显示/oblique文本倾斜显示)

font-variant 字体变形设定小型大写字母(small-caps);

font-weight 字体粗细（100-900整数/bold/bolder/lighter）

font-size 字体大小

8.4、a:link 未被点击时的超链接；

a:hover 鼠标移到上方时；

a:active 被点击时；

a:visited 点击后；

a:hover必须位于a:link和a:visited之后；a:active必须位于a:hover之后

一般设置颜色

8.5、list-style-type 设置序列表的符号样式（disc/circle/square/decimal等等）；

list-style-image:url(“”) 将小黑点设置为图片；

list-style-position 小黑点位置（inside/outside）

8.6、border-collapse:将表格边框合并为单一边框（默认separate）

vertical-align:设置垂直居中方式（middle/bottom/top）

8.7、margin:X px 内边距  padding:Xpx外边距

8.8、CSS三种方式的优先级：内联>内部>外部>浏览器缺省设置   同一种方式，后面的会覆盖前面的效果。

//权重越大，优先级越高