css是cascading style sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。
一、css引入的方式
1、行内样式：行内式是在标记的style属性中设定css样式。这种方式没有体现出css的优势，不推荐使用。
2、嵌入式：嵌入式是将css样式集中写在网页的标签对的标签对中。格式如下：
...此处写css样式
3、导入式：将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件，
@importmystyle.css; 此处要注意.css文件的路径
4、链接式：也是将一个.css文件引入到html文件中
注意:导入式会在整个网页装载完后再装载css文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这
是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载css文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样
先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
二、css的选择器
“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
1、基础选择器：
＊ ： 通用元素选择器，匹配任何元素 * { margin:0; padding:0; }
e ： 标签选择器，匹配所有使用e标签的元素p { color:green; }
.info和e.info: class选择器，匹配所有class属性中包含info的元素 .info { background:#ff0; } p.info { background:blue; }
#info和e#info id选择器，匹配所有id属性等于footer的元素 #info { background:#ff0; } p#info { background:#ff0; }
2、组合选择器：
e,f 多元素选择器，同时匹配所有e元素或f元素，e和f之间用逗号分隔 div,p { color:#f00; }
e f 后代元素选择器，匹配所有属于e元素后代的f元素，e和f之间用空格分隔 #nav li { display:inline; } li a { font-weight:bold; }
e > f 子元素选择器，匹配所有e元素的子元素f div > strong { color:#f00; }
e + f 毗邻元素选择器，匹配所有紧随e元素之后的同级元素f p + p { color:#f00; }
注意嵌套规则：
块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。块级元素不能放在p里面。有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dtli内可以包含div块级元素与块级元素并列、内联元素与内联元素并列。（错误的：
）3、属性选择器
e[att] 匹配所有具有att属性的e元素，不考虑它的值。
（注意：e在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }
e[att=val] 匹配所有att属性等于“val”的e元素 div[class=”error”] { color:#f00; }
e[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的e元素 td[class~=”name”] { color:#f00; }
e[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的e元素，主要用于lang属性，
比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; }
e[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^=test]{background:#ffff00;}
e[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$=test]{background:#ffff00;}
e[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*=test]{background:#ffff00;}
p:before 在每个
元素的内容之前插入内容 p:before{content:hello;color:red}
p:after 在每个
元素的内容之前插入内容 p:after{ content:hello；color:red}
4、伪类选择器
伪类选择器： 专用于控制链接的显示效果，伪类选择器：
a:link（没有接触过的链接）,用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #ff0000} /* 未访问的链接 */
a:visited {color: #00ff00} /* 已访问的链接 */
a:hover {color: #ff00ff} /* 鼠标移动到链接上 */
a:active {color: #0000ff} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
三、css常用属性
1、颜色属性
ppppp
ppppp
ppppp
ppppp
2、字体属性
font-size: 20px/50%/larger
font-family:'lucida bright'
font-weight: lighter/bold/border/
老男孩3、背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
简写：
注意：如果讲背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片，另外，如果此时要设置一个
width＝100px，你也看不出效果，除非你设置出html。
1 2 en> 3 4 5 title 6 20 21
view code
4、文本属性
white-space: 设置元素中空白的处理方式
normal：默认处理方式。pre：保留空格，当文字超出边界时不换行nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签pre-wrap：保留空格，当文字碰到边界时换行pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行direction: 规定文本的方向
ltr 默认，文本方向从左到右。rtl 文本方向从右到左。text-align: 文本的水平对齐方式
leftcenterright line-height: 文本行高
normal 默认 vertical-align: 文本所在行高的垂直对齐方式
baseline 默认sub 垂直对齐文本的下标，和标签一样的效果super 垂直对齐文本的上标，和标签一样的效果top 对象的顶端与所在容器的顶端对齐text-top 对象的顶端与所在行文字顶端对齐middle 元素对象基于基线垂直对齐bottom 对象的底端与所在行的文字底部对齐text-bottom 对象的底端与所在行文字的底端对齐 text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
capitalize 文本中的每个单词以大写字母开头。uppercase 定义仅有大写字母。lowercase 定义仅有小写字母。 text-overflow: 文本溢出样式
clip 修剪文本。ellipsis 显示省略符号...来代表被修剪的文本。string 使用给定的字符串来代表被修剪的文本。 text-decoration: 文本的装饰none 默认。underline 下划线。overline 上划线。line-through 中线。 text-shadow：文本阴影
第一个参数是左右位置第二个参数是上下位置第三个参数是虚化效果第四个参数是颜色text-shadow: 5px 5px 5px #888; word-wrap：自动换行
word-wrap: break-word;
5. 列表属性
list-style-type: 列表项标志的类型
none 去除标志decimal-leading-zero; 02.square; 方框circle; 空心圆upper-alph; & disc; 实心圆 list-style-image：将图象设置为列表项标志
list-style-position：列表项标志的位置
insideoutside list-style：缩写
6. 边框
border-style：边框样式
solid 默认，实线double 双线dotted 点状线条dashed 虚线 border-color：边框颜色
border-width：边框宽度
border-radius：圆角
1个参数：四个角都应用2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下4个参数：左上、右上、右下、左下（顺时针） border: 简写
border: 2px yellow solid; box-shadow：边框阴影
第一个参数是左右位置第二个参数是上下位置第三个参数是虚化效果第四个参数是颜色box-shadow: 10px 10px 5px #888;
7、display
none 不显示。block 显示为块级元素。inline 显示为内联元素。inline-block 行内块元素（会保持块元素的高宽）。list-item 显示为列表元素。 8、盒子模型
什么是盒子模型？
padding:用于控制内容与边框之间的距离;
margin: 用于控制元素与元素之间的距离;
一个参数，应用于四边。
两个参数，第一个用于上、下，第二个用于左、右。
三个参数，第一个用于上，第二个用于左、右，第三个用于下
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法
1 body {2 margin: 0;3 }
view code
9、float
让一行显示两个块级标签，会脱离文档流
noneleft 左浮动right 右浮动clear 清除浮动：
none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许两边有浮动对象 10、position
1 static，默认值 static：无特殊定位，对象遵循正常文档流。
top，right，bottom，left等属性不 会被应用。 说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序， 也就是我们通常看到的由左 到右、由
上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。 默认值就 是让元素继续按照
文档流显示，不作出任何改变。
2 position:relative
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 如果设定 position:relative，就可以使用
top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档 中的原有位置，只是视觉上相对于它在文档中的原有位置
移动了] 当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。 如果一个元素绝对
定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素， 一直找到html为止。
3 position:fixed
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定
义。 注
意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流， 另一个是“定位
流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
通过以下四种属性进行定位：
lefttoprightbottomz-index