-
css全称层叠样式表（Cascading Style Sheet）——修饰、美化网页，化妆师
css样式的多种形式
一、行间样式 -----内部样式
<div style=" 200px;height: 200px;background: red"></div>
二、内嵌（css）样式 -----内部样式
div{
200px;
height: 200px;
background: red
}
三、外链（css）样式 ------外部样式
<link rel="stylesheet" href="url.css">
样式优先级
外链css样式 < （内嵌css）样式 < 行间样式
css选择器
-
*(通用元素选择器) 匹配任何元素*{ margin: 0;padding: 0;} -
元素选择器
-
选中相同的元素，对相同的元素设置同一种
css样式 -
div{ 200px;height: 200px;background: red;} -
选中页面中所有的的
div元素
-
-
class选择器-
给标签设置一个
class属性，在写样式时，在class名字前面加个. -
.box{ 200px; height: 200px;background: red;} -
一般给具有相同属性的元素设置同一个
class
-
-
id选择器-
给标签设置一个
id属性，在写样式时，在id名字前面加个# -
#box{ 200px; height: 200px;background: red;} -
id具有唯一性，在一个页面中，同一个id只能出现一次
-
-
群组选择器
-
对几个有相同属性的选择器进行操作时，一个一个分开写，显得代码冗余
-
p,div{ 200px; height: 200px;background: red;} .box,.wrap{ 200px; height: 200px;background: red;} -
两个选择器之间必须用 ，隔开
-
-
相邻选择器
-
相邻选择器操作的对象是该元素的同级元素
-
div + p{ background: green; } -
选择
div相邻的下一个兄弟元素p
-
-
兄弟选择器
-
兄弟选择器操作的对象是该元素下的所有同级元素
-
div ~ p{background: green;} -
选择
div相邻的所有兄弟元素p
-
-
子代选择器
-
选择某个元素下面的子元素
-
div > p{background: green;}
-
-
后代选择器
-
选择某个元素下面的子元素
-
div p{background: green;}
-
-
伪类选择器
-
:link匹配所有未被点击的链接 -
:visited匹配所有已被点击的链接 -
:hover匹配鼠标悬停其上的元素 -
:active匹配鼠标已经在其上按下但是还没有释放的元素
-
-
hover拓展-
.box:hover{} 改变元素本身 -
.box:hover p{} 改变元素下面的p子元素
-
-
cursor鼠标移入时以何种状态显示-
defult通常是一个箭头 -
wait光标指示正忙 -
help光标指示帮助 -
pointer小手
-
选择器优先级
-
基本选择器优先级排序（从低到高）
-
*{} -
tagName{} -
.class{} -
#id{}
-
特殊情况
-
级别相同的选择器：后面的样式会覆盖前面的（后来居上）
.wrap{background:red}.wrap{background:green} -
复杂后代选择器
-
比高低顺序依次是：
id选择器class选择器tanName{} -
id选择器个数不相等，id个数越多的优先级越高，后面不用比 -
id选择器个数相等，则看class个数，多的优先级高，后面不用比 -
class个数相等，再看tagName个数 -
#wrap ul li .list{}和.wrap ul li #list{}优先级一样
-
-
选择器使用原则：准确的选中元素，并且不影响其他元素
table表格
表格的常用标签
-
table表格 -
thead表格头 -
tbody表格主体 -
tfoot表格尾 -
th元素定义表头单元格 -
tr定义表格行 -
td元素定义内容单元格 -
caption表格标题 -
rowspan合并行 -
colspan合并列