1.什么是CSS？

Cascading Style Sheets

层叠样式表 -> 样式表

2.为什么使用CSS？

设置HTML网页元素的样子——对HTML骨架进行修饰美化。就是我们所谓的擦粉打扮穿衣服。——如下图

3.CSS、HTML与JS的关系？

4.CSS语法规范

内联样式

特点：将CSS内容定义在HTML标记中
语法：
               <ANY style="样式声明1;样式声明2;... ...">
       样式声明：
             1、由样式属性名以及值来组成
             2、属性名与值之间使用 : 做连接
             3、多个样式声明之间用 ; 做分隔

例子展示

内部样式

在网页中的一个独立的地方声明该网页要用到的所有的样式
语法：

  <head>
       <style>
          样式规则1
          样式规则2
          ...
          样式规则n
        </style>
   </head>

样式规则：由选择器和样式声明组成
选择器：规范了页面中哪些元素能够使用声明好的样式,其实就是为了匹配页面中的元素

                   选择器{
                       样式声明1;
                       样式声明2;
                   }

外部样式

独立于任何网页的位置处，声明一个样式表文件(***.css)，在文件中声明样式。在使用的网页中进行引入
   使用步骤：
       1、创建样式表文件，并编写样式
             在 xxx.css 文件中编写样式规则
2、在网页上对样式表文件进行引入
             <head>
                   <link rel="stylesheet" href="xxx.css">
             </head>

5.CSS样式表特征

继承性

必须是父子(有层级关系)结构
大部分的css效果是可以直接继承给子元素的

层叠性

可以为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上

所谓的属性冲突就是相同的属性设置不同的属性值


div{
	  color:red;
   }

div{
	  background:yellow;
   }

div{
	 font-size:26px;
   }

优先级

在层叠性基础上，如果样式声明冲突(重复)的话,则按照默认的优先级去应用样式
           由低到高
               1、浏览器默认设置
               2、样式表(内外部)——就近原则 - 后定义者优先
               3、内联方式级别最高

!important 原则

显示调整样式属性优先级

样式属性:值 !important;

!important 加在谁的后面，就以谁为主，加了这个内联方式级别最高的地位将被颠覆。（少用）

6.CSS基础选择器

选择器的作用

规范了页面中哪些元素能够使用声明好的样式
匹配页面的元素

选择器详解

1、通用选择器
作用：可以与页面上的任一元素相匹配，设置网页中所有元素的样式——基本不用
语法：* { 样式声明}

  
      *{
            font-size:12px;
            color:red;
       }

2、元素选择器
作用：设置页面上某种元素的默认样式
语法：标记{ 样式声明 }


       h3{ color:red;}
       div{font-size:12px;}

3、类选择器——用的最多
           作用：定义页面上某个或某些元素的样式
           特点：通过元素的class属性进行引用的选择器
           语法：
                   1声明
                       .类名{ 样式声明 }
                       注意：
                           1、点不能省略
                           2、类名不能以数字开头
                           3、由英文，-,_ 来组成
                   2引用
   <ANY class="类名">

           特殊用法：
分类选择器的定义方式——将类选择器和元素选择器结合使用
               语法：元素选择器.类选择器{ }
                               1、div.text{}
                                   定义class为text的div元素的样式
                               2、span.important{ }
                                   定义class为important的span元素的样式

多类选择器的引用方式——让元素引用多个类选择器
语法：<ANY class="c1 c2 c3">

     4、id选择器
               作用：与ID属性联用，为了设置指定ID元素的样式(专属定制)
               语法：
                   #ID值{ ... }

  5、群组选择器
           作用：将多个选择器放在一起进行样式的声明定义
           语法：选择器1,选择器2,选择器3,... { ... }

#container,div.text,.redColor,span{
           color:red;
 }
 
等同于 ：
#container{color:red;}
div.text{color:red;}
.redColor{color:red;}
span{color:red;}

6、后代选择器（子子孙孙都是后代）
作用：通过元素的后代关系匹配元素
语法：选择器1 选择器2{}

  7、子代选择器（自己的后代，无隔辈）
               作用：通过元素的子代(一层层级关系）匹配元素
               语法：选择器1>选择器2{}

>表示下一级的意思

  8、伪类选择器
               作用：匹配元素不同的状态的选择器
               语法：
                   所有的伪类都是以 : 作为开始的
                   选择器:伪类选择器{ ... }
8.1、链接伪类
                   1、:link
                       匹配元素尚未被访问时候的状态
                       ex:
                           a:link{ ... }
                   2、:visited
                       匹配元素访问过的状态
                       ex:
                           a:visited{ ... }
8.2、动态伪类
                   1、:hover
                       匹配鼠标悬停在元素上时的效果
                   2、:active
                       匹配元素被激活时的状态
                       超链接,文本框和密码框，点击的时候，就是 active
                   3、:focus
                       匹配元素获取焦点时的状态
                       文本框和密码框
效果展示：

7.选择器优先级

选择器类型	权值
元素选择器	1
类选择器	10
伪类选择器	10
ID选择器	100
内联样式	1000

选择器的权值加到一起，大的优先，如果权值相同，后定义的优先，群组选择器不进行累加。

关于CSS的基础分享就先到这里，后面将会分享CSS的尺寸与边框。大家记得关注哦，还有加一个赞哦！

CSS（Cascading Style Sheets）——层叠式样式表