CSS基本内容。

CSS的基本内容

1.什么是CSS？

CSS（层叠样式表）是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

2.CSS的作用是什么？

用于在HTML元素上添加外观、改变字体以及字体大小、改变背景颜色、添加图片、边框、构建网页结构等等。

3.CSS的特点是什么？

<1>.丰富的样式定义 。
<2>.易于使用和修改 。
<3>.多页面使用 。
<4>.可层叠（一个元素可具有多个css样式）
<5>.页面压缩 （尽量多次复用同样的css，减小css文件体积，提高网页性能）

4.css样式属性写法是什么？

属性：值；

CSS的样式

1.行内样式

直接在元素的行内style属性上去写样式。

element.style {
      color: red;
  }

2.内嵌样式

在网页的head/body或者style的内部去写样式。

3.外部样式

写在外部的css文件里，网页直接调用即可。

引入方式：

rel=“stylesheet” css解析方案 type=“text/css” 可以省略不写

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

CSS的属性

1.inherit继承属性，继承父元素的值。

2.color属性，字体颜色。

3.text-align属性，文本对齐属性。

4.font属性，字体相关属性。

①font-size字体大小。

②font-family设置字体。

5.border属性，边框样式。

6.background属性，改变背景。

7.line-height属性，设置行高，高度和行高一致，单行文本垂直居中。

CSS选择器

1.*选择器

作用：匹配当前页面里的所有元素。

2.元素选择器

作用：根据当前元素的名称来匹配。

3.class类名称选择器

作用：根据元素的class属性来匹配。

一个元素可能具有多个类名称。

<style>
    .btn{
         xxxx
         }
</style>         
<div class="btn">
   xxxxx
</div>

4.id名称选择器

作用：根据当前元素的id来匹配。

一个元素只能拥有一个id，不能重名。

<style>
    #a{
         xxxx
         }
</style>         
<div id="a">
   xxxxx
</div>

5.组合选择器

(1）子父关系选择器

①空格选择器

作用：匹配当前元素里的所有后代。

ul li{
          xxxxx
       }

②>选择器

作用：匹配当前元素的直接子元素。

#menu>li{
         xxxxx
      }

(2）相邻元素选择器

①+选择器

作用：匹配当前元素紧跟其后的元素。

.p1+p{
         xxxx
       }

②~选择器

作用：匹配当前元素之后的所有元素。

.p1~p{
          xxxx
       }

6.属性选择器

作用：根据元素的属性匹配元素。

      ul[class]
      {                     单属性
                xxxxx
             }
     ul[class][id]
     {                      多属性
               xxxxx
            }

属性匹配也可以根据属性值匹配：
^= 属性值以什么开头。
$= 属性值以什么结尾 。
*= 属性值包含什么。

7.分组选择器

一次写多个元素的样式，中间用逗号隔开。

 button,div,ul{
         xxxxxxx
         }

8.嵌套选择器

多个元素共用一个类或者id。

  button.btn{
                    width: 100px;
                }
            ul.btn{
                background-color: orangered;
            }

CSS三大样式之间的优先级

(1）三大样式之间如果存在冲突

行内样式>内嵌样式>外部样式（行内样式>外部样式>内嵌样式） <加载css的顺序就有关>

(2）如果三大样式之间不冲突，则叠加。

注：
四个基本选择器之间的优先级：
id>class>ele>*

组合选择器里面的优先级：
同匹配方案牵扯到父级，父级的优先级高。

高样式优先级：！important 提高的比行内样式优先级还高。

CSS的伪类

1.访问之前的伪类。

 a:link{
                  border: 1px solid red;
              }

2.访问之后的伪类。

  a:visited{
                  border: 1px solid blue;
              }

3.悬停伪类。

  a:hover{
                  border: 1px solid green;
              }

4.激活伪类。

   a:active{
                  border: 1px solid deeppink;
              }

5.选择伪类。

  .ckbox:checked~span{
                        color: red;
                    }
    .ck:checked~span{ 
                       color: green;
                    }

6.表单元素标签。

   input:enabled{
                    border: 1px solid red;
                }

    input:disabled{
                    border: 1px solid blue;
                }

:enabled :disabled 可用和不可用的伪类。

7.before、after伪类。

.nav:before{
                         content: "123";
                     }
                     .nav:after{
                         content: "01233";
                     }

针对所有元素，给匹配元素的内容之前/后追加。