CSS美化页面元素——字体、文本、超链接、列表、背景、渐变

为什么使用CSS

页面使用CSS有什么好处？

1.有效的传递页面信息

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

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

4.具有良好的用户体验

字体样式

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,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

字体大小

font-size属性

  单位

  ①px（像素）

  ②em、rem、cm、mm、pt、pc

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

字体风格

font-style属性

normal、italic和oblique

字体的粗细

font-weight属性

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体 400等同于normal，700等同于bold

字体属性

  font属性

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

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

文本样式

文本属性

color 设置文本颜色 color:#00C;

text-align 设置元素水平对齐方式 text-align:right;

text-indent 设置首行文本的缩进 text-indent:2em;

line-height 设置文本的行高 line-height:25px;

text-decoration 设置文本的装饰 text-decoration:underline;

文本颜色

1.color属性

 ①RGB

      1.十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量

      2. rgb(r,g,b) : 正整数的取值为0～255

② RGBA

      在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

排版文本段落

水平对齐方式

      text-align属性

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

文本修饰和垂直对齐

1.文本装饰

    text-decoration属性

2.垂直对齐方式

   vertical-align属性：middle、top、bottom

值	说明
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line-through	设置文本的删除线

文本阴影

语法

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: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

列表样式

1.list-style-type

2.list-style-image

3.list-style-position

4.list-style

值	说明
none	无标记符号
disc	实心圆，默认类型
circle	空心圆
square	实心正方形
decimal	数字

list-style

 li {    list-style:none;}

背景样式

常见的背景样式

   背景图像、背景颜色

网页背景

1.背景颜色

       background-color          背景颜色值：十六进制方法表示       transparent

2.背景图像

       background-image

设置背景图像

背景图像

background-image属性

    background-image:url(图片路径);

背景重复方式

background-repeat属性

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

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

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

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

背景定位

background-position属性

值	含义
Xpos Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词： left、center、right 垂直方向的关键词： top、center、bottom

设置背景

背景属性

background属性

.title {
	font-size:18px;
	font-weight:bold;
	color:#FFF;
	text-indent:1em;
	line-height:35px;
	background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
	/* 背景颜色 背景图片 背景定位 背景平铺方式*/
}

背景尺寸

背景尺寸 background-size

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

CSS3渐变

1.线性渐变

  颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

2.径向渐变

 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

CSS3渐变兼容

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

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

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

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

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

线性渐变

语法

background:linear-gradient ( position,  color1,  color2,…)

position < !–渐变方向–>

color1 < !–第一种颜色值–>

color2 < !–第二种颜色值–>

兼容Webkit内核的浏览器

-webkit-linear-gradient ( position,  color1,  color2,…)