第五章 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); |
||||