css—狂神说

最新推荐文章于 2022-02-05 16:11:14 发布

拾肆の

最新推荐文章于 2022-02-05 16:11:14 发布

阅读量191

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_54897873/article/details/118528640

版权

1.什么是css

如何学习？

1、css是什么

2、css怎么用（快速入门）

3、css选择器（重点 + 难点）

4、美化网页（文字，阴影，超链接，列表，渐变…）

5、盒子模型

6、浮动

7、定位

8、网页动画（不做要求）

1.1什么是css

Cascading Style Sheet 层叠级联样式表

CSS ：表现层（美化网页）

字体，网页颜色，边距，高度，宽度，背景图片，网页定位，网页浮动…

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7vZRH2k-1625573355890)(C:\Users\养猪人丶\AppData\Roaming\Typora\typora-user-images\image-20210327091558827.png)]$

创建css包的格式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwUlelvp-1625573355892)(C:\Users\养猪人丶\AppData\Roaming\Typora\typora-user-images\image-20210327092046956.png)]$

1.2快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范在head写，<style>可以编写css的代码，每一个声明最好使用分号结尾
    语法：
        选择器{
            声明1；
            声明2；
            ......
        }
    
    -->
    <style>
        h1{
            color: aquamarine;
        }
    </style>


</head>
<body>
<h1>我是标题哦</h1>
</body>
</html>

$建议使用这种规范[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JeWa52VR-1625573355893)(C:\Users\养猪人丶\AppData\Roaming\Typora\typora-user-images\image-20210327093427243.png)]$

css的优势：

1、内容和表现分离

2、可以实现复用

3、样式十分丰富

4、建议使用独立于html的css文件

5、利用SEO，容易被搜索引擎收录！！

1.3css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: chartreuse;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则-->

<!--行内样式；在标签元素中编写一个style属性，编写样式即可，比较麻烦，文件多了太过于杂乱-->
<h1 style="color: aquamarine">我也是标题哦</h1>


</body>
</html>

拓展：外部样式的两种写法

链接式 :

html

    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

导入式 :

@import是css2.1特有的!

    <style>
        @import url("css/style.css");
    </style>

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选择器

1.标签选择器 : 选择一类标签标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器会选择到这个页面上所有的这个标签的元素*/
        h1{
            color: #ff52ff;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>听玮儿讲</p>
</body>
</html>

2.类选择器 class ：选择所有class属性一直的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 ：.class的名称
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .biaotiyi{
            color:chartreuse ;
        }
        .biaoyier{
            color: #ff52ff;
        }
    </style>


</head>

<body>
<h1 class="biaotiyi">标题一</h1>
<h1 class="biaoyier">标题二</h1>
<h1 class="biaotiyi">标题三</h1>
<p class="biaoyier">这是一个p标签</p>
</body>
</html>

3.Id选择器：全局唯一！ #id名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器：id必须保证全局唯一
               格式：#id名称{}
               优先级：
               不遵循就近原则，固定的
               id选择器>class选择器>标签选择器
        */
        #biaoyiti{
            color: darkslateblue;
        }
    </style>
</head>
<body>


<h1 id="biaoyiti">标题一</h1>
<h1 >标题二</h1>
<h1>标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>

</body>
</html>

优先级： id选择器>class选择器>标签选择器

2.2层次选择器

1.后代选择器：在某个元素的后面祖爷爷爷爷爸爸你

/*后代选择器*/
body p{
            background: chartreuse;
        }

2.子选择器一代儿子

/*子选择器*/
body>p{
            background: #ff52ff;
        }

3.相邻兄弟选择器

/*相邻兄弟选择器 ：只有一个 向下延伸*/
        .active + p{
            background: aqua;
        }

4.通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有元素*/
        .active~p{
            background: brown;
        }

2.3结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
    background: aqua;
}
/*ul的最后一个子元素*/
ul li:last-child{
    background: chartreuse;
}
/* 选中p1 : 定位到父元素，选择到当前的第一个元素
选择当前p元素的父级元素 ，选中父级元素的第一个子元素，并且是当前元素才生效
*/
p:nth-child(1){
    background: #ff52ff;
}
/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(1){
    background: darksalmon;
}

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-okMNw050-1625573355894)(C:\Users\养猪人丶\AppData\Roaming\Typora\typora-user-images\image-20210327162938319.png)]$

2.4属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 60px;
            background: aqua;
            text-align: center;
            color: sienna;
            text-decoration: none;
            margin-right: 5px;
            line-height: 50px;
        }
        /* 属性名， 属性名=属性值（可以用正则）
        = 绝对等于
        *= 包含这个元素即可
        ^= 以这个开头
        $= 以这个结尾
        */

        /*!*存在id属性的元素    a[]{}*!*/
        /*a[id]{*/
        /*    background: #ff52ff;*/
        /*}*/

        /*id=first的元素*/
        /*a[id=first]{*/
        /*    background: chartreuse;*/
        /*}*/

        /*class中有links的元素*/
        /*a[class*="links"] {*/
        /*    background: #ff52ff;*/
        /*}*/

        /*!*选中href中以http开头的元素*!*/
        /*a[href^=http]{*/
        /*    background: #ff52ff;*/
        /*}*/

        /*选中href中以jpg结尾的元素*/
        a[href$=jpg]{
            background: chartreuse;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href=""class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links iteam last">10</a>
</p>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eKsy6vnf-1625573355895)(C:\Users\养猪人丶\AppData\Roaming\Typora\typora-user-images\image-20210327171758993.png)]$

= 绝对等于
*= 包含
^= 以这个为开头
$= 以这个为结尾

3.美化网页元素

3.1为什么要美化网页

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 60px;
        }
    </style>
</head>
<body>

欢迎学习 <span id="title1">Java</span>
    
</body>
</html>

3.2字体样式

    <!--
    font-family : 字体样式
    font-size : 字体大小
    font-weight: 字体粗细
    font-color：字体颜色
    -->
    <style>
        body{
            font-family: "Arial Black",华文楷体;
            color: #ff0011;
        }
        h1{
            font-size: 90px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

3.3文本样式

1、颜色 color rgb rgba

2、对齐方式 text-align = center(水平的中)

3、首行缩进 text-indent:2em

4、行高 line-height：

5、装饰 text-decoration:

6、文本图片水平对齐 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    颜色 ：
    text-align:  排版 ，居中
    text-indent: 2em; 段落首行缩进
    height: 30px;
    line-height: 30px;
        行高和块的高度一致就可以上下居中

    -->
    <style>
        h1{
            color: #ff52ff;
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #ff52ff;
            height: 30px;
            line-height: 30px;}

        /*下划线*/
        .l1{
            text-decoration: underline;}

        /*中划线*/
        .l2{
            text-decoration: line-through;}

        /*上划线*/
        .l3{
            text-decoration: overline;}

        /*超链接去下划线*/
        a{
            text-decoration: none;}

        /*<!--水平对齐~ 参照物 a，b-->*/

            img,span{
                vertical-align: middle;
            }
    </style>
</head>
<body>
<a href="">123</a>
<p class="l1">123123456</p>
<p class="l2">12312345645</p>
<p class="l3">12312345645121</p>
<h1>故事介绍</h1>
<p class="p1">
    平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p>

<p>
    在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉
</p>

<p class="p3">
    When I wake up in the morning，<br>You are all I see; When I think about you，<br>
    And how happy you make me。<br> You're everything I wanted;<br>
    You're everything I need; <br>I look at you and know;<br>
    That you are all to me。<br> Barry Fitzpatrick <br>
</p>
<p>
    <img src="images/2.png" alt="你开不开的">这是我的！！
</p>
</body>
</html>

3.4阴影

        /*阴影颜色  水平偏移  垂直偏移  阴影半径*/
        #hd{
            text-shadow: orange 10px -10px 2px;
        }

3.5超链接伪类

正常情况下，a，a：hover

        /*默认的颜色*/
        a{
            text-decoration: none;
            color: #000000;
        }
        /*鼠标悬浮的状态(只需要记住 ：havor)*/
        a:hover{
            color: aqua;/*放上去变颜色*/
            font-size: large;/*放上去变大*/
        }

3.6列表

/*ul li*/
/*
list-style:
     none 去掉原点
     circle 空心圆
     decimal 数字
     square 正方形
*/
ul li{
    line-height: 30px;
    list-style: none;
    text-indent: 1em;
}
ul{
        background: gainsboro;
}

3.7背景

背景颜色

背景图片

<style>
div{
    width: 1000px;/*边框的大小*/
    height: 700px; /*边框的长度*/
    border: 1px solid red;/*边框的粗细  边框的样式 边框的颜色*/
    background-image: url("images/1.gif");/*默认是全部平铺的*/
}
.div1{
    background-repeat: repeat-x;
}

.div2{
    background-repeat: repeat-y;
}
.div3{
    background-repeat: no-repeat;
}
</style>

3.8渐变

body{
    /*background-color: #FA8BFF;*/
    background: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}

4.盒子模型

4.1什么是盒子模型

在这里插入图片描述

margin ：外边距

padding ：内边距

border ：边框

4.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

    <style>
         h2 body{
            /*body存在默认外边距 margin = 常见操作*/
            /*text-decoration: none;*/
            margin: 0;
            padding: 0;
            text-decoration: none;

        }
        h2{
            font-size: 16px;
            background-color: aqua;
            margin: 0;
            line-height: 60px;
        }
        /*border: 粗细，样式，颜色;*/
        #box{
            width: 300px;
            border: 1px  solid red;
        }

        form{
            background: aqua;
        }

        div:nth-of-type(1) input{
            border: 1px solid black;
            border-radius: 9px;
        }


    </style>

4.3内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外边距的妙用 ：居中元素
    margin: 0 auto;
    -->
    <style>

         /*border: 粗细，样式，颜色;*/
         #box{
             width: 300px;
             border: 1px  solid red;
             margin: 0 auto;
         }


        h2{
            font-size: 16px;
            background-color: aqua;
            margin: 0;
            line-height: 60px;
        }

        form{
            background: aqua;
        }
        input{
            border: 1px solid black;
        }


    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓&nbsp;名：</span>
            <input type="text">
        </div>
        <div>
            <span>密&nbsp;码：</span>
            <input type="password">
        </div>
        <div>
            <span>邮&nbsp;箱：</span>
            <input type="text">
        </div>
        <div>
            <input type="reset" value="重置">
        </div>

    </form>
</div>

</body>
</html>

盒子的计算方式：你这个元素到底多大？

margin + border +padding + 内容宽度

4.4圆角边框

4个角

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 30px;
        }
    </style>

4.5阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    margin: 0 auto; 居中
要求 ：块元素，块元素有固定的高度
-->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 1px yellow;
        }
    </style>
</head>
<body>
<div style="width: 1000px ;height: 1000px;text-align: center">
        <img src="images/1.gif" alt="">
</div>
</body>
</html>

5.浮动

5.1标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素（内联元素）：不独占一行

span a img strong...

行内元素可以被包含在块级元素中，反之，则不可以

5.2display

    <!--
    block 块元素
    inline 行内元素
    inline-block 是块元素 但是可以内联 在一行
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            display: inline;

        }
        span{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            display: inline-block;
        }
    </style>

1.这个也是一种实现行内元素排列的方式，但是我们很多情况都是使用float

5.3float

1.左右浮动 float：

div{
        margin: 10px;
        padding: 5px;
}
#father{
    border: 1px #000000 solid;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
}

5.4父级边框塌陷的问题

clear

/*
clear: right; 右侧不允许有浮动元素
clear: left;  左侧不允许有浮动元素
clear: both;  两侧不允许有浮动元素
clear: none;
*/

解决方案：

1、增加父级元素的高度~

#father{
    border: 1px #000000 solid;
    width: 800px;
}

2、增加一个空的div标签，清除浮动

   <div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow

在父级元素中增加一个 overflow: hidden;

4.在父类添加一个伪类：after

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

浮动元素后面增加空的div

弊端：代码中尽量避免空的div
设置父元素的高度

简单，元素假设有了固定的高度就会被限制
overflow

简单，下拉的一些场景尽量避免使用
在父类添加伪类：after（推荐）

写法稍微复杂一点，但是没有副作用，推荐使用！

5.5 对比

display

方向不可以控制
float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6.定位

6.1相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
    相对于自己原来的位置进行偏移~
    -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid aqua;
            padding: 0;
        }
        #first{
            background-color: #ff52ff;
            border: 1px dashed #4fff27;
            position: relative;/*相对定位*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: orange;
            border: 1px dashed #ff3efb;
        }
        #third{
            background-color: #0000FF;
            border: 1px dashed #ff2621;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position:relative;

相对于原来的位置，进行指定的位移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

练习题：链接卡

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XlOVP4K7-1625573355897)(C:\Users\养猪人丶\AppData\Roaming\Typora\typora-user-images\image-20210401213552241.png)]$

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
     #box {
          height: 300px;
          width: 300px;
         border: 1px solid red;
         padding: 10px;

      }
      a{
          width: 100px;
          height: 100px;
          text-decoration: none;
          background-color: #FA8BFF;
          line-height: 100px;
          text-align: center;
          color: white;
          display: block;
      }
      a:hover{
          background: #25acff;
      }
      .a2 , .a4{
          position: relative;
          left: 200px;
          top: -100px;
      }

      .a5{
          position: relative;
          left: 100px;
          top: -300px;
      }
  </style>
</head>
<body>
<div id="box">
  <a class="a1" href="#">链接1</a>
  <a class="a2" href="#">链接2</a>
  <a class="a3" href="#">链接3</a>
  <a class="a4" href="#">链接4</a>
  <a class="a5" href="#">链接5</a>
</div>
</body>
</html>

6.2绝对定位

position: absolute;

定位：基于xxx定位，上下左右；

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3、在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的位移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      div{
          margin: 10px;
          padding: 5px;
          font-size: 12px;
          line-height: 25px;
      }
      #father{
          border: 1px solid aqua;
          padding: 0;
      }
      #first{
          background-color: #ff52ff;
          border: 1px dashed #4fff27;
      }
      #second{
          background-color: orange;
          border: 1px dashed #ff3efb;
          position: absolute;
          right: 20px;
      }
      #third{
          background-color: #0000FF;
          border: 1px dashed #ff2621;
      }
  </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

6.3固定定位

position: fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位 fixed*/
            width: 50px;
            height: 50px;
            background: aqua;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4z-index

background-color: orange;
border: 1px dashed #ff3efb;
position: absolute;
right: 20px;
}
#third{
background-color: #0000FF;
border: 1px dashed #ff2621;
}

第一个盒子

第二个盒子

第三个盒子

~~~

6.3固定定位

position: fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*固定定位 fixed*/
            width: 50px;
            height: 50px;
            background: aqua;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>