今天，我们一起来学习css。
css是用来设置网页标签的样式即宽、高、背景颜色、位置等的一种让浏览器解释执行的语言，用于布局与美化网页的层叠样式表；对于使用大写还是小写字母不敏感，但推荐使用小写。
1.选择器——我要找的html标签（元素）
{属性1：属性值1；width:20px；}
属性和值之间用冒号分开，多个属性之间加分号。
非行内样式写法（即内嵌样式和外部样式的写法）：
选择器{
属性名1：属性值1；
属性名2：属性值2；
···
}
行内样式的写法：
style=“属性名1：属性值1；属性名2：属性值2；···”
二、 Css注释
<!-- 注释的内容-->（常用）
//：单行注释（不常用）
在Sublime中，可使用快捷键ctrl+/来添加注释。
三、块级元素（block-line）和内联元素（in-line）：
HTML中几乎所有元素都属于内联元素或者块元素中的一种。span和div是“无意义”的标签,为样式而生的。
块级:独占一行
<div>（division）元素是块级的（简单地说，它等同于其前后有断行）
<div></div>
<p></p>
<h2></h2>
块元素可以包含内联元素或某些块元素，反之，不成立，它只能包含其他的内联元素。我们使用的DTD中规定了块级元素是不能放在<p>里面的。
内联
<span></span>
<a></a>
三、css样式分类（三种可混用）
1.行内样式——只能作用在当前标签。
| Style=”属性名1：属性值1；属性名2：属性值2···” |
<p style="background-color: #599C2B;height:30px;">内容</p> |
2. 内嵌样式——作用在整个页面的指定标签。
Style写在head标签里
| <styletype="text/css"> | |
| body{ | p{ |
| background-color:red; | background-color:#599C2B; |
| width:500px; | height: 30px; |
| } | } |
| </style> |
3.外部样式——作用在多个页面。
先建立一个以.css为后缀名的文件。eg：layout.css
n Link 【写在head标签里】
<link rel="stylesheet"type="text/css" href="layout.css" />
n @Import【写在<styletype="text/css"></style>标签里】
@import url("layout.css");
@import "layout.css";
四、选择器
选择器分类
<style type="text/css">
| 1.html选择器 | 2.class类选择器 class=“类名称” | 3.ID选择器 id=”id名称” | 4.子元素选择器（父子关系） |
| Html元素{ | .xijing{ | #geng{ | div > input{ |
| 属性名1：属性值1； | 属性名1：属性值1； | 属性名1：属性值1； | 属性名：属性值1 属性值2 ··· |
| 属性名1：属性值2； | 属性名1：属性值2； | 属性名1：属性值2； | } |
| ··· | ··· | ··· | |
| } | } <p class="xijing">在w3school</p> |
} <p id="geng">在w3school</p> 在html标签里 p#geng{ background-color:red; } |
>:只找儿子辈 空格：后代（儿子辈、孙子辈···） |
5.后代元素选择5.器（包含选择器） |
6.组合选择器 |
7.伪类选择器【存在浏览器兼容性问题】 |
| Div input{ | .box,#user{ |
text-decoration: none;——生效（是否有下划线） 属性名：属性值1 属性值2 ··· 属性名：属性值1 属性值2 ···
visited 代表访问过的
}}hover 代表悬浮在标签上
空格：后代 >:子元素 ，组合
border的属性： dotted ：虚线Solid:实线
active 代表鼠标长按
在ie下测试
</style>
五、css的权重
4个等级的定义如下：
第一等：代表内联样式（行内），如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
dotted ：虚线
Solid:实线