一. 选择器
下列选择器列表优先级逐级增加：
通用选择器（*）
元素选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式
1. id 选择器
ID 选择器（ID selector，IS）：使用 # 标识，语法格式：#S{...}（S为选择器名）。例：id为name的标签会匹配下面的样式
<style>
#name{
color:red;
}
</style>
<!--下面文字是红色的-->
<p id="name">red text</p>
2. 类选择器
类选择器（class selector，CS）：使用 . 标识，语法格式：.S{...}（S为选择器名）。例：class属性值为value的标签会匹配下面的样式
<style>
.value{
text-align:center;
}
</style>
<!--下面的文字是居中对齐的-->
<p class="value">center text</p>
或者可以这样写以指定特定的HTML元素使用class：
p.center {text-align:center;}
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p>
3. 标签选择器
标签选择器（element selector，ES）：又叫元素选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。例：所有的p标签都会匹配以下的样式
<style>
p{
font-style:italic;
}
</style>
<!--下面的文字是斜体的-->
<p style="font-style:italic">italic text</p>
4.属性选择器
属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例
5. 包含选择器
包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。例：以下div内的p标签和div外的p标签分别匹配不同的样式
<style>
p{
color:red;
}
div p{
color:yellow;
}
</style>
<p>red text</p><!--文字是红色的-->
<div>
<p>yellow text</p><!--文字是黄色的-->
</div>
6. 子选择器
子选择器（sub-selector，SS）：类似于包含选择器，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}（A、B为HTML元素/标签）。例：以下div内的p标签匹配样式，div内的table内的p不匹配
<style>
div>p{
color:red;
}
</style>
<div>
<p>red text</p><!--文字是红色的-->
<table>
<tr>
<td>
<p>no red text;</p><!--文字是非红色的-->
</td>
</tr>
</table>
</div>
7. 兄弟选择器
兄弟选择器（brother selector，BS）：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）
<style>
div~p{
color:red;
}
</style>
<div>
<p>no red text</p><!--文字是非红色的-->
<div>no red text</div>
<p>red text</p><!--文字是红色的-->
</div>
二. 样式表
插入样式表的方法有三种:
- 外部样式表(External style sheet)
- 内部样式表(Internal style sheet)
- 内联样式(Inline style)
优先级如下：
（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
1. 外部样式表
——外部定义导入使用
使用如下：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
存储如下：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
2. 内部样式表
——<style>定义内部使用
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
3. 内联样式
——行内定义混合使用
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
注：
1.不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px"
2.如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如下：<head> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> </head> <body> <h3>测试！</h3> </body>
三. 背景
当使用简写属性时，属性值的顺序为：
- background-color（背景颜色）
- background-image（背景图片）
- background-repeat（背景图片是否平铺）
- background-attachment（背景图像是否固定）
- background-position（图片位置）
如下所示：
body {background: #ffffff url('img_tree.png') no-repeat right top;}
CSS 背景属性
| Property | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
四. 文本
1. 颜色：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: redbody {color:red;}
示例如下：
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
或
<span style="color:#FFF" />
2. 对齐方式
有居中、对齐到左或右、两端对齐三种方式，示例如下：
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（比如杂志和报纸的排版）。
3. 文本缩进
指定文本的第一行的缩进
p {text-indent:50px;}
所有CSS文本属性
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
五. 字体
1. 字体系列
为了严谨，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
p{font-family:"微软雅黑", Times, serif;}
2. 字体样式
p.normal {font-style:normal;}//正常
p.italic {font-style:italic;}//斜体
3. 字体大小
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，例如<h1> - <h6>表示标题和<p>表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
另外，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本
注：如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
示例如下：
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
所有CSS字体属性
| Property | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
六. 链接
链接样式：
a:link {background-color:#B2FF99;}//- 正常，未访问过的链接
a:visited {background-color:#FFFF85;}/用户已访问过的链接
a:hover {background-color:#FF704D;}//当用户鼠标放在链接上时
a:active {background-color:#FF704D;}//链接被点击的那一刻
删除下划线：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
七. 列表样式
所有属性：
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图象设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
八. 表格
1. 使用下列方式添加单一框线的表格
table, td, th{
border: 1px solid black;
border-collapse: collapse;
}
2. 表格宽度和高度
table
{ width:100%;height:50px; }
3. 文字对齐
td.a
{ text-align:right; }/*水平对齐*/
td.b
{ height:50px;
vertical-align:bottom; }/*垂直对齐*/
九. 盒子模型
a.png
网友评论