css样式
样式的引入方法
内部样式
点击查看代码
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
body {
background-color: #000;
}
</style>
</head>
行内样式
<span style="color: red;">红色字体</span>
外部样式 link引入和@import引入
注意@import引入必须放在 style的前面
<link href="a.css" rel="stylesheet" type="text/css"/>
点击查看代码
<style type="text/css">
@import url("a.css");
body {
background-color: #fff;
}
</style>
CSS特性 继承性
继承性是指后代元素继承祖先元素的样式，继承样式主要包括字体、文本等基本属性。如：字体、字号、颜色、行距等。不允许继承的属性有边框、边界、补白、背景、定位、布局、尺寸等。
CSS特性 层叠性
层叠性是指对同一个对象应用多个样式的能力 不同选择器的权重不一样，注意区分 important表示权重最高 无限高
font-size: 12px!important;
CSS选择器
元素选择器:选择网页中的元素(标签选择器、类选择器、ID选择器、通配选择器)
1、标签选择器
直接选择所有html标签，如body、p、a等
body{ font-size: 12px!important; }
2、类选择器
以(.)为前缀，后面是一个类名，直接在标签上使用
.red{color: red;}
<span class="red">红色字体</span>
3、ID选择器
以(#)为前缀，后面是一个类名，直接在标签上使用,id为box的标签将会使用该样式
#box{color: red;}
<span id="box">红色字体</span>
4、通配选择器 *
匹配文档中所有标签
*{ margin: 0; padding: 0; }
元素选择器注意事项
可以在元素选择器之前加上限定标签名，用于限定它的应用范围。如下这个样式只能用于div元素，对其他元素将无效
div#box{color: red;}
关系选择器
1、后代选择器(空格)
通过空格链接两个简单的选择器,匹配所有后代元素。如下：body包含的所有div元素 将使用该样式。
.div-test div{color: blue;}
2、儿子选择器 >
通过>连接两个选择器 匹配直接子元素。不匹配它的孙子、重孙等节点。注意一些可继承的属性可能会误导样式的展示。
.div-test>div{ border:3px solid red; }
3、相邻选择器+
通过+连接两个简单的选择器。前面表示前一个元素，后面表示后一个元素。如下：当span和h1相邻时，h1将使用该样式
span+h1{color: gray;}
4、兄弟选择器~
通过~连接两个简单的选择器，匹配后面的所有同级别兄弟节点。如下：匹配span后面所有同级别h1标签。
span~h1{color: red;}
5、分组选择器,
通过,好连接两个简单的选择器，逗号匹配到的所有元素都会使用该样式
h1,h2,h3,h4,h5,h6{ font-size: 20px;}
属性选择器(7种)
1、E[attr]
匹配设置了attr属性的元素。如下表示 所有匹配 设置了id属性的h1元素
h1[id]{font-size: 12px;}
2、E[attr="value"]
匹配属性attr=value的元素。
h1[id='box']{font-size: 12px;}
3、E[attr~="value"]
匹配具有attr属性，且属性值为空格分隔的列表，比如class属性。 其中一个值等于value的元素。通常用于匹配class属性的较多。如下匹配class属性中包含test的所有元素。
h1[class~='test']{color: blue;}
4、E[attr^="value"]
匹配attr属性以value开头的元素。如下匹配id属性以box开头的元素。当id=box1、box2、box3等值时，都可以匹配成功。
h1[id^='box']{color: blue;}
5、E[attr$="value"]
匹配attr属性值以value结尾的元素，。如下匹配所有id属性以name结尾的元素，如当id=box1_name、box2_name都可以匹配成功。
h1[id$='name']{color: red;}
6、E[attr*='value']
匹配attr属性值包含value的所有元素。如下匹配id属性值种包含na的所有h1元素。当id=box2name、box3name都可以匹配成功。
h1[id*='na']{color: green;}
7、E[attr|='value']
匹配具有attr属性，属性值以value开头，并且属性值以"-"分割的元素。如下匹配所有class属性值，以col开头的h1元素。
h1[class|='col']{color: blueviolet;}
伪类选择器
伪类选择器是一种特殊的选择器，它对不同状态和不同行为的元素定义样式。基础用法：
E:pseudo-class{property:value}
a:link{color: red;}
其中E代表元素，pseudo-class代表伪类，property代表属性名，value代表属性值。
CSS3伪类选择器非常多，主要介绍常用的一些伪类选择器
1、结构伪类选择器
1、:first-child 匹配第一个子元素，类型有关 body div:first-child{color: red;} 匹配body种的第一个div
2、:last-child 匹配最后一个子元素，类型有关 div:last-child{color: red;}
3、:nth-child(n) 从左到右匹配第n个元素，类型无关 div>h1:nth-child(2){color: red;} 示例匹配div种的第二个元素 也可以用nth-child(n) nth-child(2n) nth-child(2+1)
3、:nth-last-child(n) 匹配倒数第n个元素，类型无关 div>h1:nth-last-child(2){color: red;} 示例匹配div种倒数第二个元素 也可以用nth-last-child(n) nth-last-child(2n) nth-last-child(2+1)
4、:only-child 匹配子类中唯一的一个子元素 div:only-child{color: red;} 当div是 父类的唯一子元素时候匹配成功
5、
2、否定伪类选择器 .not()
.not()表示否定选择器，即过滤点not选择器匹配的特定元素。如下匹配id不等于box的h1元素
h1:not(#box){color: blue;}
3、状态伪类
:enabled 匹配所有可用的元素
:disabled 匹配所有不可用的元素（设置了disabled属性 ）
:checked 匹配所有被选中的元素
目标伪类选择器 :target
1、:first-letter 匹配第一个字符 p:first-letter{font-size: 22px;}
2、:first-line 匹配第一行 p:first-line{font-size: 22px;}
3、:before 在指定元素前面插入一个元素
4、:aftrer 在指定元素后面插入一个元素
动态伪类选择器
动态伪类选择器是一种行为类样式，只有用户与页面交互时才有效。主要有:link :hover :visted :active :focus几种
