CSS之路

css的目的是为了让网页更美观.

CSS规则由两个主要部分构成:选择器,以及一条或多条样式声明.

下面我们来看一下例子,首先我们在head里插入一个style标签,在里面写入一个针对h3标签的CSS规则

    <style>
        h3{
            color: blue;
            font-size: 20px;

        }

    </style>

在body中写入一个h3的标签

<h3>标题内容</h3>

这时候我们就可以发现 h3标签的颜色,和字体大小如我们所写的那样发生了变化.

写CSS规则的时候要注意,每条规则要用 ; 号分割开来

关于CSS样式的方法,一共有三种,

第一种单个样式

<p style="background-color: yellow;font-size: 30px;">这是一个P标签</p>
<p style="background-color: yellow;font-size: 30px;">这是一个P标签</p>

我们可以在任何标签上加上style属性,来设置他的css样式,同样是用 ; 号分隔每种样式

这样做的缺点是,针对每个标签都要设置一次,产生了大量的重复代码,所以如果没有特殊需要一般不会这样做

第二种,内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            background-color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>


<h3>标题内容</h3>
<p>这是一个P标签</p>
<p>这是一个P标签</p>



</body>
</html>

我们在style标签中写入一个针对p标签的样式,同样设置了背景色和字体大小

随后,body中的所有p标签都会被应用上这个css样式,这样就大大的减少了代码的重复量.

第三种,外部样式

当有多个页面需要应用css样式的时候,我们可以单独写一个css文件,然后在需要应用该CSS样式的页面引用这个CSS文件.,比如我们在根目录创建一个public.css.写入内容

p{
    color: red;
    font-size: 40px;
}

然后我们在index.html中写入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
</head>
<body>


<h3>标题内容</h3>
<p>这是一个P标签</p>
<p>这是一个P标签</p>



</body>
</html>

可以看到当<link rel="stylesheet" href="./public.css">

引入了CSS文件后,我们的P标签直接有了颜色和大小

外部标签的好处是,我们只需要修改一次,即可让所有页面的样式都随之而改变.

选择器

我们之前看了尝试了对P标签,和h3标签进行CSS样式修改,我们知道p{}代表选择p标签

那么我们现在来着重看看选择器.

首先我们可以用*来代表页面中的所有标签.

    <style>
        *{
            font-size: 40px;
        }
    </style>

这表示页面中所有标签的字体大小都为40px,不论他是p标签还是ul标签还是h1标签

而如果写上具体标签名,则会选择该页面下所有的该标签,无论此标签隐藏的有多深.

        p{
            color: red;
        }

我们可以对所有标签来进行选择.包括div span 等等

但是实际使用中我们可能会遇到一个情况,比如p标签,我并不想对所有p标签都这么操作,而是要对一部分进行操作,那要怎么做呢 .

我们可以用类选择器方法为 .号加类class名

比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
        color: red;
        }
    </style>
</head>
<body>


<h3 class="one">标题内容</h3>
<p>这是一个P标签</p>
<p class="one">这是一个P标签</p>
<p class="one">这是一个P标签</p>
<p class="one">这是一个P标签</p>

<p>这是一个P标签</p>



</body>
</html>

我们可以看出,所有class="one"的p标签,都有了颜色,就连h3也有了红色

这是因为类选择器只针对class来进行选择,而不针对具体哪个标签.

同一个标签,可以应用多个class 用空格隔开.

比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
        color: red;
        }
        .two{
            font-size: 50px;
        }
    </style>
</head>
<body>


<h3 class="one">标题内容</h3>
<p>这是一个P标签</p>
<p class="one two">这是一个P标签</p>
<p>这是一个P标签</p>



</body>
</html>

我们可以看到应用了one和two的p标签除了颜色变为了红色,大小也变成了50px

除了类选择器,还有ID选择器,需要注意的是,因为html文件中 id被要求是唯一的,所以id选择器其实是只针对某个特定的标签生效.

id选择器通过#ID名 {} 来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            color: red;
            font-size: 40px;
        }
    </style>
</head>
<body>


<h3>标题内容</h3>
<p>这是一个P标签</p>
<p id="one">这是一个P标签</p>
<p>这是一个P标签</p>


</body>
</html>

标签选择器还可以对多个标签同时选择:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one,.two{
        color: red;
        font-size: 50px;
        }
    </style>
</head>
<body>


<h3>标题内容</h3>
<p class="one">这是一个P标签</p>
<p class="two">这是一个P标签</p>


</body>
</html>

可以看到one和two两个样式的标签都被赋予了样式.

不仅仅是类选择器可以多选,元素选择器一样可以多选,语法一样,用逗号隔开即可

    <style>
        h3,p{
        color: red;
        font-size: 50px;
        }
    </style>

那么到这里我们可能会有一个疑问,如果我写了多个样式,比如我p标签有格式,然后有某些p标签还有class类,那么到底以哪个为准呢.

实际上,选择器是有优先级的.权重如下:

元素选择器的权重是1

class选择器的权重为10

ID选择器的权重为100

内联样式的权重为1000

优先级从高到低,内联样式>ID选择器>类选择器>元素选择器

所以说,直接在标签上写 style="xxxx" 这个优先级是最高的.

字体属性 font属性

话不多说,详情看代码中的注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
        color: red;  /* 字体颜色   也可以用 #xxxxxx 的形式,也可以用rgb(0,0,0)的形式*/
        font-size: 50px; /* 字体大小 */
        font-weight: bold; /* 字体粗细   bold--粗体 bolder--更粗 lighter--更细 ,也可以用100-900的数字来定义*/
        font-style: normal; /* 字体样式  normal--正常 italic--斜体*/
        font-family:'微软雅黑'; /* 字体族  可以用逗号分隔多个字体族,如果第一个字体族不存在,则会使用第二个字体族,以此类推*/;
        text-align: center; /* 文本对齐方式  */
        }
    </style>
</head>
<body>
    <p>字体属性演示</p>
</body>
</html>

背景色和背景图片设置

也是看代码注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: red;
        }
        .box2{
            width: 400px;
            height: 400px;
            background-image: url('test.webp');
            background-repeat: repeat;/* 背景图片的填充方式 默认repeat是水平和垂直都重复 repeat-x repeat-y no-repeat*/
            background-size: 100px 100px;/* 背景图片的大小 默认是auto 可以是具体的像素值 也可以是百分比 也可以用cover--不变形充满全屏  contain--保持横纵比尽可能放大*/
            background-position: left center;/* 背景图片的位置 默认是left top*/
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

表格设置

依然见代码的注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{ /* table表示给表格设置样式,加上TD表示单元格也设置这样的样式*/
            border: 3px solid #000; /* 表格边框 3像素  边框样式  颜色*/
        }
        table{
            border-collapse: collapse; /* 表格边框合并, 合并后边框变成单线而不是双线 */
            width: 300px; /* 表格宽度 */
            height: 200px; /* 表格高度 */
            
        }
        td{
            text-align: center; /* 文字水平居中 可以有left center right */
            vertical-align: top;/* 文字垂直对齐,可以有 top center bottom*/
            padding: 10px; /* 内边距,单元格内容和上下左右之间的距离 ,一个值的时候代表上下左右,如果用空格分割两个值,那么第一个值代表上下,第二个值代表左右 */
            background-color: aquamarine;/* 背景颜色 */
            color: #fff; /* 文字颜色 */
        }


    </style>
</head>
<body>
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
</body>
</html>

选择器

后代选择器 A空格B

先看如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <div>
            <ol>
                <p>haha</p>
                <li>列表4</li>
                <li>列表5</li>
            </ol>
        </div>
    </ul>

</body>
</html>

ul空格li的意思表示选择ul下面的所有li标签,注意是所有,包括子标签和孙辈标签,只要是li标签,都会应用该CSS规则

子代选择器 A>B

表示只对子标签有效,孙辈以下的标签将不会被应用,看代码

    <style>
        ul>li{
            color: red;
        }
    </style>

ul>li 表示只应用该ul下的li,再深一层以上则无效.

相邻选择器 A+B

选择一个标签,对他相邻的标签应用css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3+p{
            color: red;
        }
    </style>
</head>
<body>
<h3>我是标题</h3>
<p>我的内容1</p>
<p>我的内容2</p>
</body>
</html>

可以看到只有我的内容1 这个P标签被应用了样式.h3和另一个p标签纹丝不动

通用兄弟选择器 A~B

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3~p{
            color: red;
        }
    </style>
</head>
<body>
<h3>我是标题</h3>
<p>我的内容1</p>
<p>我的内容2</p>
<span>啊哈哈啊</span>
<p>我的内容3</p>
</body>
</html>

可以看到我的内容1,2,3 都能生效,意思是选择了h3标签,跟随他的后面的所有p标签都被应用了样式

元素的盒子模型

一个元素,从自身内容,周围还有内边距,边框,外边距,宛如一个盒子.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ /* 盒子模型 */
            width: 200px;  /* 元素自身宽度 */
            height: 200px;
            background-color: red;
            padding: 20px; /* 元素内边距 当只有一个值时是上下左右,如果用空格分割两个值,第一个是上下,第二个是左右 */
            border: 5px solid blue; /* 元素边框 */
            margin: 10px; /* 元素外边距 当只有一个值时是上下左右,如果用空格分割两个值,第一个是上下,第二个是左右 */

        }
    </style>
</head>
<body>
<div>
    <p>我是内容</p>
</div>
<p>我是p标签</p>
</body>
</html>

其中关于内边距和外边距,除了简单的上下左右,上下+左右,还可以单独定义任何一个方向.

    <style>
        div{ /* 盒子模型 */
            width: 200px;  /* 元素自身宽度 */
            height: 200px;
            background-color: red;
            border: 5px solid blue; /* 元素边框 */
            padding-left: 10px; /* 元素内边距 -左*/
            padding-right: 10px; /* 元素内边距 -右*/
            padding-top: 10px; /* 元素内边距 -上*/
            padding-bottom: 10px; /* 元素内边距 -下*/

            
            margin-left: 10px; /* 元素外边距 -左*/
            margin-right: 10px; /* 元素外边距 -右*/
            margin-top: 10px; /* 元素外边距 -上*/
            margin-bottom: 10px; /* 元素外边距 -下*/


        }
    </style>

弹性盒子 flex

这是一个css3的新特性,首先看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 400px;
            height: 400px;
            background-color: black;

        }
        .box1{
            width: 100px;
            height:100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height:100px;
            background-color: blue;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>
</html>

如果我们有3个div 放在一个container的div里那么我们可以看到这3个div是竖着放在container这个div里的.当我们给container这个div加上一个dispaly:flex 的弹性属性.就会发现这3个div变成了横向排列

注意:flex的特性是横向排列

如果我们需要改变排列的方向,可以用flex-direction属性修改,具体方法看代码

    <style>
        .container{
            width: 400px;
            height: 400px;
            background-color: black;
            display: flex;
            flex-direction: column; /* row-水平, column-垂直, row-reverse-水平翻转, column-reverse--垂直翻转 */


        }
        .box1{
            width: 100px;
            height:100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height:100px;
            background-color: blue;
        }

    </style>

justify-content属性,将内容对齐在弹性容器,沿主轴线对齐,有三种对齐方式,具体看代码注释

    <style>
        .container{
            width: 400px;
            height: 400px;
            background-color: black;
            display: flex;
            flex-direction: column; /* row-水平, column-垂直, row-reverse-水平翻转, column-reverse--垂直翻转 */


        }
        .box1{
            width: 100px;
            height:100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height:100px;
            background-color: blue;
        }

    </style>

align-items 设置元素在弹性盒子里,纵轴方向的对齐方式,有三种方式,看代码注释.

    <style>
        .container{
            width: 400px;
            height: 400px;
            background-color: black;
            display: flex;
            flex-direction: column; 
            justify-content: center;
            align-items: center;/*flex-start--贴着左边  center---居中  flex-end-----贴着右边 */

        }
        .box1{
            width: 100px;
            height:100px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height:100px;
            background-color: blue;
        }

    </style>

子元素布局属性 flex

如果我们有3个元素在一个弹性容器div里,我们需要的效果是 box1占宽度的百分之60,另外两个box占百分之20,不管这个弹性容器的具体宽度是多少,我们只需要设置flex属性

给box1设置3 另外两个设置1,即可.看代码

    <style>
        .container{
            width: 400px;
            height: 400px;
            background-color: black;
            display: flex;
            flex-direction: row; 
            justify-content: center;
            align-items: center;
        }
        .box1{
            width: 100px;
            height:100px;
            background-color: red;
            flex: 2;
        }
        .box2{
            width: 100px;
            height:100px;
            background-color: yellow;
            flex: 2;
        }
        .box3{
            width: 100px;
            height:100px;
            background-color: blue;
            flex: 1;
        }

    </style>

元素浮动 float

让元素浮动可以改变元素的排列方式,比如让块级标签变得可以并排排列起来.浮动只有左右浮动,没有上下浮动.

float有两个值,left和right,用来控制浮动的方向.

首先我们看一个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
        .container{
            width: 600px;
            height: 600px;
            background-color: green; 
        }


    </style>
</head>
<body>
    <div class="box"></div>
    <div class="container"></div>
</body>
</html>

本来box和container两个块级标签应该是上下排列的,但是如果给box加上一个float属性后,他就浮动到了和container一行.

再看下面这段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            float: left;

        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: blue; 
        }
        .box3{
            background-color: yellow;
        }
        .container{
            width: 600px;
            height: 600px;
            background-color: green; 
        }


    </style>
</head>
<body>

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>
</html>

可以看到,box1,box2,box3 这三个块级标签div本应垂直排列,变成了并排在container里排列

如果并排的位置无法容纳那会怎么样呢,我们将container的宽度改成500就会发现,排不下的内容就会另起一行,重新排列

但是浮动效果通常会带来一些不良的影响,比如看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin: 3px;
            float: left;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color:brown;
        }

        .container{
            width: 500px;
            background-color: #666; 
        }


    </style>
</head>
<body>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="test"></div>
</div>
</body>
</html>

这段代码中三个box标签和一个test标签在父级标签container中.通常我们开发的时候,由于并不能确定子标签的大小,所以通常我们是不设置父标签高度的.但是当子标签box被设置了一个浮动属性后.我们发现container标签的高度消失了.

这或许没有什么问题,但是我们再加上一个标签,test.不管这个test在container内还是外.他都不能正常显示.因为container没有高度,无法撑起一行.

针对这种不良的影响,我们有四种方法.

1.给父标签设置一个高度.

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin: 3px;
            float: left;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color:brown;
            margin: 3px;

        }

        .container{
            height: 500px;
            
            width: 500px;
            background-color: #666; 
        }
    </style>

2.给受影响的标签加上一个clear属性

clear属性有两个参数.left,right 分别用来清除受左边还是右边浮动标签的不良影响.

我们一般选用both,表示都清除.

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin: 3px;
            float: left;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color:brown;
            margin: 3px;
            clear:both

        }

        .container{
            width: 500px;
            background-color: #666; 
        }
    </style>

3.伪对象方式 after

    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin: 3px;
            float: left;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color:brown;
            margin: 3px;
        }

        .container{
            width: 500px;
            background-color: #666; 
        }
        .container::after{  /*伪元素*/
            content: "";
            display: block;
            clear: both;
        }
    </style>

4.也就是最常用的方式,overflow:hidden.同时为了消除同一父级元素受到的影响,我们也可以给同级受影响的元素加上clear:both

看下面的代码,我们加了两个test的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: hotpink;
            margin: 3px;
            float: left;
        }
        .test{
            width: 100px;
            height: 100px;
            background-color:brown;
            margin: 3px;
            clear: both;
        }

        .container{
            width: 500px;
            background-color: #666; 
            overflow: hidden;

        }

    </style>
</head>
<body>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="test"></div>
</div>
<div class="test"></div>
</body>
</html>

可以看到不论是同一个父级的,还是同级的.都没有收到浮动元素的不良影响.

定位:position

在css中我们还可以对元素进行定位,分为相对定位,绝对定位和固定定位

其中,绝对定位和固定定位会脱离文档流,让元素浮动在页面上,而相对定位还是在文档流内

相对定位 position:relative

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        div{
            width: 200px;
            height: 200px;

            background-color: red;
            position: relative;  /* 相对定位 */
            left: 200px;  /* 针对定位,离左边200px */
            top: 200px;  /* 针对定位,离上边200px */;
        }
        </style>
</head>
<body>
<div></div>
</body>
</html>

绝对定位position:absolute

绝对定位可以让元素浮动起来,脱离文档流.并且和浮动不同的是,浮动只有一层,所有浮动的元素相当于脱离了文档流,在文档流上面一层排列.所有浮动的元素也会互相干扰和排列

但是绝对定位是 ,你每设置一个positon,他就多一层,不同的绝度定位会互相堆叠,并且按代码的顺序来决定谁在最上面一层.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        .box1{
            width: 200px;
            height: 200px;

            background-color: red;
            position: absolute;  /* 绝对定位 */
            left: 100px;  /* 针对定位,离左边200px */
            top: 100px;  /* 针对定位,离上边200px */;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position:absolute;
            left: 150px;
            top: 150px;
        }
        .box3{
            width: 400px;
            height: 400px;
            background-color: blue;            
        }
        </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

可以看到 box1和box2都浮动在box3上并且box2还盖住了box1

固定定位:position:fixed

固定定位相对于绝对定位,他的区别是 ,固定定位是固定在屏幕的某个位置,当页面有滚动条的时候,他是不会随着滚动条而滚动的.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;

            background-color: red;
            position: fixed;  /* 固定定位 */
            right: 100px;  /* 针对定位,离右边200px */
            bottom: 100px;  /* 针对定位,离下边200px */;
        }
        .box3{
            width: 400px;
            height: 400px;
            background-color: blue;            
        }
        p{
            height: 400px;
        }
        </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
    <p>哈哈</p>
    <p>哈哈</p>
    <p>哈哈</p>
    <p>哈哈</p>
    <p>哈哈</p>
    <p>哈哈</p>
</div>
<div class="box3"></div>
</body>
</html>

我们设置了几个高度为400的p标签,这样让页面超过屏幕一屏显示.

同时我们设置了一个box1固定在屏幕右下角,可以看到随着我们拖动滚动条,box1始终在页面的右下角固定位置.

关于定位,我们需要注意的是,相对定位和绝对定位.如果他的父级元素是有定位的,那么这两个定位会基于他的父级元素而定位.如果没有,则继续找上一级,如果全部没有定位,则相对于文档而定位.

我们现在创建两个div box1是box3的父级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: red;
            margin-top: 100px;
            margin-left: 100px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;  
            position:absolute; 
            left: 50px;
            top: 50px; 
        }
        </style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
</body>
</html>

可以看到box3浮动在页面上,盖在了box1上面.这是因为 box1虽然包裹着box3,但是box3是浮动的.不会随着box1位置的移动而移动

那么我们给box1加上定位属性,不管是相对定位还是绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 400px;
            height: 400px;
            background-color: red;
            margin-top: 100px;
            margin-left: 100px;
            position: relative;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: blue;  
            position:absolute; 
            left: 50px;
            top: 50px; 
        }
        </style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
</body>
</html>

可以看到box3的定位是基于box1的位置了.而不是基于整个文档流.这就是定位的原则

关于定位最后我们在将一下绝对定位的堆叠顺序,通常默认情况下堆叠的顺序是按代码的顺序来的,写在最后的代码就是在最上层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua; 
            position: absolute;
            left: 50px;
            top:50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red; 
            position: absolute;
            left: 70px;
            top:70px;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow; 
            position: absolute;
            left: 90px;
            top:90px;
        }
        </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

这里我们可以看到box3盖在box2上,box2盖在box1上.

但是如果我们不想按这个顺序而是要自行调整需要怎么办呢通过z-index属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua; 
            position: absolute;
            left: 50px;
            top:50px;
            z-index: 30;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red; 
            position: absolute;
            left: 70px;
            top:70px;
            z-index: 20;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: yellow; 
            position: absolute;
            left: 90px;
            top:90px;
            z-index: 10;
        }
        </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

z-index值越大的,在最上面.通过设置z-index,我们就将box1改到了最上面.

圆角效果 border-radius

这是css3里的新特性可以让元素具有圆角的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            left: 400px;
            top: 400px;

            border-radius: 15px;
        }
    </style>
</head>
<body>
<div class="box1"></div>

</body>
</html>

我们创建一个div 通过定位将这个div移动到文档中间方便观看

我们给这个div加上border-radius属性让他具有圆角.

注意的是 :border-radius的值不只可以用px 也可以用百分比通常设置到50以上的百分比, 这个元素就会变成圆形.

border-radius: 50%;

同时 border-radius还可以同时赋多个值

四个值:第一个为左上,第二个右上,第三个右下,第四个左下

三个值:第一个为左上,第二个是右下和左下,第三个为右下

两个值:第一个为左上和右下,第二个为右上和左下,也就是对角

一个值:四边同等

阴影 :立体效果 box-shadow

可以给元素一个阴影让他看起来有立体的效果

box-shadow有4个值

box-shadow:h-shadow v-shadow blur color;

h-shadow:必选,水平阴影的位置

v-shadow:必选,垂直阴影的位置

blur,可选模糊距离

color:可选阴影的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 100px auto;
            box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
<div class="box1"></div>

</body>
</html>

这里我们就创建了一个div 他的阴影是灰色水平和垂直的阴影都是10px 距离也是10px

注意水平和垂直的阴影位置可以是负数,当他们是正的时候,阴影的位置在右下而是负的时候,则是左上

这里顺便提一下margin属性

margin可以有两个属性分别代表上下位置和左右位置 auto则表示居中

这里margin: 100px auto;表示离上边100px 左右自动居中.

动画效果 animation

可以利用css来做一些简单的动画效果

方法如下,首先我们要定义一个动画语法为 @keyframesmyanime@keyframs 加自定义动画名

通过0% 遮掩的方式来定义渐变的规则比如我们这里定义了3个规则,分别是0%的时候是什么样的,50%的时候是什么样的,100%又是什么样子的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myanime{
            0%{
                background-color: red;
            }
            50%{
                background-color: yellow;
            }
            100%{
                background-color: red;
            }
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

定义了动画,我们怎么调用这个动画呢

通过 animation来调用动画语法如下

animation: name duration timing-function delay iteration-count direction;

name:需要调用的动画名

duraition:动画持续的时间比如 2s 20ms 之类

timing-function:动画速率有如下值

　　　　　　ease:逐渐变慢(默认)

　　　　　　linear:匀速(常用)

　　　　　　ease-in:加速

　　　　　　ease-out:减速

　　　　　　ease-in-out:先加速后减速(效果不太明显)

delay:动画开始的时间(也就是延时多久开始执行) 可以设置0ms 也可以设置2s之类

iteration-count:设置动画循环的次数可以写2或者3或者10 写infinite表示无限循环

direction:设置动画播放的方向,有如下值

　　　　　　normal 表示向前播放

　　　　　　alternate 动画在偶数次向前播放,奇数次往后播放,类似呼吸效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myanime{
            0%{
                background-color: red;
            }
            50%{
                background-color: yellow;
            }
            100%{
                background-color: red;
            }
        }

        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            animation: myanime 4s infinite;

        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

我们也可以通过

.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            animation-name: myanime;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }

这样的方式来调用和设置动画的属性

除了改变背景色等,所有的css属性都可以在动画中渐变

比如我们可以改变一下div的大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myanime{
            0%{
                width: 50px;
            }
            50%{
                width: 200px;
            }
            100%{
                width: 50px;
            }
        }
        .box1{
            height: 20px;
            background-color: red;
            animation-name: myanime;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

媒体查询针对不同的分辨率改变css样式

@media screen

具体语法为 @media screen and (最大或最小分辨率条件){

css样式

}

比如我们看下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        @media screen and (max-width: 768px)  {
            .box1{
            width: 100px;
            height: 100px;
            background-color: green;
            }
            
        }
        @media screen and (min-width: 768px) and (max-width: 996px)  {
           .box1{
            width: 300px;
            height: 300px;
            background-color: blue;
           }
            
        }
        @media screen and (min-width: 996px)  {
            .box1{
            width: 400px;
            height: 400px;
            background-color: yellow;
            }
        }
    </style>
</head>
<body>
<div class="box1"></div>
</body>
</html>

我们设置了三种情况,第一最大分辨率是768px时 box1的样式

第二最小分辨率是768px,最大分辨率是996时 box1的样式

第三最小分辨率是996px时,box1的样式

随后我们拖动浏览器窗口大小,就可以看到box1的大小和背景色随着浏览器窗口变成我们设置的条件而变化

css雪碧图/精灵图

这是一种网页处理的方式,允许将零星图片并到一张图片上,一次性加载.随后通过某种方法调用其中的图片

他通过background-image引入图片

然后通过background-position将图片偏移到自己想要显示的零星图片,所在的具体位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .icon1{
            display: block;
            width: 40px;
            height: 40px;
            border: 1px solid red;
            background-image: url(test.png);
            background-position: -17px -12px;
        }
        .icon2{
            display: block;
            width: 40px;
            height: 40px;
            border: 1px solid red;
            background-image: url(test.png);
            background-position: -84px -80px;
        }

    </style>
</head>
<body>
<span class="icon1"></span>
<span class="icon2"></span>
</body>
</html>

我们先引入了微信的全部表情包截图 test.png 随后我们通过调整span的位置,让图片显示不同的位置来达到显示不同图片的效果.

这里要注意一点,因为span是一个行内标签,行内标签是没有长度和高度的

所以我们通过来display: block;将行内标签转为块级标签

同理我们也可以通过display:inline;将块级标签转换为行内标签

字体图标

很多情况下我们想加个小图标,但是如果在页面里加入大量的img会导致加载过慢等情况.

所以我们可以选择使用字体图标的方式.

有很多第三方图标网站,我们选择用阿里图标试试

我们首先去阿里图标网将想要的图标文件下载回来,添加到项目中.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        .iconfont{
            font-size: 50px;
            color: red;
        }

    </style>
</head>
<body>
<span class="iconfont icon-haocai"></span>
</body>
</html>

加上<link rel="stylesheet" href="font/iconfont.css">一行代码来引入图标CSS文件

随后我们只要用class样式就可以引用该图标<span class="iconfont icon-haocai"></span>,比如这里我们就引入了一个耗材的图标.

同样,因为这个图标是字体,所以我们也可以用css给他设置大小和颜色.

        .iconfont{
            font-size: 50px;
            color: red;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: relative;
            left: 400px;
            top: 400px;

            border-radius: 15px;
        }
    </style>
</head>
<body>
<div class="box1"></div>

</body>
</html>

posted @ 2025-04-14 17:02 叶无齐阅读(7) 评论(0) 收藏举报

刷新页面返回顶部

yewuqi

CSS之路

公告

python学习之路