CSS第一节

最新推荐文章于 2024-05-14 18:04:32 发布
最新推荐文章于 2024-05-14 18:04:32 发布
阅读量464 收藏
点赞数
分类专栏： HTML5+CSS3 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56600567/article/details/125954931
版权

文章目录


上一章

CSS

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单
在这里插入图片描述

CSS 语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号":“分开。CSS声明总是以分号” ;" 结束，声明总以大括号" {} "括起来

CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

基础选择器

  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符选择器

标签选择器

标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式
语法

标签名{
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 ...
}

作用
标签选择器可以把某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
优点
能快速为页面中同类型的标签统一设置样式。
缺点
不能设计差异化样式，只能选择全部的当前标签。

类选择器

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点" ." 号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
语法

.类名 {
 属性1: 属性值1; 
 ...
}

示例：将所有拥有 red 类的 HTML 元素均为红色。

.red {
 color: red;
}
练习案例
<!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>
        .red {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            /* 背景颜色 */
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="red">第一个盒子</div>
    <div class="green">第二个盒子</div>
    <div class="red">第三个盒子</div>
</body>
</html>

在这里插入图片描述

多类名

多类名：一个标签有多个类名
类名之间用空格隔开

多类名开发中使用场景
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类.
(3) 从而节省CSS代码,统一修改也非常方便.

练习案例
<style>
        .red {
            color: red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>

<div class="red font35">你好，中国</div>

在这里插入图片描述

<!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>
        .red {
            /* 背景颜色 */
            background-color: red;
        }
        .green {
            /* 背景颜色 */
            background-color: green;
        }
        .size {
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="red size">第一个盒子</div>
    <div class="green size">第二个盒子</div>
    <div class="red size">第三个盒子</div>
</body>
</html>

在这里插入图片描述

补充：类的命名规范
  • 长名称或词组可以使用中横线来为选择器命名。
  • 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
  • 命名要有意义，尽量使别人一眼就知道这个类名的目的。
  • 在标签class 属性中写 多个类名，中间必须用空格分开
id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
语法

#id名 {
 属性1: 属性值1; 
 ...
}

注意：id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用

以下的样式规则应用于元素属性 id=“para1”

#para1
{
    text-align:center;
    color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

通配符选择器

在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）

  • 通配符选择器不需要调用， 自动就给所有的元素使用样式
  • 特殊情况才使用

语法

* {
 属性1: 属性值1; 
 ...
}

CSS 字体属性

Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
CSS 使用 font-family 属性定义文本的字体系列。

在这里插入图片描述

字体系列

CSS 使用 font-family 属性定义文本的字体系列。

p { font-family:"微软雅黑";} 
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
  • 各种字体之间必须使用英文状态下的逗号隔开
  • 一般情况下,如果有空格隔开的多个单词组成的字体,加引号
  • 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  • 最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }
通用字体族

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。
    在这里插入图片描述

大小

CSS 使用 font-size 属性定义字体大小。

p { 
 font-size: 20px; 
}
  • px（像素）大小是我们网页的最常用的单位
  • 谷歌浏览器默认的文字大小为16px
  • 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  • 可以给 body 指定整个页面文字的大小

粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

p { 
 font-weight: bold;
}

在这里插入图片描述

<style>
p.normal {
  font-weight: normal;
}

p.light {
  font-weight: lighter;
}

p.thick {
  font-weight: bold;
}

p.thicker {
  font-weight: 900;
}
</style>

在这里插入图片描述

文字样式

CSS 使用 font-style 属性设置文本的风格

p { 
 font-style: normal;
}

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）
<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>

在这里插入图片描述

字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

body { 
 font: font-style font-weight font-size/line-height font-family; 
 }
  • 使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
  • 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

CSS 文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
在这里插入图片描述

文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

  • 颜色名 - 比如 “red”
  • 十六进制值 - 比如 “#ff0000”
  • RGB 值 - 比如 “rgb(255,0,0)”

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

在这里插入图片描述

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

在这里插入图片描述

文字装饰

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

在这里插入图片描述

<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>

在这里插入图片描述

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

p {
  text-indent: 50px;
}

在这里插入图片描述

行间距

line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离.

p.small {
  line-height: 0.7;
}

p.big {
  line-height: 1.8;
}

在这里插入图片描述

三种使用 CSS 的方法

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

外部CSS

通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！
每张 HTML 页面必须在 head 部分的 元素内包含对外部样式表文件的引用。

<link rel="stylesheet" href="/demo/css/mystyle.css">
  • 外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。
  • 外部 .css 文件不应包含任何 HTML 标签。
/* mystyle.css */
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

内部 CSS

如果一张 HTML 页面拥有唯一的样式，那么可以使用内部样式表。

内部样式是在 head 部分的 <style> 元素中进行定义。

<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>

行内 CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式。

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<body>

<h1 style="color:blue;text-align:center;">这是标题</h1>
<p style="color:red;">这是一个段落。</p>

</body>

在这里插入图片描述

练习案例：新闻


<!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>
        body {
            font: 16px/28px 'Microsoft YaHei';
        }
        .h1 {
            /* 设置居中，字体设置不要那么粗 */
            text-align: center;
            font-weight: 500;
        }
        /* 设置加粗类 */
        .bold {
            font-weight: bold;
        }
        /* 特殊文字段：设置居中，字号较小，灰色 */
        .text {
            text-align: center;
            font-size: small;
            color: grey;
        }
        .search {
            color: silver;
        }
        /* 删除下划线 */
        .underline {
            text-decoration:none;
        }
        /* 首行缩进 */
        .p {
            text-indent: 2em;
        }
        /* 页尾设置：字号小，字灰色 */
        .footer {
            color: gainsboro;
            font-size: small;
        }
    </style>
    
</head>
<body>
    <h1 class="h1">北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
    <div class="text">
        2019-07-03 16:31:47 来源: 
        <a href="#" class="underline">中国天气网</a> 
        <input type="text" value="请输入查询条件..." class="search">
        <input type="button" value="搜索" class="bold">
    </div>
    <!-- hr:分ge线 -->
    <hr>

    <p class="p">中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

    <p class="bold">气温41.4℃！地温66.5！北京强势迎七月首个高温日</p>

    <!-- 图片居中：因为不知道如何设置，先把它放入盒子中，再设置居中 -->
    <div style="text-align: center;"><img src="images/pic.jpeg"></div>
    <p class="p">今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>

    <p class="p">在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

    <p class="bold">明日热度再升级！京津冀携手冲击38℃+</p>

    <p class="p">中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
    <p class="p">不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

    <p class="footer p">本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</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>个人简历</title>
    <style>
        .body {
            width: 600px;
            color: gray;
        }
        .h2 {
            color: #0033cc;
            font-size: 25px;
        }
        .td{
            font-size: 20px;
            font-weight:bold;
        }
        /* 首行缩进 */
        .p {
            text-indent: 2em;
        }
        .blod {
            font-weight: bold;
        }
        .left {
            align:"left";
            width:"200px";
            color: rgb(68, 116, 219);
            font-weight: bold;
        }
        .right {
            text-align: end;
            width:"400px";
            color: rgb(68, 116, 219);
            font-weight: bold;
        }
    </style>
</head>
<body class="body">
    <h1>专业简历</h1>
    <!-- 个人信息： -->
    <div>
        <div class="h2">
            <img src="images/个人信息.png" height="30px" weight="30px">
            个人信息
        </div>
        <hr>
        <table cellpadding="10">
            <tbody>
                <tr><td colspan="2" class="td">个人信息</td></tr>
                <tr><td>姓名：张三</td><td>年龄：29</td></tr>
                <tr><td>电话：135xxx9999</td><td>邮箱：zhangsan@itcast.cn</td></tr>
            </tbody>
        </table>
        <table cellpadding="8">
            <tbody>
                <tr><td colspan="2" class="td">求职意向</td></tr>
                <tr><td>从事职业：前端工程师</td><td> 期望月薪：10k-15k</td></tr>
            </tbody>
        </table>
        <br>
    </div>
    <!-- 教育经历： -->
    <div>
        <div class="h2">
            <img src="images/教育经历.png" height="30px" weight="30px">
            教育经历
        </div>
        <hr>
        
        <table>
            <h3>教育背景</h3>
            <tbody>
                <tr><td>学校名称：北京某学校</td><td>就读时间：2007.07-2010.10  </td></tr>
                <tr><td>所学专业：计算机科学与技术</td></tr>
            </tbody>
        </table>
        <br>
        <div>
            <h3>证书</h3>
            <ul>
                <li>舞蹈大赛一等奖</li>
                <li>十佳学习标兵</li>
                <li>歌唱比赛三等奖</li>
                <li>优秀读者</li>
                <li>优秀实习生</li>
            </ul>
        </div>
        <div>
            <h3>教育经历</h3>
            <p class="p">大一和大二期间，在学院组织部任职，虽然管理的是学生，但锻炼了我的组织能力。大一到大三我都是校报记者团成员，发表了20篇稿子，这很好地锻炼了我的文笔，大三暑假我在一家传媒公司实习了三个月，实习职位是文案策划，这次实习我的收获很大，无论是在工作经验上，还是在为人处事上，我觉得这为我以后的职业生涯打下了很好的基础。现在，我想找一份文案策划工作，我在实习期间对文案策划这个职位的工作内容有了一定的了解，我很喜欢这样的工作，三个月的实习也算是一种工作经验。</p>
        </div>
        <br>    
    </div>
    <!-- 工作经历： -->
    <div>
        <div class="h2">
            <img src="images/工作经历.png" height="30px" weight="30px">
            工作经历
        </div>
        <hr>
        <div>
            <table>
                <tbody>
                    <tr><td class="left">20XX/4 — 20XX/6</td><td class="right">XX有限公司[1年2个月]</td></tr>
                    <tr><td class="left">所属行业：检测/认证</td><td class="right">职务:实验室质量管理编制员</td></tr>
                    <tr><td colspan="2">
                        <ol>
                            <li>协助项目工程质量管理体系的策划、质量管理的标准、制度、程序和作业文件的编制。</li>
                            <li>对项目材料专业的建设方主体质量行为和实体工程质量监督检查。</li>
                            <li>负责对承包商、监理、设备监造、独立无损检测单位质量管理文件的审查。</li>
                        </ol>
                    </td></tr>
                </tbody>
            </table>
        </div>
        <div>
            <table>
                <tbody>
                    <tr><td class="left">20XX/6 — 20XX/3</td><td class="right">XX有限公司[9个月]</td></tr>
                    <tr><td class="left">所属行业：检测/认证</td><td class="right">职务:实验室工程监理</td></tr>
                    <tr><td colspan="2">
                        <ol>
                            <li>对项目材料专业的建设方主体质量行为和实体工程质量监督检查。</li>
                            <li>负责对承包商、监理、设备监造、独立无损检测单位质量管理文件的审查。</li>
                            <li>负责工程项目实施过程的质量文件和工程归档资料的审查。</li>
                        </ol>
                    </td></tr>
                </tbody>
            </table>
        </div>
        <br>
    </div>
    <!-- 自我评价 -->
    <div>
        <div class="h2">
            <img src="images/自我评价.png" height="30px" weight="30px">
            自我评价
        </div>
        <hr>
        <p class="p">本人性格开朗、稳重、有活力，待人热情、真诚；工作认真负责，积极主动，能吃苦耐劳，用于承受压力，勇于创新；有很强的组织能力和团队协作精神，具有较强的适应能力；纪律性强，工作积极配合；意志坚强，具有较强的无私奉献精神。</p>

        <p class="p">对待工作认真负责，善于沟通、协调有较强的组织能力与团队精神；活泼开朗、乐观上进、有爱心并善于施教并行；上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中，我将以充沛的精力，刻苦钻研的精神来努力工作，稳定地提高自己的工作能力，与企业同步发展。</p>
    </div>
</body>
</html>

在这里插入图片描述

芒着可爱
关注
专栏目录
第一节 初识DIV+CSS
04-17
1. DIV+CSS简介 业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在DIV+CSS标准化的影响下网页设计人员已经把这一要求作为行业标准。那么什么是DIV+CSS标准？DIV+CSS的标准化设计...
CSS布局第一节课
dessert_xiaowo的博客
09-01 303
margin在做自适应模块时，如果要贴边，用应该在CSS中改变body的默认属性才能做到贴边的效果: body{margin:0; padding:0;} 一列布局 让模块水平居中，采用 margin:0,auto;的方法使其水平居中。 二列布局 左右的模块采取 float：left/right两种形式，并用width和height对其设置长宽。 三列布局 三列布局的左右两个模块不采用浮“浮动”的方
CSS第一节总结
qq_58957340的博客
03-02 159
CSS：层叠样式表 （Cascading Style Sheets） HTML（结构层）用来搭建网页基本骨架CSS（表现层）用来修饰主页 javascript（行为层）脚本 优点 使HTML专注于网页的内容，CSS专注于网页的表现 提供了丰富的格式化功能 可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式 CSS与浏览器 并不是所有的CSS的样式都被浏览器支持 不同的浏览器对CSS的实现有细微的不同，需要特别注意 Css语法属性值和属性值之间
css第一节
zifeiyu3697的博客
03-02 401
html用来搭建网站基本骨架 结构层 css 用来修饰你的网页 表现层 javascript 脚本 行为层 css语法 css样式属性名:属性值 CSS:层叠样式表（Cascading Style Sheets） 优点:使HTML专注于网页的内容，CSS专注于网页的表现 提供了丰富的格式化功能 可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式 CSS与浏览器:并不是所有的CSS的样式都被浏览器支持 不同的浏览器对CSS的实...
css第二节总结
qq_58957340的博客
03-03 418
通配符选择器 选择所有的元素，常常用来做元素格式化 CSS修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签 通配选择器 即所有的标签 语法：*{规则} 例：*{font-family:"宋体";} 类型（标记）选择器 即使用标签的名字作为选择符 语法：标签{规则} 例：td{color:#F00;} 分组选择器： 有相同样式时可以用分组选择器写一块 例如： 伪类 未访问状态a:link{} 访问后状态a:visited{} 鼠标悬停
html+css学习第一节
m0_74110356的博客
10-20 1665
html+css学习第一节
纯CSS3实现鼠标滑过按钮动画第二节
01-19
并且，本章节（按钮组:有趣的CSS按钮动画，带你进入CSS世界）也就到此结束了，本章结尾会对前3小节进行一定的总结。 下面继续本小节的主题，请先看一下效果示例： 看过前两小节的小伙伴，可能不需要看下面的源码，...
CSS教程(4)：通过实例学习CSS背景
01-19
参考软件开发网关于CSS背景的理论知识：CSS教程(1)：学习CSS背景相关知识。 1、如何仅显示一次背景图像 本例演示如何仅显示一次背景图像。 <html><head><style type=text/css>body{ background-...
css视频教程第一部分
04-19
对初学者有很大帮助 上面讲的很详细 这是前三节内容
网页入门html+css+javascript第一节基础
03-13
网页入门html+css+javascript第一节基础 ppt 课件
Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
三月和九月的博客
05-11 948
在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。
css超出部分省略（单行、多行，多种方法实现）
阿乐的博客
05-14 393
缺点:使用了私有属性。
CSS文字描边，文字间隔，div自定义形状切割
m0_61604012的博客
05-10 147
CSS文字描边，文字间隔，div自定义形状切割
TailwindCSS在vite项目中的安装与使用
前端菜菜DayDayUp的博客
05-14 299
TailwindCSS在vite项目中的安装与使用
Sass详解：颠覆CSS开发的新时代
q_913246828的博客
05-11 294
本文深入探讨了Sass作为CSS的扩展语言的各项特性、优势以及应用场景。Sass提供了诸如变量、嵌套、Mixin等功能，帮助开发者提高开发效率和样式代码的可维护性。同时，Sass在大型项目和团队协作中有着广泛的应用，成为提升前端开发效率和质量的重要工具。
css 案例 横向滚动渐变
weixin_38982591的博客
05-11 234
【代码】css 案例 横向滚动渐变。
在 CSS 中使用 text-emphasis 来增强文本的趣味性
最新发布
前端全栈开发者
05-14 323
您可以更改颜色、大小、字体，甚至添加阴影和轮廓等效果。但最近，我了解到一个我以前没有听说过的时尚 CSS 属性，它非常棒！属性是一种有趣的方式，可以增加对文本的强调，并可用于为您的设计增添趣味。大多数现代浏览器都支持它，因此您可以立即开始使用它来使您的文本脱颖而出！属性组合的简称，可以为文本添加强调标记。这些标记可用于以各种方式突出显示文本，例如在文本上方或下方添加点、圆、双圆或文本。您甚至可以使用表情符号来强调文本。您也可以使用字母来强调文本。这将在文本顶部添加一个点，如下所示。
css 子元素 圆 均匀分布 展开动画
qq_36287830的博客
05-10 628
scss 实现 圆均匀分布 展开动画
常用CSS和XPATH元素定位方法
m0_61722509的博客
05-11 183
表示id. 表示class空格 表示tag, 表示或(,的优先级比较低，注意加括号):nth-child(n),表示父节点的第n个子节点:nth-last-child(n),表示父节点的倒数第n个子节点Span:nth-of-type(n)，表示父节点的第n个类型为span的元素Span:nth-last-of-type(n)，表示父节点的倒数第n个类型为span的元素元素1 + 元素2 表示元素2是元素1后面紧跟的兄弟。
css229中第12讲笔记
08-20
CSS动画是一种通过改变元素的样式和属性来创建动画效果的方法。我们可以使用@keyframes规则来定义动画的不同阶段，并使用animation属性来控制动画的播放。 接下来，我们学习了如何使用@keyframes规则来定义动画的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值