1
、CSS
详解
样式表概述
HTML只不过是构成一个文本文件的一系列标签，而具体来指定其构成标签是如何显示的，就需要用到样式表了。导入样式表之后，在HTML中许多无法实现的功能均可实现，而且，HTML会变得简洁，容量也会减少。从而会大幅度的使网页的更新或修改操作变得非常容易。另外，在HTML中去除了有关显示方面的限制。因此，网页就能够在更多的环境中使用，增加了网页的通用性
CSS是最广泛使用的样式表
基本语法格式
CSS样式为一个文挡定义显示规则，通常放在一个单独的文件中，是由应用这些样式的Web页面来引用，另外，也可以在Web页面中定义样式规则
一个样式规则由两部分组成：选择器和样式声明：
选择器{属性：值}
选择器表明要为哪一个元素设置样式，样式声明则表明要应用哪些样式属性。加上分号之后还可以指定多个样式
颜色的指定方法
用CSS指定颜色有以下5种方法：
1、用十六进制指定1：（#RRGGBB）
2、用十六进制指定2：（#RGB）
3、用十进制来指定（RGB（n,n,n）形式）
4、用%来指定（RGB（n%,n%,n%）形式）
5、用颜色名称指定
关于边框线
各个标签都是在边框线的四边形区域当中生成的，这个区域由以下几部分组成：
内容（content）：内容是用于显示文字和图像等标签内容的区域，这个区域的宽和高可以用width属性和height属性来指定
内容周围的填充（padding）：填充是用于显示内容和边框线之间的区域。针对标签所指定的背景可以在其中显示
边框线（border）：边框线是用于显示标签四周边缘的线框
边距（margin）：边框线最外侧的是边距区域。当标签指定背景时，这一部分是不显示的。背景通常在这里面是透明的
2
、以不同的方式导入CSS
样式表
导入用CSS
编写的文件
<link rel=”stylesheet” href=”URL” type=”text/css”>
URL：导入CSS文件的URL
若准备了只记录了样式表的其他文件（扩展名通常为css），想把这个文件导入到HTML文件中应用的时候，就要使用link标签
这个标签一定要放置在<head>~</head>的范围之内，如果想要导入多个CSS文件，可以按照需要的数量放置相应数目的标签
导入style
标签的内容
<style type=”text/css”>~</style>
这个标签一定要放置在<head>~</head>的范围之内，在<style>~</style>范围中，可以直接写CSS代码。在不吃样式表的浏览器中，会把CSS代码作为文字来显示。这时为了避免这种现象，将会把CSS代码整体作为HTML的注释
往任意标签中导入样式表作为style
属性的值
<标签名 style=”样式表”>
在HTML文件的任意标签中添加style属性，将可以导入只对该标签起作用的的CSS代码
3
、设置不同的应用对象
应用于特定标签
标签名{~}
应用于特定标签
标签名,标签名,标签名,…{~}
应用于全部标签
*{~}
这是针对全部标签应用样式时的写法。*号单独使用时不能省略。如果后面有“#ID名”和“.类名”的话，*号就可以省略
应用于指定了ID
或者类的标签
#ID名{~}
.类名{~}
标签名 ID名{~}
标签名.类名{~}
这是在以用id属性和class属性加了特定的名称标签，为目标对象应用样式时的写法。“#ID名”和“.类名”分别是“*#ID名”和“*.类名”的缩略形式。指定了ID名或类名的全部标签都是目标对象。若指定为“标签名 ID名{~}”或者“标签名.类名{~}”这样的形式之后，那么指定了ID名或者类名的“标签名”的标签才算是目标对象
id属性是对于某个标签添加了该HTML文件中固有名称的一个属性。Class属性是表示该标签的种类名的属性。因此，在同一个HTML文件中，同一个类名可以指定多个，但是ID名只能指定一处
应用于链接部分
标签名：link{~}：还没有看到的链接部分的样式
标签名：visited{~}：已经看到的链接部分的样式
标签名：hover{~}：光标放置在该标签上时的样式
标签名：active{~}：鼠标单击时链接部分的样式
通常，“标签名”的部分就是a，在“标签名”的部分指定了“#ID名”和“.类名”之后，对特定的链接部分就可以应用别的样式
这四种状态要按照上述顺序来指定
应用于首行
标签名：first-line{~}
应用于第一个文字
标签名：first-letter{~}
应用于包含在特定标签中的标签
标签名 标签名{~}
4
、设置字体属性
设置文字颜色
color：设置颜色
设置字体
font-family：字体名，字体名…
设置字号
font-size：字号
设置字体粗细
font-weight：粗细
设置字体格式
font-style：斜体
text-decoration：修饰
综合设置字体属性
font：斜体 粗细 字号/行高 字体名
用font属性可以综合指定字体相关的属性值。字号和行高之间要用斜杠隔开。其他值要用半角空格隔开。另外，这些值基本上是按照上面所述的顺序来指定
5
、设置文本格式
设置行高
line-height：行高
设置行对齐方式
text-align：行对齐方式
设置垂直方向的对齐方式
vertical-align：垂直方向的对齐
设置文字间距和单词间距
letter-spacing：文字间距
word-spacing：单词间距
设置首行缩进
text-indent：缩进
按照原始版本显示空格和换行
white-space：pre
不换行显示文本
white-space：nowrap
全部使用大写字母或小写字母显示
text-transform：指定大写字母和小写字母
6
、设置网页中的背景
设置背景颜色
background-color：设置颜色
背景的使用范围包括边框线
设置背景图像
background-image：url（URL）
设置背景图像的排列方式
background-repeat：排列方式
设置背景图像的显示位置
background-position：显示位置
固定背景图像
background-attachment：是否固定
综合设置背景相关属性
background：与背景相关的属性值
7
、设置页面边框
设置边距
margin-top：上边距
margin-bottom：下边距
margin-left：左边距
margin-right：右边距
margin：上下左右边距
设置文本周围的间距
padding-top：上边的距离
padding-bottom：下边的距离
padding-left：左边的距离
padding-right：右边的距离
padding：上下左右的距离
指定内容与边框线之间的距离
设置边框线的粗度
border-top-width：上边框的粗度
border-bottom-width：下边框的粗度
border-left-width：左边框的粗度
border-right-width：右边框的粗度
border-width：上下左右边框的粗度
设置边框线的颜色
border-top-color：上边框线的颜色
border-bottom-color：下边框线的颜色
border-left-color：左边框线的颜色
border-right-color：右边框线的颜色
border-color：上下左右边框线的颜色
设置边框线的样式
border-top-style：上边框的样式
border-bottom-style：下边框的样式
border-left-style：左边框的样式
border-right-style：右边框的样式
border-style：上下左右边框的样式
综合设置边框线
border-top：设置上边框线
border-bottom：设置下边框线
border-left：设置左边框线
border-right：设置右边框线
border：把上下左右边的边框设置为同一值
设置显示内容的宽和高
width：宽
height：高
8
、调整网页布局
设置图文的左右分布和环绕
float：放置位置
放置位置：left,right,none
解除环绕效果
clear：对哪一侧的文字解除环绕
设置内容居中
margin：auto
将标签放置在绝对位置上
position：absolute 表示绝对位置
top：与上边的距离
bottom：与下边的距离
left：与左边的距离
right：与右边的距离
将标签放置在相对位置上
position：relative 表示相对位置
top：与上边的距离
bottom：与下边的距离
left：与左边的距离
right：与右边的距离
将标签固定在绝对位置上
position：fixed表示固定位置
top：与上边的距离
bottom：与下边的距离
left：与左边的距离
right：与右边的距离
指定重叠顺序
z-index：重叠顺序
隐藏
display：none 将标签设置为隐藏状态
visibility：hidden 将保留区域设置为隐藏状态
设置超出范围的处理方法
overflow：显示形式
9
、设置列表样式
改变列表的标记和种类
list-style-type：种类
利用图像制作列表标记
list-style-image：url（URL）
把列表标记显示在文字段落的内侧
list-style-position：显示位置
综合设置列表标记
list-style：列表相关的属性值
10
、设置表格属性
将表格的边框线设置为单一线条
border-collapse：表格边框的显示形式
collapse：表格的外框和各个单元格的边框重叠显示
separate：表格的外框和各个单元格的边框分开显示
设置单元格之间的距离
border-spacing：距离
将表格标题放置在下面显示
caption-side：放置位置
设置是否显示空单元格的边框线
empty-cells：是否显示边框线
是否显示边框线：show,hide
11
、关于CSS
的其他相关内容
设置指针形状
cursor：形状
cursor：url（URL）
在标签的前后添加文字或图像
标签名：before{content：文字} 在前面添加文字
标签名：before{content：url（URL）} 在前面添加图像
标签名：after{content：文字} 在后面添加文字
标签名：after{content：url（URL）} 在后面添加图像
添加注释
/*注释语句*/
/*~*/是在往CSS的代码中添加注释时使用的
注意不能把注释设置为嵌套
2924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
