第五章 CSS美化网页元素

使用CSS优点

        1、有效的传递页面信息

        2、使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户

        3、可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容

        4、具有良好的用户体验

<span>标签 

                能让某几个文字或者某个词语凸显出来

css设置字体样式

属性名	含义	举例
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属性示例：p{font-family:Verdana,"楷体";}

font-size属性示例h1{font-size:24px;}

font-style属性normal、italic和oblique

font-weight属性normal（默认字体），bold（粗体字体)，bolder（更粗的字体），lighter（更细的字体）      还可以用100~900表示字体粗细

font属性 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

        示例    p span{font:oblique bold 12px "楷体";}

css设置文本属性

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

color

         属性      rgb表示三原色格式为 rgb（255，255，255）rgba表示字体的透明度（255，255，255，1）透明度范围0~1；

text-align 内容水平移动（只在块级元素（div）中生效）

         属性      left 左（默认） right 右 cente居中

line-height设置行高

text-decoration 文本装饰

         属性       none 默认，不要xian

                       underline 下划线

                       overline 上划线

                       line-through 删除线（中划线）（也可用del标签代替）

文本修饰和垂直对齐 

文本装饰

        text-decoration属性

垂直对齐方式

         vertical-align属性：middle居中、top上、bottom下（一般放图片里面 ）

文本阴影

语法：text-shadow : color x-offset y-offset blur-radius;

                color 阴影颜色

                x-offset：X轴位移，用来指定阴影水平位移量

                y-offset ：Y轴位移，用 来指定阴影垂直位移量

                blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围

 超链接伪类

        伪类样式

示例：a:hover {     color:#B46210;     text-decoration:underline; }

CSS设置超链接

 设置伪类的顺序：a:link->a:visited->a:hover->a:active

列表样式

list-style:none去除ul或者ol前缀（只有这一条有用）

 

背景样式

        背景颜色

                backgrong-color

        背景图片

   backgrong-image 背景图片 url路径

   background-repeat 是否平铺

               （ repeat：沿水平和垂直两个方向平铺

                   no-repeat: 不平铺，即只显示一次

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

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

background-position 图像位移

background-position : x y

水平方向的关键字：

left 、center、right

垂直方向关键字：

top、center、bottom

background简写：背景颜色 背景图像路径 背景位置 是否平铺

background-size图片大小（使用百分比%）

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

background:linear-gradient 背景颜色渐变

格式：background:linear-gradient(方向，颜色......)

例子：background: -moz-linear-gradient(top,blue,red);

CSS3渐变兼容：

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-