CSS3================================
1.概述
?1.什么是CSS?
??CSS：Cascading Style Sheets 层叠样式表，级联样式表，简称：样式表。
?2.作用
??设置HTML元素的样式
?3.CSS与HTML之间的关系
??HTML：构建网页的结构内容
??CSS：构建网页的样式效果
?4.HTML属性与CSS属性的使用原则
??w3c尽量使用CSS属性去取代HTML的属性来修饰元素。
2.CSS语法规范
?1.使用CSS样式表的方式
???1.内联样式
?????又称为“行内样式”
?????特点：将CSS样式定义在HTML开始标记中
?????语法：
????????<ANY style="CSS的样式声明"></ANY>
????????样式声明：
??1.由样式属性和值组成；
??2.属性名与值之间用冒号连接；
??3.多个样式声明之间用分号分隔。
常用的样式属性和值：
??1.设置文本颜色的属性和值
????属性：color
????值：合法的颜色值（颜色英文单词red）
??2.设置背景颜色的属性和值
????属性：background
????值：合法的颜色值
??3.设置字体大小的属性和值
????属性：font-size
????值：数字+px（像素）
?????????练习：
???1.在网页中新建一对p元素，内容随意;
???2.设置p元素中文本颜色为紫色(purple)，背景颜色为橙色orange)，字体大小为34px。
???2.内部样式
?????在网页的头元素中增加一对<style></style>标记，在<style>标记中声明该网页要用到的所有样式。
?????语法：
???????<head>
?<style>
????样式规则
?</style>
</head>
?????样式规则：由选择器和样式声明组成
?????选择器：规范了页面中哪些元素能够使用声明好的样式。其实就是把声明好的样式匹配给页面中的元素。
?????元素选择器：由元素名称作为选择器
?????样式规则：
????????选择器{样式声明}
ex:
div{
????color:red;
???}
?????练习：
???????在网页中添加若干3级标题元素，内容随意
用内部样式设置3级标题元素中文本颜色为黄色，背景颜色为红色。
??????
???3.外部样式
?????独立于任何网页的位置处，声明一个样式文件（以.css为后缀），在css文件保存样式规则。
?????使用步骤:
????????1.创建独立的.css文件
2.在css文件中保存样式规则
3.在网页中引入css文件
??<head>
?????<link rel="stylesheet" href="css文件的url">
??</head>
??????练习：
????????在网页中添加一对span元素，内容随意，使用外部样式为span元素设置文本颜色为绿色，背景颜色为灰色，字体大小为40px;
?2.CSS的样式特征
???1.继承性
?????必须是父子关系结构
?????大部分的样式可以直接继承给子元素（子继承父）
???2.层叠性
?????可以为一个元素设置多个样式规则，规则中的属性不冲突时，可以同时都应用到元素上的。
?????
???3.优先级
?????如果样式声明冲突时，则按照默认的优先级来应用样式。
?????默认优先级由低到高：
?????????浏览器的默认设置 ???????低
?外部样式表和内部样式表 ?中(就近原则)
?内联样式 ???????????????高
?????练习：
???????在页面中用内部样式为div元素设置文本颜色为红色，字体大小为35px，用外部样式设置文本颜色为蓝色，引入外部样式后查看页面字体显示效果，然后交换外部和内部样式的位置，再查看页面效果。
???4.调整显示优先级
?????调整显示的优先级
?????使用!important规则改变优先级
?????将!important放在属性值之后，与值之间用空格隔开。
?????ex:
???????color:red !important;
3.CSS基础选择器
?1.通用选择器
???语法：*{样式声明}
???作用：可以匹配页面中的任意元素。
???注意：效率较低，尽量少用
?2.元素选择器
???语法：元素名称{样式声明}
???作用：设置页面上某种（类）元素的默认样式
???ex:
?????div{},p{},a{},header{},span{}...
?3.类选择器
???作用：定义某个或某些元素的样式（谁想用谁就可以引用）
???特点：通过元素的class属性进行引用
???语法：
?????1.声明类选择器
???????.类名称{样式声明}
???????注意：
1.类名不能以数字开头
2.不能包含特殊字符（除_,-外）
3.点 不能省略
?????2.引用
???????<ANY class="类名称"></ANY>
???特殊用法：
?????1.多类选择器
???????让元素引用多个类选择器
语法：<ANY class="类名1 类名2 类名3 ..."></ANY>
?????2.分类选择器
???????将元素选择器和类选择器联合使用
语法:元素名称.类名{样式声明}
ex:
??p.test{color:red;}
?????练习：
???????在页面中创建div和p元素，内容随意
1.用类选择器设置所有元素字体颜色为红色
2.用分类选择为p元素设置背景颜色为黑色
?4.id选择器（私人订制）
???作用：设置指定id元素的样式
???语法：#id值{声明样式}
???ex:<div id="map"></div>
??????#map{color:red;}
???练习：
?????1.新建一个div元素，设置id为main
?????2.通过id选择器设置文本颜色为黄色，字体大小为32px,斜体（font-style:italic;）
?5.群组选择器
???作用：将多个选择器放在一起进行样式的声明定义
???语法：选择器1,选择器2,选择器3{样式声明}
???ex：
??????div,p,a.text,#one,span{color:gray;}
??????div{color:gray;}
??????p{color:gray;}
??????a.text{color:gray;}
??????#one{color:gray;}
??????span{color:gray;}
?6.后代选择器
???作用：通过元素的后代关系匹配元素
???后代：一级或者多余一级的嵌套
???语法：选择器1 选择器2 选择器3{样式声明}
?7.子代选择器
???作用：通过元素的子代关系匹配元素
???语法：选择器1>选择器2{样式声明}
?8.伪类选择器
???作用：匹配元素不同状态的选择器
???语法：所有的伪类选择器都是以:作为开始
?????选择器:伪类选择器{样式声明}
?????1.链接伪类
???????:link 匹配元素尚未访问时的状态
:visited 匹配元素访问后的状态
?????2.动态伪类
???????:hover 匹配鼠标悬停在元素上时的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态
CSS-选择器
原文地址：https://www.cnblogs.com/QiliPING9/p/9027712.html