一、 CSS字体
1.字体系列
CSS的字体系列分为通用字体系列和特定字体系列
通用字体系列包含下列五个系列
Serif;Sans-serif;Monospace;Cursive;Fantasy
2.指定字体系列
p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}
可以依次指定多个字体系列作为替补
如果字体名称中间含有空格,请使用引号
3.字体风格
font-style 属性最常用于规定斜体文本
该属性有三个值
- | - |
---|---|
normal | 文本正常显示 |
italic | 文本斜体显示 |
oblique | 文本倾斜显示 |
4.字体加粗
font-weight 属性设置文本的粗细
属性值从100-900规定九个级别的粗细
normal对应400,bold对应700
5.字体大小
a.通过像素来设置
h1 {font-size:60px;}
b.使用em来设置
1em 等于当前的字体尺寸,如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素
在设置字体大小时,em 的值会相对于父元素的字体大小改变
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素
h2 {font-size:2.5em;} /* 40px/16=2.5em */
c.结合使用百分比和em
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
二、 CSS链接
1.链接状态
链接的特殊性在于能够根据它们所处的状态来设置它们的样式
- | - |
---|---|
a:link | 普通的、未被访问的链接 |
a:visited | 用户已访问的链接 |
a:hover | 鼠标指针位于链接的上方 |
a:active | 链接被点击的时刻 |
例如
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时,请按照以下次序规则
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
2.链接修饰
链接的修饰参见CSS文本
3.创建链接框
<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>
三、 CSS列表
1.list-style-type属性
略,详见http://www.w3school.com.cn/cssref/pr_list-style-type.asp
2.list-style-image属性
可以将列表项标志替代为图像
ul li {list-style-image : url(xxx.gif)}
四、 CSS表格
针对table,th,tb的属性整合
属性 | 说明 | 属性值 |
---|---|---|
border | 设置边框属性 | 像素值 线条类型 颜色(1px solid blue;) |
border-collapse | 设置是否把表格边框合并为单一的边框 | 设置为collapse会合成单边框,默认为seperate |
width | 表格宽度 | 像素值或者百分数 |
height | 表格高度 | 同上 |
text-align | 水平对齐方式 | 略 |
vertical-align | 垂直对齐方式 | 略 |
padding | 内边距 | 像素值 |
background-color | 背景色 | 略 |
color | 文本颜色 | 略 |
border-spacing | 设置分隔单元格边框的距离 | 一组两个像素值 分别为水平和垂直间距 |
caption-side | 设置表格标题的位置 | top bottom inherit(继承) |
empty-cells | 设置是否显示表格中的空单元格 | hide show inherit |
table-layout | 设置显示单元、行和列的算法 | automatic fix(确定的宽高) inherit |
五、 CSS轮廓
轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用
参数及参数值参见http://www.w3school.com.cn/css/css_outline.asp