第五章 css美化网页元素
1.使用CSS美化网页文本的意义：
①有效地传递页面信息。
②使用CSS美化过的页面文本，使页面漂亮，美观，吸引用户。
③可以很好地突出页面的主题内容，使用户第一眼可以看到页面主要内容。
④具有良好的用户体验。
2.<span>标签：
<span>标签是被用来组合HTML文档中的内行元素的，它没有固定的格式表示，只有对它应用CSS样式时，它才会产生视觉上的变化。
3.字体样式：
属性名 | 含义 | 举例 | 备注 | |
font-family | 设置字体类型 | font-family:"隶书"; | 当需要同时设置英文字体和中文字体时，一定要将英文字体设置在中文字体之前，中间用逗号隔开 | |
font-size | 设置字体大小 | font-size:12px; | 单位：px; | |
font-style | 设置字体风格 | font-style:italic; | Normal(默认值)，italic ,oblique Italic和oblique效果非常相似 | |
font-weight | 设置字体的粗细 | font-weight:bold; | Normal (400) | 默认值，定义标准的字体 |
Bold(700) | 粗体字体 | |||
bolder | 更粗的字体 | |||
lighter | 更细的字体 | |||
100、200、300、400、500、600、700、800、900 | 定义由细到粗，400等同于normal,700等同于bold | |||
font(简写) | 在一个声明中设置所有字体属性 | font:italic bold 36px "宋体"; | 顺序：风格，粗细，大小，类型 （分出大类） | |
4.使用CSS排版网页文本：
属性 | 含义 | 举例 | 备注 | |
color | 设置文本颜色 | color:#00C; | text-align属性 | |
left | （默认值）把文本排列到左边 | |||
text-align | 设置元素水平对齐方式 | text-align:right; | right | 把文本排列到右边 |
center | 把文本排列到中间 | |||
justify | 实现两端对齐文本效果 | |||
text-indent | 设置首行文本的缩进 | text-indent:20em; | text-decoration常用值 | |
line-height | 设置文本的行高 | line-height:25px; | none | （默认值）定义的标准文本 |
underline | 设置文本的下划线 | |||
text-decoration | 设置文本的装饰 | text-decoration:underline; | overline | 设置文本的上划线 |
Line-through | 设置文本的删除线 | |||
blink | 设置文本闪烁（只在Firefox有效） | |||
5.垂直对齐方式：
在CSS中通过vertical-align设置垂直方向对齐方式。但是在目前的浏览器中，只能对表格单元格的对象使用对齐方式属性，而对于一般的标签，如<h1>~<h6>、<p>、<div>标签都不起作用，因此vertical-align在设置文本标签中垂直对齐时并不常用，它反而用来设置图片及文本的对齐方式。
6.超链接伪类：
伪类名称 | 含义 | 示例 |
a:link | 未单击访问时超链接样式 | a:link{color:#9ef5f9;} |
a:visited | 单击访问后超链接样式 | a:visited {color:#333; text-decoration:none;(无下划线) } |
a:hover | 鼠标悬浮其上的超链接样式 | a:hover{color:#ff7300; |
a:active | 鼠标单击未释放的超链接样式 | a:active {color:#999; text-decoration:underline;(有下划线) } |
顺序： | a:link –> a:visited -> a:hover -> a:active (前后浮释) | |
7.Cursor属性常用值：
值 | 说明 | 图例 |
default | 默认光标 | |
pointer | 超链接的指针 | |
wait | 指示程序正在忙 | |
help | 指示可用的帮助 | |
text | 指示文本 | |
crosshair | 鼠标呈现十字状 |
8.<div>标签：
< div>标签可以把HTML文档分割成独立的，不同的部分，因此<div>标签用来进行网页布局。<div>标签与<p>标签一样，也是成对出现的。在使用<div>布局页面时，它可以嵌套<div>,同时也可以嵌套列表、段落等各种网页元素。
CSS中控制网页元素的两个属性 | |
宽 | width |
高 | height |
9.网页背景属性：
背景属性 | |||
background-color | 背景颜色值：十六进制方法表示 | ||
background-image | repeat | 沿水平和垂直两个方向平铺 | |
no-repeat | 不平铺，即背景图像只显示一次 | ||
Repeat-x | 只沿水平方向平铺 | ||
Repeat-y | 只沿垂直方向平铺 | ||
background-position | Xpos Ypos | 使用像素值表示，第一个值表示水平位置，第二个值表示垂直位置 | 30px 40px正向偏移，图像向下和向右移动 |
X% Y% | 使用百分比表示背景位置 | 30% 50%： 垂直方向居中， 水平方向偏移30% | |
X、Y方向关键词 | 使用关键词表示背景的位置，水平方向的关键词有 left、 center 、right 垂直方向的关键词有 top、center 、bottom | 使用水平和垂直方向的关键词进行自由组合，例： Right top(右上角出现) Left bottom(左下角出现) top (上方水平居中位置出现) | |
background(简写) | 颜色图片位置定位是否平铺 例：backgrond:#c00 url (image/arrow.gif ) 205px 10px no-repeat | ||
10列表样式：
List-style-type | 值 | 说明 | 语法示例 | 图示例 | |
none | 无标记符号 | list-style-type:none; | 刷牙 洗脸 | ||
disc | 实心圆，默认类型 | list-style-type:disc; | ●刷牙 ●洗脸 | ||
circle | 空心圆 | list-style-type:circle; | ○刷牙 ○洗脸 | ||
square | 实心正方形 | list-style-type:square; | ■刷牙 ■洗脸 | ||
decimal | 数字 | list-style-type:decimal | 1.刷牙 2.洗脸 | ||
List-style-image | List-style-position属性是使用图象来替换列表的标记，当设置了list-style-image后list-style-type属性都将不起作用,页面中仅显示图像标记 | Li{ List-style-image:url(image/arrow.gif) List-style-type:circle; } | |||
List-style-position | inside | 标示项目标记放置在文本以内，且环绕文本根据标记对齐 | |||
outside | 是默认值，它保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐 | ||||
list-style(简写) | list-style:circle outsise url(image/arrow.gif); | ||||
HTML第五章
原文地址：http://www.cnblogs.com/ppdpp/p/7635542.html