Css样式（cascading style sheet） 层叠样式表
Body a .box{ }
Css的目的：给html加各种各样的样式----html结构和css样式样式分离---便于维护更新
Css语法
选择器{
属性名:属性值;属性名:属性值;
}
说明：
l 一个css样式包括选择器和格式声明语句
l 选择器就是选择给哪个html标签加样式
l 格式声明语句包括 属性名:属性值;
l 格式声明语句要用{ }
l 属性名，w3c已经定义好，想用的时候，直接使用
l 属性值不用双引号
l 属性值的有单位是通常是以像素px为单位,通常的情况下必须带单位
如何在html结构中引入css样式
1. 行内样式表：临时做测试用
每一个标签都有style属性
格式:<标签style=”属性名:属性值;”>内容</标签>
行内样式，只能应用当前文档中的当前对应的html标签加样式，或者里面包含的标签加该样式
例如
2. 内嵌样式表：常用的一种
格式:在head标签中输入xhtml
<style type=”text/css”>
选择器{属性名:属性值; }
</style>
内嵌样式：在当前的文档可以使用该样式，需要的时候可以使用
3. 外部样式表常用的一种
格式:<link rel=”stylesheet” href=”外部样式表文件 xx.css” type=”text/css”/>
保存的时候扩展名为.css文件
第一步，建立一个css页面，保存为扩展名为.css文件（直接写css代码）
第二步在不同的页面引入 <link rel=”stylesheet” href=”外部css文件的地址” />
可以应用多个文档，哪个html标签需要用，就可以引入
4. 导入样式表：管理css样式
格式:@import url(另外一个css样式)
注意 @import是css样式标签，所以必须放到css文件中
必须放到css样式表的最上面 例如
选择器的分类
基本选择器
u 标签选择器：选择给哪个标签加样式，自动指向该标签
语法：标签选择器名{属性:属性值; }
body { } p{ } div{ } table{ } td{ } ul{ }
注意 ：不用引用，把样式自动套到对应的标签，所以的对应标签都加上该样式
u 类选择器：给一类html标签加样式
语法： 类选择器名{属性：属性值; }
选择器名是自己定义，要起得有意义
类用 .来表示
例如: .myclass{ } .page_header1{ } .login-content-input{ }
必须的引用，每一个标签都有一个class属性
<标签 class=”选择器名”> </标签>（多对多）
注意：类选择器可以引用多次；一个元素可以对多个class，一个class可对多个元素
u Id选择器：给特定的html标签加样式
格式:id选择器名{属性:属性值; }
Id 用#来表示
选择器名自定义，要起得有意义
例如 #myid{ } ,#id1 #checkform1{ }
Id必须的引用 引用的方法，每一个标签都有id属性
<标签 id=”选择器名” ></标签>（一对一）
注意：id只能引用一次，表示唯一，通常id给javascript用，不是用来设置样式的，如果想设置样式，用类选择器
!important>行间样式>id>class|属性选择器>标签
css权重
由上到下权重减小
同一个横行的选择器把他们的权重相加，渲染/显示权重大的那个，权重大小一样后面覆盖前面
u 通用选择器：（*所有）给所有的标签加样式，通配符
Html body ptable ul li ol…..给所有的html标签加样式
语法： *{属性:属性值; }
不是所有的浏览器都支持，Ie6版本不支持
复合选择器
多/分组 元素选择器：多个标签共有的属性和属性值，放到一起
语法：选择器，选择器，选择器……..{共有的属性：属性值; }
淘宝
父子/派生选择器：给html的所有后代标签加样式（自右向左的顺序）
语法：选择器1 选择器2 选择器3 { 属性:属性值; }
注意：父子选择器不固定标签/选择器，只在意父子关系成立即可。选择器之间用空格隔开
Div的后代标签 <h3> <ul> <li> <b>
<div >
<h3>PS免费公开课每日早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>“人造美人”，</b>你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
</ul>
</div>
直接子元素选择器 :给html标签的子标签加样式
格式:选择器>选择器{属性:属性值; }
某个标签里面的第一层
<div class=”news” >
<h3>PS免费公开课每日早中晚讲足6小时</h3>
<ul>
<li>最近惊现一批<b>“人造美人”，</b>你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
<li>最近惊现一批“人造美人”，你认为谁最美呢</li>
</ul>
</div>
.news>h3{color:blue; } .news h3{color:blue; }
Ul>li{color:red; }
并列选择器
伪类选择器：----锚<a>
a:link 未访问的链接
a:visited 访问过的链接
a:hover 鼠标移动链接上
a:active 单击鼠标左键的那一时刻的样式
文本属性
font-size 文本的大小 例如 font-size:12px;（浏览器默认16px，一般为12px）
font-weight 文本是否加粗 font-weight:bold（加粗）/normal （默认）;
font-style 文本是否倾斜 font-style:italic ;倾斜 font-style:normal;正常
font-family:文字的字体 例如 font-family:隶书;默认是宋体
text-decoration 文本是否有线条 text-decoration:underline ;下划线 text-decoration:overline;上划线 text-decoration:line-through;中划线（等同于<del></del>标签） text-decoration:none;去掉所有的线条
text-indent:文本首行缩进 例如 text-indent:2em;
color 文本的颜色 例如color:red;
letter-spacing:字母和字母之间的距离 例如letter-spacing:2px;
word-spacing:单词和单词之间的距离 例如 word-spacing:2px;
text-align:文本的对齐方式 left center right例如text-align:center;
line-height:单行 文本所占的高度
cursor:光标标签 pointer（一只手） wait（通常是一只表或沙漏） help（通常是一个问号或一个气球） default（通常是一个箭头）
border-radius 用来设置边框圆角
如有不足请谅解，希望给您带来帮助！祝您生活愉快！！