四十、前端基础之CSS

　一、CSS介绍

现在的互联网前端分三层：

HTML：超文本标记语言。从语义的角度描述页面结构。
CSS：层叠样式表。从审美的角度负责页面样式。
JS：JavaScript 。从交互的角度描述页面行为

CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能。

css的最新版本是css3，我们目前学习的是css2.1

接下来我们要讲一下为什么要使用CSS。

HTML的缺陷：

不能够适应多种设备
要求浏览器必须智能化足够庞大
数据和显示没有分开
功能不够强大

CSS 优点：

使数据和显示分开
降低网络流量
使整个网站视觉效果一致
使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）

比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。

二、CSS的引入方式

1.行内样式

<p style="color: black;">你们一定努力啊!</p>

2.内接样式

<style type="text">
    /*写我们的css代码*/
        
    span{
    color: yellow;
    }

</style>

3.外接样式-链接式

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

4.外接样式-导入式

<style type="text/css">
        @import url('./index.css');
</style>

三、CSS选择器

基本选择器：

　　1.标签选择器

<style>
/*标签选择器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}
</style>

　　2.类选择器

 <style>
        /*类选择器:点+类名*/
        .c1 {
            color: yellow;
    </style>
<body>
<p  class="c1">天下唯我独尊~</p>
</body>

注意：

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

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

　　3.id选择器

    <style>
      
    /*    id选择器:#+id值*/
       #d1 {
            color: green;
        }
    </style>
<body>
<div id="d1">老板好 我是23号技师 很高兴为您服务~  换一个!
<p  class="c1">天下唯我独尊~</p>
</div>
</body>

4.通用/全局选择器

    <style>
    /*   通用/全局选择器 */
        * {
            color: blue;
        }
    </style>
<body>
<div id="d1">老板好 我是23号技师 很高兴为您服务~  换一个!
<p  class="c1">天下唯我独尊~</p>
</div>
<div>老板好 我是23号技师 很高兴为您服务~  换一个!</div>

<p id="d2">天下唯我独尊~</p>
<span>尊 尊 尊 尊你妹尊</span>
<span  class="c1">尊 尊 尊 尊你妹尊</span>
</body>

四、高级选择器

1.后代选择器

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

   /*后代选择器*/
        div span {
            color: red;
        }

2.儿子选择器

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

    /*    儿子选择器*/
        div>span {
            color: aqua;
        }

3.毗邻选择器

比如紧挨这</div>下面标签<span>fegdrgdg</span>

   /*    毗邻选择器:紧挨着的下面的一个*/
        div+span {
            color: orange;
        }

4.弟弟选择器

比如：和<div>标签同一级别</span>不镶嵌，在外面的所有标签都是弟弟

 /*    弟弟选择器:同级别的下面所有的标签*/
        div~span {
            color: brown;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        div span {
            color: red;
        }
    /*    儿子选择器*/
        div>span {
            color: aqua;
        }
    /*    毗邻选择器:紧挨着的下面的一个*/
        div+span {
            color: orange;
        }
    /*    弟弟选择器:同级别的下面所有的标签*/
        div~span {
            color: brown;
        }
    </style>
</head>
<body>
<span>div上面第一个span</span>
<span>div上面第二个span</span>
<div>div
    <span>div里面的第一个span</span>
    <p>div里面的第一个p
        <span>div里面的第一个p里面的span</span>
    </p>
    <span>div里面最后一个span</span>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>
<span>div下面的第三个span</span>
</body>
</html>

html

五、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        1.具有某个属性名
        2.具有某个属性名及属性值
        3.具有某个属性名及属性值某个标签
        */
        /*找只要有hobby这个属性名的所有标签*/
        /*[hobby] {*/
        /*    background-color: red;*/
        /*    color: orange;*/
        /*}*/

        /*[hobby="jdb"] {*/
        /*    background-color: pink;*/
        /*}*/
        /*找input 具有属性名是hobby并且值是jdb的input标签*/
        input[hobby="jdb"] {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">span</span>
</body>
</html>

六、分组和嵌套

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

例如：

div, p {
  color: red;
}

上面的代码为div标签和p标签统一设置字体为红色。

通常，我们会分两行来写，更清晰:

div,
p {
  color: red;
}

嵌套

多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。用空格隔开表示

.c1 p {
  color: red;
}

七、伪类选择器

简单来说就是页面颜色和被鼠标放上或者点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*连接态*/
        a:link {
            color: pink;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: red;
        }
        /*鼠标点击态*/
        a:active {
            color: purple;
        }
        /*访问过后的状态*/
        a:visited {
            color: dimgrey;
        }
    /*    input框被点击的状态 称之为获取焦点*/
        input:focus {
            background-color: orange;
        }
        input:hover {
            background-color: red;
        }

    </style>
</head>
<body>
<a href="https://www.chouti.com">click me!</a>
<input type="text">
</body>
</html>

八、伪元素选择器

first-letter

常用的给首字母设置特殊样式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用于清除浮动。

九、选择器优先级

行内 > id选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
    <style>
        /*
            1.选择器相同的情况下:就近原则
            2.选择器不同的情况下:


            行内  > id选择器 > 类选择器  > 标签选择器
        */
        #d1 {
            color: red;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: greenyellow;*/
        /*}*/

    </style>
</head>
<body>
<p id="d1" class="c1" style="color: red">快要下课了,我想吃饭了!</p>
</body>
</html>