HTML5中CSS3美化网页元素重点总结

为什么使用CSS：

1. 有效的传递页面信息
2. 使用CSS美化过的页面文本，使页面漂亮，美观，吸引用户
3. 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容
4. 具有良好的用户体验

 

<span>标签的作用：

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

例如：

p .show, .bird span{

       font-size: 36px;

       font-weight: bold;

       color: bule;

}

<p>享受<span class="show">"北大式”</span> 教育服务</p>

<p>在北大青鸟，有一群人默默支持你成就<span id="dream">IT梦想</span></p>

<p class="bird">选择<span>北大青鸟</span>,成就你的梦想</p>

 

字体样式：

属性名	含义	举例
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:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;

 

color属性：

RGB：

1. 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量    #00    00    00
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-indent：em（可变的相对值，相对父节点变化，一般都用这个）或px

行高：line-height：px

水平对齐方式：text-align属性

 

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

 

垂直对齐方式：vertical -align属性

值	说明
top	把文本排列到上面。默认值：由浏览器决定
middle	把文本排列到中间
bottom	把文本排列到下面
justify	实现两端对齐文本效果

 

文本装饰：text-decoration属性

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

 

文本阴影：

 

属性	IE	Firefox	Chrome	Opera	Safari
Text-shadow	9+	3.5+	2.0+	9.6+	4.0+

 

超链接伪类：

标签名:伪类名{声明;}

例如：

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

 

列表样式：

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

list-style-image：

可以放小图片

list-style-position：

可以改变位置

list-style：

只有一个none，一般情况下都去掉，应用比较广泛，去掉原点之后用背景图片代替比较好控制

li {  list-style:none;  }

 

背景样式：

常见的背景样式：

1. 背景颜色

background-color

背景颜色值：十六进制方法表示

transparent：透明色

 

2. 背景图像：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属性（不需要考虑顺序）

例如：

背景尺寸：background-size

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

CSS3渐变：

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

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

浏览器兼容性：

属  性  名	IE	Firefox	Chrome	Opera	Safari
Gradient	10+	19.0+	26.0+	12.1+	5.1+

 

CSS3渐变兼容：

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

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

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

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

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

linear-gradient ( to left,  red,  blue,  yellow)

linear-gradient ( to left top,  red,  blue,  yellow)

linear-gradient ( to bottom right,  red,  blue,  yellow)

linear-gradient ( 180deg,  red,  blue,  yellow)

 

例如：

兼容Webkit内核的浏览器

-webkit-linear-gradient ( to left,  red,  blue,  yellow)

-moz-linear-gradient ( to left,  red,  blue,  yellow)

-o- linear-gradient ( to left,  red,  blue,  yellow)

linear-gradient ( to left,  red,  blue,  yellow)

如果都写浏览器会从上向依次扫描下面的会覆盖上面的。

总结：