什么是CSS*
1. css即cascading stylesheet（级联/层叠样式表），控制页面的外观
2. css为网页提供表现的形式，即按照w3c的建议，实现一个比较好的网页设计，应该按照如下的规则：
网页的结构和数据，应该写在.html文件里
网页的表现形式，应该写在.css文件里
网页的行为，应该写在.js文件里
这样做的原因是，将网页的数据、表现、行为分离，方便代码的维护 ,提高页面的维护度
3. 早期时表现页面＜font color="red" size="6"＞hello world.. 使用这种方式不好，因为“数据”和“表现”没有分离
比较好的方式是将“数据”和“表现”分离开，将“表现”写入css文件，html文件中只写数据
Style.css
body{ color：red；font-size：30px；}
Html01.html
<html> <head> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> Hello world! </body> </html>
CSS的使用方式
1.内联方式
将符合CSS语法的定义在元素的style属性，中间用分号表示。实现了对于样式的定义，但是不能重用。可重用性，可维护度不好。
<元素 style=“样式1：值；样式2：值；....”>
<h1 style="color:red;">h1 text</h1>
2. 内部样式表
将样式定义放在head的style中。实现当前页面上样式的重用，样式的分离。在head里添加style标记
<head> <style type=”text/css”> 选择器{ 样式1：值；样式2：值 } </style> </head>
3. 外部样式表
将样式定义到一个单独的CSS文件中，由html页面引入CSS文件
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head>
CSS选择器
选择器是什么？
选择器定义了如何查找html标记，浏览器会依据选择器，找到匹配的标记，然后施加对应的样式。
常用的选择器
1. 标记选择器（简单选择器，元素选择器） 标记的名称{ 属性名：属性值；....； }
Style.css
body{ color：red；font-size：30px；} p{ color：blue；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> Hello world<br/> <p>hello kitty</p> <p>hello jerry</p> </body>
2. class（类）选择器
第一种形式
匿名的class选择器 格式： . 选择器的名称{ 属性名：属性值 ; ... ; } 注：标记的class属性值与选择器的名称相等
Style.css
body{ color：red；font-size：30px；} P{ color：blue；} .s1{ font-style：italic；font-size：60px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div class="s1">hello java</div> <div class="s1">hello c </div> <span> hello zs</span> <span> hello lg</span> </body>
第二种形式
有名的class选择器（分类选择器） 格式：标记的名称 . 选择器的名称{ 属性名：属性值 ; ... ; } 注：除了标记的class属性值和选择器的名称相等以外，还要求标记的名称匹配
Style.css
body{ color：red；font-size：30px；} P{ color：blue；} div.s1{ font-style：italic；font-size：60px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div class="s1">hello java</div> <div class="s1">hello c </div> <div class="s2">hello c </div> <p> hello lg</p> </body>
3. id选择器
# 选择器的名称{ 属性名：属性值 ; ... ; } 标记的id属性值与选择器的名称相等。 注意，在同一个html文件当中，id值必须唯一
Style.css
body{ color：red；font-size：30px；} P{ color：blue；} div.s1{ font-style：italic；font-size：60px；} #d1{ width：200px；height：100px；background-color：#ff88ee；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div class="s1">hello java</div> <div class="s1">hello c </div> <div class="s2">hello c </div> <p class="s1"> hello lg</p> <div id="d1" class="s1"></div> </body>
4. 分组选择器
h1 , h2 , h3{ color : green ; } 对以" , "隔开的选择器施加相同的样式
Style.css
h1，h2，h3{ color：green；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <h1>h1.1</h1> <h1>h1.2</h1> <h2>h2</h2> <h3>h3</h3> </body>
5. 分类选择器：同一种标签中细分不同的样式
Style.css
div.small{ border:1px solid red; width:100px; height:100px; } div.large{ border:1px solid red; width:200px; height:200px; }
html
<body> <div class="small"> aaaa</div> <div class="large">bbbb</div> <h6 class="large">h6 text</h6> </body>
6. 选择器的派生
#d2 p{ font-size :120px ; } 表示id为d2的标记内部的所有p标记的字体为120px
Style.css
div{ color：red；font-size：60px；} #d2 p{ font-size：120px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> <div id="d1"> <p>div d1 p1</p> </div> <div id="d2"> <p>div d2 p2</p> haha </div> </body>
7. 伪类选择器：定义同一个元素在不同状态下的外观
以a为例： a：link（没有访问过的） a：hover（鼠标放在上面）鼠标悬停 a：active（鼠标按下） a：visited（访问过的） 其他元素（都有的）：hover
css
a.mylink：link{ color：red；} a.mylink：hover{ color：blue；} a.mylink：active{ color：green；} a.mylink：visited{ color：yellow；} h2:hover{font-size:70px;}
html
<a href="a.html" class="mylink">哈哈</a> <h2>h2</h2>
样式的继承
子标记会继承父标记的样式
Style.css
div{ color：red；font-size：30px；}
Html01.html
<head> <link rel="stylesheet" type="text/css" href="Style.css"> <head> <body> Hello world<br/> <p>hello kitty</p> <p>hello jerry</p> </body>
样式的优先级
就近优先，不同取并集，相同重复取并集。内联样式最高，高于内部和外部。内部和外部，以最后一次定义的为准。默认样式： 浏览器默认的样式 。默认样式最低。
<style> <link> 外部优先 <link> </style> 内部优先
CSS单位
px 像素（通用） 14px。（计算机屏幕上的一个点）相对于屏幕的。1024*768表示长1024个点，宽768个点。 相对单位。（一般设置在长和宽）
pt 磅（1pt等于1/72英寸）。绝对大小（一般设置字体大小）
em 字符的宽度 1em表示1个字符的宽度。2em等于当前字体尺寸的两倍。
in 英寸
cm 厘米
mm 毫米
% 百分比。占屏幕大小的百分比
CSS的颜色
rgb(x,x,x)：RGB值，如rgb(255,0,0)
rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)
#rrggbb：十六进制数，如#ff0000
#rgb：简写的十六进制数，如#f00
常见的属性
1. 尺寸属性
只对块级元素适用，行级元素是自适应的，根据内容大小显示。
width：宽
height：长
overflow：当内容出元素框时如何处理。 visible:依然显示 hidden:隐藏 scroll:总是显示滚动条 auto:自动。如果溢出，则显示滚动条
<div style="50px;height:50px;border:1px solid black;overflow:visible ">
撒旦国际公法说假话的各个建设的方法个省份
</div>
2. 文本处理的属性
color:字体颜色
font-size :30px ; 字体大小 一般为14px
font-family : "宋体"; 字体
font-style : italic/normal (斜体、正常); 风格
font-weight : 100（normal正常/bold粗体; 粗细 100~900
text-align :center ; 对齐方式 left , right , center
text-decoration : underline / none; 加下划线
text-indent：2em; 缩进2个字符宽
line-height：1.5em ：行高1.5个字符高(行间距)，常用来设置垂直方向上的居中（数值和高度相同即可）
cursor : pointer ; 光标的形状 wait 手型
vertical-align：水平垂直居中，只适合在td里
<!--文本相关属性--> <head> <style> #d1{ width :200px ; height :200px ; font-size :25px ; font-family :"Arial" ; font-weight :900 ; cursor :wait ; border :1px solid black ; } </style> </head> <body> <div id="d1">你好</div> </body>
3. 背景属性
background-color : red ; 背景颜色
background-image : url(images/b1.jpg) ; 背景图片
background-repeat : no-repeat ; 平铺方式 repeat-x repeat-y； repeat-x：沿x方向，复制图片； repeat-y：沿y方向，复制图片； 默认：既沿x，又沿y，复制图片。
background-position : 20px 10px ; 位置（第一个为横坐标，第二个为纵坐标）
background-attachment : fixed ; 依附方式 scroll(缺省)
也可以简化为：background：背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置
<!--背景相关的属性--> <head> <style> #d1{ width :200px ; height :500px ; border :10px solid black ; background-image :url(images/nane.gif) ; background-repeat :no-repeat ; background-position :60px 40px ; background-attachment :fixed ; } </style> </head> <body> <div id="d1"> </div> </body>
4.边框属性
border: width style color 宽度 风格 颜色
border : 1px solid red ;
border-left :2px solid green border-right : border-bottom : border-top :
border-
border-style:
border-color
<!--边框相关的属性--> <style> #d2{ width :200px ; height :500px ; border :10px solid black ; border-left :10px dotted black ; border-right :10px solid red ; border-bottom :10px solid yellow ; border-top :10px solid blue ; background :#cccccc url(images/nane.gif) no-repeat fixed 60px 40px ; } </style> <body> <div id="d2"> </div> </body>
5. 边框特有
border-collapse:separate/collapse;默认separate，单元格之间合并（单元格之间的边距设为0）。
vertical-align: top/middle/bottom; 单元格里的内容垂直 上/中/下
border-spacing:单元格分开时，设置之间的距离。
<table> <tr><td>aa</td><td>bb</td></tr> <tr><td>aa</td><td>bb</td></tr> <tr><td>aa</td><td>bb</td></tr> </table> <style> table{ width:200px; height:100px; border:1px solid black; border-spacing:0px;
//border-collapse:collapse; text-align:center; } table td{ border:1px solid red; } </style>
6. 内边距 / 外边距
外边距
和其他边框之间的距离，margin margin-left margin-right margin-top margin-bottom
margin：30px 40px 50px 20px <!-- 上 右 下 左 --> margin：0px； margin : 20px auto ; <!-- 上、下各20px，左右平均分配 ，一般用于居中 -->
内边距
和内容元素之间的距离。 padding：value padding padding-left padding-right padding-top padding-bottom
padding：30px 40px 50px 20px <!-- 上 右 下 左 --> padding：30px 40px 30px <!--表示上下，40px表示右左--> padding：0px；
混杂模式：在一个html文件当中，如果没有添加文档类型声明，ie浏览器默认会打开“混杂模式“， 即将浏览器级别降低，以兼容老的网页。如果添加了文档类型声明，则ie会打开“标准模式”。
7. 列表属性
list-style-type：none； <!-- 取消列表选项的符号 -->
list-style-image：url('')；
8. 浮动
浮动，即取消标记的独占一行的特性。浮动之后，其位置可以被其它标记使用
float : none /left / right ; 浮动 (相当于向左/向右看齐) 仅限于块元素
clear : none/left/right/both ;
取消浮动的影响 , 指的是告诉浏览器， 虽然浮动的标记让出了位置，但不能够使用
<style> #d1{ width :100px ; height :100px ; background-color :red ; float :left ; } #d2{ width :100px ; height :100px ; background-color :green ; float :left ; } #d3{ width :100px ; height :200px ; background-color :yellow ; clear :both ; } </style> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div>
</body>
元素的显示方式
行内元素：span a--->设置width/height无效
块级元素：div/p/h1--h6
结论：行内元素不能设置width和height。行内元素是自适应的。
需求：<a href=”#” style=”background-color:url(images/account.png)”>我的账户</a> 要求我的账户显示背景图片，行内元素没法显示（图片太大放不下）
display
display的3个值， none : 不显示该标记； block : 按块标记的方式显示 （占一行矩形区域）； inline : 按行内标记的方式来显示 （嵌入在文本中）
<a href=”#” style=”background-color:url(images/account.png);display:block;”>我的账户</a>
定位
1. 普通定位，页面中的块级元素框从上到下一个接一个地排列，每一个块级元素都会出现在一个新行中，内联元素将在一行中从左到右排列水平布置
2. 浮动，浮动可以定位，left或者right
3. 定位属性 position
position属性：更改定位模式为相对定位、绝对定位、固定定位。postion:static(默认)/relative/absolute/fixed。
偏移属性：实现元素框位置的偏移 top/bottom/right/left:value;
堆叠顺序：z-index:value;
相对定位
元素任保持其未定位前的形状。原本所占的空间任保留。元素框会相对于它原来的位置偏移某个距离。
div{ 100px; height:50px; border:1px solid gray; } <div></div> <div style=”position:relative;left:20px;top:10px;”></div>
绝对定位
将元素的内容从普通流中完全移除并使用偏移属性来固定该元素的位置。相对于最近的已定位祖先元素（父元素）；如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含快，比如body元素。
<!-- 相对于body --> div.parent{ 100px; height:100px; border:1px solid black; } div.child{ 80px; height:30px; border:1px solid black; background-color:silver; } <div class="parent"> <div class="child" >1</div> <div class="child" style="position:absolute;bottom:10px;left:80px;">2</div> </div>
<!-- 这时是相对于parent的 --> div.parent{ 100px; height:100px; border:1px solid black; position::relative } div.child{ 80px; height:30px; border:1px solid black; background-color:silver; } <div class="parent"> <div class="child" >1</div> <div class="child" style="position:absolute;bottom:10px;left:80px; z-index:-1;">2</div> </div>
z-index
检索或设置对象的层叠顺序。较大 number值的对象会覆盖在较小 number值的对象之上。如两个绝对定位对象的此属性具有同样的 number值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number值为正数的对象会在其之上，而 number值为负数的对象在其之下。设置参数为 null可以移除此属性。