CSS3
级联样式表
一、CSS3语法结构
1.语法
选择器{ h1{ 属性：值；声明}
声明1；
声明2；
。。。。
}
2.style标签
3.html语义化
根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读，同时让浏览器很好的解析
4.选择器
1.标签选择器
直接应用html标签
2.类选择器
属性：class=“选择器_style”
.选择器_style{}
类选择器可以在多个页面中使用
3.id选择器
#标签名称{}
id=“标签名称”
在同一页面中只能使用一次，适合大范围
4.通用选择器
5.优先级
ID选择器>类选择器>标签选择器
5.样式表
1.外部样式表
1.链接式
<head>
<link href="" rel="stylesheet" type="text/css"/>
</head>
2.导入式
<style>
@import url("style.css")
</style>
2.内部样式表
style标签
3.行内样式
<标签名 style="">
4.优先级
行内样式>内部样式表>外部样式表 “就近原则”
5.链接式与导入式的区别
1.标签属于XHTML，@import是属于CSS2.1
2.使用链接的CSS文件先加载到网页当中，再进行编译显示
3.使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
6.高级选择器
1.组合选择器
1.后代选择器：用空格隔开
2.交集选择器：用.隔开
3.并集选择器：用逗号隔开
2.属性选择器
标签的属性可以自定义，标签属性的值若是有多个，每个值以空格隔开;相当于标签的细化
a[target]{}
3.伪类选择器
1.静态伪类
link：超链接点击之前
visited：超链接点击之后
<style type="text/css">/*伪类选择器：静态伪类 */
2.动态伪类
focus（聚焦，点击某个文本框后输入文字，可以定义文本框和文字的属性）
hover（盘旋，鼠标停留在上面）
active（长按状态）
4.序选择器
为所有相同的父元素中位于p元素之后的ul元素
二、CSS3美化网页元素
1.span标签：凸显文字
2.字体样式
font-family/style/size/weight/color： ；
3.文本样式
1.文本属性
color
text-align：元素水平对齐方式
text-indent：首行文本的缩进
line-height：left、right、center、justify（文本的行高）
text-decoration：undeiline（文本的装饰）
2.文本颜色
RGB（r,g,b）表示颜色
rgba：增加了透明度，透明通道为0~1
3.垂直对齐
vertical-align属性：middle、top、bottom
删除线：line-through
4.文本阴影
text-shadow：color x-offset y-offset blur-radius（阴影模糊半径）；
4.超链接伪类样式
标签名：伪类名{}
设置伪类的顺序
a:link->a:visited->a:hover->a:active
5.列表样式
list-style-type
list-style-image
list-style:li{list-style:none;}
6.背景样式
网页背景颜色、图像、尺寸
背景图片：background-image：url（）；
背景重复方式：background-repeat
背景定位：background-position
7.渐变效果
线性渐变
linear-gradient（position，color1 color2…）
径向渐变
注意：
IE浏览器 加前缀 -ms
chrome浏览器 加前缀-webkit
Safair浏览器 加前缀-webkit
Firefox浏览器 加前缀-moz
63
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
