各种CSS样式

目录

1、设置字体样式

2、设置文本样式

3、设置图片对齐方式

4、设置超链接样式

5、设置鼠标外观 cursor

6、设置背景样式

7、设置列表样式

---

1、设置字体样式

属性名	含义	取值（方式）	举例
font-style	设置字体风格	normal（正常字体） italic（斜体） oblique	font-style:italic;
font-weight	设置字体的粗细	normal（默认值，定义标准的字体） bold（粗体字） bolder（更粗的字体） lighter（更细的字体） 100 200 300 400 500 600 700 800 900 （定义由细到粗的字体） （400 相当于normal，100等同于bold）	font-weight:bold;
font-size	设置字体大小	单位：px（像素） in、cm、mm、pt、pc	font-size:12px;
font-family	设置字体类型	Times、 "Times New Roman" 、 "楷体"、Verdana、"宋体"	font-family:"隶书";
font	在一个声明中设置所有字体属性	取值顺序：字体风格→字体粗细→字体大小→字体类型	font:italic bold 36px "宋体";

2、设置文本样式

属性名	含义	取值（方式）	举例
color	设置文本颜色	十六进制方法表示颜色（6位颜色值相邻数字两两相同时，可两两缩写为1位） color:#A983D8; color:#95F141; color:#339966; ——color:#396; color:#EEFF66;——color:#EF6;
text-align	设置元素水平对齐方式	left（把文本排列到左边。默认值：由浏览器决定） right（把文本排列到右边） center（把文本排列到中间） justify（实现两端对齐文本效果）	text-align:right;
text-indent	设置首行文本的缩进	em（字符）、px（像素）	text-indent:20px;
line-height	设置文本的行高	px（像素）	line-height:25px;
text-decoration	设置文本的装饰	none（默认值，定义的标准文本。） underline（设置文本的下划线。） overline（设置文本的上划线。） line-through（设置文本的删除线。） blink（设置文本闪烁。此值只在firefox浏览器中有效，在IE中无效。）	text-decoration:underline;

******垂直对齐方式 vertical-align属性：middle、top、bottom

3、设置图片对齐方式

img{
	vertical-align:middle;
}

4、设置超链接样式

超链接伪类→伪类样式：

伪类名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}
设置伪类的顺序：a:link->a:visited->a:hover->a:active

5、设置鼠标外观 cursor

值	说明	图例
default	默认光标
pointer	超链接的指针
wait	指示程序正在忙
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字状

span{cursor:pointer;}

6、设置背景样式

①div标签的用法：

<div>标签的用法	网页布局 排版网页内容
语法	<div>网页内容…</div>

#header { 
	width:200px;     /*表示宽*/
	height:280px;    /*表示高*/
}
……
<div id="header">网页内容…</div>

②网页背景：

属性名	含义	取值（方式）	举例
background-color	背景颜色	transparent（表示透明） （十六进制方法表示）
background-image	背景图像	background-image:url(图片路径);

③设置背景图像

属性名	含义	值	举例
background-image	背景图像	background-image:url(图片路径);
background-position	背景定位	Xpos  Ypos（单位：px，Xpos表示水平位置，Ypos表示垂直位置） X%  Y%（使用百分比表示背景的位置） X、Y方向关键词 （水平方向的关键词：left、center、right ） （垂直方向的关键词：top、center、bottom）
background-repeat	背景平铺方式	repeat（沿水平和垂直两个方向平铺） no-repeat（不平铺，即只显示一次） repeat-x（只沿水平方向平铺 ） repeat-y（只沿垂直方向平铺）
background	背景样式简写 （一次性设置所有属性）	background:颜色，图像路径，位置，平铺方式；	background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat; }

7、设置列表样式

属性名	含义	值	举例
list-style-type	符号类型	none（无标记符号） disc（实心圆，默认类型） circle（空心圆） square（实心正方形） decimal（数字）	list-style-type:none; list-style-type:disc; list-style-type:circle; list-style-type:square; list-style-type:decimal
list-style-image	把图像设置为列表中的项目标记	URL（图像的路径。） none（默认。无图形被显示。）   inherit（规定应该从父元素继承 list-style-image 属性的值。）	list-style-image:url(image/arrow-right.gif);
list-style-position	位置	inside outside
list-style：	（列表样式简写） 在一个声明中设置所有的列表属性。	按顺序：list-stype:符号类型，位置，背景图像