链接的表示
repeat-x：图像在水平方向上重复
repeat-y：图像在垂直方向上重复
left：在网页或者包含元素的左边显示
center：在网页或者包含元素的中间显示
right：在网页或者包含元素的右边显示
top：在网页或者包含元素的顶部显示
bottom： 在网页或者包含元素的底部显示
文档的背景
项目列表和编号列表的样式
表格的外观
框周围的外边框
能够获得焦点或能激活的元素
在XHTML的某个元素之前或者之后添加内容
确定框在网页中位置的三种定位方案
8.1链接
用于<a>元素：
color：改变链接的颜色
background-color：突出显示链接，背后加个背景色
text-decoration：控制链接是否具有下划线、删除线、上划线等等
还有四个伪类，用于控制伪类：
link：用于正常显示链接样式
visited：用于已访问过的链接样式
hover：当鼠标悬停在链接上的样式
active：激活（单机）鼠标的样式
编写这些伪类的时候，要按照link、visited、hover、active顺序编写，eg（只写一个）：a:link{}或a.link_beautiful:link{}
8.2背景
8.2.1background-color属性
为任何元素的背景指定单一颜色
8.2.2background-image属性
将一副图像设置为任何框的背景，默认会铺满整个框，所以不好控制其宽度，eg：backgroung-image:url("")
使用background-image时，推荐和background-color一起使用，这样图片在加载中或者加载失败，网页都具有背景。
8.2.3background-repeat属性
当框的比图像大时，指定图像铺满网页的方式：
repeat：图像重复铺满整个网页（默认值）repeat-x：图像在水平方向上重复
repeat-y：图像在垂直方向上重复
no-repeat：图像仅显示一次
8.2.4background-position属性
用于固定背景位置：
x% y%：沿x y方向的百分比
x y：沿x y方向的绝度长度，单位为像素left：在网页或者包含元素的左边显示
center：在网页或者包含元素的中间显示
right：在网页或者包含元素的右边显示
top：在网页或者包含元素的顶部显示
bottom： 在网页或者包含元素的底部显示
8.2.5background-attachment属性
用于水印，当指定背景图像时，使用background-attachment属性指定该图像：
fixed：滚动网页时，图像不移动 scroll：滚动网页时，图像也随之移动（图像停留在网页上的相同位置）
8.2.6background属性（简写主义）
可以一次性设置几个属性，并且指定顺序可任意，不指定的取默认值
8.3列表
8.3.1list-style-type属性
可以用于<ul>或者<ol>，也可以用于单独的<li>
控制无序列表中项目符号（标记符）的形状和样式，取值：
none：没有标记符
disc：填充的圆（默认）
circle：空心圆
square：填充的正方形
控制有序列表中的值：
decimal：数字，1、2、3
decimal-leading-zero：在前面加0的数字，01、02、03
lower-alpha：小写字母数字字符，a、b、c
upper-alpha：大写字母数字字符，A、B、C
lower-roman：小写罗马数字，i、ii、iii
upper-roman：大写罗马数字，I、II、III
8.3.2list-style-position属性
控制标记符出现在文本块的位置，取值：
inside：标记符出现在文本块之内
outside：标记符出现在文本块左侧（默认）
8.3.3list-style-image属性
为标记符指定一副自定义图像，用法和backgroung-image一样，需要使用url。若图像无法显示，则显示一个实心圆点。该属性默认继承，在子标签下可用将其取值改为none，取消继承
8.3.4list-style属性（简写主义）
可以一次性表达这些属性中的一个或者多个，顺序可任意
8.4表格
已经学过的元素：
border：用于设置表格边框的属性，不支持单元格
padding：用于设置单元格边框和单元格内容之间的空间量
text-align：文本水平对齐方式
vertical-align：文本垂直对齐方式
width、height、background-color、background-image
8.4.1表格专用属性
border-collapse：当两个单元格的边框相互接触时，指示边框同时显示，还是只显示一条
border-spacing：指定单元格之间的空白宽度
caption-side：指定标题在表格的那一边显示
empty-cells：指定单元格为空时是否显示边框
table-layout：强制单元格使用指定尺寸
8.4.2border-collapse属性
当两个表格单元格相互接触时，可以只显示一个边框。取值：
collapse：只显示一个边框（折叠边框），显示哪条边框，看边框优先级
separate：显示两条边框（默认）
8.4.3border-spacing属性
设置相邻单元格边框之间的距离。若提供一个值，则同时应用于水平距离和垂直距离；若提供两个值，则一个用于水平距离，一个用于垂直距离
8.4.4empty-cells属性
指定单元格没有内容时，是否显示边框。取值：show、hidden、inherit（用于嵌套表格）
8.4.5caption-side属性
用于<caption>元素，指定表格应用于哪个侧边上。取值：
top：标题出现在表格上方（默认）
right：标题出现在表格右边
bottom：标题出现在表格下面
left：标题出现在表格左边
8.4.6table-layout属性
当表格或单元格内容超出指定宽度后，浏览器会为表格指定更多的宽度。使用table-layout属性，可以强制浏览器使用指定宽度。取值：
auto：浏览器查看表格中的每个单元格，找出其中宽度最大且不能拆分的部分，作为列宽度（列宽度大于指定宽度，默认值）
fixed：单元格的宽度为指定宽度，溢出内容无法显示，可搭配overflow使用
inherit：用于嵌套表格，遵循父表格规则
8.5外边框
IE8不支持
8.6“：focus”和“：active”伪类
当元素获取焦点时，通过“：focus”伪类，可以为元素关联额外规则（IE8开始支持）
当元素获被激活时，通过“：active”伪类，可以为元素关联额外规则
8.7生成的内容
IE7及其更高版本你的IE浏览器，对“：before”、“：after”伪元素有一定程度的限制
8.7.1“：before”、“：after”伪元素
使用”：before“、”：after“伪元素，能够在某个浏览器中定义的元素的每个实例前面或者后面添加文本，content指定添加内容。eg：
p.xxclass:after{content:"xx content"; color:#000000}
添加内容默认采用父元素样式规则，并且创建的元素时内联的，可用display:block指定为块级元素
8.7.2content元素
content属于伪元素”：before“、”：after“，可以将指定文本添加到文档中，也可以实现计数（搭配使用counter（）函数）、添加引号功能
8.8其他属性
8.8.1cursor属性
指定要显示给用户的鼠标光标类型，可用<url>实现自定义光标
8.8.2display属性
将元素改为块级（block）、内联（inline）、不显示边框（none），在非XHTML中，可以物理上隐藏元素（display）
8.8.3visibility属性
隐藏元素，但是仍会占用空间。取值：
visible：可见（默认）
hideen：隐藏
8.9附加规则
@import：将一个样式表，导入当前样式表中
！import：指定的规则，比其他规则具有更高的优先级
@charset：指定样式表使用字符编码
8.9.1@import规则：模块化的样式表
使用@import可以将一个样式表，导入到当前样式表中，并且导入的样式表规则具有更高的优先级，eg：
@import "xx.css"或者@import url("xx.css")
8.9.2!import规则
当样式表有冲突时，可以指定某个特定的规则，比其他规则具有更高的优先级，eg：
p{font-size：18pt !import;}
8.9.3@charset规则
必须出现在样式表起始位置，并且不能包含空格
8.10使用css进行定位和布局
3种定位方案：正常定位、浮动定位、绝对定位
8.10.1正常流
内联元素从左往右排列，块级元素从上往下排列
8.10.2position属性
指定如何控制框的位置：
static：正常流（默认）
relative：框的位置相对于正常流位置的偏移
absolute：使用x、y坐标，根据包含元素的左上角定位
fixed：根据浏览器窗口的左上角进行计算，即使滚动窗口，也不会改变位置
8.10.3框偏移属性
top：从包含元素顶部开始偏移
left：从包含元素左边开始偏移
bottom：从包含元素底部开始偏移
right：从包含元素右边开始偏移
8.10.4相对定位
应当只指定左偏移或右偏移，且顶部偏移和底部偏移也只指定一个。如果同时指定，将忽略右偏移和底部偏移
8.10.5绝对定位（position：absolute）
绝对定位的框，独立于正常流之外，所以两个垂直页边距相遇，也不会折叠
8.10.6固定定位（position：fixed）
IE7开始支持
8.10.7z-index属性
元素重叠式，当使用relative、absolute、fixed可以设置元素的重叠次序（z-index值越大，越接近顶部）
8.10.8使用float属性浮动定位
float属性独立于正常流之外，只要为元素设置定float属性，就要为其制定width属性：
left：浮动框在包含元素的左边，并且包含元素的内容将流动到它右边
right：浮动框在包含元素的右边，并且包含元素的内容将流动到它左边
none：框位于正常流中的位置
inherit：框才用于包含元素相同的属性
8.10.9clear属性
当使用浮动框时，clear特别有用。使用浮动框时，内容可以环绕浮动框，clear可以清楚指定方向上的内容（内容仍存在，只是到其他地方显示了）。取值：
left：附带clear属性的左边没有内容
right：附带clear属性的右边没有内容
both：附带clear属性的左右两边都没有内容
none：允许任意一边有内容
8.11本章小结
控制链接：3个元素+4个伪类
控制背景：5个元素+1个简写主义
控制列表：3个元素+1个简写主义
控制表格：8个元素（已学）+5个元素
附加规则：3个
定位：4种+z-index元素+clear属性
还有：focus、：active伪类，：before、：after伪元素，控制鼠标形状的cursor、控制元素块级（内联）的display、元素是否可见的visibilty
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
