HTML_CSS学习：常用文本属性

news2024/11/23 17:14:44

一、文本颜色

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本颜色</title>
    <style>
        div{
            font-size: 90px;
        }
        .atguigu1{
            color: #238c20;
        }
        .atguigu2{
            color: rgb(255,0,0);
        }
        .atguigu3{
            color: rgba(0,255,0,0.5);
        }
        .atguigu4{
            color: #0000ff;
        }
        .atguigu5{
            color: #0000ff88;
        }
        .atguigu6{
            color: hsl(0,100%,50%);
        }
        .atguigu7{
            color: hsla(0,100%,50%,0.5);
            background-color: orange;
        }
        /*属性名：color*/
        /*可选值：*/
        /*1.颜色值*/
        /* 2.rgb或rgba*/
        /*  3.HEX或HEXA*/
        /*   4.HSL或HSLA*/
        /*    开发中常用的是 rgb/rgba  或HEX\HEXA(十六进制)*/
    </style>
</head>
<body>
    <div class="atguigu1">尚硅谷1</div>
    <div class="atguigu2">尚硅谷2</div>
    <div class="atguigu3">尚硅谷3</div>
    <div class="atguigu4">尚硅谷4</div>
    <div class="atguigu5">尚硅谷5</div>
    <div class="atguigu6">尚硅谷6</div>
    <div class="atguigu7">尚硅谷7</div>


</body>
</html>

显示结果：

二、文本间距

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本间距</title>
    <style>
        div{
            font-size: 30px;
        }
        .atguigu2{
            /*字符间距*/
            letter-spacing: 20px;
        }
        .atguigu3{
            /*单词之间的间距*/
            word-spacing: 20px;
        }
    </style>
</head>
<body>
    <div>The knowledge points of the article.尚硅谷1</div>
    <div class="atguigu2">The knowledge points of the article.尚硅谷2</div>
    <div class="atguigu3">The knowledge points of the article.尚硅谷3</div>

</body>
</html>

显示结果：

三、文本修饰

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本修饰</title>
    <style>
        div{
            font-size: 40px;
        }
        .atguigu1{
            /*上划的虚线*/
            text-decoration: overline dotted greenyellow;
            /*属性没有顺序要求*/
        }
        .atguigu2{
            /*text-decoration: underline dotted;*/
            /*下划的波浪线*/
            text-decoration: underline wavy red;
        }
        .atguigu3{
            /*删除线*/
            text-decoration: line-through;
        }
        /*.atguigu4{*/
        /*    text-decoration: none;*/
        /*}*/
        .atguigu4,ins,del{
            /*没有各种线*/
            font-size: 40px;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="atguigu1">尚硅谷1</div>
    <div class="atguigu2">尚硅谷2</div>
    <div class="atguigu3">尚硅谷3</div>
    <a class="atguigu4" href="https://www.baidu.com">尚硅谷4</a>
    <br>
    <ins>测试1</ins>
    <br>
    <del>测试2</del>


</body>
</html>

显示结果：

四、文本缩进

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本缩进</title>
    <style>
        div{
            font-size: 60px;
            text-indent: 120px ;
        }
    </style>
</head>
<body>
    <div>欢迎来到信阳农林学院！欢迎来到信阳农林学院！欢迎来到信阳农林学院！欢迎来到信阳农林学院！</div>

</body>
</html>

显示结果：

五、文本对齐_水平

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐</title>
    <style>
        div{
            font-size: 40px;
            background-color: orange;
            /*text-align: left;*/
            text-align: center;
            /*文本对齐_水平*/
            /*常用值：*/
            /*1.left：左对齐*/
            /*2.right:右对齐*/
            /*3.center:居中对齐*/
        }
    </style>
</head>
<body>
    <div>尚硅谷</div>

</body>
</html>

显示结果：

六、细说font-size

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>细说font-size</title>
    <style>
        div{
           font-size: 40px;
        }
        /*由于字体设计原因，文字最终呈现的大小，并不一定与font-size的值一致，可能大，也可能小*/
        /*例如：font-size设为40px,最终呈现的文字，可能比40px大，也可能比40px小*/
        /*通常情况下，文字相对字体设计框，并不是垂直居中的，通常靠下一点*/

    </style>
</head>
<body>
    <div>atguigu尚硅谷</div>
    <br>
    <span style="font-size: 40px;font-family: '微软雅黑';">尚</span>
    <br>
    <span style="font-size: 40px;font-family: 隶书;">尚</span>
    <br>
    <span style="font-size: 40px;font-family: 楷书;">尚</span>

</body>
</html>

显示结果：

七、行高

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高</title>
    <style>
        #d1{
            font-size: 20px;
            background-color: #999ff0;
            line-height: 20px;
            /*第一种写法，值为像素*/
            /*line-height:40px;*/
            /*第二种写法，值为normal*/
            /*line-height:normal;*/
            /*font-family: "隶书";*/
            /*第三种写法：值为数值*/
            line-height: 1.5;
            /*1相当于1.5*40px 相当于写的60px*/
            /*第四种写法：值为百分比*/
            line-height: 150%;
        }
        /*由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会影响观感*/
    </style>
</head>
<body>
    <div id="d1">atguigu尚硅谷让天下没有难掉的头发</div>


</body>
</html>

显示结果：

八、行高注意事项

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高注意事项</title>
    <style>
        /*注意点1：行高过小会怎样？--文字重叠，且最小值是0，不能为负数*/
        #d1{
            font-size: 40px;
            background-color: #999ff0;
            line-height: 0;
        }
        /*注意点2：行高是可以继承的*/
        #d2{
            font-size: 40px;
            background-color: #37d2a6;
            line-height: 1.5;
        }
        span{
            font-size: 200px;
            color: yellow;
        }
        /*注意点3：line-height和height是什么关系*/
        /*设置了height,高度就是height的值*/
        /*没有设置height,高度就是line-height*行数*/
        #d3{
            font-size: 40px;
            background-color: #be6f0e;
            line-height: 100px;
            /*height: 300px;*/
        }
        #d4{
            font-size: 40px;
            background-color: skyblue;
            line-height: 0px;
        }
        /*行高的应用场景1：调整多行文字的间距*/
        #d5{
            font-size: 40px;
            background-color: salmon;
            line-height: 100px;
        }
        /*行高的应用场景2：单行文字的垂直居中  height等于line-height*/
        #d6{
            font-size: 40px;
            background-color: #0ebe90;
            height: 300px;
            line-height: 300px;
        }

    </style>
</head>
<body>
<!--    <div id="d1">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>-->
<!--    <div id="d2">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu<span>尚硅谷</span>让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>-->
<!--    <div id="d3">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发vatguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>-->
<!--    <div id="d4">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发vatguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>-->
<!--    <div id="d5">atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发vatguigu尚硅谷让天下没有难掉的头发atguigu尚硅谷让天下没有难掉的头发</div>-->
    <div id="d6">atguigu尚硅谷让天下没有难掉的头发</div>

</body>
</html>

显示结果：

九、文本对齐_垂直

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本对齐_垂直</title>
    <style>
        div{
            font-size: 40px;
            height: 400px;
            line-height: 760px;
            background-color: skyblue;
            font-family: "华文隶书";

            /*顶部：无需任何属性，在垂直方向上，默认就是顶部对齐*/
            /*居中：对于单行文字，让height=line-height即可*/
            /*底部：对于单行文字，目前一个临时的方式：*/
            /*让line-height=(heightx2) - font-size - x*/
        }
    </style>
</head>
<body>
    <div>尚硅谷</div>

</body>
</html>

显示结果：

十、vertical-align

相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vertical-align</title>
    <style>
        div{
            font-size: 100px;
            height: 300px;
            background-color: #999ff0;
        }
        span{
            font-size: 40px;
            background-color: orange;
            /*vertical-align: top;*/
            /*vertical-align: bottom;*/
            vertical-align: middle;
        }
        /*img{*/
        /*    height: 30px;*/
        /*    !*vertical-align: top;*!*/
        /*    !*vertical-align: bottom;*!*/
        /*    vertical-align: middle;*/
        /*}*/
        img{
            height: 50px;
            vertical-align: bottom;
            /*图片在动：由最高的哪一个决定，图片的高度较高*/
        }
        .san{
            vertical-align: middle;
        }
        /*.test1{*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    background-color: #0dcaf0;*/
        /*}*/
        /*.test2{*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*    background-color: #0ebe90;*/
        /*    vertical-align: bottom;*/
        /*}*/
        /*反例：text*/
        /*.test{*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    background-color: green;*/
        /*    vertical-align: middle;*/
        /*}*/
    </style>
</head>
<body>
    <div>
        atguigu尚硅谷x<span>x前端</span>
    </div>
    <hr>
    <div>
        atguigu尚硅谷x<img src="../pictures/喜羊羊.jpg">
    </div>
    <hr>
<!--    <div class="test">123</div>-->
<!--    <div class="test1">-->
<!--        <div class="test2"></div>-->
<!--    </div>-->
    <table border="1"cellspacing="0">
        <caption>人员信息</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>


            </tr>
        </thead>
        <tbody>
            <tr height="200">
<!--                <td valign="bottom">张三</td>-->
                <td class="san">张三</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
            </tr>
        </tbody>
    </table>


</body>
</html>

显示结果：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1640925.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【数据结构（邓俊辉）学习笔记】向量06——位图

【数据结构（邓俊辉）学习笔记】向量06——位图

文章目录 0.概述1.结构2.实现3. 应用3.1 去重3.2 筛法 0.概述 位图&#xff08;Bitmap&#xff09;是一种特殊的序列结构&#xff0c;可用以动态地表示由一组&#xff08;无符号&#xff09;整数构成的集合。 test() 判断k 是否存在集合S中。set() 将k 加入到集合S中。clear…
阅读更多...
视频编辑软件pitivi基本功之将三个相关视频合并成一个视频

视频编辑软件pitivi基本功之将三个相关视频合并成一个视频

视频编辑软件pitivi基本功之将三个相关视频合并成一个视频 一、素材来源&#xff1a;网站下载 到http://cpc.people.com.cn/GB/67481/435238/437822/437828/437900/index.html下载以下三个视频&#xff0c;鼠标右击视频——另存视频为 庆祝中国共产党成立100周年大会即将开始—…
阅读更多...
深度学习：基于TensorFlow、Keras，使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析

深度学习：基于TensorFlow、Keras，使用长短期记忆神经网络模型(LSTM)对Microsoft股票进行预测分析

前言 系列专栏&#xff1a;机器学习&#xff1a;高级应用与实践【项目实战100】【2024】✨︎ 在本专栏中不仅包含一些适合初学者的最新机器学习项目&#xff0c;每个项目都处理一组不同的问题&#xff0c;包括监督和无监督学习、分类、回归和聚类&#xff0c;而且涉及创建深度学…
阅读更多...
R语言数据探索和分析7-使用随机森林模型对中国GDP及其影响因素分析

R语言数据探索和分析7-使用随机森林模型对中国GDP及其影响因素分析

一、研究背景和意义 国内生产总值&#xff08;GDP&#xff09;是宏观经济领域中最为关注的经济统计数据之一&#xff0c;它反映了一个国家或地区在一定时期内所创造的所有最终商品和服务的总价值。GDP的增长率不仅仅是一个国家经济健康状况的关键指标&#xff0c;还直接关系到…
阅读更多...
Web前端一套全部清晰 ⑥ day4 CSS.1 基础选择器、文字控制属性

Web前端一套全部清晰 ⑥ day4 CSS.1 基础选择器、文字控制属性

后来的我不在抱怨 所有的事与愿违都是我能力或者判断力不足 仅此而已 —— 24.5.1 一、CSS定义 1. 将CSS放在html文件的<style>标签中 层叠样式表(Cascading style Sheets&#xff0c;缩写为 CSS)&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现(美…
阅读更多...
软件应用开发安全设计指南

软件应用开发安全设计指南

1.1 应用系统架构安全设计要求 设计时要充分考虑到系统架构的稳固性、可维护性和可扩展性&#xff0c;以确保系统在面对各种安全威胁时能够稳定运行。 在设计系统架构时&#xff0c;要充分考虑各种安全威胁&#xff0c;如DDoS攻击、SQL注入、跨站脚本攻击&#xff08;XSS&…
阅读更多...
Github 2024-05-03 Java开源项目日报 Top9

Github 2024-05-03 Java开源项目日报 Top9

根据Github Trendings的统计，今日(2024-05-03统计)共有9个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Java项目9Kotlin项目1C++项目1libGDX: 跨平台Java游戏开发框架 创建周期：4284 天开发语言：Java, C++协议类型：Apache License 2.0Star数量：2…
阅读更多...
如何在Android设备上恢复丢失的照片

如何在Android设备上恢复丢失的照片

Android手机或平板电脑上的照片丢失了&#xff1f;不要惊慌&#xff0c;您也许可以恢复它们。 由于我们的大量数据和日常生活都存储在一台设备上&#xff0c;有时将所有照片存储在本地的 Android 智能手机或平板电脑上可能是一项冒险的工作。无论是通过事故&#xff08;损坏、…
阅读更多...
【JVM】从硬件层面和应用层面的有序性和可见性，到Java的volatile和synchronized

【JVM】从硬件层面和应用层面的有序性和可见性，到Java的volatile和synchronized

Java的关键字volatile保证了有序性和可见性&#xff0c;这里我试着从底层开始讲一下有序性和可见性。 一&#xff0c;一致性 数据如果同时被两个cpu读取了&#xff0c;如何保证数据的一致性&#xff1f;或者换句话说&#xff0c;cpu1改了数据&#xff0c;cpu2的数据就成了无效…
阅读更多...
【C++】深入剖析C++11 initializer_list 新的类功能 可变模板参数

【C++】深入剖析C++11 initializer_list 新的类功能 可变模板参数

目录 一、std::initializer_list 1、std::initializer_list是什么类型 2、std::initializer_list 的应用场景 ①给自定义容器赋值 ② 传递同类型的数据集合 二、新的类功能 1、默认成员函数 2、关键字default 3、关键字delete 三、可变参数模板 一、std::initialize…
阅读更多...
C++仿函数周边及包装器

C++仿函数周边及包装器

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…
阅读更多...
RunnerGo四月更新：强化UI自动化测试与UI录制插件功能

RunnerGo四月更新：强化UI自动化测试与UI录制插件功能

RunnerGo最近更新的 UI自动化测试和UI录制插件可以让测试人员更高效地布置UI自动化场景。这次优化升级的插件录制能力&#xff0c;可以更准确的定位元素并执行步骤&#xff0c;并增加了局部截图功能&#xff0c;准确查看定位的元素位置等。 UI插件V2.0介绍 接下来&#xff0c;让…
阅读更多...
python基础算法题0502

python基础算法题0502

数字反转 无论是字符串反转还是数字反转&#xff0c;其实都一样。 需求 代码 class Solution:def reverse(self, x: int) -> int:if 0 < x < 2 ** 31 - 1:m str(x)[::-1]if int(m)<2**31-1:return int(m)else:return 0if 0 > x > -2 ** 31:y -xn str(y…
阅读更多...
2.6Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue生命周期

2.6Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue生命周期

在使用vue进行日常开发中&#xff0c;我们总有这样的需求&#xff0c;想在页面刚一加载出这个表格组件时&#xff0c;就发送请求去后台拉取 数据&#xff0c;亦或者想在组件加载前显示个loading图&#xff0c;当组件加载出来就让这个loading图消失等等这样或那样的需求。 要实…
阅读更多...
Java_JVM_JVMs

Java_JVM_JVMs

JVM 官方文档说明文档目录 官方文档 JVM Specification 说明 以Java SE 17为标准 文档目录 2&#xff1a;JVM 结构 class文件数据类型 基本数据类型引用数据类型 运行时数据区 栈帧 其他内容 对象的表示浮点数运算特殊方法 初始化方法【实例、类】多态方法 3&#xff…
阅读更多...
【多变量控制系统 Multivariable Control System】（1）DSM：术语、基本公式和MATLAB仿真【新加坡南洋理工大学】

【多变量控制系统 Multivariable Control System】（1）DSM：术语、基本公式和MATLAB仿真【新加坡南洋理工大学】

说明&#xff1a; 题目版权归校方所有&#xff0c;仅供学习和参考使用。 DSM Control DSM Direct Synthesis Method Process Model Closed-Loop Transfer Function 基本公式 &#xff08;1&#xff09;输入、输出关系 &#xff08;2&#xff09;控制器表示 MatLab仿真…
阅读更多...
如何在Mac上恢复格式化硬盘的数据？

如何在Mac上恢复格式化硬盘的数据？

“嗨&#xff0c;我格式化了我的一个Mac硬盘&#xff0c;而没有使用Time Machine备份数据。这个硬盘被未知病毒感染了&#xff0c;所以我把它格式化为出厂设置。但是&#xff0c;我忘了备份我的文件。现在&#xff0c;我想恢复格式化的硬盘驱动器并恢复我的文档&#xff0c;您能…
阅读更多...
Go协程的底层原理（图文详解）

Go协程的底层原理（图文详解）

为什么要有协程 什么是进程 操作系统“程序”的最小单位进程用来占用内存空间进程相当于厂房&#xff0c;占用工厂空间 什么是线程 进程如果比作厂房&#xff0c;线程就是厂房里面的生产线&#xff1a; 每个进程可以有多个线程线程使用系统分配给进程的内存&#xff0c;线…
阅读更多...
OpenWRT有线桥接部署教程

OpenWRT有线桥接部署教程

前言 之前咱们讲到OpenWRT部署WAN实现PPPoE拨号上网和自动获取IP模式上网的办法&#xff1a; OpenWRT设置PPPoE拨号教程 OpenWRT设置自动获取IP&#xff0c;作为二级路由器 这一次&#xff0c;咱们尝试用OpenWRT有线桥接上一级路由器的教程。 可能有小伙伴敏锐地发现了&am…
阅读更多...
15、ESP32 Wifi

15、ESP32 Wifi

ESP32 的 WIFI 功能是模块内置的&#xff0c;通过 ESP32 的基础库调用一些函数就可以轻松使用它。 Wifi STA 模式&#xff1a; 让 ESP32 连接附近 WIFI&#xff0c;可以上网访问数据。 // 代码显示搜索连接附近指定的 WIFI // 通过 pin 按键可断开连接#include <WiFi.h>…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023