CSS纲要
CSS纲要
主要章节：
1．HTML&CSS使用原则
2．CSS概述
3．CSS语法
4．尺寸边框与模型
5．文本格式化
6．表格样式
7．浮动定位
8．显示
9．列表样式
10．定位
一、HTML&CSS使用原则
HTML控制网页结构（搭建房子），CSS控制网页样式（装修）。
W3C建议：HTML，CSS的共有属性，优先使用CSS，便于维护。
二、CSS概述
1. CSS概述
（一） CSS有什么用？
ü 用于HTML文档中元素的样式定义，实现了内容与表现分离，提高了代码的可重用性和可维护性
ü 各元素可重用统一的样式声明，快速维护页面元素(文本、图像、表格)的样式(字体、字号、颜色等)
ü 可以弥补HTML对象的属性不足（例：HTML中无法为段落添加边框背景等属性）
（二） 什么是CSS？
CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表。
2. 使用CSS样式表
（一）使用CSS样式表
① 内联方式
样式定义在单个的HTML元素中
② 内部样式表
样式定义在HTML页的头元素中
③ 外部样式表
将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件
（二）内联方式使用CSS
样式定义在HTML元素的标准属性style里
语法：
ü 将分号隔开的一个或多个属性/值对作为HTML中元素的style属性的值
ü CSS属性和属性值之间用冒号“：”连接
ü CSS多对属性之间用“；”隔开
例：
<h1 style=”background-color:silver;color:blue;”>文本</h1>
（三）内部样式表
样式表规则位于文档头元素中的<style>元素内
在文档的<head>元素添加<style>子元素，在<style>元素中添加样式规则，可在当前页面范围内重用。
在<style>元素中添加样式规则：
可以定义多个样式规则，每个样式规则有两个部分：选择器和样式声明
选择器：决定哪些元素使用这些规则
样式声明：一对大括号，包含一个或多个属性/值对
语法：
<head>
<style type=”text/css”>
选择器{color:blue;}
</style>
</head>
例：
<head>
<style type=”text/css”>
h1{color:blue;}
</style>
</head>
（四）外部样式表
可实现内容与表现分离，可以被站点中的所有页面重用
① 创建一个单独的样式表文件用来保存样式规则
l 一个纯文本文件，文件后缀为.css
l 该文件中只能包含样式规则
l 样式规则由选择器和样式声明组成
② 在需要使用该样式表文件的页面上，使用<link>元素链接需要的外部样式表文件
在文档的<head>元素内添加<link>元素,<link>是单标记
例：
<head>
<link rel=”stylesheet” type=”text/css” media="all|screen|print" href=”CSS文件URL”/>
</head>
all,所有的媒体介质
screen,针对浏览器，支持浏览器显示的所有内容
print,针对打印机，支持打印机打印现实的所有内容
（五）样式表特征
① 继承性
大多数CSS样式规则可以被继承，子标签会默认继承上级标签的属性
② 层叠性
可以定义多个样式表，不冲突时，多个样式表中的样式可层叠为一个，即当多个不同样式作用与一个元素时，该元素将应用所有样式
③ 优先级
样式定义冲突时，按照不同样式规则的优先级来应用样式
（六）样式优先级
浏览器缺省设置：
由高到低：
① 内联样式
相同的样式，重复定义，以最后一次的定义为准
② 外部CSS文件&内部样式表
就近优先
三、CSS语法
（一）CSS语法规范
ü 内联样式：由样式声明组成
ü 样式表：由多个样式规则组成
每个样式表规则有两部分——选择器和样式声明：
选择器{
属性:值;
属性:值;
....
}
（二）选择器
① 通配选择器——*{}
自动匹配文档所有元素
② 元素（标记）选择器——标记名称{}
自动匹配指定的HTML元素,<a>、<h1>等
例：
h1{color:blue}
为h1元素添加样式
③ 类选择器—— . 类名{}
手动为HTML添加class=“类名称”属性，多个类之间以空格分隔
允许以一种独立于文档元素的方式来指定样式
语法：. className｛color:red;｝
所有能够附带class属性的元素都能使用此样式声明，将元素的class属性值设为样式类名
例：.myClass{color:blue}
<h2 class=”myClass”>文本</h2>
特殊写法：
l 将类选择器和元素选择器结合使用，将样式规则与附带class属性的某种元素匹配，实现对某种元素中不同样式的细分控制
语法：元素选择器. className{}
p.a1{ /*只能应用给段落元素*/
color:red;
}
l 同时应用a1,a2两个类，即要使用其一必须同时使用另外一个才有效
.a1.a2{ /*同时使用a1和a2两个类*/
color:blue;
}
l 类选择器叠加且与元素选择器结合
p.a1.a2{ /*只能应用给段落,并且还需要同时使用a1和a2这两个类*/
}
④ id选择器——#id{}
只能添加给文档中的唯一对象，可以为标有特定id的HTML元素指定的特定样式
语法:#id属性值{}
例：#mostImportant{color:blue}
<h1 id=”mostImportant”>This isimportant!</h1>
This is important!被设定样式
如果发现HTML标记存在id属性，那么该ID可能被以下技术使用：
语法：
A.CSS样式
B.JavaScript --> document.getElementById()
C.jQ uery --> $('#ID')
⑤ 群组选择器（选择器分组）——选择器1，选择其2...{}
选择器声明以逗号隔开的选择器列表，将一些相同的规则作用于多个元素，具有相同属性的选择器的简单写法
⑥ 派生选择器（派生选择器）——父元素选择器 子元素选择器....{}
要求选择器从左到右至少为父子关系，一般最多写三层
依据元素在其位置的上下文关系来定义样式，选择器之间用空格隔开
h1 span{color:blue}
<h1>A
<span>impor
</span>
</h1>
只有<h1>元素中的<span>元素中的文本使用该样式
⑦ 伪类选择器——其他选择器:伪类{}
伪类用于向某些选择器添加特殊效果，使用冒号“：”作为结合符，左边为其他选择器，右边是伪类
常用伪类
:link
:hover 鼠标放在链接时的状态
:active
:visited
:after
:before
:focus
选择器优先级：
Inline,Ids,Classes,Tags
例1:
<p style="color:red">我们</p>,优先级 1,0,0,0
例2
<p id="a1">我们</p>,优先级0,1,0,0
例3
<p id="a1"class="a2">我们</p>,优先级0,1,1,0
例4:
<p id="a1" class="a2a3">我们</p>,优先级0,1,2,0
例5:
#a1 #a2 .a3 .a4 p{ /*优先级:0,2,2,1*/
}
四、布局样式
1. 尺寸与边框
（一）样式单位
%：百分比
in：英寸
cm:厘米
mm:毫米
pt:磅（1pt等于1/72英寸）
px:像素（计算机屏幕上的一个点）
em:1em等于当前字体尺寸，2em等于当前字体尺寸的2倍
rgb(x,x,x):RGB值，如rgb(255,0,0)
rgb(x%,x%,x%):RGB百分比值，如rgb（100%，0%，0%）
#rrggbb:十六进制数，如#ff0000
#rgb:简写的十六进制数，如#f00
表示颜色的英文单词，如：red
CSS中必须加单位！
（二）尺寸
width:设置宽度
height:设置高度
overflow:当内容溢出元素框时如何处理
-visible：默认，即使超出元素框，也显示全部内容
-hidden：文本超出尺寸时，隐藏文本不显示
-scroll：总显示滚动条
-auto：自动，不超出不显示滚动条，超出后显示滚动条
（三）边框
简写方式：border:width style color;
border属性间用空格隔开
单边定义：border-left/right/top/bottom-width
border- left/right/top/bottom-style:none|solid|dotted(点划线)|dashed(虚线);
border- left/right/top/bottom-color
2. 框模型
（一） 框模型
框模型定义了元素框处理元素内容、内边距、边框和外边距的方式
width和height指内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
框模型演示：
（二） 内边距
内边距：内容与框线之间的距离
-padding:value;
单边设置：padding-top/right/bottom/left:value;
简写方式：padding:value1 value2 value 3value 4
top right bottom left
只写1个值，4个方向都一样；写2个值，第1个代表上下，第2个代表左右；写3个值，第1个代表上，第2个代表左右，第3个代表下。
（三） 外边距
外边距：与下一个元素之间的空间量
-margin:value;
单边设置：margin-top/right/bottom/left:value;
简写方式：margin:value1 value2 value 3 value 4
top right bottom left
margin可取值为auto，由浏览器计算外边距。
例：设置居中
div｛
width:100px;
height:100px;
border:1px solid black;
margin:0 auto;
｝
（四） 补充说明
① 块级对象的默认宽度为父对象的100%。
以下元素默认情况下为块级元素：div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,br
② 正常文档流(标准文档流),浏览器显示的效果由代码书写顺序决定，块级元素将上下排列;内联元素将水平排列。
3. 背景
（一） 背景色
background-color属性用于为元素设置背景色，该属性接收任何合法颜色值。
为元素背景设置一种纯色
（二） 背景图像
1) 背景图片
-background-image:
默认值为none，表示背景上没有放置任何图像
如果要设置一个背景图像，需要用起始字母url附带一个图像的URL值，可以是相对url,也可以使绝对url
例：
body{
background-image:url(“image/bg_01.gif”);
}
2) 背景重复
-background-repeat
默认情况下，背景图像在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果。
可以用background-repeat属性控制背景图像的平铺效果。
-background-repeat：
repeat:在垂直方向和水平方向重复，为重复值
repeat-x:仅在水平方向重复
repeat-y:仅在垂直方向重复
no-repeat:仅显示一次
3) 背景定位
a) -background-position:改变图像在背景中的位置
| m值 | 说明 |
| x% y% | 第1个值是水平位置，第2个值是垂直位置，表示沿x轴和y轴的百分比，左上角是0%0%，右下角是100%100% |
| x y | 表示沿x轴和y轴的绝对长度，左上角是0 0 |
| left | 在页面或者包含元素的左边显示 |
| center | 在页面或者包含元素的中间显示 |
| right | 在页面或者包含元素的右边显示 |
| top | 在页面或者包含元素的顶部显示 |
| bottom | 在页面或者包含元素的底部显示 |
background-position:horizontalvertical;
horizontal:left|center|right|value;
vertical:top|center|bottom|value;
b) 背景图片的固定
默认情况下，背景图像会随页面滚动而移动。
-background-attachment：
-scroll：默认值，背景会随文档移动
-fixed:背景图像固定，不会随页面的其余部分滚动，常用于实现为水印的图像
五、文本格式化
（一） 控制字体
字体：font-family:value1,value2;
字号：font-size：value;
加粗：font-weight:normal/bold;
（二） 控制文本样式
文本颜色：color:value;
水平对齐方式： text-align:left|center|right|justify;
文字修饰线：text-decoration:none|underline|line-through|overline;
行高：line-height:value;
首行文本缩进：text-indent:value;
文本倾斜：font-style:normal|italic;
标题字号:16px~24px
正文字号:12px~16px
六、列表样式
（一） 列表项标志
- list-style-type
用于控制列表中列表项标志的样式：
l 无序列表：出现在各列表项旁边的圆点
none:无标记
disc：实心圆，为默认值
circle:空心圆
squere：实心方块
l 有序列表：字母、数字或其他符号
none:无标记
decimal:数字，为默认值
lower-roman:小写罗马数字
upper-roman:大写罗马数字
……
（二） 列表项图像
-list-style-image
使用图像来替换列表项中的标记，取值为：url（），指定图像作为有序或无序列表项的标志
列表样式：list-style-type：url(图像RL)position;
七、表格样式
（一） 表格常用样式属性
边距属性：padding
尺寸属性：width、height,设置表格或者单元格的尺寸
文本格式化属性：
背景属性：设置表格或者单元格的背景色或者背景图像
border属性：设置表格的边框
垂直方向对齐属性：vertical-align：top/middle/bottom，在表单元格中，设置单元格框中的单元格内容的对齐方式
（二） 表格特有样式属性
边框合并：如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框
合并相邻的边框：border-collapse：separate/collapse;设置是否将表格边框合并为单一边框
边框边距：border-spacing，设置相邻单元格的边框间的距离，仅限于分隔单元格边框。
取值为长度值，可以为该属性指定一个或者两个值：
-指定1个值：该值同时应用于水平和垂直间距
-指定2个值：第一个值指定水平间距，第二个值指定垂直间距，且两个值之间用空格隔开
例：
table{
border:2px dotted gray;
border-spacing:10px20px
}
td{
border-collapse:separate;
border-1px solid black;
}
八、显示
（一） 显示方式
“一切皆为框”，页面上所有元素都可显示为框，块级元素显示为一块内容，即“块框”，内联元素内容显示在行中，即“行内框”，除默认显示效果外，可用display属性来修改元素框的显示方式，即改变生成的框的类型
display:none/block/inline;
none:让生成的元素没有框，该框及其所有内容就不再显示，不占用个文档的空间
block:让行内元素表现得像块级元素一样
inline：让块级元素表现得像内联元素一样
设置内容：
-content:"value";
content控制元素内容，但显示为内联元素，所以一般与display属性组合使用
标准清理浮动的方法：
.clear:after{
content:"."; /*手动的添加一个内联的子对象*/
display:block;/*将子对象设置为块级对象*/
height:0;/*让文本不要撑高块级对象*/
visibility:hidden;/*隐藏文本*/
clear:both;/*子对象要起到清理浮动的作用*/
}
.clear{
zoom:1;
}
（二） 光标
默认情况下，光标会根据用户的操作发生改变
l 当鼠标悬停在连接上，光标形状变为手状
l 鼠标悬停在文本区域，显示为I状
l 鼠标悬停在一个按钮上，显示为箭头
可用cursor属性指定显示给用户的鼠标光标形状，可为用户提供一种可视化暗示，提示可进行的操作,cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状
cursor:default/pointer/crosshair/text/wait/help/….
九、定位
（一） 定位概述
定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
主要包括：
1. 普通流定位
l 块级元素框从上到下依次排列，每一个块级元素都会出现在一个新行中，元素框之间的垂直距离是由框的垂直外边距计算出来的
l 内联元素将在一行中从左到右排列水平布置，不需要从新行开始，可以用水平内边距、边框和外边距调整它们的间距
2. 浮动定位
3. 相对定位
4. 绝对定位
5. 固定定位
（二） 定位属性
| 属性 | 说明 |
| position | 规定元素的定位类型： static/relative/absolute/fixed |
| 偏移属性 | 用于定义元素框的偏移位置： top/bottom/left/right |
| z-index | 设置元素堆叠顺序 |
| float/clear | 浮动定位属性 |
使用position属性和偏移属性实现普通流(标准文档流)定位、相对定位、绝对定位和固定定位，使用float属性实现浮动定位，其它属性为辅助属性。
position:static|fixed|relative|absolute;
static:采用标准文档流实现,为默认的定位方式。
（三） 相对定位
元素仍保持其未定位前的形状，元素原本所占的空间仍保留，元素框会相对于它原来的位置偏移某个距离，设置垂直或水平位置，元素将相对于它的起点移动。
例：<div style=”positon:relative;left:20px;top:10px;”></div>
（四） 绝对定位
将元素的内容从普通流中完全移除，不占据空间，并使用偏移属性来固定该元素的位置，相对于最近的已定位祖先元素，如果没有，相对于最初的包含块，如<body>
例：<div style=”positon:absolute;left:20px;top:10px;”></div>
（五） 固定定位
将元素的内容固定在页面的某个位置，元素从普通流中完全移除，不占用页面空间，当用户向下滚动页面时元素框并不随着移动，一般用于水印
例：<div style=”positon:fixed;left:20px;top:10px;”></div>
补充：
设置透明度（Chrome、Firefox等）
opacity:value(0~1);
InternetExplorer
filter:alpha(opacity=value);
（六） 堆叠顺序
修改元素定位方式后，元素可能发生堆叠，可使用z-index属性控制元素框出现的重叠顺序
z-index:-1/1/2/3…
值为数值：数值越大堆叠顺序越高，越在顶层；可设为负值，表示离用户更远
十、浮动定位
（一） 浮动概述
浮动定位：
l 将元素排除在普通流之外，在页面不占用空间
l 浮动元素放置在包含框的左边或者右边
l 浮动元素依旧位于包含框之内
浮动的框可以向左右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，经常用它来实现特殊定位效果
（二） 浮动定位
float属性：
如果需要设置框浮动在包含框的左边或者右边，可通过float属性来实现，float属性定义元素在哪个方向浮动，在css中，任何元素都可以浮动
float：none/left/right;
浮动演示：
1) 包含框中有三个元素框，如果把框1向右浮动动，则它脱离文档流并向右移动，直到右边缘碰到包含框右边缘，如图：
2) 当框1向左浮动时，它脱离文档流并向左浮动，直到它的左边缘碰到包含框的左边缘，因为框1不再处于文档流中，所以它不占据空间，实际上覆盖了框2，使框2在视图中不可见，如图
3) 三个框都向左浮动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动知道碰到前一个框：三个框在同一行显示，如图：
4) 如果包含框太窄，那么其它浮动块会自动向下移动，直到有足够的空间，如图所示：
5) 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，如图所示：
clear属性： 用于清除浮动带来的影响，定义了元素的哪边上不允许出现浮动元素
clear:none/left/right/both;
补充：通过自动为清除元素增加外边距实现的
位置保持？
附录：
单标记：<link/>