CSS美化网页元素

span标签

span标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素。span没有固定的格式表现。当对它应用样式时，它会产生视觉上的变化。

字体类型

font-family:设置字体类型

font-family:英文字体类型,中文字体类型;

font-family:times,"仿宋";

字体风格

 font-style:字体风格
 属性值：nomal---默认值        italic---斜体         oblique---倾斜

字体粗细

 font-weight:设置字体粗细
 属性值：nomal----默认粗细   bold----加粗    bolder----比加粗还粗     lighter----变细
               数值-----100~900(400=nomal,700=bold)

颜色color:

 rgb:    r(red)        g(green)         b(blue)       取值范围：0~255
 rgba:           a(透明度)         取值范围：0~1(0：完全透明 1：不透明)
 

字体属性

font:同时设置字体多个属性

顺序：字体风格-->字体粗细-->字体大小-->字体类型

<style type="text/css">

	#aaa{
	    font: oblique bolder 15px "隶书";		
	    }

</style>

列表样式

 列表样式：list-style-type
 属性值： none----啥也没有             disc----实心小圆点（默认值，把有序列表转化为无序列表）
                circle-----空心小圆点        square-----实心小方块
                decimal-----数字（无序列表转化为有序列表）

水平对齐方式

水平对齐方式：text-align: justify;

首行缩进：text-indent: 2em;

行高设置：line-height: 30px;

rgb颜色设置：color: rgb(0,0,255);

垂直对齐方式：

垂直对齐方式：vertical-align
属性值：middle----居中     top------顶部        bottom----底部

文本修饰

文本修饰：text-decoration

属性值：none----啥效果没有（默认值）           underline----下划线
               overline-----上划线                              line-through-----删除线

文本阴影

  代码示例： text-shadow: #FF0000 10px 10px 5px, 

文本阴影：text-shadow
 属性值：1.颜色（支持rgb,rgba）      2. x轴偏移位置（正数往右移，负数往左移）
 3.y轴偏移位置（正数往下移，负数往上移）   4.模糊半径（取值越大越模糊）
 

超链接伪类

		<style type="text/css">
			/*未点击*/
			a:link{
				color: #00FF00;
			}
			/*点击后*/
			a:visited{
				color: deeppink;
			}
			/*鼠标悬停*/
			a:hover{
				color: #FF0000;
			}
			/*鼠标单击未释放*/
			a:active{
				color: #0000FF;
			}
			
			/*日常开发链接常用样式*/
			a{
				text-decoration: none;
				color: black;
			}
			a:hover{
				color: red;
				text-decoration: underline;
			}
		</style>

     

点击回到目录页