32 CSSCSS是指层叠样式表，通过CSS可以让我们定义HTML元素如何显示，可以使原本HTML不能描述的效果，通过C

1 CSS

CSS是指层叠样式表，通过CSS可以让我们定义HTML元素如何显示，可以使原本HTML不能描述的效果，通过CSS展示出来，总而言之CSS是可以使我们的HTML页面更加美观。

下面介绍CSS与HTML结合方式：

内联/行内样式在HTML标签上通过style属性引用CSS代码(优点：简单方便；缺点：只能对一个标签进行修饰)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=《《, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: aqua;"> hello ,CSS</div>
</body>
</html>

内部样式表通过style标签来声明CSS，style标签一般建议写在head和body之间(优点：可以通过多个标签进行统一的样式设置；缺点：只能在本页面上进行修饰)。语法：选择器{属性:值;属性:值}。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=《《, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        color: aquamarine;
    }
</style>
<body>
    <div> hello ,CSS</div>
</body>
</html>

外部样式表单独创建一个CSS文件，在head标签中通过link标签进行引用外部CSS样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=《《, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css01.css">
</head>
<body>
    <div> hello ,CSS</div>
</body>
</html>

div{
    color:blueviolet;
}

除此之外引入外部样式表还可以通过以下方式引入

<style>
  @import 'css01.css'
</style>

关于上面外部导入CSS使用link标签和@import的区别：

加载顺序不同：import方式会先加载html，然后再加载css，这样对于网络状况不好的情况下，就会先看到无修饰的页面，之后才能看到修饰的页面；link方式会先加载css，之后再加载html，这样我们看到的就是修饰后的页面
import方式导入css样式表，是不支持javascript的动态修改，而link方式支持

样式表的优先级：内联 > 内部 > 外部

2 CSS选择器

CSS中的选择器有：元素标签选择器、类选择器、id选择器、选择器组以及派生选择器。

元素标签选择器

对页面上相同的标签进行统一的设置，它描述的就是标签的名称

<style>
    h3{
        color: aqua;
    }
    
</style>
<body>
    <h3> hello ,CSS</h3>
    <h3> hello ,Java</h3>
    <h3> hello ,Pyhton</h3>

</body>

类选择器

类选择器在使用的时候使用"."来描述，它描述的是元素上的class属性值

<style>
    h3{
        color: aqua;
    }
    .a{
        color: greenyellow;
    }
    
</style>
<body>
    <h3> hello ,CSS</h3>
    <div class="a">hello</div>

</body>

id选择器

只能选择一个元素，因为id是唯一的，使用#号引入，引入的是元素的id属性值

<style>
    h3{
        color: aqua;
    }
    .a{
        color: greenyellow;
    }
    #z{
        color: blueviolet;
    }
    
</style>
<body>
    <h3> hello ,CSS</h3>
    <div class="a">hello</div>
    <div id="z">study with me</div>

</body>

选择器组

当需要同时选择多个对象时，就需要使用选择器组，每个选择器之间用逗号隔开

<style>
    h3,.a,#z{
        color: aqua;
    }
    
</style>
<body>
    <h3> hello ,CSS</h3>
    <div class="a">hello</div>
    <div id="z">study with me</div>

</body>

派生选择器

派生选择器有两种：一种是子代之间：父子关系，隔代不管；另一种是后代都包括：父子孙关系等等所有后代

<style>
  	/*子代之间 *，只有儿子这一代受影响/
    div>p{
        color: brown;
    }
    
    
</style>
<body>
    <div>
        <p>数学</p>  
        <p>英语</p>
        <span>
            <P>政治</P>
        </span>
    </div>
    
</body>

<style>
    /*后代之间，所有后代都会受影响 */
    div p{
        color: brown;
    }
    
    
</style>
<body>
    <div>
        <p>数学</p>
        <p>英语</p>
        <span>
            <P>政治</P>
        </span>
    </div>
    
</body>

CSS伪类

CSS伪类可以对CSS的选择器添加一些特殊效果，伪类的属性列表是：

:active 向被激活的的元素添加样式
:hover 当鼠标悬停在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child: 向元素的第一个子元素添加样式

需要特别注意的是：超链接的伪类要遵守使用顺序，即爱恨原则LoveHAte(lvha)

<style>
    a:link{
        color: aliceblue;
    }
    a:visited{
        color: black;
    }
    a:hover{
        color: aqua;
    }
    a:active{
        color: blue;
    }
    
    
</style>
<body>
    <a href="http://baidu.com">我是百度</a>
    
</body>

3 CSS基本属性

文本属性

指定字体：font-family:value
字体大小：font-size:value 有两种单位px和em，前一个是像素，后一个是倍数
字体加粗：font-weight:normal/bold
文本颜色：color:value
文本排列：text-align:left/center/right
文本修饰：text-decoration:none/underline
行高：line-height:value
首行文本缩进：text-indent:value(2 em 表示缩进2个字符)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=《《, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .a{
        text-align: center;
    }
    .b{
        font-weight: bold;
    }
    .c{
        text-indent: 2em;
        color: red;
    }

    
    
</style>
<body>
    <p class="a">study with me</p>
    <p class="b">china</p>
    <p class="c">造车路漫漫，相信当下的雷军已经做好了准备，期待，小米汽车早日到来！

    </p>
    
</body>
</html>

背景属性

CSS中允许纯色作为背景，也可以是使用背景图片创建复杂的效果，相关的属性列表是：

background-color：设置元素的背景颜色
background-image: 将图片设为背景
background-repeat:奢姿背景图片的墙纸效果，是否以及如何重复，可以取值：repeat 在垂直和水平方向上重复，为重复值；

repeat-x 只在水平方向上重复；repeat-y 只在垂直方向上重复；no-repeat 仅显示一次。
background-position:设置背景图片的起始位置

参数是两个值，第一个是控制水平方向X轴：正值向右移动，负值相反向左移动；第二个是控制垂直方向Y轴：正值向下移动，负值向上移动
background-attachment 背景图片是否固定或者随着页面的其余部分滚动，默认值为scroll背景随文档滚动；取值为fixed则背景图片固定，不会随页面的其余部分滚动，多用于实现称为水印的图像

<style>
    div{
        width: 500px;
        background-color: antiquewhite;
        background-image: url("u=2050446265\,2844443437&fm=26&gp=0.jpeg");
        background-repeat: no-repeat;
        background-position: 0px 10px;
        background-attachment:fixed;
    }

    
    
</style>
<body>
    <div>
    <p>对于造车这件事，雷军非常清醒和理智，他非常清楚汽车行业的风险，汽车工业非常复杂，投入巨大无比，动辄就是几十亿上百亿的投资，而且周期特别长，至少要干三五年才能见效，弄得不好就很容易翻船，掉到坑里去。</p>

    <p>作为外行，想搞懂这些绝非易事。但雷军也绝非完全的外行。</p>
        
    <p>公开资料显示，小米在2014年投资了地图厂商凯立德；2015年雷军创立的顺为资本投资了蔚来；2016年和2019年，顺为资本两次投资小鹏；2020年4月，小米又以战略投资者身份参与车载服务系统厂商博泰的B轮融资。</p>    
    <P>多次在汽车领域的投资，让雷军早以看清楚造车到底会遇到多少困难和挑战。这也是他之前迟迟未能下定决心去亲自造车的一个原因。</P>    
        
    <p>手机厂商跨界造车，也必然意味着将面临更多挑战。</p>         
        
    </div>  
    
</body>

列表属性

CSS列表属性作用是：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

使用CSS，可以列出进一步的样式，并可用图像作列表项标记，具体属性如下：

none：无标记
disc：默认标记实心圆
circle：标记是空心圆
square：标记是实心方块
decimal：标记是数字
decimal-leading-zero：0开头的数字标记
lower-roman：小写罗马数字
upper-roman：大写罗马数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母

<style>
  ul.a{
      list-style-type:circle;
  }  
  ol.b{
      list-style-type: lower-roman;
  }

    
    
</style>
<body>
    <ul class="a">
        <li>Java</li>
        <li>Go</li>
        <li>Python</li>
    </ul>
    <ol class="b">
        <li>樱桃</li>
        <li>车厘子</li>
        <li>草莓</li>
    </ol>
 
</body>

简单的导航栏案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=《《, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
  li{
      float: left;
      width: 150px;
      background-color: black;
      color: white;
      text-align: center;
      line-height: 40px;
      font-size: 1.1em;
      list-style-type: none;
      cursor: pointer;
  }
  li:hover{
      background-color: orange;
      font-weight: bold;
      line-height: 48px;
  }

    
    
</style>
<body>
    <ul>
        <li>斗罗大陆</li>
        <li>凡人修仙转</li>
        <li>拉勾教育</li>

    </ul>
 
</body>
</html>

边框属性

CSS边框属性可以指定一个元素的边框的样式和颜色，具体属性列表如下：

border-width：设置边框宽度
border-color：设置边框颜色
border-style：设置边框样式

关于border-style的属性取值有：

none 默认无边框
dotted 点线边框
dashed 虚线边框
solid 实线边框
double 定义两个边框，两个边框的属性值相同
groove 定义3D凹槽边框
ridge 3D脊边框
inset 3D的嵌入边框
outset 3D突出边框

<style>
    div{
        border-width: 20px;
        border-color: aquamarine;
        border-style: outset;
    }


    
    
</style>
<body>
    <div>hello,csss</div>
 
</body>

轮廓属性

轮廓是绘制元素周围的一条线，位于边框边缘的外围，可以起到突出元素的作用，这里很容里区分不开轮廓和边框，两者之间的区别是：

边框可以围绕元素内容和内边距的一条或者多条线
轮廓是绘制于元素都为的一条线，位于边框边缘的外围，可起到突出元素的作用

<style>
    div{
        border-width: 20px;
        border-color: aquamarine;
        border-style: ridge;
        outline: 5px royalblue dashed;
    }


    
    
</style>
<body>
    <div>hello,csss</div>
 
</body>

4 盒子模型

所有的HTML元素都可以看做盒子，而CSS的盒子模型就是用于对盒子进行布局。CSS盒子模型本质上就是一个盒子，封装周围的HTML元素，包括：边距、边框、填充以及实际内容。同时在盒子模型中允许在其他元素和周围边框之间的空白处放置元素

margin外边距，是指盒子与盒子之间的距离

border边框，盒子的保护壳

padding内边距，主要填充盒子边与内容之间的空白

content内容，盒子的主要内容，可以是文本或者图像

<style>
    div{
        border: 2px red solid;
        margin: 10px;
        padding: 20px;
        
    }


    
    
</style>
<body>
    <div><img src="u=2050446265,2844443437&fm=26&gp=0.jpeg" ></div>
 
</body>

5 CSS定位

CSS定位有默认定位、浮动定位、相对定位、绝对定位、固定定位以及z-index，下面会详细介绍这几种定位：

默认定位

首先是块级元素：h1~h6，p，div等，自上而下，垂直排列(自动换行)；可以改变高度和宽度。

其次行内元素：a，b，span等，从左向右，水平排列(不会换行)；不能改变宽高。

最后是行内块元素：input、img等，从左向右，水平排列(自动换行)；可以改变宽高。

浮动定位

可以是元素浮动起来，不仅可以靠左边还可以靠右边。值得注意的是浮动定位可以消除"块级元素"的霸道特性(独自占一行)

要想浮动起来，使用float属性，取值是none不变动、left向左、right向右。

<style>
    .wai{
        border: 1px black solid;
        width: 300px;
        height: 300px;
    }
    .a,.b{
        width: 80px;
        height: 80px;
    }
    .a{
        float: left;
        background-color: antiquewhite;
        margin: 10px;

    }
    .b{
        float: right;
        background-color: aqua;
        margin: 10px;
    }


    
    
</style>
<body>
    <div class="wai">
        <div class="a"></div>
        <div class="b"></div>
    </div>
 
</body>

相对定位

和原来位置进行比较，进行移动定位(简单理解就是偏移)，使用相对定位需要将position属性值设为relative

<style>
    .wai{
        border: 1px black solid;
        width: 300px;
        height: 300px;
    }
    .a,.b{
        width: 80px;
        height: 80px;
    }
    .a{
        background-color: antiquewhite;

    }
    .b{
        background-color: aqua;
        position: relative;
        top: 20px;
        left: 50px;
       
    }


    
    
</style>
<body>
    <div class="wai">
        <div class="a"></div>
        <div class="b"></div>
    </div>
 
</body>

绝对定位

绝对定位是本元素与已定位的祖先元素的距离，关于祖先元素的选择有以下规则：

如果父级元素定位了，就以父级为参照物
如果父级元素没定位，找爷爷级元素，爷爷定位了，就以爷爷为参照物
若果爷爷也未定位，继续向上面找，都没定位的话，body就是最终选择

<style>
    .yeye{
        width: 400px;
        height: 250px;
        background: olive;
        padding: 20px;
    }
    .father{
        width: 300px;
        height: 200px;
        background: black;
        padding: 20px;
        position: relative;
    }
    .a,.b{
        width: 200px;
        height: 60px;
    }
    .a{
        background-color: antiquewhite;

    }
    .b{
        background-color: aqua;
        position: absolute;
        top: 30px;
        left: 30px;
       
    }


    
    
</style>
<body>
    <div class="yeye">
        <div class="father">
            <div class="a"></div>
            <div class="b"></div>
        </div>
    </div>
 
</body>

固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动。使用相对定位需要将position属性值设为fixed

<style>
    .a{
        background-color: antiquewhite;
        width: 200px;
        height: 200px;
        background-color: azure;
        position: fixed;
        top: 20px;
        left: 100px;

    }
</style>
<body>
    <div class="a">1</div>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
    <h1>study with me</h1>
 
</body>

z-index

当元素有重叠的时候，使用z轴属性，定义上下层次

<style>
    .a{
        width: 100px;
        height: 60px;
        background: brown;
        position: relative;
        z-index: 3;

    }
    .b{
        width: 100px;
        height: 60px;
        background:blue;
        position: relative;
        z-index: 6;
        top: -30px;
        left: 20px;

    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    
</body>

注意事项：

Z轴属性，要配合相对定位和绝对定位来使用
Z值没有固定的数值，只要是整型

6 CSS3

CSS3中新增了很多新特性，具体介绍如下：

6.1 圆角

border-radius：左上右上右下左下(给出四个圆角的弯曲量)

border-radius：四个角

border-radius：50% 就是圆形

<style>
    .a{
        width: 100px;
        height: 60px;
        background: brown;
        position: relative;
        z-index: 3;
        border: 2px black solid;
        border-radius: 50%;

    }
</style>
<body>
    <div class="a"></div>
    
</body>

6.2 盒子阴影

盒子阴影对应的属性是box-shadow: 1 2 3 4 5，取值如下：

水平偏移
垂直偏移
模糊半径
扩张半径
颜色

<style>
    .a{
        width: 100px;
        height: 100px;
        box-shadow: 20px 20px 30px 10px grey;

    }
</style>
<body>
    <div class="a"></div>
    
</body>

6.3 渐变

渐变效果分为线性渐变和径向渐变，首先看线性渐变 background:linear-gradient([方向/角度]，颜色列表)

<style>
    .a{
        width: 200px;
        height: 60px;
        margin: 10px;
        background: linear-gradient(to top left,red,black);

    }
</style>
<body>
    <div class="a"></div>
    
</body>

再看径向渐变，是以圆心向外发散，background：radial-gradient(颜色列表)

<style>
    .a{
        width: 200px;
        height: 200px;
        margin: 10px;
        background: radial-gradient(red,black,pink,green);
        border-radius: 50%;

    }
</style>
<body>
    <div class="a"></div>
    
</body>

6.4 背景位置

background-origin：指定背景图像的位置区域，具体属性如下：

border-box：背景贴边框的边
padding-box：背景贴内边框的边
content-box：背景贴内容的边

<style>
    div{
        background: url("u=2050446265\,2844443437&fm=26&gp=0.jpeg") no-repeat;
        width: 360px;
        height: 100px;
        margin: 30px;
        border: 10px dashed black;
        padding: 20px;
    }
    .a{
        background-origin: border-box;

    }
    .b{
        background-origin: padding-box;
    }
    .c{
        background-origin: content-box;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="b"></div>
    
</body>

6.5背景裁切

背景裁切background-clip，具体取值如下：

border-box：边框开切
padding-box 内边距开切
content-box：内容开切

<style>
    div{
        background: url("u=2050446265\,2844443437&fm=26&gp=0.jpeg") no-repeat;
        width: 200px;
        height: 80px;
        margin: 20px;
        border: 10px dashed red;
        padding: 20px;
    }
    .a{
       background-clip: border-box;

    }
    .b{
        background-clip: padding-box;
    }
    .c{
        background-clip: content-box;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="b"></div>
    
</body>

6.6 背景大小

背景大小background-size，取值如下：

cover缩放成完全覆盖背景区域最小大小
contain缩放成完全适应背景区域最大大小

<style>
    div{
        background: url("u=2050446265\,2844443437&fm=26&gp=0.jpeg") no-repeat;
        width: 200px;
        height: 100px;
        margin: 20px;
        border: 2px solid red;
    }
    .a{
       background-size: cover;

    }
    .b{
        background-size: contain;
    }
</style>
<body>
    <div class="a"></div>
    <div class="b"></div>
    
</body>

6.7 过渡

从一个状态到另一个状态，中间的"缓慢"过程，缺点是是无法控制中间某个时间点。

transition{1 2 3 4} 其中各个参数的的含义是：

过渡或动画模拟的CSS属性
完成过渡所使用的时间
过渡函数
过渡开始出现的延迟时间

过渡函数有：liner 匀速 ease逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速

实例

transition: width 2s ease 1s

目前CSS只开发出部分的过渡属性，下图所示:

<style>
    div{
        width: 100px;
        height: 50px;
        border: 2px solid red;
    }
    .a{
       transition: width 2s linear 1s;

    }
    div:hover{
        width: 300px;
    }
</style>
<body>
    <div class="a">hello,CSS/div>
    
    
</body>

6.8 动画

从一个状态到另一个状态，过程中每个时间点可以控制。

关键帧：@keyframes 动画帧 {from{} to {}}或者{ 0%{} 20%{}....}

动画属性: animation{1,2,3,4,5}

动画帧
执行时间
过渡函数
动画执行的延迟(可省略)
动画执行次数

下面有两个需求：

一个元素从左向右移动，3秒内执行2次

<style>
    div{
        width: 700px;
        border: 1px solid red;
    }
    @keyframes x{
        from{ margin-left: 0px;}
        to{ margin-left: 550px;}
    }
    img{
        animation: x 3s linear 2;
    }
</style>
<body>
    <div>
        <img src="u=2050446265,2844443437&fm=26&gp=0.jpeg" >
    </div>
    
</body>

一个元素从左向右移动，3秒内执行完成，无限次交替执行

infinite：无限次

alternate：来回执行(交替，一去一回)

<style>
    .wai{
        width: 600px;
        height: 100px;
        border: 2px solid red;
    }
    .nei{
        width: 40px;
        height: 80px;
        margin: 5px;
        background: royalblue;
        animation: x 3s linear infinite alternate;
    }
    @keyframes x{
        0%{ margin-left: 0px;}
        25%{ background: yellowgreen;}
        50%{ background:goldenrod}
        75%{ background: palegoldenrod;}
        100%{
            background: coral;
            margin-left: 550px;
        }

    }
    
</style>
<body>
    <div class="wai">
        <div class="nei"></div>
    </div>
    
</body>