样式的引入方法

内部样式

点击查看代码
<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几种