1.CSS3基本语法
语法：选择器 { eg：h1{
声明1; font-size:12px;
声明2; color:#F00;
…… }
}
经验：CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上
2.HTML中引入CSS样式
行内样式 使用style属性引入CSS样式 内部样式表 CSS代码写在<head>的<style>标签中 外部样式表 CSS代码保存在扩展名为.css的样式表中 链接式 导入式 ***链接式与导入式的区别 <link/>标签属于XHTML，@import是属于CSS2.1 使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示 使用@import导入的CSS文件,客户端显示HTML结构，再把CSS文件加载到网页当中 @import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的 CSS样式优先级 就近原则：越接近标签的样式优先级越高 外部样式---->内部样式----->行内样式
3.CSS3基本选择器
基本选择器的优先级:ID选择器>类选择器>标签选择器
CSS的高级选择器：层次选择器，结构伪类选择器，属性选择器
|
选择器 |
示例 |
特别说明 |
|
标签选择器
|
h3 { color:red;}
|
标签选择器直接应用于HTML标签
|
|
类选择器
|
.class {color:blue;}
|
类选择器可在页面中多次使用
|
|
ID选择器
|
#id { color:green;}
|
ID选择器在同一个页面中只能使用一次
|
4.字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
文本样式
属性 含义 举例
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
5.文本阴影
语法：text-shadow : color x-offset y-offset blur-radius;
eg：h2{
font-size: 18px;
text-shadow: blue 10px 10px 2px;
}
/ * color 阴影颜色
x-offset X轴位移，用来指定阴影水平位移量
y-offset Y轴位移，用来指定阴影垂直位移量
blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围 */
6.使用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
7.网页背景
backgroud属性
语法：background: 背景颜色 背景图像 背景定位 背景重复方式;
背景属性 描述 特别说明
background-color 背景颜色 背景颜色值：十六进制方法表示
background-image 背景图像 background-image:url(图片路径);
background-repeat 背景重复方式 repeat：沿水平和垂直两个方向平铺
no-repeat:不平铺，即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺
background-position 背景定位 属性值可以像素/百分比/方向关键词
background-size 背景尺寸 属性值可以是auto/percentage/cover/contain
8.CSS渐变
线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
径向渐变：圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
线性渐变语法：background: linear-gradient ( position, color1, color2,…)
