CSS样式（三）——背景、超链接、列表、表格样式

CSS背景

空元素需要先定义元素的高度和宽度

 

• background-color：颜色（当背景色和背景图同时使用时，背景图会覆盖背景色）
• background-image：url("logo.jgp")
• background-repeat：repeat（棋盘格填充，水平垂直反复填充）                                                                                                                                    reapet-x(横向填充)，repeat-y（纵向填充）                                                                                                                                    no-repeat（作为一张背景图只显示一次，全填充）
• 简易设置：background：颜色  图片  repeat;

 

CSS超链接

• a:link——普通的、未被访问过的链接
• a:visited——用户已访问的链接
• a:hover——鼠标指针位于链接的上方悬停
• a：active——链接被点击的时刻

这四种选择器叫做伪类选择器，按照以下次序：

a:hover——必须位于a:link和a:visited之后

a:active——必须位于a:hover之后

即大概为a:link——>a:visited——>a:hover——>a:active

a:link{
	text-decoration: none;
	color: #09f;/*未访问，无下划线，字体为蓝色*/
	}
a:visited{
	text-decoration: none;
	color: #930;/*已访问，无下划线，字体为黄色*/
}
a:hover{
	text-decoration: underline;
	color: #03c;/*鼠标悬停，有划线，字体为深蓝色*/

	}
a:active{
	text-decoration: none;
	color: #03c;/*按下鼠标，无下划线，字体为深蓝色*/

	}

 

CSS列表样式

无序列表ul和有序列表ol公用样式

属性	描述
list-style	所有用于列表的属性设置用于一个声明中
list-style-image	为列表项设置图像
list-style-position	标志的位置
list-style-type	标志的类型

 

 

 

 

 

 

• list-style-type            

值	描述
none	无标记
disc	默认，标记是空心圆
circle	标记是空心圆
square	标记是实心方块
decimal	标记是数字
lower-roman	小写罗马字母（i，ii , iii , iv , v等）
upper-roman	大写罗马字母（Ⅰ,Ⅲ,Ⅳ,Ⅴ等）
lower-alpha	小写英文字母（a,b,c,d,e等）
upper-alpha	大写英文字母（A,B,C,D,E等）
lower-Greek	小写希腊字母（alpha，beta，gamma等）
lower-latin	小写拉丁字母（a,b,c,d,e等）
upper-latin	大写拉丁字母（A,B,C,D,E等）

     

 

 

 

 

 

 

 

 

 

 

 

 

•   list-style-position：有inside和outside属性，inside属性向右缩进在列表区域之类，outside属性突出在列表的左侧

 

CSS表格样式

• 表格大小：width（宽）、height（高）
• 表格边框：boder属性，border:1px（宽度） , solid（实线） , #eee（颜色）；
• border-collapse属性：可以将表格边框和单元格边框合并
• 奇偶选择器：nth-child(odd|even)——odd表示奇数，even表示偶数，括号内也可为数字

           如tr:nth-child(odd){background-color:#EAF2DF}表示表格的奇数行为绿色