目录：

学习资料：

尚硅谷前端HTML5视频_HTML & CSS 核心基础教程（103集实战教学，从入门到精通）

一、CSS

CSS，Cascading Style Sheet，层叠样式表，用来为网页创建样式表，通过样式表可以对网页进行装饰，设置字体样式、位置等。

所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的。

而CSS就可以分别为网页的各个层次设置样式。

二、层叠样式的类型

1 内联样式

将CSS样式编写到元素的style属性当中

<body>
    <p style="color:red">我是红色的</p>
<body>

这种样式成为内联样式，只对当前的元素中的内容起作用

不方便复用。结构与表现耦合，不方便后期维护，不推荐使用

2 内部样式

将CSS样式编写到<head>中的<style>标签里

<head>
    <style type="text/css">
        p{color:skyblue}
    </style>
</head>

3 css文件

将样式表编写到外部的css文件中，然后通过link标签来将外部的css文件引入到当前页面中。

在html文件中：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

href的值是文件路径

在css文件中：

p{color:yellow;font-size:200px}

这样使得结果与表现完全分离，实现样式复用、统一样式

另外也可利用浏览器缓存加快用户访问速度，因为不需要再将css文件读一遍。如果使用内部样式的话，则要重新读一遍。

三、CSS基础

1 选择器

通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上。

2 声明块

声明块紧跟在选择器的后面，使用一对{}扩起来。

声明块是一组一组的名值对结构，名是要设置的样式名，值是样式的具体值，名与值之间用:隔开

一个声明块中可以写多个声明，声明之间使用;隔开

如上例：

p{color:yellow;font-size:200px}

p为选择器，{}及包括的内容为声明块，此声明块包含两组名值对。

3 分组/分类

class

为元素设置class属性可以对对此元素进行分类，同一元素可以属于多类，不同类名之间用空格隔开

用选择器选择元素class属性的格式为：

属性名.class_name

例如：

<body>
    <p class="color yellow">my color is yellow</p>
    <p class="color green">my color is green</p>
</body>

p.color{background:pink}
p.yellow{color:yellow}
p.green{color:green}

效果：

一共有两句话，第一句话的class为color和yellow，第二句话的class为color和green。

为这两句话添加相同的分红底色：p.color{background:pink}

分别设置这两句话的文字颜色：p.yellow{color:yellow} p.green{color:green}

可以为元素设置id属性，id，顾名思义代表着特定的某个元素，因此id的值不能复用，而class的值可以复用

用选择器选择id属性的格式为：

属性名#id

例如：

<body>
    <p id="abc">my color is yellow</p>
    <p id="def">my color is green</p>
</body>

#abc {color:yellow}
#def {color:green}

效果：

4 元素的父子关系

父元素

直接包含子元素的元素
子元素

直接被父元素包含的元素
祖先元素

直接或间接包含后代元素的元素
后代元素

直接或间接被祖先元素包含的元素
兄弟元素

同级元素

5 后代元素选择器

作用：选中指定元素的后代元素

语法：祖先元素后代元素

例子：

<body>
    <div class="first">     
        <p id="abc">my color is yellow</p>
        <p id="def">my color is green</p>
        <span>my color is blue</span>
    </div>
    <span>normal span</span>
</body>

.first p {background:pink}
.first #abc {color:yellow}
.first #def {color:green}
.first span {color:blue}

效果：

6 子元素选择器

作用：选中父元素的指定子元素

语法：父元素>子元素

7 兄弟选择器

选择紧邻的后面的一个兄弟元素

语法：前一个元素 + 后一个元素

为sapn元素后面的p元素设置样式：
- span + p {}
选中后面的所有兄弟元素

语法：前一个元素 ~ 后面所有

8 伪类选择器

伪类专门用来表示元素的一种特殊的状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。

用法：

正常连接：a:link
访问过的链接：a:visited
鼠标滑过时的链接：a:hover
正在点击的链接：a:active

<body>
    <div><a href="http://www.baidu.com" target="_blank" class="a1">百度</a></div>
</body>

.a1:link{color:red}
.a1:visited{color:orange}
.a1:hover{color:grey}
.a1:active{color:black}

9 否定伪类

否定伪类语法：p:not(.class_name) {}

例如：

为所有的p元素设置一个北京颜色，除了class值为hello的p元素：
- p:not(.hellow) {}

10 伪元素

使用伪元素来表示元素中的一些特殊的位置-

首字母：p:first-letter{}
首行：p:first-line{}
元素最前端的部分：p:first-letter{}
元素最后端的部分：p:first-letter{}

p:first-letter{color:red}
p:first-line{background:pink}
p:before{content:"我在p元素前面 "}
p:after{content:" 我在p元素后面"}

11 title属性

title属性可以给任何标签指定标题，即当鼠标移入到元素上时，元素的title属性将会作为提示弹出显示

为含有title属性值的元素设置样式：

p[title_name]{}

为特定title值得元素设置样式

p[title_name=""]{}

为title值以特定字符开头的元素设置样式

p[title_name^=""]{}

为title值包含特定字符的元素设置样式

p[title_name$=""]{}

12 样式的继承

给父级元素设置样式，子级则继承

但不是所有的样式都会被继承，如背景样式

13 选择器的优先级

当使用不同的选择器（class、title、style、id、*）选中同一元素时，要遵循优先级：

内联样式（style属性）：1000
id：100
类和伪类：10
元素选择器：1
通配符：0
继承：没有

当选择器中包含多种选择器时，需要将多种选择器的优先级值相加再相加。但是，选择器的优先级值相加不会超过它的最大数量级。

如果选择器的优先级一样，则使用靠后的样式。

HTML&CSS学习笔记 -- CSS（一）