1. CSS定义

层叠样式表

2. 创建CSS的三种方法

2.1. 元素内嵌（权重最高）

<p style="color:red;font-size:50px;">

2.2. 文档内嵌

通过选择器的方法调用指定的元素并设置相关的CSS

<style type="text/css">

    p{

        color:red;

        font-size: 30px;

    }

</style>

2.3. 外部引用

定义一个style01.css文件

@charset "utf-8";

p{

    color:red;

    font-size: 30px;

}

在主文件中应用style

<!--在header中-->

<link rel="stylesheet" type="text/css", href="style01.css">

大量HTML使用同一组CSS，就可以将这些样式保存到一个单独的.CSS文件中，通过link引用就可以了

3. CSS层叠和继承

样式表层叠：同一元素通过不同方式设置样式表所产生的样式重叠
样式表继承：某一个被嵌套的元素得到它父类元素样式
浏览器样式：这个元素在浏览器运行时附加的样式

3.1. 浏览器样式

<b>b元素有加粗元素</b>

<span style="font-weight:bold;">span元素没有加粗样式，但是可以设置</span>  

<b style="font-weight:normal;">b元素手动取出加粗元素</b>

3.2. 样式表层叠



<link rel="stylesheet" type="text/css", href="style01.css">

<style type="text/css">

    p{

        color:red;

        font-size: 30px;

    }

</style>

<!--同时叠加（不是覆盖）三个元素-->

<p style = "font-size:50px; color:orange;">我要叠加三个样式</p>

优先级： 元素内嵌 <- 文档内嵌 <- 外部引用 <- 浏览器

可以在不同样式中添加!important关键字来强行设置优先级

color: green !important

3.3. 样式继承

<style type="text/css">

    p{

        color:red;

        font-size: 30px;

    }

</style>

<p>这是<b>HTML5</b></p>

此时显示的是这是HTML5,我们只设置了p为红色，但是b也为红色了，因为b是在p内部

如果一个元素没有设置父元素相关的样式，那么就会使用继承机制将父类样式继承下来
样式继承只适用于元素的外观(文字，颜色，字体等)，布局样式无法继承

4. CSS选择器

定位到你想要设计的样式元素来设计元素

4.1. 选择器的总汇

(1) 基本选择器

使用频率最高的一些选择器

1.通用选择器`*`

*表示通用选择器，匹配所有HTML元素包括<HTML>和<body>标签
可以为所有元素匹配并配置样式，但是无法筛选不必要元素
定义一个CSS



@charset "utf-8"

* {

  border: 1px solid red;

}

/*通用选择器可以匹配到html和body元素*/



<link rel="stylesheet" type="text/css", href="style01.css">

<p>这是一个段落</p>

<p>这是一个加粗</p>

<span>这是一个什么都没有</span>

2.元素选择器`p`



@charset "utf-8"

p {

  border: 1px solid red;

}

/*通用选择器可以匹配到html和body元素*/

3.ID选择器`#adc`

ID是唯一的，不可重复使用



@charset "utf-8"

#abc {

  border: 1px solid red;

}



<link rel="stylesheet" type="text/css", href="style01.css">

<p id="abc">这是一个段落</p>

<p>这是一个加粗</p>

<span>这是一个什么都没有</span>

4. 类选择器`.`



@charset "utf-8"

.abc {

  border: 1px solid red;

}



<link rel="stylesheet" type="text/css", href="style01.css">

<p class="abc">这是一个段落</p>

<p class="abc">这是一个加粗</p>

<span>这是一个什么都没有</span>

也可以限定元素

@charset "utf-8"

p.abc {

  border: 1px solid red;

}

/*只能适用于段落*/

也可以使用多个class

@charset "utf-8"

.abc {

  border: 1px solid red;

}

.def {

  font-size: 30px;

}

<p class="abc def">这是一个加粗</p>

5. 属性选择器`[...]`

@charset "utf-8"

[href]{

  color: red;

}

<a href="http://www.baidu.com">这是一个百度</a>

也可以设置相关的属性值

@charset "utf-8"

[type="password"]{

  border: 1px solid red;

}

<input type="password">

通过正则表达式来设置匹配

@charset "utf-8"

[href^="http"]{

  color: orange;

}

/*只能开头是http才能匹配*/

<a href="http://www.baidu.com">百度</a>

<a href = "javascript:void(0)">好搜</a>

通过精确匹配

@charset "utf-8"

[href*="baidu"]{

  color: orange;

}

/*只能包含baidu才能匹配*/

(2) 复合选择器

将不同选择器进行组合形成的新的特定匹配

1.分组选择器

多个选择器逗号分隔，同时设置一组样式

@charset "utf-8"

p,b,i,span {

  color: orange;

}

#abc,.abc,i,span {

  color: orange;

}

2.后代选择器

选择<p>元素内部所有的<b>元素，不在乎<b>的层次深度

@charset "utf-8"

p b {

  color: orange;

}

<p>这是一个HTML5<b>教程</b></p>

效果为：这是一个HTML5教程

3. 子选择器

与后代选择器类似，但是只能运用于儿子，孙子就不行了

@charset "utf-8"

p>b {

 color: orange;

}

4.相邻兄弟选择器

匹配第一个元素相邻的第二个元素

@charset "utf-8"

p+b {

  color: orange;

}

5.普通兄弟

类似，只是靠的不是特别近

@charset "utf-8"

p~b {

  color: orange;

}

(3) 伪元素选择器`::`

1. 块级首行`::first-line`

只适用于<p>、<div>等的首行文本选定

:: first-line {

  color: orange;

}

2. 块级首字母`::first-letter`

p:: first-letter {

  color: orange;

}

3. 文本前插入`::before`

在文本前插入内容

a:: before {

  content: '点击-';

}

3. 文本后插入`::after`

(4) 伪类选择器

1. 结构性伪类`:`

可以根据元素在文档中的位置选择元素

1.1. 根元素选择器

:root {

  border: 1px solid red;

}

1.2. 子类选择器

ul>li:first-child {

  color: red;

}

/*父类的第一个儿子*/

ul>li:last-child {

  color: red;

}

/*父类的最后一个儿子*/

ul>li:only-child {

  color: red;

}

/*选择只有一个子元素的那个元素*/

dive>p: only-of-type {

  color: red;

}

/*选择只有一个指定类型的子元素的那个元素*/

1.3.nth-child(n)系列

ul>li:nth-child(2) {

  color: red;

}

/*选择第2个*/

ul>li:nth-last-child(2) {

  color: red;

}

/*选择倒数第2个*/

ul>li:nth-of-type(2) {

  color: red;

}

/*特定类型第2个*/

ul>li:nth-last-of-type(2) {

  color: red;

}

/*特定类型倒数第2个*/

2.UI伪类

用于匹配表单的数据

enabled

input:enabled {

  border: 1px solid red;

}

/*选择表单中的enable元素*/

<form>

  <input tupe="text" disabled>

  <input tupe="text">

</form>

checked

input:checked {

  display: none;

}

default

input:default {

  display: none;

}

valid和not valida

input:valid {

  border: 1px solid green;

}

input:invalid {

  border: 1px solid red;

}

required

input:required {

  border: 1px solid red;

}

3. 动态伪类

根据条件改变匹配元素

link-超链接

/*Url没有访问的颜色*/

a:link {

  color: red;

}

/*Url被点击的颜色*/

a:visited {

  color: blue;

}

/*鼠标悬停的颜色*/

a:hover {

  color: orange;

}

/*鼠标长按的颜色*/

a:active {

  color: green;

}

<a href="baidu.com">百度</a>

focus-文本框获取的

/*鼠标获取到文本框的颜色*/

input:focus {

  border: 1px solid green;

}

其他伪类选择器

not否定选择器

/*选择百度除外的URL*/

a:not([href*="baidu"]) {

    color: green;

}

empty

/*空元素隐藏*/

:empty {

    display: none;

}

target-定位到锚点

/*空元素隐藏*/

b:target {

    color: red;

}

巴特西

HTML和CSS前端教程03-CSS选择器