CSS介绍

　　CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，给HTML设置样式，让它更加美观。

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

CSS语法

CSS实例

　　　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

CSS注释

/*这是注释*/

CSS的几种引入方式

行内样式

　　　　行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

内部样式

　　　　嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部样式

　　　　外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>  #现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录，href里面记得写上这个.css文件的路径

　　文件内容是：

p {color:blue;}
/*注释*/

注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的
/*标题样式*/
xxxxx

/*个人中心设置*/

css的选择器：(这些都是在外部样式中使用的)

? 1.基本选择器

? 2.高级选择器

CSS选择器（如何找到对应的标签）

基本选择器

基本选择器包括：

标签选择器
id选择器
类选择器

元素选择器（标签名）(标签选择器)

p {color: "red";}

标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“

ID选择器

#i1 {   #号表示id属性，后面的i1表示id属性的值
  background-color: red;  #背景色，color:red是字体颜色，这个简单知道一下就行了，明天我们再学这些具体的css样式
}

# 选中id

同一个页面中id不能重复。任何的标签都可以设置id id命名规范要以字母可以有数字下划线 - 大小写严格区分 aa和AA是两个不一样的属性值

id不能重复，如果想给多个p标签同时添加一个css样式怎么办？挨个添加id属性吗？并且，如果是不同的标签，但是他们的css样式要一样，怎么办？看下面

类选择器

.c1 {  .表示class属性，c1表示class的值
  font-size: 14px;
}
p.c1 {  找到所有p标签里面含有class属性的值为c1的p标签，注意他俩之间没有空格昂
  color: red;
}

所谓类：就是class . class与id非常相似任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开

类的使用，能够决定前端工程师的css水平到底有多牛逼？

玩类了，一定要有”公共类“的概念。

.lv{
    color: green;
?
}
.big{
    font-size: 40px;
}
.line{
   text-decoration: underline;
}

 <!-- 公共类    共有的属性 -->
<div>
    <p class="lv big">段落1</p>
    <p class="lv line">段落2</p>
    <p class="line big">段落3</p>
</div>

总结：

不要去试图用一个类将我们的页面写完。这个标签要携带多个类，共同设置样式
每个类要尽可能的小，有公共的概念，能够让更多的标签使用

到底使用id还是用class？


答案：尽可能的用class。除非一些特殊情况可以用id
?
原因：id一般是用在js的。也就是说 js是通过id来获取到标签

注意：

　样式类名不要用数字开头（有的浏览器不认）。

　标签中的class属性如果有多个，要用空格分隔。

通用选择器

* {  *表示所有的标签
  color: white;
}

高级选择器

高级选择器包括：

后代选择器
子代选择器
并集选择器
交集选择器

后代选择器

使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

子代选择器

使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{
    color: yellowgreen;
}

并集选择器

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的并集(分组)选择器来统一设置元素样式。

多个选择器之间使用逗号隔开。表示选中的页面中的多个标签都可以使用这个选择器设置的样式。一些共性的元素，可以使用并集选择器.比如像百度首页使用并集选择器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/

交集选择器

/*交集选择器*/
p.Box1{  /* p标签和类名为Box1的标签都有的属性 */
    color: green;
}

p#Box{  /* p标签和ID名为Box的标签都有的属性 */
    color: red;
}


 /* 还可以表示选中的两个选择器共有的特性。(即使用这两个选择器的标签共有的属性)*/
h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集选择器 */
h4.active{
    background: #00BFFF;
}

补充选择器

属性选择器

属性选择器，字面意思就是根据标签中的属性，选中当前的标签。

# 语法:
/*根据属性查找*/
/*[for]{
    color: red;
}*/

/*找到for属性的等于username的元素 字体颜色设为红色*/
/*[for=‘username‘]{
    color: yellow;
}*/

/*以....开头  ^*/  
/*[for^=‘user‘]{
    color: #008000;
}*/

/*以....结尾   $*/
/*[for$=‘vvip‘]{
    color: red;
}*/

/*包含某元素的标签*/
/*[for*="vip"]{
    color: #00BFFF;
}*/

/**/

/*指定单词的属性*/
label[for~=‘user1‘]{
    color: red;
}

input[type=‘text‘]{
    background: red;
}

伪类选择器

伪类选择器一般会用在超链接a标签中，使用a标签的伪类选择器，我们一定要遵循"爱恨准则" love HAte

/*没有被访问的a标签的样式*/
.Box ul li.item1 a:link{
    
    color: #666;
}
/*访问过后的a标签的样式*/
.Box ul li.item2 a:visited{
    
    color: yellow;
}
/*鼠标悬停时a标签的样式*/
.Box ul li.item3 a:hover{
    
    color: green;
}
/*鼠标摁住的时候a标签的样式,就是鼠标点下去还没有抬起来的那个瞬间*/
.Box ul li.item4 a:active{
    
    color: yellowgreen;
}

另一种伪类选择器:css3的选择器nth-child()

/*选中第一个元素*/
div ul li:first-child{
    font-size: 20px;
    color: red;
}
/*选中最后一个元素*/
div ul li:last-child{
    font-size: 20px;
    color: yellow;
}

/*选中当前指定的元素  数值从1开始*/
div ul li:nth-child(3){
    font-size: 30px;
    color: purple;
}

/*n表示选中所有,这里面必须是n,从0开始的  0的时候表示没有选中*/
div ul li:nth-child(n){
    font-size: 40px;
    color: red;
}

/*偶数*/
div ul li:nth-child(2n){
    font-size: 50px;
    color: gold;
}
/*奇数*/
div ul li:nth-child(2n-1){
    font-size: 50px;
    color: yellow;
}
/*隔几换色  隔行换色
     隔4换色 就是5n+1,隔3换色就是4n+1
    */

div ul li:nth-child(5n+1){
    font-size: 50px;
    color: red;
}

伪元素选择器（通过css来造标签，不推荐使用）

/*设置第一个首字母的样式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在每个<p>元素之前 添加内容   这个属性使用不是很频繁 了解  使用此伪元素选择器一定要结合content属性*/
        p:before{
            content:‘alex‘;
        }
        
        
/*在每个<p>元素之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
        p:after{
            content:‘&‘;
            color: red;
            font-size: 40px;
        }

上面的这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。

　　　　　　before和after多用于清除浮动。后面讲

CSS的继承性和层叠性

css有两大特性：继承性和层叠性

继承性

　　当选择器相同的时候，按照顺序来看css样式，谁最后就按照谁渲染。那如果是不同的选择器的时候呢？就要学习我们下面的优先级了，首先看一下继承：

面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来： color 、 font-、 text-、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body {
  color: red;
}

此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的，他的权重是0。

我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。

p {  # 无论顺序如何,都会显示绿色(可以理解为自己的比继承的(权重是0)权重高,也可以按照面向对象的思想理解为自己有的属性就不去拿父类的了)
  color: green;
}

层叠性

我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图:

注：内联样式的意思是把css样式写在标签里面：

其他的权重：但是有一点说一下，就是上面那个权重计算永不进位的意思是：我们看上面知道class的权重是10，但是即便是11个class相加起来大于id的100权重，也还是id生效，也就是说，不会进位，class组合起来也无法超过id的权重.

层叠性：权重大的标签覆盖掉了权重小的标签，说白了，就是被干掉了
权重：谁的权重大，浏览器就会显示谁的属性,前提是都要选中目标标签,否则都是继承性,权重都是0.
谁的权重大？非常简单就是小学的数数。
数：id的数量 class的数量标签的数量，顺序不能乱

看栗子:

<!--test.HTML文件-->

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./01-css高级选择器.css">
</head>


<body>

<div id=‘Box1‘ class="wrap1">
    <div id="Box2" class="wrap2">
        <div id="Box3" class="wrap3">
            <p id="pid" class="pclass">再来猜猜我是什么颜色？</p>
        </div>
    </div>
</div>

</body>
</html>

一:都选中了目标标签 ,比较权重,谁的权重大，浏览器就会显示谁的属性

/*这里是01-css高级选择器.css文件中的内容*/


id的数量 class的数量 标签的数量
/*1  0  0 */显示红色
#pid{  # id选择器
    color: red; 
}
/*0  1  0*/
.pclass{  # 类选择器
    color: yellow;
}
/*0  0  1*/
p{  # 标签选择器
    color: purple;
}

#Box1 #Box2 p{  #显示黄色
    color: yellow;
}

#Box2 .wrap3 p{
    color: red;
}

div div #Box3 p{
    color: purple;
}


div.wrap1 div.wrap2 div.wrap3 p{
    color: blue;
}

更多权重测试

#Box2 .wrap3 p{
    color: yellow;
}

#Box1 .wrap2 p{  # 显示红色
    color: red;
}

权重一样(都不为0,即都选中了目标标签),按照默认顺序渲染,后来者居上(前面的被覆盖)

二:都没选中目标标签 ,比较距离:

继承来的权重都是0,那么就是"就近原则" ：谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层(目标标签)的距离越近。

#Box1 #Box2 .wrap3{ # 显示红色,因为距离目标元素"近"
    color: red;
}
.wrap1 #Box2{
    color: green;
}

三:有选中,有继承,选中的大于继承的:继承来的属性，它的权重为0。

#Box1 #Box2 .wrap3{ # 继承的
    color: red;
}
        
#Box2 .wrap3 p{ # 结果为绿色,因为选中的大于继承的
    color: green;
}

总结：
1.先看标签元素有没有被选中，

如果都选中了，就数权重（id,class,标签的数量）:
- 　　谁的权重大就显示谁的属性;
- 　　权重一样大，后来者居上.
如果有没有选中的标签元素(没有选中标签元素(即通过继承)的权重为0):
- 都是继承下来的,权重都是0 ==>"就近原则" ：谁描述的近，就显示谁的属性
- 一个是继承,一个是选中==>选中的大于继承的权重

!important 的使用

除此之外还可以通过添加 !important方式来强制让样式生效，不讲道理的操作，但并不推荐使用。因为使用它会影响页面的布局,如果过多的使用!important会使样式文件混乱不易维护，使用方法：

#Box1 #Box2 .wrap3{
    color: red !important;
}

#Box2 .wrap3{
    color: blue !important;
}

注意:

!important 设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。

今日内容小结:

# HTML文件引入CSS的方式:
1 行内样式
    在标签中添加一个style属性,属性值写要设置的样式
2 内接样式
    添加一个style标签,在标签中写要设置的样式
3 外接样式
    添加一个link标签,在href中指定要导入的css样式文件的路径
    在css样式文件中写样式

# 基本选择器
1 标签选择器
    直接写标签名
2 id选择器
    #id
3 class类选择器
    .类名


# 高级选择器
1 子类选择器
    用 大于号
    选择的是前一级标签的子标签

2 后代选择器
    用 空格
    选择的是前一级标签的后代标签
3 并集选择器
    用 逗号
    选择所有符合条件的标签
4 交集选择器
    开头是标签名 后边跟id或类选择器(注意,没有空格)

5 通用选择器
    * 选择所有的标签

6 属性选择器
    1 [属性名]  带这个属性名的标签
    2 [属性名=‘要匹配的属性值‘] 带有属性,属性的名符合匹配要求
    3 [属性名^=‘属性值的开头字符串‘]
    4 [属性名$=‘属性值的结尾字符串‘]
    5 [属性名*=‘属性值包含的字符串‘]

7 伪类选择器
    a:    love HAte
        四种状态:   未被访问的链接  link
                    访问过的链接   visited
                    鼠标悬停的样式  hover
                    鼠标按下时的样式 active

    选择第一个孩子:
        :first-child
    选择最后一个孩子:
        :last-child
    选择指定的孩子:
        nth-child(n)

    p:first-letter :选择第一个字符
    p:before在标签前边添加一个标签内容
    p:after在标签后边添加一个标签内容

8 继承性
    字标签可以继承父标签的样式: color,font-,text- line-

9 层叠性
    (选择器权重一样的时候)后边添加的样式会覆盖前边的样式

10 权重
    id 权重100
    类 权重10
    标签  权重 1
    !important 权重无限大

    都有!important 的时候,比较权重

前端CSS