CSS文本属性与字体属性

目录

文本属性

文本颜色

文本对齐

修饰文本

文本缩进

行高

字体属性

字体系列

字体大小

字体粗细

字体样式

字体/文本综合属性写法

Chrome调试工具的使用

文本属性

文本颜色

在CSS中使用color 属性用于定义文本的颜色，使用background-color设置一个盒子背景颜色

基本语法：

选择器 {
    color: 颜色值;
    background-color: 颜色值;
}

在CSS中，颜色值有四种表示形式，这四种表示形式都是等价的：

表示形式

属性值

预定义的颜色值

red, green,blue...

十六进制（开发时最常用）

#ff000, #ff6600, #29D794...

RGB值

rgb(255, 0, 0)或rgb(100%, 0%, 0%)

RGBa值（a表示透明度）

rgba(0, 0, 0, 0.5)

对于十六进制表示方法需要注意：

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字，例如：#ffaabb改写成#fab，但是类似于：#ffaabc不能改写成#fabc

常见的十六进制取值：

纯白色：#fff

纯黑色：#000

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本颜色</title>
    <style>
        .red {
            /* color: red; 等价于下面的代码*/
            color: #ff0000;
        }

        .red_transparent {
            color: rgba(255, 0, 0, 0.5);
        }

        .blue {
            /* color: blue; 等价于下面的代码 */
            color: #0000ff;
        }

        .green {
            /* color: green; 等价于下面的代码*/
            color: #008000;
        }
    </style>
</head>

<body>
    <p class="red">这是一个红色的段落</p>
    <p class="red_transparent">这是一个半透明红色的段落</p>
    <p class="blue">这是一个蓝色的段落</p>
    <p class="green">这是一个绿色的段落</p>
</body>

</html>

效果如下：

文本对齐

在CSS中使用text-align 属性用于设置元素内文本内容的水平对齐方式

基本语法：

选择器 {
    text-align: 值;
}

在CSS中，text-align属性有三种值：

属性值

描述

left

左对齐（默认值）

center

居中对齐

right

右对齐

对于占用一整行的标签来说，其区域相当于一个盒子，而文本对齐属性实际改变的是文字在盒子中的位置，但是并不改变盒子本身的大小，对于只占用当前位置的标签来说，居中对齐效果需要text-align属性给文本所在标签（文本的父元素）设置

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐属性</title>
    <style>
        .font-align {
            /* 将p标签的文本对齐方式设置为居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <p class="font-align">这是一个居中对齐的p标签</p>
    <span class="font-align">这是一个居中对齐的span标签</span><br />
    <span>这是一个没有居中对齐的span标签</span>
    <div class="font-align">这是一个居中对齐的div标签</div>

</body>

</html>

效果如下：

修饰文本

在CSS中使用text-decoration属性修改文本是否带有划线

基本语法：

选择器 {
    text-decoration: 值;
}

在CSS中，修饰文本有以下四个值：

属性值

描述

none

无装饰线（默认值）

underline

下划线（部分标签自带下划线，例如标签<a></a>）

overline

上划线

line-through

删除线

一般使用text-decoration属性是为了将带有下划线的标签改为无下划线

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改文本</title>
    <style>
        /* 将a标签的文本修饰设置为无修饰 */
        .non-decorate {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com">百度一下</a>
    <a href="https://www.baidu.com" class="non-decorate">百度一下</a>
</body>

</html>

效果如下：

文本缩进

在CSS中使用text-indent属性对文本缩进进行控制

基本语法：

选择器 {
    text-indent: 值em/值px;
}

在设置文本缩进值时，可以考虑采用em作为单位，也可以采用px作为单位，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本缩进</title>
    <style>
        .indent {
            /* 将p标签的文本缩进设置为2em（2个字符） */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p class="indent">这是一个缩进2个字符的段落</p>
    <p>这是一个没有缩进的段落</p>
</body>

</html>

效果如下：

行高

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

所谓行高，即行与行之间的间距，具体包括的范围如下：

📌

注意段落间距并不是由行高来决定的，改变行高不会改变段落间距

基本语法：

选择器 {
    line-height: 值em/值px;
}
  1. 让单行文本垂直居中可以设置line-height:文字父元素高度
  2. 网页精准布局时，会设置Iine-height: 1（不要带单位）可以取消上下间距

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行高</title>
    <style>
        * {
            font-family: 'Microsoft YaHei';
        }

        .height_line {
            line-height: 60px;
        }
    </style>
</head>

<body>
    <!-- 段落行高 -->
    <p class="height_line">这是一个段落，并且设置了行高为60px <br />这是第二行</p>
    <p>这是一个段落，但是没有设置行高 <br />这是第二行 </p>
</body>

</html>

效果如下：

字体属性

字体系列

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

基本语法如下：

标签 {
    font-family: 字体, 字体;
}

注意：

  1. 各种字体之间必须使用英文状态下的逗号隔开
  2. 一般情况下,如果有空格隔开的多个单词组成的字体,加单引号或双引号，例如"Microsoft YaHei"
  3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  4. 如果字体系列中有多个字体时，将会从左向右依次匹配，直到匹配到当前设备存在的字体
  5. 常见字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体集属性</title>
    <style>
        .fontStyle{
            font-family:'Microsoft YaHei', 'Times New Roman', Times, serif;
        }
    </style>
</head>
<body>
    <p>这是一个段落，观察字体</p>
    <p class="fontStyle">这是一个段落，观察字体</p>
</body>
</html>

效果如下：

字体大小

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

基本语法如下：

标签 {
    font-size: 大小px;
}
  1. px（像素）大小是我们网页的最常用的单位，给大小时一定要带px
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  4. 使用<body></body>可以指定整个页面文字的大小

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体大小属性设置</title>
    <style>
    .fontsize {
        font-size: 20px;
    }
    </style>
</head>
<body>
    <h1 class="fontsize">字体大小属性设置</h1>
    <h1>字体大小属性设置</h1>
    <p class="fontsize">这是一个20px的字体大小</p>
    <p>这是一个默认的字体大小</p>
</body>
</html>

效果如下：

字体粗细

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

基本语法如下：

选择器 {
    font-weight: 值;
}

在CSS中，有下面三种值：

属性值

描述

normal

默认值（不加粗）

bold

定义粗体（加粗）

常数值

在CSS中，一共有100-900九个值，400等同于normal，700等同于bold

一般考虑将粗体改为非粗体，例如将粗体的标题改为非粗体

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将标题改为非粗体</title>
    <style>
        h1 {
            font-family: 'Microsoft YaHei';
        }

        /* 将h1标签的字体粗细设置为非粗体 */
        .non-bold {
            font-weight: 400;
        }
    </style>
</head>

<body>
    <h1>
        这是一个正常标题
    </h1>
    <h1 class="non-bold">
        这是非粗体标题
    </h1>
</body>

</html>

效果如下：

字体样式

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

基本语法：

选择器 {
    font-style: 值;
}

属性值

描述

normal

默认值，浏览器会显示每一个标签的默认值

italic

浏览器会显示斜体

示例代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
    <style>
        /* 将p标签的字体样式设置为斜体 */
        .italic {
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>
        这是一个段落，但是没有被修饰为斜体
    </p>
    <p class="italic">
        这是一个段落，并且被修饰为斜体
    </p>
</body>

</html>

效果如下：

字体/文本综合属性写法

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

基本语法：

选择器 {   
    font: font-style  font-weight  font-size/line-height  font-family;
}

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式综合</title>
    <style>
        .fontStyle {
            /* 按照下面的顺序进行书写：font-style font-weight font-size font-family */
            font: italic bold 20px 'Microsoft YaHei';
        }
    </style>
</head>

<body>
    <p class="fontStyle">
        这是一个段落，并且被修饰为斜体，粗体，20px，Microsoft YaHei
    </p>
    <p>
        这是一个段落，但是没有被修饰
    </p>
</body>

</html>

效果如下：

Chrome调试工具的使用

  1. Ctrl+滚轮 可以放大开发者工具代码大小
  2. 一般左边是 HTML 元素结构，右边是 CSS 样式
  3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
  4. Ctrl + 0 复原浏览器大小
  5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

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

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

相关文章

attempt to compare nil with number -- 黑马点评出现问题

attempt to compare nil with number -- 黑马点评出现问题

问题情况 : 主要问题 : 调用lua执行redis时&#xff0c;有一个值会接受nil&#xff08;因为redis中没有该数据&#xff09;或者数值&#xff0c;当该值为nil时执行报错&#xff0c;因为会用到将该值与其他数字比较&#xff0c;故报错attempt to compare nil with number 当然…
阅读更多...
Linux 底软开发——对CAN的详细操作（周期发送，异常检测，过滤报文）

Linux 底软开发——对CAN的详细操作（周期发送，异常检测，过滤报文）

Linux底软开发—对CAN发送接收详细操作 文章目录 Linux底软开发—对CAN发送接收详细操作1.保证多条CAN数据发送的周期性2.解析CAN报文数据3.CAN总线异常机制应对4.对CAN报文进行过滤操作5.完整的接收报文代码&#xff08;过滤&#xff0c;心跳检测&#xff0c;解析&#xff09;…
阅读更多...
大语言模型Ollama

大语言模型Ollama

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Ollama简介 Ollama是一个开源的大语言模型平台&#xff0c;它允许用户在本地环境中运行、创建和共享大型语言模型。Ollama提供了丰富的功能和特性&#xff0c;使得用户可以…
阅读更多...
eCharts 折线图 一段是实线，一段是虚线的实现效果

eCharts 折线图 一段是实线，一段是虚线的实现效果

在lineStyle里写了不生效的话&#xff0c;可以尝试数据拼接 option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [150, 230, 224,218 ,,,],type: line},{data: [,,, 218, 135, 147, 260],type: line,lineStyl…
阅读更多...
Git：使用conda命令切换虚拟环境

Git：使用conda命令切换虚拟环境

1. 问题 在win10电脑的Git中&#xff0c;无法使用conda list命令&#xff0c;报错&#xff08;bash&#xff1a;conda&#xff1a;command not found&#xff09;。也无法使用conda activate base命令激活虚拟环境&#xff0c;报错&#xff08;bash&#xff1a;conda&#xff…
阅读更多...
【面试必会】线程池创建方式详解

【面试必会】线程池创建方式详解

最近面试问道了线程池的创建方式&#xff0c;这里出一篇文章记录下这一知识点&#xff01; 线程池是一种多线程处理形式&#xff0c;处理过程中将任务添加到队列&#xff0c;然后在创建线程后自动启动这些任务。线程池线程都是后台线程。每个线程都使用默认的ThreadFactory创建…
阅读更多...
报名照片10k怎么处理？教你几个方法

报名照片10k怎么处理？教你几个方法

现在在每年的事业单位考公的时候&#xff0c;大家都会在网上报名提交个人信息&#xff0c;其中有一项就是需要上传我们的考试证件照&#xff0c;平台通常会要求照片大小为10kb以下&#xff0c;那么如何将过大的图片压缩到10kb呢?本文将介绍如何处理这一问题&#xff0c;让您轻…
阅读更多...
STM32 HAL库F103系列之ADC实验（一）

STM32 HAL库F103系列之ADC实验（一）

ADC工作原理&#xff1a; 1、输入通道&#xff1a; 2、转换序列&#xff1a; A/D转换被组织为两组&#xff1a;规则组&#xff08;常规转换组&#xff09;和注入组&#xff08;注入转换组&#xff09; 规则组最多可以有16个转换&#xff0c;注入组最多有4个转换 规则组和注入…
阅读更多...
redis7安装与配置

redis7安装与配置

一、下载 通过 redis官网 或者 redis中文网 下载。 以下是 redis 相关文档资料链接&#xff1a; redis源码地址 redis在线测试 redis命令参考 redis中文文档 历史发布版本的源码地址 二、版本命名规则 Redis从发布到现在&#xff0c;已经有十余年的时光了&#xff0c;…
阅读更多...
修改npm源--多种方式

修改npm源--多种方式

2024年&#xff0c;1月22日 npm.taobao.org 域名证书已到期下线。 重置官方源 npm config set registry https://registry.npmjs.org/ 淘宝源&#xff0c;使用最新版&#xff0c;旧版停止了 npm config set registry https://registry.npmmirror.com 查看当前镜像源 npm …
阅读更多...
跨越未知，拥抱挑战——新征程

跨越未知，拥抱挑战——新征程

在浩瀚的IT领域里&#xff0c;每一位开发工程师都如同一位探险家&#xff0c;不断地探索、挑战和成长。作为一名新入职的Java开发工程师&#xff0c;我面临着全新的技术栈和业务领域&#xff0c;这是一次跨越未知的征程&#xff0c;也是一次自我提升的机会。 新入职 初入公司…
阅读更多...
基于Springboot的网课管理系统

基于Springboot的网课管理系统

基于SpringbootVue的网课管理系统的设计与实现 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringbootMybatis工具&#xff1a;IDEA、Maven、Navicat 系统展示 用户登录 首页 课程表 论坛交流 学校公告 后端 学生管理 教师管理 班级管理 课程分类管理…
阅读更多...
【AI】如何让局域网PC能够访问langchain框架的AI服务

【AI】如何让局域网PC能够访问langchain框架的AI服务

【背景】 在单位内部成功运行了langchain服务&#xff0c;但是发现本地可以用默认8000端口访问&#xff0c;但是局域网内其它机器却无法访问服务页面。 【分析】 首先查看项目文件夹中的server.py。由于这个server.py的存在&#xff0c;我一开始以为langchain整套框架的服务…
阅读更多...
丙级资质升级乙级实操：河南灌溉排涝项目所需材料清单

丙级资质升级乙级实操：河南灌溉排涝项目所需材料清单

丙级资质升级乙级实操&#xff1a;河南灌溉排涝项目所需材料清单 在河南灌溉排涝项目中&#xff0c;从丙级资质升级到乙级资质是一个重要且复杂的过程。为了成功完成这一过程&#xff0c;需要准备一系列详尽且符合规定的材料。以下是针对此实操所需的关键材料清单&#xff1a;…
阅读更多...
记录三菱3U：计算圆的半径

记录三菱3U：计算圆的半径

抛物线&#xff1a;
阅读更多...
服务器raid卡，守护数据安全，赋能新质生产力

服务器raid卡，守护数据安全，赋能新质生产力

RAID卡&#xff0c;全称为独立冗余磁盘阵列卡&#xff0c;在数据中心、服务器、网络存储等领域得到广泛应用&#xff0c;RAID卡通过不同的RAID级别实现数据容错和冗余。例如&#xff0c;RAID 0主要适用于需要高速数据传输但对数据安全要求不高的场景&#xff0c;如数据的缓存&a…
阅读更多...
设计模式之观察者模式（优先使用对象组合的原则）的C++实现

设计模式之观察者模式（优先使用对象组合的原则）的C++实现

观察者模式又称订阅者发布者模式&#xff0c;本篇介绍主要是利用对象组合大于类继承的设计模式原则实现订阅发布模式&#xff0c;这种设计的优点是想订阅数据的类不需要继承订阅者类的抽象类&#xff0c;减少了一层类的继承&#xff1b;当然&#xff0c;具体情况需要可根据需求…
阅读更多...
[GXYCTF2019]BabyUpload-BUUTF

[GXYCTF2019]BabyUpload-BUUTF

题&#xff1a; 步骤&#xff08;先上传木马&#xff0c;在上传.htaccess&#xff09; 准备工作 他过滤了<? ,ph等 准备&#xff1a;一句话木马&#xff0c;.htaccess文件 .htaccess SetHandler application/x-httpd-php //解析为php文件 muma1.jpg<script languag…
阅读更多...
【vue2+onlyoffice】基础预览demo运行+问题解决

【vue2+onlyoffice】基础预览demo运行+问题解决

之前其实写过Onlyoffice的使用&#xff0c;但是写得不太完整&#xff0c;这次补充下。 一、OnlyOffice简介 ONLYOFFICE&#xff0c;是一个包含常用办公套件&#xff0c;Word 、Excel、PPT大办公套件搬到了云端&#xff0c;只需要一个浏览器即可以在线使用 Office 的各种功能。…
阅读更多...
HOOPS Commuicator：基于Web的交互式2D/3D图形轻量化引擎

HOOPS Commuicator：基于Web的交互式2D/3D图形轻量化引擎

在当前数字化时代&#xff0c;Web基础的3D应用程序正在成为行业标准&#xff0c;尤其是在工程和制造领域。Tech Soft 3D公司旗下的HOOPS Communicator正是针对这一需求设计的高级解决方案&#xff0c;提供了一套全面的工具&#xff0c;旨在帮助开发者构建复杂的3D工程应用程序。…
阅读更多...
最新文章

Copyright @ 2022~2023

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