CSS知识点总结 CSS3-02美化网页元素

一，样式的调整

<span>标签 的作用
能让某几个文字或者某个词语凸显出来

1.字体样式

属性名	含义	举例
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 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

1. font-family
p{font-family:Verdana,"楷体";}
2. font-size
单位：
px（像素）浏览器默认字体是16px  1em=16px
em、rem、cm、mm、pt、pc
em是相对长度单位。相对于当前对象内文本的字体尺寸
% Font-size=62.5%  16px*62.5%=10px
rem是CSS3新增的一个相对单位（root em，根em）
通过它既可以做到只修改根元素就成比例地调整所有字体大小，
又可以避免字体大小逐层复合的连锁反应。
3. font-style
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
4. font-weight	
值			说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	
定义由细到粗的字体400等同于normal，700等同于bold

2.文本样式

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

1.color
			值：
				十六进制 #FFFFFF
				颜色的单词  red
				二进制    rgb(255,255,255);
				加透明度的二进制    rgba(255,255,255,0~1);	
2. text-align
			值			说明
			left	把文本排列到左边。默认值：由浏览器决定
			right	把文本排列到右边
			center	把文本排列到中间
			justify	实现两端对齐文本效果		
3. text-indent：
			单位：
			em或px		
4. line-height：
			单位：
			px	
5. text-decoration
			值				说明
			none		默认值，定义的标准文本
			underline	设置文本的下划线
			overline	设置文本的上划线
			line-through	设置文本的删除线
6. 垂直对齐方式（是对图片进行设置有作用）
			vertical-align
			属性：middle、top、bottom		
7.文本阴影
			text-shadow : color  x-offset  y-offset  blur-radius;
				color：阴影颜色
				x-offset X轴位移，用来指定阴影水平位移量
				y-offset   Y轴位移，用来指定阴影垂直位移量
				blur-radius   阴影模糊半径，代表阴影向外模糊的模糊范围		

3.超连接样式

		超链接伪类
			样式：
				标签名:伪类名{声明;}

伪类名称	含义	示例
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

4.列表样式

1.list-style-type

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

2.list-style-image

				示例：
					li{
						list-style-image:url(图像地址);
					
					}

3.list-style

			列表的整体样式
				li {
					list-style:none url(图像地址);
				}

5.背景样式

1.background-color 背景颜色
2.background-image 背景图像
background-image:url(图片路径);
3.background-repeat属性
repeat：沿水平和垂直两个方向平铺
no-repeat：不平铺，即只显示一次
repeat-x：只沿水平方向平铺
repeat-y：只沿垂直方向平铺
4. background-position 背景定位

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

注意：需要将背景固定 background-attachment:fixed;
5.background-attachment 将背景固定
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
6.background 整体背景的属性
background:#C00 url(…/image/arrow-down.gif) 205px 10px no-repeat;
7.background-size 背景尺寸 （可以使用像素也可使用%）
示例background-size=50% ； 宽高都为一半
示例 background-size= 50% 30%；宽一半 高30%

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

8.渐变
(1).线性渐变
一条直线过渡：从左到右、从右到左、从上到下等
background: linear-gradient(to top, orange, blue);
位置有
to top to bottom to left to right to top left to top right
to bottom left to bottom right
颜色：
可以右多个
(2).径向渐变
圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
圆：background: radial-gradient(circle at 12.5% 25%, yellow, red);
说明：
圆 circle 表示绘制圆形的渐变
12.5% 25% 表示圆点 可以是 px
yellow, red 表示颜色可以有多个
椭圆：background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red);
说明：
ellipse 椭圆类型的径向渐变
我们需要同时指定横轴和纵轴的长度
50px 100px 分别表示x y的半径
yellow, red 表示颜色可以有多个
指定颜色断点位置 可以在颜色后加 百分比
由于渐变颜色默认第一个颜色位置是0%，最后一个颜色位置是100%
示例： background: radial-gradient(circle, yellow, orange 33.33%, red 66.666%, white);

6.内核

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。这些浏览器引擎前缀(Vendor Prefix)主要是各种浏览器用来试验或测试新出现的CSS3属性特征。
当需要使用浏览器引擎前缀(vendor-prefix)时，最好是把带有各种前缀的写法放在前面，然后把不带前缀的标准的写法放到最后
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-