2022年7月27日（Emmet语法、CSS复合选择器、CSS元素显示模式、CSS背景）

已于 2022-08-02 17:42:32 修改
阅读量135 收藏 1
点赞数
分类专栏： 前端笔记 文章标签： css 前端 html
于 2022-07-27 22:30:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44659171/article/details/126010668
版权

目录

一、Emmet语法

1.1 快速生成HTML结构语法

1.2 快速生成CSS样式语法

1.3 快速格式化代码

二、CSS的复合选择器

2.1 后代选择器（重要）

2.2 子选择器

2.3 并集选择器

2.4 伪类选择器

        ①链接伪类选择器

        ②：foucs（焦点/光标）伪类选择器

2.5复合选择器总结

三、CSS的元素显示模式

3.1 什么是元素的显示模式

3.2 元素显示模式的分类

        块元素

        行内元素

        行内块元素

        总结

3.3 元素显示模式的转换

综合案例——小米侧边栏

四、CSS的背景

4.1 背景颜色

4.2 背景图片

4.3 背景平铺

4.3 背景图片位置

        练习的综合代码

        案例一 王者荣耀小图标

        案例二 王者荣耀大图

4.4 背景固定

4.5 背景属性复合写法

4.6 背景颜色半透明

4.7 背景总结

4.8 综合案例——五彩导航

一、Emmet语法

        它使用缩写，来提高html / css 编写速度。

1.1 快速生成HTML结构语法

<body>
    <!-- 生成多个相同的标签：div*2 tab     -->
    <div></div>
    <div></div>

    <!-- 生成父子级的标签：ul>li tab     -->
    <ul>
        <li></li>
    </ul>

    <!-- 生成兄弟级的标签：div+p tab     -->
    <div></div>
    <p></p>

    <!-- 生成带有类名（class）或id名的：.nav 或 #nav (这俩默认给div生成）tab   -->
    <div class="nav"></div>
    <div id="nav"></div>

    <!-- 不给div: 给p标签加了一个class="one"的：p.one tab      -->
    <p class="one"></p>
    <!-- 不给div: 给p标签加了一个id="one"的：p#one tab        -->
    <p id="one"></p>

    <!-- 生成div有顺序的： .one$*3    (默认div标签) -->
    <div class="one1"></div>
    <div class="one2"></div>
    <div class="one3"></div>
    <!-- 生成div有顺序的： #one$*3    (默认div标签)   -->
    <div id="one1"></div>
    <div id="one2"></div>
    <div id="one3"></div>
    <!-- 生成p有顺序的： p.one$*3       (p标签的class属性)    -->
    <p class="one1"></p>
    <p class="one2"></p>
    <p class="one3"></p>
    <!-- 生成p有顺序的： p#one$*3       (p标签的id属性)    -->
    <p id="one1"></p>
    <p id="one2"></p>
    <p id="one3"></p>

    <!-- 给生成的标签里面默认显示几个文字 ：用“ 标签名{} ”      -->
    <!-- div{我是一个div标签}  -->
    <div>我是一个div标签</div>
    <!-- span{我是一个span标签}  -->
    <span>我是一个span标签</span>

    <!--    也可在{}里写数字自增 ： div{$}*5  -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

</body>

1.2 快速生成CSS样式语法

        采取简写形式：如 w200 按tab键 可以生成 width: 200px;

                                      tinoun 按tab键 可以生成 text-indent: noun;

    <style>
        .one{
            /* tanone */
            text-align: center;
            /* ti2em */
            text-indent: 2em;
            /* tdu */
            text-decoration: underline;
            /* w100 */
            width: 100px;
            /* h100 */
            height: 100px;
        }
    </style>

1.3 快速格式化代码

        两行代码没对齐、空格少了等情况：按右键“格式化文档”，或者快捷键 shift alt f

        也可以在设置中搜索：format on save，打上勾（以后保存一次，就会格式化一次）

二、CSS的复合选择器

        建立在基础选择器上，就是其的组合。

        常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

2.1 后代选择器（重要）

        使用场景：选择父元素里面的子元素。改的是元素1的后代，可以改儿子、孙子，层层嵌套。

        语法：（表明选择元素1里的元素2，元素1可以是4种基础选择器的任意一种）

元素1 元素2 {
    样式声明;
}
<head>   
    <style>
        /* 后代选择器 */
        ol li {
            color: pink;
        }
        ol li a {
            color: rgb(169, 169, 19);
        }
        /* 有两个ul的时候，可以对ul使用等级选择器，区分开来 */
        .nav li a {
            color: rgb(0, 255, 128);
        }
    </style>

</head>

<body>
    <ol>
        <li>我是ol的儿子</li>
        <li>我是ol的儿子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ol>

    <ul>
        <li>我是ul的儿子</li>
        <li>我是ul的儿子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>

    <ul class="nav">
        <li>我是ul的儿子</li>
        <li>我是ul的儿子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
</body>

2.2 子选择器

        使用场景：选的是亲儿子元素（最近一级子元素）

        语法：用大于符号>隔开。

元素1>元素2 {
    样式声明;
}
<head>
    <style>
        .nav>a {
            color: aqua;
        }
    </style>
</head>

<body>
  <!-- 改第一个a的样式 -->
    <ul class="nav">
        <a href="#">我是ul的亲儿子</a>
        <li>我是ul的儿子</li>
        <li>我是ul的儿子</li>
        <li><a href="#">我是ul的孙子</a></li>
    </ul>
</body>

2.3 并集选择器

使用场景：可以选择多组标签，同时为他们改相同的样式。通常用于集体声明。

语法：通过英文逗号,连接，任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2 {
        样式声明;
}
<head>
    <style>
        /* 给div p li 定义样式 */
        div,
        p,
        .nav li {
            color: rgb(3, 85, 58);
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <ul class="nav">
        <li>猫爸爸</li>
        <li>猫妈妈</li>
        <li>猫儿子</li>
    </ul>
</body>

 注 ：约定的语法规范，并集选择器喜欢竖着写。

2.4 伪类选择器

        使用场景：给某些选择器添加特殊的效果（如：给链接添加效果：鼠标放到文字上，文字会变色。）

        语法：用英文冒号:表示。

①链接伪类选择器

        给链接<a>添加特殊的4种基本效果：

a:link {
     定义样式；      //选择未访问过的链接
} 

:visited {
     定义样式；      //选择已访问过的链接
} 

:hover {
     定义样式；      //鼠标移到上面，但未点击进去时
} 

:active {
     定义样式；      //鼠标长按时
}

案例代码：

<head>
    <style>
        /* 选择未访问过的链接，并定义一定的样式 : a:link {}  */
        a:link {
            color: #333;
            text-decoration: none;
        }

        /* 选择已访问过的链接 : a:visited {}   */
        a:visited {
            color: orange;
            text-decoration: none;
        }

        /* 选择鼠标经过的链接,: a:hover {}  */
        a:hover {
            color: rgb(0, 166, 255);
            text-decoration: none;
        }

        /* 选择鼠标正在按下但还未松手的链接,: a:active {}  */
        a:active {
            color: rgb(0, 255, 76);
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="#">访问过的</a>
    <a href="http:www.xxx.com">未访问过的</a>
</body>

  注 ：

        1 为了确保生效，请按照LVHA的顺序声明 :link :visited :hover :active

        2 a链接在浏览器中具有默认的样式，所以在实际应用时需要给链接a单独定义样式。

        3 实际开发时最常用的写法：

<style>
    /* a是标签选择器  */
    a {
        color: gray;
    }

    /* :hover是链接伪类选择器  */
    a:hover {
        color:blue;           /* 鼠标经过时，由原来的灰色变为红色*/
    }
</style>

②：foucs（焦点/光标）伪类选择器

        一般情况<input>类表单元素才能获取，这个选择器主要针对表单元素。


input:focus {
    定义样式；
}

例子代码：

<head>
    <style>
        /* 获得光标的时候才有这种效果,失去了就没了(鼠标离开时) */
        input:focus {
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

2.5 复合选择器总结：

三、CSS的元素显示模式

3.1 什么是元素的显示模式

        即：元素（标签）以什么方式进行展示。

3.2 元素显示模式的分类

        HTML元素一般分为块元素和行内元素。

  • 块元素

        常见的块元素：<h> <p> <ul> <ol> <li> <div>等，其中<div>是最典型的块元素

特点：

        1 在页面中自己独占一行；

        2 所有的块元素都可以控制：高度、宽度、外边距、内边距；

        3 若没指定宽度的话，宽度默认是容器（父级宽度）的100％；

        4 块元素是一个容器/盒子，里面可以装块内元素或者行内元素； 

        5 文字类的元素内不能使用块元素（比如<p>或者<h>里不能放<div>以及其他块元素）

  •  行内元素

        常见的行内元素<a> <strong> <em> <del> <ins> <span>等，其中<span>是最典型的行内元素

特点：

        1 相邻行内元素在一行上，一行可以有多个行内元素

        2 设置行内元素的宽度和高度是没有效果的

        3 默认宽度是它本身内容的宽度

        4 行内元素只能容纳文本或其他行内元素，不能放块元素

        5 <a>链接里不能再放链接，但特殊的是<a>里面可以放块元素，给<a>转化成块级模式最安全

  • 行内块元素

        同时具有块元素和行内元素的特点（有些资料）—— 常见的有</img> <input/> <td>等。

特点：

        1 一行可以显示多个（行内元素特点）；

        2 默认宽度就是它本身内容的宽度（行内元素特点）；

        3 可以控制高度，行高、外边距以及内边距（块元素特点）

元素显示模式总结

3.3 元素显示模式的转换

        一个模式的元素需要用另外一种模式的特性：如<a>是行内元素，但它需要控制宽度（块元素）的特性，这时就需要进行转换。

  •       转换为块元素： display:block; √
  •       转化为行内元素： display:inline;
  •       转化为行内块元素：display:inline-block; √

  写如下代码是不改变不了行内元素<a>的高度和宽度（块元素特性）的：

<head>
     <style>
        a {
            width: 150px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <a href="#">我是一个行内元素</a>
</body>

在a{ }中加入如下代码，行内元素a就拥有了块元素特性

    display: block;

        写如下代码是不改变不了块元素<div>的能在一行显示多个(行内元素特性)的：

<head>
         div {
            width: 300px;
            height: 50px;
            background-color: rgb(15, 165, 62);
    }
    </style>
</head>

<body>
    <div>我是一个块级元素</div>
    <div>我是一个块级元素</div>
</body>

在div { }中加入如下代码，块元素div就拥有了行内元素特性：

  display: inline;

3个转化的例子代码：

<head>
<title>行内元素与块元素的相互转换</title>
    <style>
        /* 转换为块元素 */
        a {
            width: 150px;
            height: 100px;
            background-color: pink;
            display: block;
        }

        /* 转换为行内元素 */
        div {
            width: 300px;
            height: 50px;
            background-color: rgb(15, 165, 62);
            display: inline;
        }

        /* 转换为行内块元素 */
        span {
            width: 300px;
            height: 50px;
            background-color: rgb(178, 165, 20);
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">我是一个行内元素,但我能控制高度和宽度</a>
    <div>我是一个块级元素,但我能一行显示多个</div>
    <div>我是一个块级元素,但我能一行显示多个</div>
    <span>我是一个行内元素，我转换成了行内块元素，可以控制高度了</span>
</body>

综合案例——小米侧边栏

步骤：

        1 把链接a转化为块元素（display:block），这样链接就可以独占一行，并且可以控制宽度和高度

        2 设置宽度，高度，背景颜色，文字大小，文字颜色，文字字体，去掉链接的下划线

        3 鼠标经过a链接但未按下时，为其设置背景颜色(a:hover{ })

        4 让单行文字垂直居中：让文字的行高=盒子的高度  line-height: 42px; height: 42px;

注：

        行高<盒子高度：文字偏上

        行高>盒子高度：文字偏下 

代码： 

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易小米侧边栏</title>
    <style>
        a {
            display: block;
            width: 234px;
            height: 42px;
            background-color: rgb(63, 61, 62);
            font-size: 14px;
            color: white;
            text-decoration: none;
            text-indent: 2em;
            font-family: "Helvetica Neue", Helvetica, Arial;
            line-height: 42px;
        }

        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </style>
</head>

<body>
    <!-- a是行内元素 -->
    <div>
        <a href="#"> 手机 </a>
        <a href="#"> 电视 </a>
        <a href="#"> 笔记本 平板 </a>
        <a href="#"> 出行 穿戴 </a>
        <a href="#"> 耳机 音响 </a>
        <a href="#"> 家电 </a>
        <a href="#"> 智能 路由器 </a>
        <a href="#"> 电源 配件 </a>
        <a href="#"> 健康 儿童 </a>
        <a href="#"> 生活 箱包 </a>
    </div>
</body>

 效果：

四、CSS的背景

        通过CSS背景属性，可以给页面元素添加背景样式。

4.1 背景颜色

background-color: 颜色;  // 如果不加： transparent (透明)

4.2 背景图片

background-image: url(图片路径);  //url是必须的，如果不加：noun

注：页面元素既可以添加背景颜色，也可以添加背景图片

4.3 背景平铺

background-repeat: repeat; //默认的是平铺:repeat
                            //不平铺：no-repeat
                            //沿着x/y轴平铺：repeat-x / repeat-y

4.3 背景图片位置

        可以改变图片在背景中的位置。 

background-position: x y;

  • 参数是方位名词：

        1 两个值前后顺序无关，left top 与 top left 的效果一致

        2 只写一个参数时，另一个就是默认值：居中对齐（写top，那么x参数就是水平居中；写left，那么y参数就是垂直居中的）

  • 参数是精确单位：

        1 顺序严格遵守 ：x坐标 y坐标

        2 只写一个参数时，默认这个值是x坐标，另一个y坐标默认垂直居中

  • 参数是混合单位：

        顺序严格遵守 ：x坐标 y坐标

练习的综合代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 背景颜色设置成透明色/红色：  */
            /* background-color: transparent; */
            background-color: pink;

            /* 给盒子设置背景图 */
            width: 500px;
            height: 500px;
            background-image: url(images/bg.png);

            /* 背景平铺\不平铺\沿着x轴平铺\沿着y轴平铺 */
            /* background-repeat: repeat; */
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */

            /* 背景图片位置: 方式1 方位名词  (不分顺序) */
            background-position: left top;
            /*  =  background-position: top left; */

            /* 省略x时,默认是x=center */
            background-position: top;

            /* 省略y时,默认是y=center */
            background-position: left;

            /* 背景图片位置: 方式2 具体数值 (有顺序)*/
            /* x=20,y=50 */
            background-position: 20px, 50px;

            /* x=20,y默认为垂直居中 */
            background-position: 20px;

            /* 背景图片位置: 方式3 混合单位 (有顺序) */
            /*  x=center,y=20px */
            background-position: center, 20px;
            /* x=20px,y=top     */
            background-position: 20px, top;

        }
    </style>
</head>

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

</html>

案例一 王者荣耀小图标

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景案例1 (王者荣耀--小图标)</title>
    <style>
        h3 {
            /* 根据 "网页-检查"得来宽和高 */
            width: 117.98px;
            height: 40.99px;
            /* 行高=盒子高:实现文字垂直居中效果 */
            line-height: 40.99px;
            /* background-color: orange; */
            font-size: 14px;
            /* 给标题去除加粗效果 */
            font-weight: 400;
            /* 缩进以显示背景图标 */
            text-indent: 2em;
            /* 将图标设置成背景图, 不平铺, 位置为 "水平居左 垂直居中" */
            background-image: url(images/title_circle.png);
            background-repeat: no-repeat;
            background-position: left center;

        }
    </style>
    </?title>

<body>
    <h3>成长守护平台</h3>
</body>

</html>

案例二 王者荣耀大图

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景案例2 (王者荣耀--大图) .html</title>
    <style>
        body {
            background-image: url(images/datu_bg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
        }
    </style>
</head>

<body>

</body>

</html>

4.4 背景固定

  /* 滚动页面字体时, 背景图片固定 */
            background-attachment: fixed;

4.5 背景属性复合写法

习惯约定顺序（不是特定）：

背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置；

4.6 背景颜色半透明

/* 背景色半透明 */
     background: rgba(0, 0, 0, 0.3);
     
    =
    
     background: rgba(0, 0, 0, .3);

   注：

        1 最后一个参数范围为0~1 ,习惯写为.几

        2 背景半透明是指的盒子背景半透明，盒子里面的内容不受影响

        3 这是CSS新增属性，IE9+版本浏览器才支持

4.7 背景总结

4.8 综合案例——五彩导航

 完整代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航--放到一个盒子里</title>
    <style>
        #box a {
            /* 将行内元素转换成行内块元素,才能设置宽度和高度(块元素的特性) */
            display: inline-block;
            /* 宽度和高度是背景图的大小 */
            width: 120px;
            height: 58px;
            /* 文字水平居中: */
            text-align: 45px;
            /* 文字垂直居中: 行高=盒子高度 */
            line-height: 48px;
            font-size: 14px;
            text-indent: 2.8em;
            text-decoration: none;
            color: rgb(242, 241, 241);
            /* background: no-repeat fixed; */
        }

        /* 每个a的背景图都不同,所有每个都要设置  */
        #box .a1 {
            background-image: url(images/bg1.png);
        }

        #box .a1:hover {
            background-image: url(images/bg2.png);
        }

        #box .a2 {
            background-image: url(images/bg3.jpg);
        }

        #box .a2:hover {
            background-image: url(images/bg4.png);
        }

        #box .a3 {
            background-image: url(images/bg5.png);
        }

        #box .a3:hover {
            background-image: url(images/bg6.png);
        }

        #box .a4 {
            background-image: url(images/bg7.png);
        }

        #box .a4:hover {
            background-image: url(images/bg8.png);
        }
    </style>
</head>

<body>
    <div id="box">
        <a href="#" class="a1">我是1</a>
        <a href="#" class="a2">我是2</a>
        <a href="#" class="a3">我是3</a>
        <a href="#" class="a4">我是4</a>
    </div>
</body>

</html>

今天一定要早睡
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS学习中EMMET语法、复合选择器、元素选择模式、以及背景的一些总结
11-04
在CSS的学习过程中，掌握EMMET语法、复合选择器、元素选择模式以及背景的设定是非常重要的。下面将分别对这些知识点进行详细的阐述。 首先，EMMET（前身为Zen Coding）是一种高效的HTML和CSS代码编写工具，它能显著...
CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性
12-05
CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶： 在CSS中，选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上，进一步学习和应用选择器的高级规则和...
本人纯手敲的CSS笔记
06-08
#### 六、CSS 复合选择器 - **后代选择器**： - 语法：`element1 element2{ /* CSS 规则 */ }` - 特点：选择 element1 下的所有 element2 元素。 - 可以多层次嵌套选择。 - **子元素选择器**： - 语法：`element...
前端PC端布局CSS基础
03-19
七、CSS复合选择器 1. 后代选择器（包含选择器）：`parent > child`，选择父元素下的子元素。 2. 子元素选择器（子选择器）：`parent > child`，只选择直接子元素。 3. 并集选择器：`selector1, selector2`，将两个...
它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度
12-22
标题中的“它使用仿CSS选择器的语法来生成代码”指的是Emmet，这是一个非常流行的Web开发工具，尤其在HTML和CSS编码中广泛使用。Emmet通过简化和加速编写复杂的HTML结构和CSS规则来提高开发效率。它允许开发者使用...
CSS；笔记分享；知识回顾
最新发布
weixin_72637723的博客
08-26 407
CSS；笔记分享；知识回顾；选择器
CSS”包装盒“--盒模型——WEB开发系列17
一条晒干的咸鱼的博客
08-23 1192
CSS 盒模型（Box Model）在 CSS 中，所有的元素都被一个个的“盒子”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。
CSS 图像拼合技术
wjs2024的博客
08-22 388
CSS 图像拼合技术是一种通过将多个图像合并成一张大图，然后利用 CSS 的背景定位功能来显示所需图像部分的技术。这种技术被广泛用于网页设计中，以提高页面加载速度和减少 HTTP 请求次数。本文将详细介绍 CSS 图像拼合的原理、方法和最佳实践。
vue 动态设置每个tab的颜色scss
qq_32555123的博客
08-20 316
vue设置动态tab样式和颜色
CSS 的了解text-rendering属性
读心悦
08-23 496
然而，由于这个值较新，且支持情况可能因浏览器而异，因此在广泛使用之前可能需要更多的测试和验证。浏览器可能会使用抗锯齿技术或其他技术来改善文本的视觉效果，但这也可能导致渲染速度下降。时需要注意的是，虽然它可以提高文本的可读性或渲染速度，但过度使用可能会影响网页的整体性能和布局。最后，由于网页设计的不断发展和浏览器的持续更新，建议定期检查最新的 CSS 规范和浏览器支持情况，以便及时了解并使用新的特性和技术。因此，在使用时应该考虑到这些因素，并进行适当的测试以确保跨浏览器的兼容性。此外，不同的浏览器可能对。
原神4.8版本抽到角色和重点培养数据表
lulei5153的博客
08-20 681
【代码】原神4.8版本抽到角色和重点培养数据表。
响应式 Web 设计：纯 HTML 和 CSS 的实现技巧
windowshht的博客
08-22 841
响应式 Web 设计是现代网页开发的重要组成部分，能够为用户提供一致的体验。通过使用纯 HTML 和 CSS，您可以实现灵活的布局、适应不同设备的图像和样式。本文介绍的技巧和示例将帮助您在项目中有效地应用响应式设计。希望您能在实践中不断探索和优化，创造出更好的用户体验。如需深入了解响应式设计的更多内容，建议参考相关书籍和在线资源，持续学习和实践。
html基础标签
做一位与众不同的吗喽
08-23 315
HTML（HyperText Markup Language）是构建网页和网页应用的标准标记语言。它由一系列的元素（elements）组成，这些元素通过标签（tags）来定义。
CSS 元素的尺寸
qq_39691676的博客
08-21 536
以下方法只是拿的width举例。
CSS 的font-variant属性
读心悦
08-26 304
CSS 属性用于控制小型大写字母（small-caps）的渲染。它主要用于在需要强调文本或改变文本风格时，提供一种视觉上更加优雅的展示方式。然而，需要注意的是，并非所有字体都支持小型大写字母的渲染，这取决于字体的具体设计和支持情况。
CSS文本样式（二）
qq_72013756的博客
08-21 706
从零开始学前端
esbuild中的CSS处理：高效且强大的构建工具
计算机图形学
08-21 444
在现代前端开发中，构建工具扮演着至关重要的角色，它们帮助我们优化资源、提高加载速度，并确保代码在各种浏览器中的兼容性。esbuild是一款新兴的构建工具，以其出色的性能和丰富的功能受到了开发者的青睐。本文将深入探讨esbuild中的CSS处理能力，展示其如何通过内置的CSS Loader实现高效的CSS打包和优化，以及它如何帮助开发者处理现代CSS特性和浏览器兼容性问题。
CSS 的文字平滑属性font-smooth
读心悦
08-23 327
此外，还有一些其他的方法可以间接地改善文字的平滑度和可读性，比如选择合适的字体、调整字体大小、使用字体加载策略（如Font Loading API）来优化字体文件的加载和渲染等。这样的属性，但可以通过一些间接的方法和属性来控制文字的平滑度和可读性。在实际应用中，应该根据具体需求和目标受众来选择合适的方法，并考虑到跨浏览器兼容性和性能优化的问题。是一个非标准的属性，它的支持可能因浏览器而异，并且在未来的浏览器版本中可能会被弃用或更改。属性，这是一个非标准的CSS属性，用于控制字体渲染的平滑度。
CSS“叠叠乐”——WEB开发系列16
一条晒干的咸鱼的博客
08-22 1039
在现代前端开发中，CSS 是控制网页外观和布局的核心工具。随着项目的复杂化和样式规则的增加，CSS 层叠（cascade）变得更加重要。为了更好地管理和控制样式规则的应用，CSS 引入了层叠层（cascade layers）的概念。
Emmet语法与CSS复合选择器速成教程：提升开发效率
在CSS学习的第二天，主要探讨了Emmet语法和CSS的复合选择器，这两个主题对于提升开发效率至关重要。 首先，Emmet语法是一种在编写HTML和CSS时使用的简写和快捷输入技术。它的前身是Zencoding，被集成到Visual ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今天一定要早睡

你的鼓励，我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值