1. CSS简介

层叠样式表

网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式，而最终我们能看到只是网页的最上边一层

总之一句话，CSS用来设置网页中元素的样式

使用CSS来修改元素样式的方式大致可以分为3种

2.类型样式设置

a.内联样式（行内样式）

在标签内部通过style属性来设置元素的样式

<p style="color:red;font-size:60px;">内联样式（行内样式）p>

问题：使用内联样式，样式只能对一个标签生效。如果希望影响到多个元素，必须在每一个元素中都复制一遍；并且当样式发生变化时，我们必须要一个一个的修改，非常的不方便。（注意：开发时绝对不要使用内联样式）

b.内部样式表

将样式编写到head中的style标签里然后通过css的选择器来选中元素并为其设置各种样式可以同时为多个标签设置样式，并且修改时只需要修改一处即可。内部样式表更加方便对样式进行复用

<style>
p{
    color:green; 
    font-size:50px;
}
style>

问题：我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用

c.外部样式表（最佳）

可以将css样式编写到一个外部的CSS文件中，然后通过编写head中link标签来引入外部的CSS文件完成选择

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

外部样式表需要通过link标签进行引入，意味着只要想使用这些样式的网页都可以对其进行引用使样式，可以在不同页面之间进行复用

将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

3.CSS基本语法

3.1注释

css中的注释

只能使用/*和*/包裹。即不管是单行注释，还是多行注释，都是以/*开头，以*/结尾

/* css中的单行注释 */
 
/* 
css中的多行注释
css中的多行注释
css中的多行注释
*/

我们对比下其他几种前端语言的注释

html中的注释

只能使用包裹。即不管是单行注释，还是多行注释，都是以结尾

JS(JavaScript)和JQuery中的注释

单行注释使用//。多行注释使用/*和*/包裹，以结尾

/* JS(JavaScript)和JQuery中的单行注释*/

/*
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
JS(JavaScript)和JQuery中的多行注释
*/

3.2基本语法

类型：选择器 声明块

选择器

通过选择器可以选中页面中的指定元素

• 比如p的作用就是选中页面中所有的p元素声明块

声明块

通过声明块来指定要为元素设置的样式

• 声明块由一个一个的声明组成，声明是一个名值对结构

• 一个样式名对应一个样式值，名和值之间以:连接，以;结尾

 
h1{
    color: green;
}

CSS选择器

1.通配选择器（Universal selector）

●作用：选中页面中的所有元素
●语法：*
●例子：

*{
    color: red;
}

2.元素选择器（Type selector）

也叫类型选择器、标签选择器

●作用：根据标签名来选中指定的元素
●语法：elementname{}
●例子：p{} h1{} div{}

p{
    color: red; 
}
 
h1{
    color: green;
}

3.类选择器（Class selector）

●作用：根据元素的class属性值选中一组元素
●语法：.classname
●例子：.blue{}

.blue{
    color: blue;
}
.size{
    font-size: 20px;
}

class是一个标签的属性，它和id类似，不同的是class

●可以重复使用，
●可以通过class属性来为元素分组，
●可以同时为一个元素指定多个class属性，空格隔开

<p class="blue size"> 类选择器（Class selector）p>

4.ID选择器（ID selector）（id不能重复）

●作用：根据元素的id属性值选中一个元素，一个元素一个id
●语法：#idname{}
●例子：#box{} #red{}
 

#red{
    color: red;
}

5.属性选择器（Attribute selector）

●作用：根据元素的属性值选中一组元素
●语法1：[属性名] 选择含有指定属性的元素
●语法2：[属性名=属性值] 选择含有指定属性和属性值的元素
●语法3：[属性名^=属性值] 选择属性值以指定值开头的元素
●语法4：[属性名$=属性值] 选择属性值以指定值结尾的元素
●语法5：[属性名*=属性值] 选择属性值中含有某值的元素
●例子：p[title]{} p[title=e]{} p[title^=e]{} p[title$=e]{} p[title*=e]{}
 

p[title]{
    color: orange;
}
p[title=e]{
    color: orange;
}
p[title^=e]{
    color: orange;
}
p[title$=e]{
    color: orange;
}
p[title*=e]{
    color: orange;
}

6. 复合选择器

交集选择器

●作用：选中同时复合多个条件的元素
●语法：选择器1选择器2选择器3选择器n{}
●注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头！！！
 

div.red{
    font-size: 30px;
}
 
.a.b.c{
    color: blue;
}

并集选择器（选择器分组）

●作用：同时选择多个选择器对应的元素
●语法：选择器1,选择器2,选择器3,选择器n{}
●例子：#b1,.p1,h1,span,div.red{}

h1,span{
    color: green;
}