CSS样式-字体类型,文本对齐,外观修饰,文本缩进,文本行间距,外部引用css样式

news2024/10/7 20:35:16

字体类型和字体属性调整

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Css字体类型大小</title>
</head>

<style>
    .font3 {
        font-family: 'Courier New', Courier, monospace;
        font-size: 30px;
        font-weight: 1000;
    }
</style>


<body>

    <p class="font3">miaow</p>

</body>

</html>

文本

在这里插入图片描述
文本对齐方式: 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>
</head>

<body>
    <h2 style="text-align: left;">左对齐</h2>
    <h2 style="text-align: center;">居中</h2>
    <h2 style="text-align: right;">右对齐</h2>
</body>

</html>

文本外观修饰

在这里插入图片描述

<!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-waiguan {
            text-decoration: overline;
        }
    </style>
</head>

<body>
    <p class="font-waiguan">miaow</p>
    <a style="text-decoration: none;" href="http://baidu.com" target="_blank">百度</a>
</body>

</html>

文本缩进: text-indent

<!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 {
            /* 像素缩进 */
            /* text-indent: 40px; */
            /* em指一个字体的像素距离
            这里的字体为16px 则2em是32px距离 */
            text-indent: 2em;
        }
    </style>

</head>

<body>
    <p>消息摘要是一个唯一对应一个消息或文本的固定程度的值,他由一个单向hash加密函数对消息进行作用而产生,如果消息中途改变,那么消息的接收着对收到消息的新产生的摘要和原摘要比较,就可以知道消息是否被改变了,故而消息摘要保证了消息的完整性。消息摘要采用单向的hash函数将需要加密的明文“摘要”成一串密文,这一串密文亦称为数字指纹,有固定的长度,且不同的明文摘要成密文,其结果总是不同的。而同样的明文其摘要必定是一致。这样这串摘要便可成为验证明文是否是真身的指纹了。 </p>
</body>

</html>

文本行间距

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行间距</title>

    <style>
        div {
            line-height: 16px;
        }
    </style>
</head>


<body>
    <div>消息摘要是一个唯一对应一个消息或文本的固定程度的值,他由一个单向hash加密函数对消息进行作用而产生,如果消息中途改变,那么消息的接收着对收到消息的新产生的摘要和原摘要比较,就可以知道消息是否被改变了,故而消息摘要保证了消息的完整性。消息摘要采用单向的hash函数将需要加密的明文“摘要”成一串密文,这一串密文亦称为数字指纹,有固定的长度,且不同的明文摘要成密文,其结果总是不同的。而同样的明文其摘要必定是一致。这样这串摘要便可成为验证明文是否是真身的指纹了。</div>

</body>

</html>

HTML中引入CSS样式的几种方式

  • 内联样式:在HTML元素中使用style属性来定义内联样式,例如:
    <p style="color: red; font-size: 16px;">这是一段红色的文字</p>
  • 内部样式表:在HTML文档的标签中使用
    <head>
        <style>
            p {
                color: blue;
                font-size: 14px;
            }
        </style>
    </head>
  • 外部样式表:将样式定义在一个独立的CSS文件中,然后在HTML文档中使用<link>标签引入外部样式表,例如:
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
  • @import:在CSS文件中使用@import规则引入其他CSS文件,例如:
    @import url("styles.css");
  • 使用CDN链接:有时候可以直接使用外部的CDN链接引入CSS样式,例如:
    <head>
        <link rel="stylesheet" href="https://cdn.example.com/styles.css">
    </head>

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

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

相关文章

浅述安防视频监控平台EasyCVR视频汇聚管理系统运维管理能力

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…

如何保证Redis的缓存和数据库中的数据的一致性?

Redis的缓存如何和数据库中的数据保持一致性&#xff1f; 我们都知道&#xff0c;Redis是一个基于内存的键值存储系统&#xff0c;数据完全存放在内存中&#xff0c;这使得它的读写速度远超传统的硬盘存储数据库。对于高访问频率、低修改率的数据&#xff0c;通过将它们缓存在…

4.6 offset指令,jmp short指令,far,dword ptr各种跳转指令

4.6 offset指令&#xff0c;jmp short指令&#xff0c;far&#xff0c;dword ptr各种跳转指令 可以修改IP&#xff0c;或同时修改CS和IP的指令统称为转移指令。概括的讲&#xff0c;转移指令就是可以控制CPU执行内存中某处代码的指令 1. 转移指令 1.1 8086CPU的转移行为有以…

城市治理/县域治理方案:构建基于AI视频能力的“一张网”,助力新型城市发展

TSINGSEE青犀AI算法中台是一款平台型产品&#xff0c;专注于提供各行业中小场景部署解决方案。平台具备接入广、性能强、支持跨平台、芯片国产化等特点&#xff0c;可提供丰富的视图接入能力和智能分析能力。 平台采用了多项IT高新技术&#xff0c;包括视频编解码技术、嵌入式…

宁盾身份域管与Coremail邮件系统完成兼容互认证,持续深化信创布局

在信创国产化改造的背景下&#xff0c;企业邮箱的替换是许多党政、央国企、金融、制造企业面临的重要任务。为了满足企业对国产邮箱、OA等其他应用、终端实现统一身份认证&#xff0c;宁盾国产化身份域管与 Coremail XT 安全增强电子邮件系统 V5.0、V6.0 完成了产品兼容互认证&…

从redux的基本概念渐进式理解redux/toolkit的用法

概念 Redux toolkit是帮助提高redux开发效率的一个库 React-redux 是将React和Redux toolkit绑定在一起的一个库 action 是一个对象,里面有一个type属性 action creator是一个函数,这个函数可以返回上面的action对象。 reducer 是一个函数,接受两个参数(initilastate, acti…

【Vue3源码学习】— CH2.8 Vue 3 响应式系统小结

Vue 3 响应式系统小结 1.核心概念1.1 Proxy和Reflect1.2 响应式API1.3 依赖收集与更新触发1.4 触发更新&#xff08;Triggering Updates&#xff09;&#xff1a;1.5 副作用函数&#xff08;Effect&#xff09;1.6 计算属性和观察者1.7 EffectScope1.8 性能优化&#xff1a; 2.…

基于深度学习的机场航拍小目标检测系统(网页版+YOLOv8/v7/v6/v5代码+训练数据集)

摘要&#xff1a;在本博客中介绍了基于YOLOv8/v7/v6/v5的机场航拍小目标检测系统。该系统的核心技术是采用YOLOv8&#xff0c;并整合了YOLOv7、YOLOv6、YOLOv5算法&#xff0c;从而进行性能指标的综合对比。我们详细介绍了国内外在机场航拍小目标检测领域的研究现状、数据集处理…

多类别分类器(Machine Learning研习十八)

多类别分类器 二元分类器可以区分两个类别&#xff0c;而多类别分类器&#xff08;也称为多叉分类器&#xff09;可以区分两个以上的类别。 一些 Scikit-Learn 分类器&#xff08;如 LogisticRegression、RandomForestClassifier 和 GaussianNB&#xff09;能够原生处理多个类…

硬件了解 笔记 2

CPU 内存控制器&#xff1a;负责读写数据 代理系统和平台IO&#xff1a;与主板上的芯片组通信&#xff0c;并管理PC中其他组件之间的数据流 主板&#xff1a;巨大的印刷电路板 Chipset&#xff1a;芯片组&#xff0c;位于散热器下方&#xff0c;直接连接到CPU的系统代理部分 …

HTTP/1.1、HTTP/2、HTTP/3 演变(计算机网络)

HTTP/1.1 相比 HTTP/1.0 提高了什么性能&#xff1f; HTTP/1.1 相比 HTTP/1.0 性能上的改进&#xff1a; 使用长连接改善了短连接造成的性能开销。支持管道网络传输&#xff0c;只要第一个请求发出去了&#xff0c;不必等其回来&#xff0c;就可以发第二个请求出去&#xff0c…

UniApp 应用发布到苹果商店指南

&#x1f680; 想要让你的 UniApp 应用在苹果商店亮相吗&#xff1f;别着急&#xff0c;让我来带你一步步完成这个重要的任务吧&#xff01;在这篇博客中&#xff0c;我将详细介绍如何将 UniApp 应用顺利发布到苹果商店&#xff0c;让你的应用跻身于苹果生态之中。 引言 &…

MySQL 数据学习笔记速查表(视图、存储过程、事务)

文章目录 十三、视图1、视图是什么&#xff1f;2、视图的特性&#xff1f;3、视图的作用&#xff1f;4、视图的用途&#xff1f;5、视图的使用&#xff1f;1、基本语法2、创建视图3、调用视图4、视图练习(1) 利用试图简化复杂的联结(2) 利用视图重新格式化检索出的数据(3) 利用…

【flutter封装图片/视频选择控件】

引入库 wechat_assets_picker: ^6.0.5 、video_player: ^2.5.1 # 视频播放、 flutter_screenutil: ^5.7.0 import dart:async; import dart:io; import package:generated/l10n.dart; import package:jade/configs/PathConfig.dart; import package:jade/customWidget/addImag…

gateway应用(1)

1 简介 简单理解---业务服务的统一入口&#xff0c;方便实现&#xff0c;服务路由&#xff0c;安全&#xff0c;限流&#xff0c;过滤&#xff0c;黑白名单&#xff0c;证书加密解密&#xff0c;服务降级/熔断&#xff0c;灰度&#xff0c;等等 2 介绍 Predicate&#xff08…

Raven:一款功能强大的CICD安全分析工具

关于Raven Raven是一款功能强大的CI/CD安全分析工具&#xff0c;该工具旨在帮助广大研究人员对GitHub Actions CI工作流执行大规模安全扫描&#xff0c;并将发现的数据解析并存储到Neo4j数据库中。 Raven&#xff0c;全称为Risk Analysis and Vulnerability Enumeration for C…

Linux操作系统基础入门​

1、操作系统简介​ a. DOS 和 Windows NT​ DOS是一个与Unix完全不相干的操作系统&#xff0c;这一点可以从DOS使用反斜杠来表示文件目录分隔符上 看出来。随着IBM个人PC的流行&#xff0c;微软DOS操作系统在个人电脑上流行起来。Windows 95, Windows 98, 和 Windows ME底层都…

Databend 集成 PRQL:现代数据处理的一小步

PRQL&#xff0c;读作 “Prequel”&#xff0c;是一种与 SQL 并肩的查询语言&#xff0c;它的独到之处在于采用了管道式的语法&#xff0c;在查询关系数据库时显得更加直观和高效。 Databend 拥抱 PRQL 在 v1.2.380-nightly 版本中&#xff0c;得益于社区贡献者 ncuwaln 提交…

《PDVC》论文笔记

PS&#xff1a;模型代码解释清明后出 原文链接&#xff1a; [2108.07781v1] End-to-End Dense Video Captioning with Parallel Decoding (arxiv.org) 原文笔记&#xff1a; What&#xff1a; End-to-End Dense Video Captioning with Parallel Decoding 并行解码的端到端…

法律行业案例法模型出现,OPenAI公布与法律AI公司Harvey合作案例

Harvey与OpenAl合作&#xff0c;为法律专业人士构建了一个定制训练的案例法模型。该模型是具有复杂推理广泛领域知识以及超越单一模型调用能力的任务的AI系统&#xff0c;如起草法律文件、回答复杂诉讼场景问题以及识别数百份合同之间的重大差异。 Harvey公司由具有反垄断和证…