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

字体类型和字体属性调整

在这里插入图片描述

<!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>

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

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

相关文章

【软路由】iStoreOS全量备份或数据迁移思路

背景&#xff1a;之前是在我的i3小主机上面搭建了iStoreOS&#xff0c;因为有段时间爱折腾&#xff0c;于是乎不知道什么情况就造成首页无法登录&#xff0c;改了的东西无法回滚&#xff0c;好在使用“万能重启”法又可以登录了&#xff0c;于是我就在想把这玩意定期备份一下。…

算法打卡day25

今日任务&#xff1a; 1&#xff09;491.递增子序列 2&#xff09;46.全排列 3&#xff09;47.全排列 II 491.递增子序列 题目链接&#xff1a;491. 非递减子序列 - 力扣&#xff08;LeetCode&#xff09; 给定一个整型数组, 你的任务是找到所有该数组的递增子序列&#xff0c…

选数异或(DP)

题目描述 给定一个长度为 n 的数列 A1, A2, , An 和一个非负整数 x&#xff0c;给定 m 次查询, 每次询问能否从某个区间 [l,r] 中选择两个数使得他们的异或等于 x 。 输入格式 输入的第一行包含三个整数 n, m, x 。 第二行包含 n 个整数 A1, A2, , An 。 接下来 m 行…

Redis高可用技术

一.Redis高可用介绍&#xff1a; 高可用是指&#xff1a;服务器正常访问的时间 衡量的标准是&#xff1a;在多长时间内可以提供正常服务99.9%、99.99%、99.999%等等 但是在Redis语境中&#xff0c; 高可用的含义似乎要宽泛一些&#xff0c;除了保证提供正常服务(如主从分离、…

Find a way (DFS BFS)

//新生训练 #include <iostream> #include <algorithm> #include <queue> using namespace std; using PII pair<int, int>;const int N 205; const int inf 0x3f3f3f3f; int n, m; int l;int dis1[N][N]; int dis2[N][N];int dx[] {0, 0, -1, 1};…

springboot实战---6.项目发布

&#x1f388;个人主页&#xff1a;靓仔很忙i &#x1f4bb;B 站主页&#xff1a;&#x1f449;B站&#x1f448; &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;Springboot &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&…

深入C语言:探究static关键字的奥秘

文章目录 一、链接属性二、static变量1、定义静态局部变量2、在函数内部使用静态变量3、函数中静态局部变量与递归 三、static变量与全局变量的区别1、存储期与生命周期2、可见性与作用域3、使用场景4、静态与动态内存分配 注意事项 当用于不同的上下文环境时&#xff0c; sta…

nginx配置多vue项目

1. 找到linux docker安装好的nginx目录文件 进入nginx内 把打包好的vue项目放在html文件下 如上 三个文件夹下对应着三个不同的vue项目 2. 配置default.conf的配置文件&#xff0c; 一个nginx配置文件可以多个项目进行代理 进入到conf 找到conf.d下面的default.conf 文件…

Springboot自动获取接口实现

ServiceLoader加载接口实现步骤 1.编写接口 public interface CommunicationAdapterFactory {void setKernel(LocalKernel kernel);boolean providesAdapterFor(Vehicle vehicle);BasicCommunicationAdapter getAdapterFor(Vehicle vehicle); }2.编写实现 // 实现类 1 publi…

EasyBoss ERP支持TikTok Shop拆单发货功能,多店铺订单包裹拆分一个系统搞定

一些TikTok Shop本土卖家在运营过程中面临这样的困境&#xff1a;当顾客一次性订购多个商品&#xff0c;由于部分商品缺货或包裹超重&#xff0c;订单延迟发货或被物流限制发不出货&#xff0c;导致店铺被投诉。为了解决这一问题&#xff0c;卖家可以采取拆单发货的策略&#x…

支持各种不同系列nvdia显卡和amd显卡,DeepFaceLab安装与使用,附完整的软件打包下载一键安装

支持各种不同系列nvdia显卡和amd显卡&#xff0c;DeepFaceLab安装与使用&#xff0c;附完整的软件打包下载一键安装。 主要使用的技术&#xff1a; 1. 深度学习&#xff08;Deep Learning&#xff09; 深度学习是人工智能领域的一个重要分支&#xff0c;它通过模拟人脑的神经…

蓝桥杯 - 正则问题

解题思路&#xff1a; dfs import java.util.Scanner;public class Main {static int pos -1; // 充当charAt下标static String s;// 字符串型的静态变量public static void main(String[] args) {Scanner scanner new Scanner(System.in);s scanner.nextLine();System.ou…

Spring Boot--文件上传和下载

文件上传和下载 前言文件上传1、以MultipartFile 接口流文件&#xff0c;流的名称需要和前台传过来的名称对应上2、获取到文件名称截取后缀3、为了放置文件名重复使用uuid来随机生成id后缀4、判断转存路径中是否有这个文件夹如果没有就创建5、将文件存储到转存的目录中 文件下载…

免费AI视频工具PixVerse厉害了:可保持人物超强一致性(附详细教程)

PixVerse 上线了「Character」&#xff0c;可以在更换场景的情况下&#xff0c;保持人物的一致性。 下面就是用创建的人物角色&#xff0c;生成的不同场景下&#xff08;海边、城市街道、教室&#xff09;的视频&#xff0c;整体看一致性程度还是超出我的预期的。 PixVerse 人物…

华为服务器RAID配置教程 服务器硬盘故障处理帮助 浪潮RAID配置教程 磁盘阵列配置通用教程

前言&#xff08;本文档持续更新&#xff09; 本文主要记录服务器配置RAID&#xff08;磁盘阵列&#xff09;过程中存在的细节问题及官方文档无法解决的问题的解决方案 配置环境 华为 RH2288 v3服务器配置RAID组 如何快速配置 1.找到服务器品牌的阵列卡型号&#xff0c;找不到…

DBU-Net:用于乳腺超声图像中肿瘤分割的双分支U形网络

DBU-Net&#xff1a;用于乳腺超声图像中肿瘤分割的双分支U形网络 摘要引言材料和方法概述所提出的方法 DBU-Net Dual branch U-Net for tumor segmentation in breast ultrasound images 摘要 乳腺超声医学图像通常具有低成像质量沿着不清楚的目标边界。这些问题使得医生在诊断…

详解k8s集群内外的访问方式

文章目录 1、集群内访问2、集群外访问2.1、Ingress转发外网请求2.2、LoadBanlancer接入外网请求2.3、NodePort接入外网请求 3、总结和对比3.1、Ingress、NodePort和LoadBalancer总结3.2、Ingress和网关的区别 1、集群内访问 在k8s中创建的微服务&#xff0c;大部分都是在集群内…

收下这份地表最强参会指南,4月16日,玩转百度Create大会不迷路

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…

短视频素材怎么做?探索新鲜网站获取灵感

在短视频创作的过程中&#xff0c;寻找和制作高质量的素材是至关重要的。那么&#xff0c;短视频素材怎么做呢&#xff1f;让我们一起探索一些新鲜的网站&#xff0c;获取灵感和素材&#xff0c;让你的短视频作品更加别出心裁&#xff01; 蛙学网——中国 国内首推荐蛙学网&a…

dm控制台工具console

DM控制台工具console console工具介绍 DM控制台工具是管理和维护数据库的基本工具。 通过使用控制台工具&#xff0c;数据库管理员可以完成以下功能: ◆服务器参数配置 ◆管理DM服务 ◆脱机备份与还原 ◆查看系统信息 ◆查看许可证信息 一 登录console [dmdbatest1 tool]$ pwd…