字体样式和文本样式

news/2025/3/13 23:22:39/文章来源:https://www.cnblogs.com/huangjiangfei/p/18235777

2.2字体样式

    /*
  font-family:字体
  font-weight:字体粗细
  font-size:字体大小
  color:字体颜色
  */
   <style>
       body{
           font-family: 楷体;
           color: red;
      }
       .p1{
         font-weight: bold;
      }
       h1{
           font-size: 100px;
      }
   </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
  一个卖瓷碗的老人挑着扁担在路上走着,突然一个瓷碗掉到地上摔碎了,但是老人头也不回继续向前走。
  路人看到很奇怪,便问:“为什么你的碗摔碎了你却不看一下呢?”老人答到:“我再怎么回头看,碗是碎的。”
</p>
</body>

2.3 文本样式

1、颜色 color rgb rgba

2、文本对齐的方式 text-align =center

3、首行缩进 text-indent:2em

4、行高:line-height

5、装饰:text-decoration

6、文本图片水平对齐:vertical-align: middle;

    <style>
       h1{
           text-align: center;
      }
       .p1{
           text-indent: 2em;
      }
       .p3{
           background: rgba(0,255,255,0.1);
           height: 300px;
           line-height: 300px;
      }
       .l1{
           text-decoration:underline;
      }
       .l2{
           text-decoration: line-through;
      }
       .l3{
           text-decoration: overline;
      }
   </style>
</head>
<body>
<p class="l1">123456</p>
<p class="l2">123456</p>
<p class="l3">123456</p>
<h1>故事介绍</h1>
<p class="p1">
一个卖瓷碗的老人挑着扁担在路上走着,突然一个瓷碗掉到地上摔碎了,但是老人头也不回继续向前走。
路人看到很奇怪,便问:“为什么你的碗摔碎了你却不看一下呢?”老人答到:“我再怎么回头看,碗是碎的。”
</p>
<p class="p3">"I love you though my heart begs me to. Every romantic song reminds me of you, and every time I see a happy couple I wish they were you and me." </p>
<a href="image/360截图20240606180405978.jpg"></a>
<span>1234567</span>
</body>
    <style>
      span,img{
          vertical-align: middle;
      }
  </style>
</head>
<body>
<p><img src="image/360截图20240606180405978.jpg" alt=""><span>1234556</span></p>
</body>
 

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

flutter设置全屏,状态栏变成黑色

@override void initState() {super.initState();SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []); }首先需要在页面初始化时设置如上代码,隐藏状态栏。 此时状态栏不会显示,但是系统会用黑色区域占用。 所以还需要添加如下配置在如下路径android\a…

阿里140逆向纯与补

声明 本文章中所有内容仅供学习交流,抓包内容、敏感网址、数据接口均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关,若有侵权,请联系我立即删除! 目标网站 aHR0cHM6Ly93d3cuanVtaW5nLmNvbS8= 分析逆向流程 今天我们看看ali的的n参数为…

2024墨者杯哈希sha1绕过

题目描述:某开发者发现这个页面好像不能正常访问<?php error_reporting(0); if ($_SERVER[REQUEST_METHOD] !== POST) {header("HTTP/1.1 405 Method Not Allowed");exit(); } else {if (!isset($_POST[roam1]) || !isset($_POST[roam2])){show_source(__FILE__…

sql 条件用空值进行比对的结果

sql 条件用空值进行比对的结果select SUM(e.Qty) as InputQty from UT_InputInfo as a inner join T_ProcessDef as b on a.ProcessID=b.ProcessID inner join UT_PrdTask as d on a.OrderID=d.OrderID inner join dbo.UT_LabelInfoRec as e on a.LabelPrtRecID=e.PrtRecID…

【入门教程】5分钟教你快速学会集成Java springboot ~

介绍 Apache DolphinScheduler是一个分布式易扩展的开源分布式调度系统,支持海量数据处理,具有任务流程调度、任务流程编排、任务监控告警、工作流引擎等功能。 本文将介绍如何将Apache DolphinScheduler集成到 Java Springboot 项目中,以实现更灵活和便捷的调度功能。 步骤…

开源低代码平台技术为数字化转型赋能!

借助于开源低代码平台技术的优势特点,可以轻松助力企业降低开发成本、提高开发效率,获得高效快速发展。实现数字化转型升级是很多企业未来的发展趋势,也是企业获得更多发展商机的途径。如何进行数字化转型?如何实现流程化办公?这些都是摆在客户面前的实际问题,借助于开源…

C# 使用Newtonsoft.Json的JsonProperty设置返回的Json数据列名/C# 通过实体类序列化生成自定义字段的json数据

原文链接:https://blog.csdn.net/weixin_44917045/article/details/103236167https://blog.csdn.net/bazinga_y/article/details/134416680 在写分页的时候,返回Json数据给前台的时候,数据不能出来,原因就是Json数据的列名是大写的,而页面需要的是小写的。 解决办法public…

【WPF】Dispatcher 与消息循环

这一期的话题有点深奥,不过按照老周一向的作风,尽量讲一些人鬼都能懂的知识。 咱们先来整个小活开开胃,这个小活其实老周在 N 年前写过水文的,常阅读老周水文的伙伴可能还记得。通常,咱们按照正常思路构建的应用程序,第一个启动的线程为主线程,而且还是 UI 线程(当然,…

Revit二次开发-使用Advanced Installer打包插件安装包

插件开发属于客户端开发,当我们交付产品给客户的时候,肯定用安装包的形式交付是最佳方案。所以我摸索了一下怎么用Advanced Installer来打包插件安装包。Advanced Installer简介 Advanced Installer 是一款功能强大且用户友好的 Windows 安装包制作工具,专门用于创建安装包(…

bootstrap.css-表单-登录案例

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><!--引入bootstrap.css样式--><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/boo…

编译器 7. 中间代码 | 5. 程序设计

IR 代码中 符号代码( label )沿用不变 int 调用 T_Const(int i ) Tree 模块:1. patchList:真值/假值 回填表 这里是 patchList 的生成, 至于具体怎么回填后面才会讲 struct patchList_ {Temp_label *head; patchList tail};// 生成 stm stm = T_Cjump(T_ge, unEx(left), unE…