（1）cascading sytle sheet 级联样式表
按照w3c的规范，页面的数据和结构由html来负责，页面的外观（给用户展示的页面）有css来负责
（2）CSS基本语法
选择器名称{
属性：属性值；
属性2：属性值2；
}
举例：
#d1{
font-size:50px;
}
（3）施加样式（将样式施加到指定的html标签之上）
通过选择器来施加
a、标签选择器
body{
font-size:50px;
background-color:#cccccc;//或者写red，或者写rgb（93,97,102）
}
注：对具有相同标签名的所有标签起作用。
b、class选择器
.选择器的名称{
}
注：对标签class属性值和选择器名称相同的标签起作用。
标签名.选择器的名称{ //此时的选择器只对该标签起作用
}
注：标签的class属性要与选择器名称相同，并且标签名要一致。
举例：
css文件中定义：
.s1{
font-size:50px;
font-family:"隶书";
font-weight:900;
}
div.s1{
font-size:50px;
font-family:"隶书";
font-weight:900;
}
html文件中定义：
<div class="s1">大家好</div>
<p class="s1">你好</p>
c、id选择器
#选择器的名称{
}
举例：
#d1{
width：200px;
height:200px;
background-color:red;
color:bule;
}
html文件：
<div id="d1">空前绝后</div>
注：标签的id属性要与选择器的名称相同。（一个html中id是唯一的，class可以重复）
d、选择器的分组
div，h1,p{
font-size:120px;
}
注:表示对div,h1，p都施加该样式。
e、选择器的派生
div p{
font-size:150px;
}
（4）样式的继承
子标签会继承父标签的样式。
（5）样式的优先级
浏览器默认样式：
外部样式：使用link引入外部的.css文件。
内部样式：使用style定义的样式。
内联样式：使用标签的style属性定义的样式。eg：<div style="font-size:90px;">
从上往下优先级增大
（6）几个重要的属性
a、位置相关的属性
margin：外边距
margin-left:40px;
margin-top:80px;
margin-bottom:30px;
margin-right:20px;
上面四句话可以简写为下面一句话：（上-右-底-左）
margin:80px 20px 30px 40px;
常用的两种特殊写法：
margin:0px;//含义：看成顶和左是零，其他的不管了
margin:20px auto;//左右居中，顶底各20px
padding:内边距
padding-left:40px;
padding-top:80px;
padding-bottom:30px;
padding-right:20px;
上面四句话可以简写为下面一句话：（上-右-底-左）
padding:80px 20px 30px 40px;
内边距在使用时，要注意，子标签会将标签撑开。
b、边框：
border:宽度 样式 颜色;
样式：solid inset outset等等；
border-left:给左边框一个样式
border-right:
border-bottom:
border-top:
c、背景：
background-color:#cccccc;
background-image:url(图片的地址);
background-repeat:no-repeat; //不填充
background/repeat-x/repeat-y
background-attchment:fixed/scroll(默认的)；
background-postion:100px 20px;
background：背景 图片 平铺方式 依附方式 水平位置
font-size:文字大小
font-weight:粗细 100-900
font-family:字体
text-decoretion：none /underline下划线
cursor:pointer/wait
test-align：left/right/center
line-height：30px
e,列表
list-style-type:none;去除小数点
f，关键属性
float:浮动 left/right 其作用：取消块级标签的独占一行的特性
clear:取消浮动 both;（使用：clear：both）
（7）布局：
body,ul,li,img{
margin:0px;
padding:0px;
font-size:12px;
}
（8）链接的伪样式：
a:link{color:red} 没有访问时
a:visited{color:blue} 访问后
a:active{color:lime}鼠标点击但还没有放开
a:hover{color:aqua} 鼠标指向时