CSS超基础，快速入门

于 2022-11-27 20:19:18 发布
阅读量297 收藏
点赞数
分类专栏： 前端 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57654074/article/details/128069134
版权

title: CSS
date: 2022-11-20 12:12:57
categories:

  • 前端
    tags:
  • CSS

个人博客www.huangrd.top，

CSS

1.CSS介绍

1.1什么是CSS

层叠样式表 (Cascading Style Sheets，缩写为 CSS）

CSS:表现（美化网页）

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

[外链图片转存中…(img-zczCSc8s-1669551479706)]

1.2CSS发展史

CSS1.0

CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角，阴影，动画…浏览器的兼容性~

1.3CSS快速入门

CSS 1.0:style CSS代码

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

<!--规范<style> 可以编写css代码,每一个声明最好用分号结尾
    语法：
        选择器{
            声明1；
            声明2；
            ...
        }
-->

    <style>
        h1{
            color: blanchedalmond;
        }
    </style>

</head>
<body>

<h1>标题</h1>

</body>
</html>

css 3.0分离

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

<!--规范<style> 可以编写css代码,每一个声明最好用分号结尾
    语法：
        选择器{
            声明1；
            声明2；
            ...
        }
-->

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

</head>
<body>

<h1>标题</h1>

</body>
</html>

h1{
    color: blanchedalmond;
}

代码分离，css通过链接link到html代码中。

[外链图片转存中…(img-pmvIEU20-1669551479707)]

css优势：

  1. 内容和变现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分丰富
  4. 建议使用独立于html的css文件
  5. 利用SEO，更容易被搜索引擎收录

1.4CSS的3种导入方式

三种导入方式：

  1. 行内样式；

  2. 内部样式；

  3. 外部样式；

外部样式的两种写法：

  • 链接法 （常用）

  • 导入法 （CSS 2.1特有，不常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color: darkgreen;
        }
    </style>
<!--外部1.链接方式-->
    <link rel="stylesheet" href="css/style.css">
<!--外部2.引用方式 不常用-->
    <style>
        @import "css/style.css";
    </style>

</head>
<body>

<!--
行内最高，外边就近原则;
其实是覆盖原则，外边依次覆盖，行内最后执行，所以最后显示，优先级最高；
-->
<!--行内样式-->
<h1 style="color:deepskyblue">标题</h1>

</body>
</html>

/*外部样式*/
h1{
    color: brown;
}

2.CSS选择器（重点）

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

2.1 基本选择器

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

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

    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: coral;
        }
    </style>
</head>
<body>

<h1>标签选择器</h1>
<h1>标签选择器</h1>
<p>Java</p>

</body>
</html>

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

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

<style>
    /*类选择器：
    .class的方式使用
    不同的标签可以归为一类
    一个类可以有多个标签，也可以有多种标签，可以复用
    */
    .style{
        color: aqua;
    }
</style>
<body>

<h1 class="style">类选择器1</h1>
<h1>类选择器</h1>

<p class="style">java</p>

</body>
</html>

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

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

    <style>
        /*id选择器：

        选择特有的标签操作
        一个标签只有一个id
        */
        #style1{
            color: red;
        }

        /*测试*/
        .lala{
            color: deepskyblue;
        }
    </style>
</head>
<body>

<h1 id="style1" class="lala">id选择器1</h1>
<h1>id选择器2</h1>

<p>Java</p>

</body>
</html>

    存在优先级问题：

    id>类>标签

2.2 层次选择器

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

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

  2. 子选择器：一代，儿子

    /*子选择器，一代，儿子*/
        body>p{
            background: red;
        }

  3. 相邻兄弟选择器：同辈 只有一个，向下

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

  4. 通用选择器：当前元素向下的所有兄弟元素

    /*通用选择器*/
        .text~p{
            background: greenyellow;
        }

    2.3伪类选择器

    伪类：条件

    [外链图片转存中…(img-HzNnoHBh-1669551479708)]

2.4 属性选择器(重点)

可实现同时使用class+id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: greenyellow;
            text-align: center;
            color: red;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /*属性名，属性名=属性值（正则）*/
        /*存在id属性的元素  a[]{}*/

        /*选中id为first元素*/
        /*a[id=first]{*/
        /*    background: fuchsia;*/
        /*}*/

        /*选中类中含links的元素*/
        /*a[class*="links"]{*/
        /*    background: blue;*/
        /*}*/

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

        /*选中以pdf结尾的*/
        a[href$=pdf]{
            background: red;
        }
    </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 first" 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>

</p>

</body>
</html>
  • = 完全等于
  • *= 包含
  • ^= 以什么开头
  • $= 以什么结尾

3.美化网页元素

3.1 为什么美化网页

[外链图片转存中…(img-58a1U6Oc-1669551479709)]

span标签

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

    <style>
        #title1{
            font-size: 50px;
        }
    </style>

</head>


<body>

欢迎学习 <span id="title1">java</span>

</body>
</html>

3.2 字体样式

  • font-family 字体
  • font-size 字体大小
  • font-weight 字体粗细
  • color 字体颜色
<style>
    body{
        font-family: "Arial Black",楷体;
        color: coral;
    }
    h1{
        font-size: large;
    }
    .p1{
        font-weight: bolder;
    }
</style>

3.3 文字样式

1.颜色

  • 英语单词
  • RGB 三原色 0~f
  • RGBA A表示透明度 0~1

2.文字对齐的方式

text-align: 排版、剧中、靠左

3.首行缩进

text-indent: 2em 首行缩进两个字符

4.行高

行高和块高一样，就可以上下居中line-height=height

5.装饰

  • underline 下划线
  • line-through 中划线
  • overline 上划线

6.文字图片水平对齐

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

    <style>
        /*颜色：
        英语单词
        RGB 三原色 0~f
        RGBA A表示透明度 0~1
        */
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        /*text-align: 排版、剧中、靠左..*/
        /*text-indent: 2em 首行缩进两个字符*/
        /*行高和块高一样，就可以上下居中line-height=height*/
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: coral;
            height: 600px;
            line-height: 300px;
        }
        /*
        underline   下划线
        line-through    中划线
        overline    上划线
        */
        .t1{
            text-decoration: underline;
        }
        .t2{
            text-decoration: line-through;
        }
        .t3{
            text-decoration: overline;
        }
        /*图片文字居中*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p>
    <img src="../image/a.png" alt="">
    <span>123456</span>
</p>

<p class="t1">12456</p>
<p class="t2">11111</p>
<p class="t3">55555</p>

<h1>火影忍者</h1>

<p class="p1">
    《火影忍者》（日语：NARUTO -ナルト-），通常简称为“火影”，为日本漫画家岸本齐史创作的少年漫画，讲述忍者世界里围绕着身为对手的漩涡鸣人与宇智波佐助两人，与其他角色的经历。
</p>

<p class="p2">
    漫画自1999年开始在日本集英社旗下的少年漫画杂志《周刊少年Jump》上连载。2002年，由日本动画工作室Studio Pierrot根据漫画原作所改编制作的电视动画版《火影忍者》开始在日本东京电视台播出。2004年，漫画进而改编成电影。2006年，漩涡鸣人入选美国《新闻周刊》日文版于10月18日发行的特集中选出的“全世界最受尊敬的100位日本人”。[1]
</p>
</body>
</html>

3.4 阴影

[外链图片转存中…(img-ynuTc6tC-1669551479709)]

[外链图片转存中…(img-Fj0sAsQ4-1669551479710)]

3.5 超链接伪类

[外链图片转存中…(img-OouwkDXl-1669551479710)]

[外链图片转存中…(img-gLIrChNF-1669551479711)]

3.6 列表

list-style:

  • ​ none 去掉原点
  • ​ circle 空心圆
  • ​ decimal 数字
  • ​ square 正方形

商城案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="nav">

    <h2 class="title">全部商品分类</h2>

    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>

</div>
</body>
</html>

#nav{
    width: 300px;
    background: beige;
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: red;
}
ul{
    background: beige;
}
/*
list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

[外链图片转存中…(img-bfr6d7Gg-1669551479712)]

[外链图片转存中…(img-Z9jmmqtL-1669551479712)]

修改样式

3.7 背景

背景颜色

背景图片

		div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("../image/a.png");
            /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }

3.8 渐变

background-image: linear-gradient(131deg, #ffffff 0%, #62daff 50%, #FF0000 100%);
        }

grabient 找 css代码

4.盒子模型

1. 什么是盒子模型

[外链图片转存中…(img-YLp4iNg3-1669551479713)]

margin:外边框

padding:内边框

border:边框

2.边框

1.边框的粗细

2.边框的样式

3.边框的颜色

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

    <style>
        body{
            /*body总有一个默认的外边距*/
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border:粗细 样式 颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: coral;
            line-height: 30px;
        }
        form{
            background: #62daff;
        }
        div:nth-of-type(1)>input{
            border: 3px solid blue;
        }
        div:nth-of-type(2)>input{
            border: 3px solid #0ae648;
        }
        div:nth-of-type(3)>input{
            border: 3px solid #ff6600;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

3.内外边距

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

[外链图片转存中…(img-SfkE6D9Z-1669551479714)]

margin+border+padding+内容宽度

/*margin+border+padding的参数*/
/*两个参数 上下 左右*/
/*一个参数，上下左右*/
/*三个参数 上 下 左右*/
/*四个参数 上 右 下 左  顺时针*/

4.圆角边框

/*
一个参数，☞每个角
左上 右上 右下 左下 顺时针
*/
border-radius: 50px 0 0 0;

5.阴影

box-shadow: #62daff 10px 10px 100px;
/*颜色 水平偏移 垂直偏移 阴影半径 */

[外链图片转存中…(img-JTbWD568-1669551479716)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border-radius: 50px;
            box-shadow: #62daff 10px 10px 100px;
        }
    </style>
</head>
<body>
    <div>
        <img src="../../image/a.png" alt="">
    </div>
</body>
</html>

5.浮动

5.1 标准文档流

块级元素：独占一行

h1~h6 p div 列表..

行内元素：不独占一行

span a img strong

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

5.2 display

  1. block块元素
  2. inline行内元素
  3. inline-block 是块元素，但可以内联，在一行！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        block块元素
        inline行内元素
        inline-block 是块元素，但可以内联，在一行！
        */
        div{
            width: 100px;
            height: 100px;
            border: #FF0000 1px solid;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: #FF0000 1px solid;
            display: inline-block;
        }
    </style>

</head>
<body>

    <div>div块元素</div>
    <span>span行内元素</span>


</body>
</html>

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

5.3 float

1.左右浮动

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

    <style>
        div{
            margin: 10px;
            padding: 5px;
        }
        #father{
            border: 1px #000 solid;
        }
        .layer1{
            border: 1px #F00 dashed;
            display: inline-block;
            float: right;
        }
        .layer2{
            border: 1px #00f dashed;
            display: inline-block;
            float: right;
        }
        .layer3{
            border: 1px #060 dashed;
            display: inline-block;
            float: right;
        }
        .layer4{
            border: 1px #62daff dashed;
            font-size: 12px;
            line-height: 23px;
            display: inline-block;
            float: right;
            clear: both;
        }
    </style>
</head>
<body>
<div id="father">
    <div class="layer1"><img src="../../image/a.png" alt=""></div>
    <div class="layer2"><img src="../../image/a.png" alt=""></div>
    <div class="layer3"><img src="../../image/a.png" alt=""></div>
    <div class="layer4">
        浮动的盒子可以向左，也可以向右浮动，直到它的外边缘碰到包含框或者另一个浮动盒子为止。
    </div>
</div>

</body>
</html>

5.4 父级边框塌陷

clear

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

解决方案：

1.增加父级元素的高度

/*1.增加父级元素高度*/
#father{
            border: 1px #000 solid;
            height: 800px;
        }

2.增加一个div标签，清除浮动

	   <div class="clear"></div>
       .clear{
            clear: both;
            margin: 0;
            padding: 0;
        }

3.overflow

/*3.父类增加一个overflow*/
            overflow: hidden;

4.父类增加一个伪类

#father:after{
            /*4.增加一个伪类*/
            content: "";
            display: block;
            clear: both;
        }

小结：

  1. 浮动元素后面增加空div 简单，代码尽量避免空的div
  2. 设置父类的高度 简单，元素假设有了固定的高度，就会被限制
  3. overflow 简单，下拉的场景避免使用
  4. 父类增加一个伪类：after（推荐） 无副作用

5.5 对比

display

方向不能控制

float

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

6.定位

6.1相对定位

<!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: #62daff 1px solid;
            padding: 0;
        }
        #first{
            border: fuchsia 1px dashed;
            background: #e64c38;
        }
        #second{
            border: #56dfbf 1px dashed;
            background: aquamarine;
            position: relative;/*相对定位*/
            top: -10px;
            left: 20px;
        }
        #third{
            border: #e64c38 1px dashed;
            background: brown;
            position: relative;
            bottom: 20px;
            right: 30px;
        }
    </style>

</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

相对定位：position: relative；

相对于原来的位置，经行指定的偏移，相对定位的话，他任然在标准文档流中，原来的位置会被保留。

top: -10px;上
left: 20px;左
bottom: 20px;下
right: 30px;右
数值表示距离

6.2 测试

[外链图片转存中…(img-rLlIdmHc-1669551479717)]

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

  <style>
    #box{
      width: 300px;
      height: 300px;
      padding: 10px;
      border: #e64c38 solid 3px;
    }
    a{
      width: 100px;
      height: 100px;
      text-decoration: none;
      background: #e086ee;
      color: white;
      display: block;
      line-height: 100px;
      text-align: center;
    }
    a:hover{
      background: #62daff;
    }
    #a2,#a4{
      position: relative;
      left: 200px;
      top: -100px;
    }
    #a5{
      position: relative;
      left: 100px;
      top: -300px;
    }
  </style>

</head>
<body>
<div id="box">
  <a href="" id="a1">链接1</a>
  <a href="" id="a2">链接2</a>
  <a href="" id="a3">链接3</a>
  <a href="" id="a4">链接4</a>
  <a href="" id="a5">链接5</a>
</div>
</body>
</html>

6.3 绝对定位

定位：基于xxxx定位，上下左右

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

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

<!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: #62daff 1px solid;
      padding: 0;
      position: absolute;
      /*父级定位*/
    }
    #first{
      border: fuchsia 1px dashed;
      background: #e64c38;
    }
    #second{
      border: #56dfbf 1px dashed;
      background: aquamarine;

    }
    #third{
      border: #e64c38 1px dashed;
      background: brown;
      position: absolute;
      left: 20px;
    }
  </style>

</head>
<body>

<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.4 固定定位

<!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: yellow;
        position: fixed;
        right: 0;
        bottom: 0;
    }
  </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

6.5 z-index

[外链图片转存中…(img-NIKjyW8T-1669551479717)]

8.总结

[外链图片转存中…(img-7i43liZB-1669551479718)]

[外链图片转存中…(img-pdlJiGVy-1669551479719)]

[外链图片转存中…(img-Uo0rp3A6-1669551479721)]

[外链图片转存中…(img-fh0fXA1I-1669551479723)]

[外链图片转存中…(img-QARRXNls-1669551479724)]

HaungRD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS快速入门
OakHachi'Blog
03-16 751
图解CSS，快速入门实战
快速入门CSS
weixin_72388638的博客
04-04 199
主要用于网页的美化。
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
最新发布
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
Css超级基础
06-04
本教程将带你深入理解CSS的基础概念，让你快速入门网页前台界面的样式设计。 一、CSS简介 1.1 CSS的起源与作用 CSS最初由伯纳德·洛伊·伯特和哈肯·维姆勒在1994年提出，其主要目标是使内容与表现分离，使得内容...
html5+css3从入门到精通
07-03
本教程"html5+css3从入门到精通"针对前端新手，旨在帮助初学者快速掌握这两项核心技术。 HTML5（超文本标记语言第五版）是网页内容结构的标准，它引入了许多新的元素和属性，以更好地表达内容的语义。例如，`...
html和CSS从入门到精通中文版
01-03
本资源"HTML和CSS从入门到精通中文版"旨在帮助初学者快速掌握这两门语言，并逐步提升为专家。 HTML，全称为HyperText Markup Language，超文本标记语言，是用于创建网页的标准标记语言。它通过一系列标签来描述页面...
css入门笔记
05-15
4、spread:阴影的大小，指定要在基础阴影上扩充出来的大小距离，取值以px为单位的数值 5、color：阴影颜色 6、inset:将默认外阴影转为内阴影 在第一位 4、轮廓 轮廓指的是边框的边框，绘制于边框外的线条。 ...
css层叠样式表
tianxuanzhiren_hou的博客
10-20 227
由于主要学习的是python方向，所以接触的前端部分比较基础，并不全面，希望多多指教 简介 什么是CSS？ 层叠样式表：Cascading Style Sheet 有什么作用？ HTML是页面的骨架，而CSS就是对网页骨架内容的修饰 为什么要使用？ 样式和内容写在一起会显得非常臃肿，使用CSS可以将样式单独抽出来，可以提高开发效率。 CSS提供了很多HTML属性无法替代的显示效果。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值