第五章 CSS3美化网页元素

第五章 CSS3美化网页元素

一，编辑网页文本

1.字体样式的书写

​ 在学习字体样式之前，我们先了解几个标签。

• <span>标签: 行内标签，能让某几个文字或者某个词语凸显出来。
• <pre>标签： 原样展示，代码的空格，换行，特殊字符都会原样展示。

字体样式

​ CSS的属性很好学，只需要自己动手试一下知道效果就好了。

• font-family：设置字体，例如：font-family：“宋体”； 字体有很多，默认为微软雅黑。
• font-size： 设置字体大小，例如font-size：16px; 除了px单位还有em，1em=根元素字体大小*1 px
• font-style: 设置字体风格，属性值有italic（倾斜）；
• font-weight： 设置字体粗细。属性值有lighter（细），bold(粗)，bolder（更粗），也可以选择数字100~900；bold相当于700。
• font: 上述属性的简写，字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

2.排版网页文本

color: 设置文本颜色，属性值有三种写法：1.直接写颜色的英文 2写#RGB 3.写#RGBA。

text-align：设置元素水平对齐方式，属性值有 left，right，center等；

text-indent：设置首行文本缩进，属性值单位有px，em等；

line-height： 设置行高，行高为文本所占的高度，可用于居中展示文本。

text-decoration：设置文本装饰，常用于取消a标签的下划线或添加删除线。

text-shadow：设置文本阴影，text-shadow : color x-offset（px） y-offset x(px) blur-radius(颜色);

补充color标签的RGB和RGBA

二，超链接伪类

1.伪类样式语法和示例

语法： 标签名:伪类名{声明;}

我们设置伪类的顺序一般是：a:link->a:visited->a:hover->a:active

​ 示例如下：

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

​ 上面示例让a标签被点击后，颜色变为#B46210，拥有下划线。

三，列表样式

1.list-style-type属性值

四，背景样式

1.背景属性

• background-color： 设置背景颜色。通常用#十六进制方法表示。
• background-image：设置背景图像。使用background-image:url(图片路径)设置图片路径。
• background-position：背景定位。 可以使用：1. X px,Y px; 2. X%,Y%; 3. left,right等;
• background-repeat：背景重复方式。
  • repeat：沿水平和垂直两个方向平铺。
  • no-repeat：不平铺，即只显示一次。
  • repeat-x：只沿水平方向平铺。
  • repeat-y：只沿垂直方向平铺。
• background：背景样式简写，示例：background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat。

2.背景尺寸

​ background-size：背景尺寸 通过设置上述属性值，设置尺寸。

五，CSS3渐变

1.渐变兼容

• IE浏览器是Trident内核，加前缀：-ms-
• Chrome浏览器是Webkit内核，加前缀：-webkit-
• Safari浏览器是Webkit内核，加前缀：-webkit-
• Opera浏览器是Blink内核，加前缀：-o-
• Firefox浏览器是Mozilla内核，加前缀：-moz-

2.线性渐变

线性渐变:

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

语法：

• background：inear-gradient ( position（to top|bottom）, color1, color2,…)

3.径向渐变

径向渐变:

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

六，总结