前端三件套（二）：CSS

最新推荐文章于 2022-07-08 22:22:23 发布
最新推荐文章于 2022-07-08 22:22:23 发布
阅读量215 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46236591/article/details/123395022
版权

目录标题

一、认识CSS

1、什么是CSS

CSS：Cascading Style Sheet 层叠级样式表
表现（美化网页），字体、颜色、边距、高度、宽度、背景图片、网页定位…
在这里插入图片描述

2、CSS发展史

CSS 1.0
CSS 2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS 2.1 浮动、定位
CSS 3.0 圆角，阴影，动画…（浏览器兼容性）

3、快速入门

建议使用html和css文件分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
	<!--引入css文件-->
    <link rel="stylesheet" href="../css/style1.css">
</head>
<body>
    <h1>我是Ben</h1>
</body>
</html>

/*规范，<style> 可以编写css的代码
语法：
选择器{
    声明1;
    声明2;
    声明3;
}
每一个声明，用分号分割
*/
h1{
    color : darkorange;
}

请添加图片描述
css的优势：

  • 内容和表现分离，易于开发与管理
  • 网页结构变现统一，可以实现复用
  • 样式十分丰富
  • 建议使用独立于html的css文件（解耦合）
  • 利于SEO，容易被搜索引擎收录（Vue不易SEO）

二、导入CSS的四种方式

  • 行内样式
  • 内部样式
  • 外部样式（链接式、导入式）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: blueviolet;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="../css/style1.css">
</head>
<body>
    <!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
    <h1 style="color: red">这是一个标题</h1>
</body>
</html>

那问题来了：如果不同方式的css同时指向一个标签，标签会使用哪种样式？
优先级：就近原则（行内样式>内部样式>外部样式）
请添加图片描述
其中，外部链接两种写法

  • 链接式：<link rel="stylesheet" href="../css/style1.css">
  • 导入式：<style>@import url("css/style1.css")</style>

区别：使用链接方式时，会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式
导入式，会在整个页面装载完成后再装载css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式页面，闪一下之后再出现设置样式后的效果。
对于较大网站，为了便于维护，可能会希望把所有的css样式分类别放到几个css文件中，这样如果使用链接式引入，就需要几个语句分别导入css，如果要调整css的文件分类，就需要同是调整HTML文件。这对于维护工作来说，是一个缺陷。如果使用导入式，则可以只引进一个总的css文件，在这个文件中再导入其他独立css文件;而链接则不具备这个特性

三、选择器

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

1、基本选择器（重要）

标签选择器：选择一类标签，标签名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
    <h1>
        你好
    </h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            类选择器的格式，.class的名称{}
            可以多个标签归类，可以复用
         */
        .ben{
            color: coral;
        }
        .qin{
            color: crimson;
        }
    </style>
</head>
<body>
    <h1 class="ben">123</h1>
    <h1 class="qin">456</h1>
</body>
</html>

id选择器：全局唯一，#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            id选择器：id可以重复使用，但建议全局唯一
            #id名称{}
         */

        #ben{
            color: magenta;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <h1 id="ben">我是Ben</h1>
    <h1>我是Ben</h1>
    <h1>我是Ben</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            选择器优先级
            id选择器 > class选择器 > 标签选择器
         */
        h1{
            color: deepskyblue;
        }
        .style1{
            color: brown;
        }
        #ben{
            color: wheat;
        }
    </style>
</head>
<body>
    <h1 class="style1" id="ben">标题1</h1>
    <h1 class="style1">标题2</h1>
    <h1 class="style1">标题3</h1>
    <h1>标题4</h1>
</body>
</html>

2、层次选择器

后代选择器：

/*
    后代选择器 在某个元素的后面的元素
 */
body p{
    background: red;
}

子选择器：

/*
    子选择器 只选择在某个元素后面的一代元素
 */
body>p{
    background: coral;
}

相邻兄弟选择器：

/*
    相邻兄弟选择器,只有一个，相邻（向下）
 */
.active+p{
    background: purple;
}

通用选择器：

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

3、结构伪类选择器（了解即可）

伪类：它们是CSS语言的关键字，可让您与外部因素或事件进行交互，例如将鼠标移到元素上或访问链接。带冒号的选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: darkred;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: wheat;
        }
        /*
            选中p1:定位到父元素，选择当前的第一个元素
            选择当前p元素的父级元素的子元素的第一个，并且此元素为当前类型元素才生效
        */
        p:nth-child(2){
            background: red;
        }
        /*选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(3){
            background: yellow;
        }
        p:hover{
            color: black;
        }
    </style>
</head>
<body>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

在这里插入图片描述

4、属性选择器（常用）

该选择器用属性来定位元素，更加准确
属性选择器：属性名：属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以该元素开头
$= 以该元素结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>attrribute</title>
    <style>
        body a{
            margin-right: 10px;
            font-size: 20px;
            color: purple;
            background: wheat;
            float: left;
            display: block;
            width: 30px;
            height: 30px;
            text-align: center;
            border-radius: 10px;
            text-decoration: none;
        }
        /*属性选择器：属性名：属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以该元素开头
        $= 以该元素结尾
        */


        /*选中带有id属性的a标签*/
        /*a[id=item]{*/
            /*background: yellow;*/
        /*}*/
        /*选中class中有links的元素*/
        /*a[class*="links"]{*/
            /*background: magenta;*/
        /*}*/
        /*选中href以http开头的元素*/
        /*a[href^=http]{*/
            /*background: yellow;*/
        /*}*/

        a[href$=html]{
            color: red;
        }

    </style>
</head>
<body>
    <p>
        <a href="choose1.html" class="abc links" id="item">1</a>
        <a href="choose2.html" class="abc links">2</a>
        <a href="choose3.html" class="abc links">3</a>
        <a href="choose4.html" class="links yi">4</a>
        <a href="choose5.html" class="yi">5</a>
        <a href="choose6.html" class="yi">6</a>
        <a href="https://www.baidu.com" id="q" class="yi">7</a>
    </p>
</body>
</html>

在这里插入图片描述

四、美化网页元素

目的：
1.有效传递页面信息
2.美化网页，提升用户使用体验
3.凸显页面主题

1、span标签

一般用于配合css修改网页中的一一些局部信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #l{
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>我爱<span id="l">Java</span></p>
</body>
</html>

在这里插入图片描述

2、字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三国演义</title>
    <!--
        font-family:字体
        font-size:  字体大小
        font-weight:    字体粗细
        color:颜色
      -->
    <style>

        body{
            font-family: 华文楷体;
            color: saddlebrown;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>黄巾起义 群雄逐鹿</h1>
    <p class="p1">大将军何进在与十常侍的斗争中被杀，袁绍、曹操等大臣以平“十常侍之乱”为名冲入皇宫，剿杀宦官。在保护汉少帝的过程中，西凉刺史董卓引兵入关，随即掌控大权，废汉少帝，另立陈留王刘协为汉献帝。生性残暴的董卓倒行逆施，引发多方愤然。曹操假借圣旨之名，召集十八路诸侯联合讨伐董卓。虎牢关前，志在匡扶汉室的刘备、关羽、张飞三兄弟大战吕布。讨董盟军声威浩大，迫使董卓挟献帝逃至长安，最终被司徒王允设连环计除掉。</p>
    <p> 然而十八路诸侯各怀异心，联盟开始分崩离析。袁绍欲谋取长沙太守孙坚手中的传国玉玺，联合刘表将孙坚杀死。同时，袁绍又在界桥之战中击败公孙瓒，成为北方最强势力。此时的曹操也广招贤才，积聚实力。群雄逐鹿的雏形初成。</p>
</body>
</html>

在这里插入图片描述

3、文本

  • 颜色： color rgb rgba
  • 文本对齐方式： text-align（左右排版）
  • 首行缩进：text-indent：段落首行缩进
  • 行高：line-height：行高，与块的高度一致就能上下居中
  • 装饰：text-decoration
  • 文本图片水平对齐：vertical-align（多个属性参照）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>

        /*
            颜色：
            RGB：0-F
            RGBA：A：0-1

            text-align：排版（左右）
            text-indent：段落首行缩进
            line-height：行高，与块的高度一致就能上下居中
        */
        h1{
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent:2em;
        }
        .p2{
            line-height: 100px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*水平对齐，参照物*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <p class="l1">123456</p>
    <p class="l2">123456</p>
    <p class="l3">123456</p>
    <h1>黄巾起义 群雄逐鹿</h1>
    <p class="p1">大将军何进在与十常侍的斗争中被杀，袁绍、曹操等大臣以平“十常侍之乱”为名冲入皇宫，剿杀宦官。在保护汉少帝的过程中，西凉刺史董卓引兵入关，随即掌控大权，废汉少帝，另立陈留王刘协为汉献帝。生性残暴的董卓倒行逆施，引发多方愤然。曹操假借圣旨之名，召集十八路诸侯联合讨伐董卓。虎牢关前，志在匡扶汉室的刘备、关羽、张飞三兄弟大战吕布。讨董盟军声威浩大，迫使董卓挟献帝逃至长安，最终被司徒王允设连环计除掉。</p>
    <p class="p2"> 然而十八路诸侯各怀异心，联盟开始分崩离析。袁绍欲谋取长沙太守孙坚手中的传国玉玺，联合刘表将孙坚杀死。同时，袁绍又在界桥之战中击败公孙瓒，成为北方最强势力。此时的曹操也广招贤才，积聚实力。群雄逐鹿的雏形初成。</p>
    <img src="../image/u=4080914432,1502333241&fm=253&fmt=auto&app=120&f=JPEG.webp">
    <span>魏武帝曹操（155年 [1]  —220年3月15日 [2]  ），字孟德,小字阿瞒</span>
</body>
</html>

在这里插入图片描述

4、阴影与超链接伪类

阴影：text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径
超链接伪类：只需记a:hover

#price{
            text-shadow: deepskyblue 10px -10px 3px;
        }
        /*鼠标悬浮的状态*/
a:hover{
            color: blue;
            font-size: 50px;
        }

5、列表

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <link rel="stylesheet" href="../css/practice.css">
</head>
<body>
    <div id="nav">
        <h1>全部商品分类</h1>
        <ur>
            <li><a href="#">家用电器</a></li>
            <li><a href="#">手机</a>&nbsp/&nbsp<a href="#">运营商</a>&nbsp/&nbsp<a href="#">数码</a></li>
            <li><a href="#">办公</a>&nbsp/&nbsp</li>
            <li><a href="#">家居</a>&nbsp/&nbsp<a href="#">家具</a>&nbsp/&nbsp<a href="#">家装</a>&nbsp/&nbsp<a href="#">厨具</a></li>
            <li><a href="#">男装</a>&nbsp/&nbsp<a href="#">女装</a>&nbsp/&nbsp<a href="#">童装</a>&nbsp/&nbsp<a href="#">内衣</a></li>
            <li><a href="#">美妆</a>&nbsp/&nbsp<a href="#">个护清洁</a>&nbsp/&nbsp<a href="#">宠物</a></li>
            <li><a href="#">女鞋</a>&nbsp/&nbsp<a href="#">箱包</a>&nbsp/&nbsp<a href="#">钟表</a>&nbsp/&nbsp<a href="#">珠宝</a></li>
            <li><a href="#">男鞋</a>&nbsp/&nbsp<a href="#">运动</a>&nbsp/&nbsp<a href="#">户外</a></li>
        </ur>
    </div>

</body>
</html>

css：

#nav{
    width: 300px;
    background: #f5f4dd;
}

h1{
    background: brown;
    font-size: 40px;
    text-indent: 1em;
    line-height: 50px;
}

ur li{
    text-decoration: none;
    height: 30px;
    text-indent: 2em;
    list-style: none;
}
a:hover{
    color: brown;
    text-decoration: underline;
}
a{
    color: black;
    text-decoration: none;
}

在这里插入图片描述

6、背景

background：颜色，图片，图片位置，平铺方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>backgroundTest</title>
    <style>
        div{
            height: 1000px;
            width: 1500px;
            /*边框样式 粗细 样式 颜色*/
            border: 1px solid darkred;
            /*默认全部平铺*/
            /*颜色，图片 图片位置 平铺方式*/
            background: red url("../image/u=4080914432,1502333241&fm=253&fmt=auto&app=120&f=JPEG.webp");
        }
        #div2{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
        #div3{

            /*垂直平铺*/
            background-repeat: repeat-y;
        }

    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

7、渐变

background-image: linear-gradient();

background-image: linear-gradient(225deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

在这里插入图片描述

五、盒子模型

1、认识盒子模型

在这里插入图片描述
margin：外边距
border：边框
padding：外边距

2、边框

颜色，图片，图片位置，平铺方式

border: 1px solid red;

3、内外边距

上右下左

/*居中，前提是一个有固定宽度的块元素*/
margin: 0 auto;
padding: 0 0 0 0;

盒子计算方式：元素大小=margin+border+padding+内容宽度

4、圆角边框

左上 右上 右下 左下
border-radius: 60px;

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

        /*左上 右上 右下 左下*/
        /*圆圈：圆角=半径+边距*/
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 60px;
        }
        img{
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div></div>
    <img src="../image/u=4080914432,1502333241&fm=253&fmt=auto&app=120&f=JPEG.webp" alt="">
</body>
</html>

在这里插入图片描述

六、浮动

1、块级元素和行内元素

块级元素（独占一行）

h1~h6 p div 列表...

行内元素（不独占一行）

span a img strong...

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

2、display

  /*
        display:
            block 块元素
            inline  行内元素
            inline-block：是块元素，但是可以内联在一行
            none
        */
        div{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: inline-block;
        }

        /*行内元素和高度、宽度没关系*/
        span{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: inline-block;
        }

3、float浮动元素

float：元素浮动，可以理解为元素脱离来到了新的平面
觉得难理解的可以前往：(图文详细)最通俗易懂的CSS 浮动float属性详解

.l1{
    width: 400px;
    height: 600px;
    border: 1px solid red;
    display: inline-block;
    float: right;
}
.l2{
    width: 400px;
    height: 600px;
    border: 1px solid red;
    display: inline-block;
    float: right;
}
.l3{
    width: 400px;
    height: 600px;
    border: 1px solid red;
    display: inline-block;
    float: right;
}

4、父级边框塌陷问题

如果元素都浮动，则父级边框塌陷：
在这里插入图片描述
解决塌陷问题的方法：
①增加父级元素高度

#f{
    border: 1px solid black;
    height: 400px;
}

②在所有元素下增加一个空的div标签，清除浮动

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

③在父级元素中增加一个overflow：hidden属性

#f{
    border: 1px solid black;
    overflow: hidden;
}

④父类添加一个伪类：after

#f:after{
    content: "";
    display:block;
    clear:both;
}

总结

  • 浮动元素后面添加空div，简单
  • 设置父元素的高度，不方便添加元素（不灵活）
  • overflow，简单，但下拉场景避免使用
  • 父类添加一个伪类：after（推荐），写法稍微复杂，但推荐使用

5、display和float对比

  • display，方向不可控制
  • float，浮动起来的话会脱离标准

七、定位

默认模板
在这里插入图片描述

1、相对定位

position: relative;
top向上偏移
bottom向下偏移
left向左偏移
right向右偏移
它仍然在标准文档中，原来的位置会被保留

<!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{
            padding: 0;
            border: 1px solid #e8aaf5;
        }
        #first{
            background: yellow;
            border: 1px dashed #38acf5;
            position: relative;
            top: 10px;
            right: 30px;
        }
        #second{
            background: purple;
            border: 1px dashed #f58d13;
            position: relative;
            top: 10px;
            left: 30px;
        }
        #third{
            background: grey;
            border: 1px dashed #cef506;
            position: relative;
            bottom: 10px;
            left: 10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

2、绝对定位

position: absolutely;
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对父元素进行偏移

3、固定定位

position: fixed;
固定定位，定在了浏览器的某一位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*position: fixed;
            固定定位，定在了浏览器的某一位置
        */
        body{
            height:1000px
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: red;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

4、z-index

图层：元素是分层的，最低0，没有最高~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:380px;
            padding: 0;
            margin: 0;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px solid #000;
        }

        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /*父级元素相对定位*/
        ul{
            position: relative;
        }
        .f1{
            color:white;
            font-size: 25px;
            position: absolute;
            width: 380px;
            height: 25px;
            top:300px;
            z-index: 1;
        }
        .f3{
            width: 380px;
            height: 25px;
            background: black;
            position: absolute;
            top:300px;
            z-index: 0;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li class="f2"><img src="../image/u=369454234,524738727&fm=253&fmt=auto&app=120&f=PNG.webp" alt=""></li>
            <li class="f3"></li>
            <li class="f1">Huawei nova11</li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

参考博文：
css链接式和导入式的区别
(图文详细)最通俗易懂的CSS 浮动float属性详解

Ben～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端三件套之一：css学习总结思维导图
04-02
个人总结，希望能有所帮助
前端三件套css学习笔记分享
最新发布
02-24
前端三件套css学习笔记分享
css链接式和导入式的区别
千里之行，始于足下
11-29 8208
链接式: 导入式： @import"style.css"; 区别：使用链接方式时，会在装载页面主体部分之前装载css文件，这样显示出来的网页从一开始就是带有样式          导入式，会在整个页面装载完成后再装载css文件，对于有的浏览器来说，在一些情况下，如果网页文件的体积比较大，则会出现先显示无样式页面，闪一下之后再出现设置样式后的效果。
导入式与链接式的区别
hebeipeiyue的专栏
05-16 518
导入式:在页面加载完成后再装载CSS @import "mystyle.css" 链接式：在页面装载前装载CSS 建议 1.如果引入一个CSS文件，使用链接方式 2.如果需要引入多个CSS文件，首先用链接方式引入一个“目录”CSS文件，这个“目录”CSS文件中再使用导入式引入其他CSS文件 本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。...
CSS的使用方式,css使用方式链接式和导入式的区别
踏着层层台阶登攀
11-01 1390
CSS的使用方式 1、内联样式 直接写在标签中（不能复用） <label style="width: 200;height: 100;background-color: red;">大家好我是内联样式</label> 2、内部样式 写在head标签中，可同时设置可复用，没有共同作用，若有则使用最近的 <!DOCTYPE html> <html...
导入式样式表CSS与链接式样式表CSS的区别
Vincent
01-05 287
[code="html"] @import url("style.css"); //@import 导入 [/code] 导入式样式表CSS与链接式样式表CSS的区别： [list] [*]1、使用link链接的css是客户端浏览你的网页时先将外部的CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来的网页跟我们预期的效果一样，即使网速再慢...
前端三件套html，css，JavaScript.zip
12-29
前端三件套——HTML、CSS和JavaScript，构成了网页内容、样式和交互性的基础。这三者协同工作，为用户提供丰富的浏览体验。接下来，我们将深入探讨这三个核心技术及其在网页开发中的作用。 **HTML（HyperText ...
前端开发三件套HTML&CSS&JavaScript
02-23
0 前端三件套 HTML CSS JavaScript 1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单 2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位 3.JavaScript 11JS导入方式...
圣诞贺卡-前端三件套实现.html
12-20
圣诞贺卡—前端三件套实现.html 是一个包含前端三件套（HTML、CSS、JavaScript）实现的圣诞贺卡资源的HTML文件。该资源旨在帮助开发者学习如何使用前端技术制作圣诞贺卡，并提供了一个简单的示例，以供参考和学习。 ...
css 外联式 和 导入式 的区别
weixin_33738578的博客
09-25 386
一、相同点两者都可以导入外部的css文件二、不同1、link 是html标签，@impor 是css提供的方式，要写在css文件或者style标签内；2、两者的加载顺序有区别，一个页面被加载的时候，link引用的css文件会同时被加载，二@import 引入的文件会等到页面全部下载完后再加载（有说法是会出现白屏或者闪屏）；3、当使用js控制DOM去改变css样式的时候，只能使用link标签，因为i...
CSS书写规范、顺序
weixin_30511107的博客
08-22 309
一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景(background, border等) ...
CSS小技巧1
benlalagang的博客
07-08 294
CSS变量使用、CSS使用其他字体、CSS实现元素水平加垂直居中(绝对定位、transform: translate(-50%,-50%)、弹性盒布局) 直接在选择器
CSS的三种链接方式（内联式、嵌入式、外部式）
m0_62200674的博客
07-08 1万+
内联式、嵌入式、外部式CSS，优先级遵循就近原则
css外链式和导入式的区别
Edward-W的博客
05-18 6544
外链式样式为&lt;link rel="stylesheet" href="css/test.css"&gt;导入式样式为@import "css/test.css";两者最先实现的结果是一样的，都是将独立的css文件引入到网页文件中。但是两者还是有细微的差别的。其中link是将css布局文件先加载如网页文件中，所以这时无论网速再慢，最终实现的网页效果都是一样的。而@import则是先将网页文件加...
CSS文件引入另一个CSS文件
ADreamClusive的博客
05-10 1万+
1 在HTML中引入css的其中的两个方法    导入式和链接式的目的都是将一个独立的css文件引入一个文件中，二者的区别不大，事实上，二者最大的区别在于链接式使用html的标记引入外部css文件，而使用导入式则是使用css规则引入外部css文件。因此它们的语法也不同。 1.1 使用链接式 1.2 使用导入式 @import "style.css" 2 二者的区
链接样式表和导入样式区别
xiaocai9999的专栏
11-01 2992
导入样式：在HTML初始化时，会被导入到HTML中，作为文件的一部分，就好像内嵌样式表一样 链接样式表则是HTML标签需要时以链接方式导入 他们的区别:1.加载顺序不同{当一个页面被加载时，使用链接样式表，则link标签引入css文件时会被同时加载，而导入方式则是页面下载完之后加载，所以如果网速不好，页面是没有样式的。  2.@import方式兼容性没有link方式好 3.使用DOM控制页
Html CSS的三种链接方式
热门推荐
Jason的学习笔记
06-29 2万+
感谢原文：https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文：https://blog.csdn.net/jiaqingge/article/details/52564348 Html CSS的三种链接方式 css文本的链接方式有三种：分别是内联定义、链入内部css、和链入外部css 1.代码为： <html> ...
前端开发学习笔记：CSS基础入门
"《页面制作》笔记（5.CSS-1）是网易微专业《前端开发工程师》课程的学习笔记，由西风潇潇编写的，主要介绍了CSS的基本概念、历史以及如何在HTML中引用CSS样式。笔记中提到了CSS用于定义HTML内容的显示样式，包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值