CSS3美化网页元素

一.<span>标签：

可以对<p>标签中的部分文字添加样式，切不改变文字的显示方向，它不是块元素，不独占一个矩形区域

例如：

<p 享受<span class="show">北大式</span>教育服务</p>;

二.字体样式：

font-family  

常用字体属性，含义及用法

属性名	含义	举例
font-family	设置字体类型	font-family:"隶书”;
font-size	设置字体大小	font-size：12px;
font-style	设置字体风格	font-style:italic
font-weight	设置字体粗细	font-weight：bold
font	在一个声明中设置所有字体属性	font：italic bold 36px "宋体“(风粗类大)

font-family可以设置多种字体，字体之间用逗号隔开，有些字体如Times Now Roman字体，名称会出现空格，这时需要加双引号，使浏览器知道这是一种字体的名称；

三.排版网页文本：

常用的文本属性，含义及方法

属性	含义	举例
color	设置文本颜色	color:#00C
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-index:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline

1.关于颜色属性：

a.         颜色采用RGB格式，如”#FFFFFF",前两位表示白色分量，中间两位表示绿色分量，最后两位表示蓝色分量

b.        RGB还有另一种方法表示：

        rgb(r,g,b)

以上r,g,b,3个参数，正整数取值为0~255，百分比为0%~100%，3个参数都不能为负；

RGBA在rgb基础上增加了控制透明度的参数，透明度取值为0~1，如果为0，表示完全透明，如果为1，表示完全不透明，取值不能为负；

例如：rgba(0,0,255,0.5)

2.水平方式对齐：

text-align常用值

left	默认值，把文本排列到左边
right	排到右边
center	中间
justify	实现两段对齐文本效果

3.line-height值可以是像素值（px），也可以直接写数字，不带单位，代表倍数，这时是字体大小的倍数

4.text-indent的单位有em和px,2em表示缩进2个字符；em是相对单位，其表示的长度相当于本行中字符的倍数；

5.    text-decration常用值

值	说明
none	默认值，无装饰
underline	设置文本下划线
overline	设置上画线
line-through	设置文本删除线

6.垂直对齐方式，不常用；通常使用vertical-align属性设置文本与图片的居中对齐，例如：vertical-align:middle;

7.文本阴影：

text-shadow:color x轴位移(x-offset) y轴位移 模糊半径（blur-radius);

模糊半径只能取正值，如果为0，表示不具有模糊效果；x，y可以取正或负值；

四.超链接伪类：

超链接伪类

伪类名称	含义	示例
a:link	单机访问前的超链接样式	a:link{color：red}
a:visited	单机访问后的样式	a:visited{color:#333}
a:hover	鼠标悬浮其上的样式
a:active	单击未释放的样式

注意：在对超链接设置样式时,必须遵循顺序：a:link,a：visited,a:hover，a:active;

五.列表样式：

list-style-type：用来设置无序列表<li>标签前面是否有小圆点，常用值有none,disc(实心圆，默认类型），circle（空心圆），

square（实心正方形），decimal（数字）；

list-style-image：使用图像替换列表前的标记

list-style-postion：设置在何处放置列表项的标记；

list-style;按照list-style-type，position,image,顺序设置属性值；

六.背景样式：

1.<div>标签；

2.背景属性有背景颜色（background-color)和背景图像（background-image)；

背景颜色与color一样采取rgb方式赋值，而且他还有一个特殊值：transparent:透明，是background-color的默认值；

3.背景图像：

设置background-image属性方式：

    例：background-image:url("image/1.jpg);

4.背景重复方式：

background-repeat属性值：

repeat:沿水平和垂直两个方向平铺；

no-repeat：不平铺，即背景图像只显示一次；

repeat-x:只沿水平方向平铺；

repeat-y：只沿垂直方向平铺；

例如：background=repeat:no-repeat;

5.背景定位：

背景图像默认从被修饰的网页元素的左上角开始显示图像，

可以使用具体数值，百分比，关键值3种方式表示水平和垂直方向的偏移量；

例：background-position:205px 10px;

6.类似于font属性一样，背景可以一次性将多个属性一起声明

background:#C00 url(imge/arrow.gif) 205px 10px no-repeat;

7.背景尺寸：

background-size:

取auto值时，使背景图片保持原样，是默认值；

也可以设置为固定的像素值，例如: background-size:120px 60px;

也可以使用百分数，但它是相对于元素宽度来计算的；

取cover值时，整个背景将填充整个div，

取contain值时，可以让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域；

七，CSS渐变：

1.线性渐变：

   background:linear-gradient(position, color1,color2,.....);

为了兼容浏览器，不同浏览器需要在前面加不同的前缀；

例如：-webkit-linear-gradient(position,color1,color2);

2.渐变方向：

to top，to left,to right,to top left,to top right, to buttom left,to buttom right,

3.除了线性渐变，css还提供了径向渐变radial-gradient;径向渐变是圆形或椭圆渐变，颜色不再沿着一条直线渐变；