HTML_CSS学习：常用文本属性

一、文本颜色

相关代码：

<!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.mfbz.cn/a/591824.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AI文章框架分析

AI文章框架分析

大家在文章写作的时候结构难免会有点凌乱&#xff0c;但是自己可能无法发现问题所在&#xff0c;那么有没有一款工具可以帮你自动分析你写的文章框架存在的问题&#xff0c;然后并给你详细的分析报告呢&#xff1f;今天给大家介绍一下文件框架分析助手&#xff01; 使用说明 打…
阅读更多...
jQuery Moblie 笔记14 开发跨平台移动设备网页

jQuery Moblie 笔记14 开发跨平台移动设备网页

相关内容&#xff1a;jQuery Moblie基础、操作、移动设备仿真器、jQuery Moblie网页实例、jQuery Moblie的UI组件、…… jQuery推出了一套新的函数库jQuery Mobile&#xff0c;目的是希望能够统一当前移动设备的用户界面(UI)。 移动设备开发应用程序目前大致分为两种&#xff…
阅读更多...
大数据分析入门之10分钟掌握GROUP BY语法

大数据分析入门之10分钟掌握GROUP BY语法

前言 书接上回大数据分析入门10分钟快速了解SQL。 本篇将会进一步介绍group by语法。 基本语法 SELECT column_name, aggregate_function(column_name) FROM table_name GROUP BY column_name HAVING condition假设我们有students表&#xff0c;其中有id,grade_number,class…
阅读更多...
vue快速入门（五十一）历史模式

vue快速入门（五十一）历史模式

注释很详细&#xff0c;直接上代码 上一篇 新增内容 历史模式配置方法 默认哈希模式&#xff0c;历史模式与哈希模式在表层的区别是是否有/#/ 其他差异暂不深究 源码 //导入所需模块 import Vue from "vue"; import VueRouter from "vue-router"; import m…
阅读更多...
全方位解析Node.js：从模块系统、文件操作、事件循环、异步编程、性能优化、网络编程等高级开发到后端服务架构最佳实践以及Serverless服务部署指南

全方位解析Node.js：从模块系统、文件操作、事件循环、异步编程、性能优化、网络编程等高级开发到后端服务架构最佳实践以及Serverless服务部署指南

Node.js是一种基于Chrome V8引擎的JavaScript运行环境&#xff0c;专为构建高性能、可扩展的网络应用而设计。其重要性在于革新了后端开发&#xff0c;通过非阻塞I/O和事件驱动模型&#xff0c;实现了轻量级、高并发处理能力。Node.js的模块化体系和活跃的npm生态极大加速了开发…
阅读更多...
Centos 7.9 配置VNCServer实现远程vnc连接

Centos 7.9 配置VNCServer实现远程vnc连接

文章目录 1、Centos安装图形界面1.1、安装X Windows System图形界面1.2、安装GNOME图形界面 2、VNC SERVER配置2.1、VNC SERVER安装2.2、VNC SERVER配置1&#xff09;创建vnc配置文件2&#xff09;修改配置文件内容3&#xff09;完整配置文件参考 2.3、设置vnc密码2.4、配置防火…
阅读更多...
C++基础——输入输出（文件）

C++基础——输入输出（文件）

一、标准输入输出流 C 的输入输出是程序与用户或外部设备&#xff08;如文件、网络等&#xff09;之间交换信息的过程。 C 提供了丰富的标准库来支持这种交互&#xff0c;主要通过流的概念来实现。 流&#xff1a;抽象概念&#xff0c;表示一连串的数据&#xff08;字节或字…
阅读更多...
c语言从入门到函数速成（2）

c语言从入门到函数速成（2）

温馨提醒&#xff1a;本篇文章适合人群&#xff1a;刚学c又感觉那个地方不怎么懂的同学以及以及学了一些因为自身原因停学一段时间后又继续学​​​c的学 好&#xff0c;正片开始&#xff01; 数组 概念&#xff1a;数组中存放的是1个或者多个数据&#xff0c;但是数组元素个…
阅读更多...
频率和转速转换功能块(CODESYS ST源代码)

频率和转速转换功能块(CODESYS ST源代码)

1、转速和频率转换功能块 转速和频率转换功能块(CODESYS ST源代码)-CSDN博客文章浏览阅读10次。1、转速/频率常用转换关系转速/频率/线速度/角速度计算FC_200 plc计算角速度-CSDN博客文章浏览阅读3.2k次。https://rxxw-control.blog.csdn.net/article/details/138438864 1、转…
阅读更多...
企业计算机服务器中了rmallox勒索病毒怎么处理，rmallox勒索病毒处理建议

企业计算机服务器中了rmallox勒索病毒怎么处理，rmallox勒索病毒处理建议

在网络技术不断发展的时代&#xff0c;网络在企业中的应用广泛&#xff0c;可以为企业带来更多的便利&#xff0c;大大提升了企业的生产效率&#xff0c;但网络作为虚拟世界&#xff0c;在为企业提供便利的同时&#xff0c;也为企业数据安全带来严重威胁。近期&#xff0c;云天…
阅读更多...
C++入门系列-基于范围的for循环（C++11）和指针空值nullptr（C++11）

C++入门系列-基于范围的for循环（C++11）和指针空值nullptr（C++11）

&#x1f308;个人主页&#xff1a;羽晨同学 &#x1f4ab;个人格言:“成为自己未来的主人~” 基于范围的for循环 范围for的语法 在C98中如果要遍历一个数组&#xff0c;可以按照以下方式进行&#xff1a; void TestFor() {int array[] { 1,2,3,4,5 };for (int i 1; i …
阅读更多...
VmWare 虚拟机没有网络解决办法

VmWare 虚拟机没有网络解决办法

由于最近需要&#xff0c;装了个VM虚拟机&#xff0c;但是突然发现本机有网络&#xff0c;虚拟机却没有网络&#xff0c;更换了虚拟机的网络设置&#xff0c;都尝试过了 都不管用&#xff0c; 最后尝试了这种方法完美解决 还原网络默认设置 首先还原虚拟网络编辑器设置 启动V…
阅读更多...
力扣---二叉树的锯齿形层序遍历

力扣---二叉树的锯齿形层序遍历

给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,…
阅读更多...
FFmpeg计算图像的SSIM的原理

FFmpeg计算图像的SSIM的原理

SSIM算法基于HVS更擅长从图像中提取结构信息的事实&#xff0c;并且利用结构相似度来计算图像的感知质量。 在Z. Wang等人的论文Multi-scale structural similarity for image quality assessment中也提到&#xff0c; S S I M SSIM SSIM算法要好于当时的其它的感知图像质量指标…
阅读更多...
Java-I/O-编写程序实现从文件中读取数据

Java-I/O-编写程序实现从文件中读取数据

定义一个类FileUtil&#xff0c;在FileUtil中定义一个方法 String readFromFile(File file)&#xff0c;该方法从指定的文件中读取数据&#xff0c;并将读取到的数据以字符串的格式返回。 FileUtil类的接口定义&#xff1a; class FileUtil{ String readFromFile(File file){…
阅读更多...
强大而简洁：初学Python必须掌握的14个单行代码

强大而简洁：初学Python必须掌握的14个单行代码

Python的魅力与单行代码的重要性 Python&#xff0c;作为一种高级编程语言&#xff0c;自诞生以来就以其简洁、易读、易学的特性而广受开发者喜爱。其魅力不仅在于其强大的功能和广泛的应用领域&#xff0c;更在于其能够用简洁的代码实现复杂的功能&#xff0c;这种能力在很大…
阅读更多...
nodejs实战——搭建websocket服务器

nodejs实战——搭建websocket服务器

本博客主要介绍websocket服务器库安装&#xff0c;并举了一个简单服务器例子。 服务器端使用websocket需要安装nodejs websocket。 cd 工程目录 # 此刻我们需要执行命令&#xff1a; sudo npm init上述命令创建package.json文件&#xff0c;系统会提示相关配置。 我们也可以使…
阅读更多...
matlab绘制时间序列图，横坐标轴如何标注为月-日

matlab绘制时间序列图，横坐标轴如何标注为月-日

Excel表格中有类似于如下 年月日对应的数据 导入 matlab中&#xff0c;为数值矩阵&#xff1b;了解该表格中的时间跨度为从2021年1月2日至2021年12月31日&#xff0c;中间没有缺失&#xff0c;绘图代码&#xff1a; % clear; timespan1[20210102 20211231]; datenn1datenum(da…
阅读更多...
Visual studio调试技巧

Visual studio调试技巧

Visual studio调试技巧 bug是什么&#xff1f;Debug和ReleaseDebugRelease 如何调试VS调试快捷键调试过程中查看程序信息查看临时变量的值查看内存信息查看调用堆栈查看汇编信息查看寄存器信息 编译常见错误编译型错误链接型错误运行时错误 bug是什么&#xff1f; bug的英文释…
阅读更多...
用例设计规范示例

用例设计规范示例

一个好的用例设计&#xff0c;可以让任何一个执行测试的测试人员都能够容易理解&#xff0c;好操作、易执行、无歧义。这就需要有一个用例设计规范。 下面是一组用例设计规范的示例。 用例编号命名规范化 用例具有规范的、统一的、唯一的标识&#xff0c;有助于实现对用例的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站