CSS3美化样式

一、文本在网页中的意义
1.有效传递页面信息
2.使页面漂亮、美观、更加吸引用户
3.突出页面主题内容
4.具有良好的用户体验
二、标签：请使用 来组合行内元素，以便通过样式来格式化它们。
标签可以为其他标签中的部分文字添加样式，成对出现，且不会改变文字的显示方向。
span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

对不同的选择器设置相同的样式如下：	
1.html
	<p><span class="me">电子书刊</span>电子书  网络原创  数字杂志</p>
	<p class="bird"><span>北大青鸟</span>成就梦想</p>
2.CSS
	p .me,bird span{
		font-style:normal;
		font-weight:bolder;
		font-size:200px;
		font-family:Times,"楷体";
	}
<p>

如：
<span>some text.</span>
some other text.</p>
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。
尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。

可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。

可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），
而 id 用于标识单独的唯一的元素。
提示：事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。
比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，
但是我们的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，
即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。

HTML:
<p class="tip"><span>提示：</span>... ... ...</p>

CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}

三、

标签：定义HTML文档中的分隔（division)或部分（section）。
常用于组合块级元素，以便通过样式表对这些元素进行格式化。
注意：浏览器通常会在div元素之前和之后插入换行符。

div的用法：
实例：文档中显示未绿色的一个部分：
<div style="color:#00FF00">
	<h3>This is a header</h3>
	<p>This is a paragraph.</p>
</div>

四、字体样式
font-style:字体风格，有三个值：标准的字体样式：normal，斜体字体样式：italic，倾斜的字体样式：oblique。
font-style默认属性是normal
font-weight:字体的粗细：
属性值 说明
normal 默认值，标准的字体；
bold 粗体字体；
bolder 更粗的字体；
lighter 更细的字体；
100~900 定义由细到粗的字体，400等同于normal,700等同于bold

font-size:字体大小，单位：px(像素)，em,rem,.......                     如p{font-size:XXpx;}
font-family:字体类型，可声明多种字体，字体之间用英文的逗号分隔。
	一些字体的名称中间出现空格，或中文字体，这时都需用双引号将其引起来。
		如：p{font-family:Verdana,"楷体";} 
		如：body{font-family:Times,"Times New Roman","楷体";}
		如果计算机中没有字体Times,那么页面中的英文字体显示为Times New Roman

	注意：1.当需要同时设置英文字体和中文字体时，一定要将英文字体设置在中文字体之前。
		2.在实际网页开发中，通常设置为“宋体”，宋体是计算机中默认的字体
font:在一个声明中设置所有字体属性，书写的顺序：字体风格——>字体粗细——>字体大小——>字体类型
		如：p span{font:normal bold 12px "楷体";}

五、文本样式
1、color:设置文本颜色；
RGB： RGB格式(红绿蓝三原色)，
1.十六进制方法表示颜色，十六进制数字表示0~9 A B C D E F
前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
RGB=Red Green Blue
用3位表示颜色值颜色属性值的缩写，当6位相邻数字两两相同时，可两两缩写位一位，如#369；
2.RGB的另一种表示方法：rgb(r,g,b) 以上三个参数，正整数的取值为0_{255；百分比的取值为0%}100%，
超出范围值将截取其最近的取值极限，三个参数都不能为负数。

RGBA：	在RGB的基础上增加了控制alpha透明度的参数，取值为0~1.   0表示完全透明，1表示完全不透明，取值不能是负数
如：h1{
	color:rgba(0,0,255,0.5);
	font-size:24px;
	}

2、text-align:设置文本水平对齐方式，
值 说明
left 左对齐，默认值，由浏览器决定
right 右对齐
center 居中
justify 两端对齐

3、text-indent:
a、设置首行文本的缩进，
b、单位为em或px;通常为2em,表示缩进2个字符，这里em是相对单位，其表示的长度相当于本行中字符的倍数。

4、line-height:设置文本的行高，可用px像素值表示，也可用em倍数表示（这时行高是字体大小的倍数）

5、text-decoration:设置文本的装饰：
值 说明
none 无下划线，默认值，定义的标准文本；
underline 设置文本的下划线；
overline 设置文本的上划线；
line-through 设置文本的删除线

6、vertical-align:设置文本垂直对齐方式：只能对表格单元中的对象使用，
而对于一般的标签如h1~h6,p,div，
该属性都是不起作用的，
经常用来设置图片与文本的对齐方式

值			说明
middle		居中对齐
top			上对齐
bottom		下对齐

7、text-shadow:设置文本阴影，两个作用：产生阴影和模糊主体
1）语法
text-shadow:color x轴位移(x-offset) y轴位移(y-offset) 模糊半径(blur-radius);

color:阴影颜色。可以是十六进制颜色，RGB颜色，RGBA透明色
值		说明
x-offset		x轴位移，用来指定阴影水平位移量，其值可为正为负；正，阴影在对象的右边，负，阴影在对象的左边。
y-offset		y轴位移,用来指定阴影垂直位移量，其值可为正为负；正，阴影在对象的底部，负，阴影在对象的顶部。
blur-radius	阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大字体越模糊，阴影的边缘就越模糊。
		其值只能为正，如果为0，则不具有模糊效果。	
可用text-shadow属性来给文本指定多个阴影，并且针对每个阴影可使用不同的颜色。
指定多个阴影时可使用逗号将多个阴影进行分隔，效果按照给定的顺序应用，前面阴影可能覆盖后面阴影，但是他们永远不会覆盖文本本身。

8、letter-spacing：字母间距，支持中文

9、word-spacing：单词间距，不支持中文

六、超链接和列表样式
1.超链接样式
伪类：就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式，
即：超链接将根据用户单击访问前、鼠标悬浮在超链接上、单击未释放、单击访问后的四个状态显示不同的超链接样式。
伪类名称 含义 示例
a:link 未单击访问时超链接样式 a:link{color:red;}
a:visited 单击访问后超链接样式 a:visited{color:blue;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:green;}
a:active 鼠标单击未释放的超链接样式 a:active{color:yellow}

伪类样式的基本语法：     标签名：伪类名{声明;}
设置伪类的顺序：a:link——>a:visited——>a:hover——>a:active

2.列表样式：
a、list-style-type
b、list-style
c、主要用于去除项目符号，通常设置为none
七、背景样式
1.

标签
a、用于布局
b、把页面分隔成不同的独立的块
c、本身没有特别的样式
d、可以通过width和height样式来控制宽高

2、背景颜色：background-color属性，它有一个默认值transparent,即透明

3、背景图像：background-image属性，一个特殊值，即none，表示不显示背景图像

4、引入背景图片：background-image:url(图片路径);

5、背景重复方式：background-repeat属性
值 说明
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺，即只显示一次
repeat-x 只沿水平方向平铺
repeat-y 只沿垂直方向平铺

6、背景定位：background-position属性
值 定义
Xpos Ypos 单位：px, Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X、Y方向关键字 水平方向的关键词：left(左）、center（居中）、right（右）
垂直方向的关键词：top(上）、center(居中）、bottom(下）

7、背景属性：background属性(样式简写）
background:背景颜色 背景图像 背景定位 背景不重复显示
举例：background:#C00 url(…/images/bg.png) 205px 10px no-repeat;

8、背景尺寸：background-size属性
注意：使用背景图片的那个元素必须有宽度和高度，不然背景图片显示不出来
背景图片在元素中显示是按自身的宽度、高度来平铺的，和外面包裹元素的宽、高无关。
（1）当background-size取值为auto时，背景图片没有发生任何变化。auto值的作用就是使背景图片保持原样，是默认值。
（2）perentage还可以使用0%~100%的值，这时的尺寸是相对于元素宽度来计算的。
（3）当background-size取值为cover时，整个背景图片放大后填满了整个div。
但放大后的背景图片显示的不是正中间。为了让背景图片放大后能在中间显示，
需要在元素中设置background-position为center。
（4）contain;可以让背景图片保持自身的宽高比例，将背景图片缩放到宽度或高度正好适应所定义背景的区域。

八、CSS3渐变
1.线性渐变可以使颜色沿着一条直线过渡，实现渐变颜色的效果，需要指定渐变的方向、起始颜色、结束颜色。
2.渐变的语法：
linear-gradient(position,color1,color2,…)
渐变方向，起始颜色，结束颜色
3.position设置过渡的方向：
关键字 渐变方向
to top 从底部到顶部
to bottom 从顶部到底部
to left 从左边到右边
to right 从右边到左边
to top left 从左下方到右下方
to top right 从左下方到右上方
to bottom left 从右上方到左下方
to bottom right 从左上方到右下方

4.浏览器对CSS3渐变的兼容性
属性名 IE Firefox Chrome Opera Safari
Gradient 10+ 19.0+ 26.0+ 12.1+ 5.1+

5.注意：由于每种浏览器内核都不一样，在写渐变时语法需要加上每种浏览器对应的前缀，才能让相应的浏览器支持。
说明：
浏览器 内核 在写样式兼容时要加的前缀
IE Trident -ms-
Firefox Mozilla -moz-
Chrome Webkit -webkit-
Opera Blink -o-
Safari Webkit -webkit-
举例：
兼容Webkit内核的浏览器
-webkit-linear-gradient(position,color1,color2,…)

CSS3渐变的具体使用：
举例：

在上例中渐变的方向使用的是to top关键字，表示第一种颜色向第二种颜色渐变式从底部到顶部。
还可以设置其他的渐变方向。

6.CSS3还有一种渐变方式，即径向渐变radial-gradient。径向渐变是圆形或椭圆形渐变，从一个起点朝所有方向混合。

8.前端开发的时候，经常需要查看浏览器的兼容性（对属性是否支持）
可以查询的网站：Can I use