1.概念
层叠样式表（Cascading Style Sheet）
2.优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
3.选择器分类
标签选择器 p{font-size:16px;color:red;}
类选择器 .second{font-size:20px;color:#096;}
ID选择器 #third{font-size:24px;color:black;}
优先级顺序 ID选择器>类选择器>标签选择器
4.css样式
内联样式
内部样式表
外部样式表 <link href="style.css" rel="stylesheet" type="text/css" />
链接式 <link/>
导入式 @import
优先级：行内样式>内部样式表>外部样式表
5.CSS的字体样式
1）CSS的字体样式
设置字体类型：font-family:"隶书";
设置字体大小：font-size:12px;
设置字体风格：font-style:italic;
设置字体的粗细：font-weight:bold;
注：Font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
2）文本样式
设置文本颜色：color:#00C;
设置元素水平对齐方式：text-align:right;
设置首行文本的缩进：text-indent:20px;
设置文本的行高：line-height:25px;
设置文本的装饰：text-decoration:underline;
设置文本居中：text-align:center;
3.CSS的背景样式
背景颜色：
背景图像： background-image:url(img/buy.png)
背景图像 - 水平或垂直平铺：background-reapt:noreapt;
6.CSS的列表样式及分类
列表分类
有序列表
<ol>
<li><l/i>
</ol>
无序列表
<ul>
<li></li>
</ul>
自定义列表
<dl>
<dt>title<dt>
<dd>content<dd>
</dl>
- 表格、表单
- 表格：
1）基本写法
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
……
</tr>
……
</table>
2）表格的跨行和跨（列合并行和列）
跨列：<td colspan="3">学员成线</td> </tr>
跨行：<tr> <td rowspan="2">白杨</td>
7.表单
1）基本用法
<form method="post" action="result.html">
<p> 文本：<input name="name" type="text" > </p>
<p> 密码：<input name="pass" type="password" > </p>
<p><input type="submit" name="Button" value="提交"> </p>
<p> <input type="reset" name="Reset" value="重填"> </p>
<p><input type=”number” name=”phone”> </p>打电话
<p> input type=”radio” name=’’ radio’’ value =” ”</p>单选
<p> input type=”checkbox” name=”checkbox”value=”” </p>多选
<p> input type=”e-mail” name=”e-mai”</p>邮件
<p> input type=”file”</p>文件
<p> input type=”hidden” value=”123” name=”hidden”</p>隐藏
</form>
2）列表框
<select> name=”select” id=”sID”</select>
<option></option>
<select>
3）多行文本域
<textarea name=”” id =”” cols=”规定文本区内的可见列数”rows=’规定文本区内的可见行数’”></textarea>
4）表单的高级应用
隐藏域type="hidden"
只读readonly="readonly"
禁用disabled="disabled"
8.CSS的高级选择器
名称
并集选择器 多个选择器通过逗号连接而成，同时声明多个风格相同样式
交集选择器 由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
后代选择器 外层的选择器写在前面，内层的选择器写在后面，之间用空格分隔，标签嵌套时，内层的标签成为外层标签的后代，子元素选择器 通过>连接在一起而成，仅作用于子元 素
属性选择器 选取带有指定属性的元素，或选取带有指定属性和值的元素
9.插入css样式表
（1）外部样式表
<head>
<link rel="stylesheet" type="text/css" href="文件名.css">
</head>
浏览器会从文件 文件名.css 中读到样式声明，并根据它来格式文档。
（2）内部样式表
<head>
<style>
hr{color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
（3）内联样式表
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
9.盒子模型
1）边框（border)
边框样式（border-style)（盒子模型属性）
|
属性
|
说明
|
样式值
|
|
border-top-style
|
上边框样式
|
none：无边框 solid：实线边框 dashed：虚线边框 dotted：点状边框 double：双线边框 hidden：与none相同，应用于表解决边框冲突 ……
|
|
border-right-style
|
右边框样式
|
|
|
border-bottom-style
|
下边框样式
|
|
|
border-left-style
|
左边框样式
|
|
|
border-style |
设置四个边框样式
|
边框颜色（border-color）
border-top-color、border-right-color
border-bottom-color、border-left-color
border-color
十六进制
边框粗细（border-width）
border-top-width、border-right-width
border-bottom-width、border-left-width
border-width
关键字： thin、medium、thick
像素值：px
注：同时设置边框的颜色、粗细和样式
border-bottom: 9px #F00 dashed ;
border: 9px #F00 solid;
2）外边距（margin）
margin-top
margin-right
margin-bottom
margin-left
margin
Eg:margin-top: 1 px
margin-right : 2 px
margin-bottom : 2 px
margin-left : 1 px
margin :3px 5px 7px 4px;
margin :3px 5px;
margin :8px;
3)内边距（padding）
padding-left
padding-right
padding-top
padding-bottom
padding
4)计算盒子模型的尺寸
盒子实际高度=上下外边距+上下边框+上下内边距+内容高度
盒子实际宽度=左右外边距+左右边框+左右内边距+内容宽度
5)box-sizing属性
content-box
盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框
border-box
盒子的实际高度和宽度包括元素内容、边框和内边距
9.标准文档流
组成：块级元素
<h1>…<h6>、<p>、<div>、列表
内联元素
<span>、<a>、<img/>、<strong>...
10.属性
1)display属性
控制元素的显示和隐藏
块级元素与行内元素的转变
|
值 |
说明 |
|
none |
设置元素不会被显示 |
|
block |
元素会被显示为块级元素 |
|
inline-block |
行内块元素 |
2)浮动—float属性
|
属性值 |
说明 |
|
left |
元素向左浮动 |
|
right |
元素向右浮动 |
|
none |
默认值，元素不浮动 |
3)position属性
|
值 |
描述 |
|
absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
|
relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
|
static |
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
|
inherit |
规定应该从父元素继承 position 属性的值。 |
4)z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了position属性时，z-index属性可以设置各元素之间的重叠高低关系