首页 > 其他分享 >HTML5的文本样式

HTML5的文本样式

时间:2024-11-08 09:49:46浏览次数:5  
标签:font 样式 spacing color 间距 字体 HTML5 文本

HTML5的文本样式

文本样式
    1 文字样式
        1 字体颜色 color
        2 字体大小 font-size:px
        3 字体粗细 font-weight:px
            范围100 到 900 之间
            bold[粗]    bolder[加粗]
    2 字体效果
        1 字体效果 font-style
        2 字体样式 font-family
    3 文本样式
        1 文本居中
            1 text-align=center/left/right
        2 行高
            第一行的高度
            如果你想一个元素在Y轴上剧居中:
                1如果确定了高度 行高  ==  父元素的高度
                2 再设置一个position:relative top:元素本身高度的一半
        3 字间距 与 词间距
            1 字间距 letter-spacing
            2 词间距 word-spacing
文本样式
    1 文字样式
        1 字体颜色 color
        2 字体大小 font-size:px
        3 字体粗细 font-weight:px
            范围100 到 900 之间
            bold[粗]    bolder[加粗]
    2 字体效果
        1 字体效果 font-style
        2 字体样式 font-family
    3 文本样式
        1 文本居中
            1 text-align=center/left/right
        2 行高
            第一行的高度
            如果你想一个元素在Y轴上剧居中:
                1如果确定了高度 行高  ==  父元素的高度
                2 再设置一个position:relative top:元素本身高度的一半
        3 字间距 与 词间距
            1 字间距 letter-spacing
            2 词间距 word-spacing
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示 -->
<head>
<!--    编码格式-->
    <meta charset="UTF-8">
<!--    文档标题-->
    <title>第八节课</title>
<!--    内部样式-->
    <style>
        #x1
        {
            /*字体颜色 */
            color: red;
            /*字体大小*/
            font-size: 44px;
            /*字体*/
            font-family: "楷体";
            /*字体效果*/
            font-style: italic;
        }
​
        #x2
        {
            /*宽度*/
            width: 20%;
            /*高度*/
            height: 250px;
            /*背景颜色 */
            background-color: red;
        }
        #x3
        {
               /*宽度*/
            /*HTML标签 font-size=16px*/
            /*1rem == 16px*/
            width: 200rem;
            /*高度*/
            height: 50px;
            /*背景颜色 */
            background-color: green;
            /*字体效果*/
            font-style: "楷体";
        }
        #x4
        {
            width: 200rem;
            /*高度*/
            height: 50px;
            /*背景颜色 */
            background-color: green;
        }
    </style>
</head>
<!--在浏览器显示 -->
<body>
    <span id="x1">
        你好HTML
    </span>
    <div id="x2"></div>
    <p id="x3"></p>
<!--    无序列表-->
    <li id="x4"></li>
​
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<!--不在浏览器显示-->
<head>
<!--    编码格式-->
    <meta charset="UTF-8">
<!--    文档标题-->
    <title>Title</title>
<!--    内部样式-->
    <style>
        #x1
        {
            /*每个字母的距离*/
            letter-spacing: 5px;
            /*字体颜色 */
            color: pink;
            /*词间距*/
            word-spacing: 23px;
        }
    </style>
</head>
<!--在浏览器显示 -->
<body>
<!--    文字标签-->
    <p id="x1">你好html I love you</p>
</body>
</html>

标签:font,样式,spacing,color,间距,字体,HTML5,文本
From: https://blog.csdn.net/2302_79986066/article/details/143499357

相关文章

  • (附项目源码)Java开发语言,基于HTML5的智慧养老服务平台的设计与实现 46,计算机毕设程序开
    摘 要随着社会老龄化程度的不断加深,智慧养老发展成为当今社会关注的焦点之一。家庭与社区资源的有限性,使得需要提供更加便捷、贴心的养老服务来满足老年人的需求。基于HTML5技术的智慧养老服务平台的设计和实现,为老年人提供了一个全新的智慧养老服务方式,便于家属和管理员......
  • Html5QRCode扫描条形码+二维码
    代码:<html><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"&......
  • 一款好用的富文本编辑器am-editor
    am-editor是一款创新的富文本编辑器,以下是对其的详细介绍:一、核心特点自定义渲染引擎:am-editor摒弃了传统的contenteditable属性,采用自定义渲染引擎,实现了对编辑行为的精确控制,从而提高了用户体验。跨框架支持:该编辑器支持React和Vue等前端主流框架,能够无缝对接这些框架,并利......
  • Pytorch用BERT对CoLA、新闻组文本数据集自然语言处理NLP:主题分类建模微调可视化分析-C
     原文链接:https://tecdat.cn/?p=38181原文出处:拓端数据部落公众号自然语言处理(NLP)领域在近年来发展迅猛,尤其是预训练模型的出现带来了重大变革。其中,BERT模型凭借其卓越性能备受瞩目。然而,对于许多研究者而言,如何高效运用BERT进行特定任务的微调及应用仍存在诸多困惑。本文......
  • QT:简易文本编辑器
      效果 main.cpp 代码:#include"imgprocessor.h"#include<QApplication>intmain(intargc,char*argv[]){QApplicationa(argc,argv);QFontf("ZYSong18030",12);//设置显示字段格式a.setFont(f);ImgProcessorw;w.s......
  • HTML文本处理
    在HTML中,文本是HTML中最基本的内容之一,为此HTML提供了诸多元素让本文更加清晰有条理,并且拥有更多的功能。1.HTML文档的头部<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,......
  • SynthID Text 现已发布|在 AI 生成文本中应用不可见水印的新技术
    你是否难以分辨一段文本是由人类撰写的,还是AI生成的?识别AI生成内容对于提升信息可信度、解决归因错误以及抑制错误信息至关重要。今天,GoogleDeepMind和HuggingFace很共同宣布,在Transformersv4.46.0版本中,我们正式推出了SynthIDText技术。这项技术能够通过使用log......
  • 『玩转Streamlit』--文本与标题组件
    本篇准备开始介绍Streamlit的组件。Streamlit的组件非常多,后续几篇打算按照用途的分类,介绍每个分类中最常用的组件。本次从最简单的组件开始,介绍文本和标题相关的组件,也就是以下4个组件:st.text:用于显示普通的文本内容st.title:用于显示页面的大标题st.header:用于显示一级标题......
  • 能粘贴WORD 内容(含图片)的文本编辑器
    编辑器:百度ueditor前端:vue2,vue3,vue-cli,html5需求:复制粘贴word内容图片,word图片转存交互,导入pdf,导入PowerPoint(PPT)要求:开源,免费,技术支持用户体验:Ctrl+V快捷键操作该说不说,最近这块应该也是挻火的,今天早上又有网友加我微信私聊,说是想了解一下这块的技术和方案。实......
  • QProgressBar样式表设置
    progressBar->setStyleSheet("QProgressBar{min-width:280px;//最小宽度max-width:280px;//最大宽度max-height:15px;//最大高度background-color:white;//背景色border:1pxso......