CSS之段落样式

news2024/11/27 14:45:14

1、文本缩进

  • 标签:text-indent (indent v. 缩进)
  • 含义:首行缩进
  • 和字体大小有关:1个em等于一个字体大小

2、文本对齐方式

  • 标签:text-align (align v. 调整,使一致)
  • 种类:左对齐、右对齐、居中对齐、两端对齐【left、right、center、justify】

3、文本行高

  • 标签:line-height
  • 文本行高:上边距+字体大小+下边距
  • 参数设置:像素、比例值(以文字大小为参照)

4、英文和数字的强制折行

  • 英文单词、数字很长时,不会折行
  • 折行方式:
    • word-break :break-all
    • word-wrap : break-word 【不会强烈折行,会产生空白区域】 (wrap v. 包,裹)

5、字间距和词间距

  • 字间距:letter-spacing 【针对中文】
  • 词间距:word-spacing 【针对英文】

实验:

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字修饰</title>
    <style>
        #d1{text-decoration:underline;}
        #d2{text-decoration:overline;}
        #d3{text-decoration:line-through;}
        #d4{text-decoration: underline overline line-through;}
        #d6{text-transform: lowercase;}
        #d7{text-transform: uppercase;}
        #d8{text-transform: capitalize;}
        #d9{text-indent: 2em;}/* 1个em代表一个字体大小 */
        #d10{text-align: left;}
        #d11{text-align: right;}
        #d12{text-align: center;}
        #d13{text-align: justify;}
        #d14{line-height: 30px; font-size: 16px;}
        #d15{line-height: 3; font-size: 16px;}/* 比例值 */
        #d16{height: 40px; width: 600px; border: 2px; border-style: solid; border-color: red; word-break: break-all;}
        #d17{height: 40px; width: 600px; border: 2px; border-style: solid; border-color: red; word-wrap: break-word;}
    </style>
</head>
<body>
    <h2>文本装饰:</h2>
    <div id="d1">下划线</div>
    <div id="d2">上划线</div>
    <div id="d3">删除线</div>
    <div id="d4">下划线、上划线、删除线全部装饰</div>

    <h2>文本大小写(只涉及英文):</h2>
    <div>原文:time is too short to love life</div>
    <div id="d6">全部小写:time is too short to love life</div>
    <div id="d7">全部大写:time is too short to love life</div>
    <div id="d8">首字母大写:time is too short to love life</div>

    <h2>文本缩进(首行缩进2个字符):</h2>
    <p id="d9">《男生女生》(金版)读者主要为高年级的中学生或大学生,内容以恐怖、
        玄异、悬疑、推理小说为主。如果恐怖玄异的作品以中学生或校园为背景,
        会更易被读者接受。而情感也因其永恒的魅力,将成为这一系列小说中永恒的主题。当然,
        也不排斥其他题材内容的精品。撰文时注意“度”的把握,血腥、色情、暴力等不适合中学生接触的东东请酌情处理。
    </p>
    <h2>文本对齐方式(共四种):</h2>
    <p id="d10">左边对齐:12月12日,中国电信、中国联通、中国移动三大运营商先后表示,
        将按照相关法律规定,自12月13日0时“通信行程卡”服务下线后,同步删除用户行程相关数据,依法保障个人信息安全。</p>
    <p id="d11">右边对齐:中国电信、中国联通、中国移动三大运营商先后表示,
        将按照相关法律规定,自12月13日0时“通信行程卡”服务下线后,同步删除用户行程相关数据,依法保障个人信息安全。</p></p>
    <p id="d12">居中:中国电信、中国联通、中国移动三大运营商先后表示,
        将按照相关法律规定,自12月13日0时“通信行程卡”服务下线后,同步删除用户行程相关数据,依法保障个人信息安全。</p></p>
    <p id="d13">两端对齐:中国电信、中国联通、中国移动三大运营商先后表示,
        将按照相关法律规定,自12月13日0时“通信行程卡”服务下线后,同步删除用户行程相关数据,依法保障个人信息安全。</p></p>

    <h2>行高:</h2>
    <div id="d14">行高定义像素值,是上边距和字体大小以及下边距的和就是行高。</div>
    <div id="d15">行高定义比例值,是上边距和字体大小以及下边距的和就是行高。</div>

    <h2>自动折行:</h2>
    <div id="d16">I am going to tell you my whole life, 11111111111111111111111111111111111111111111111111111 
        the life which did not really begin 
    </div>
    <div id="d17">I am going to tell you my whole life, 11111111111111111111111111111111111111111111111111111 
        the life which did not really begin 
    </div>
</body>
</html>
  • 结果展示
    在这里插入图片描述

练习:

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落样式练习</title>
    <style>
        #d1{font-family: 宋体; font-size: 32px; font-weight: bold; color: rgb(247, 211, 11) ; text-align: center;}
        #d2{font-family: 宋体; font-size: 26px; text-align: left; text-indent: 32px; color: rgb(16, 150, 240); line-height: 1;}
        #d3{font-family: 宋体; font-size: 16px; text-align: left; text-indent: 32px; color: black; line-height: 1.5;}
        #d4{font-family: 宋体; font-size: 16px; text-align: left; text-indent: 32px; color: green; line-height: 2;}
        #d5{font-family: 宋体; font-size: 16px; text-align: left; text-indent: 32px; color: rgb(6, 148, 243); line-height: 2;
            font-style: italic; text-decoration: underline;}
        #d6{font-family: 黑体; font-size: 16px; text-align: left; text-indent: 32px; color: rgb(13, 13, 14); line-height: 2;
            letter-spacing: 5px; font-weight: bold;}
        #d7{font-family: 宋体; font-size: 16px; text-align: left; text-indent: 32px; color: rgb(230, 15, 238); line-height: 2;}
    </style>
</head>
<body>
    <h1 id="d1">王宝强简介</h1>
    <h2 id="d2">基本信息</h2>
    <h3 id="d3">中国内地男演员</h3>
    <p id="d4">王宝强,1982年4月29日出生于河北省邢台市南和区,中国内地男演员、导演。王宝强6岁开始练习武术,8岁在嵩山少林寺做俗家弟子。2003年,凭借剧情片《盲井》获得第40届台湾电影金马奖最佳新演员奖。2004年,因参演冯小刚执导的剧情片《天下无贼》而获得关注。2008年,凭借《士兵突击》中许三多一角获得第24届中国电视金鹰奖最具人气男演员奖以及观众喜爱的电视剧男演员奖;</p>

    <h2 id="d2">早年经历</h2>
    <p id="d5">王宝强,1982年4月29日出生在河北省邢台市南和区的一个贫寒的家庭里, [1]  在童年时期不被别人关注,在母亲的记忆中,王宝强的衣服都是他哥哥姐姐穿剩下的。王宝强因为看了李连杰的《少林寺》,才萌发了想要演电影的想法。</p>

    <h2 id="d2">个人生活</h2>
    <p id="d6">2015年4月23日,在儿子生日之际,王宝强为体恤妻子分娩之痛,实名定制乐维斯粉钻“爱的交响”赠送妻子,并在微博高调示爱:一生只送一人,而马蓉则感动回应:愿得一人心,白首不分离 [54-55]  ;12月13日晚,王宝强发微博称自己家人遭遇车祸身亡,斥责肇事者酒后驾车逃逸 [56-58] 。</p>
    <p id="d7">2016年8月14日凌晨,王宝强发离婚声明,称“无法容忍恶意背叛婚姻、破坏家庭”,解除与妻子马蓉的婚姻关系,同时解除宋喆的经纪人职务 [59]  ;8月15日上午9时许,王宝强在律师张起淮的陪同下来到北京朝阳法院,起诉其妻马蓉离婚,要求解除双方婚姻关系,判令婚生子女均由其抚养。 [60]  朝阳法院经审查符合立案条件,已正式受理此案。 [15]  随后,王宝强工作室在微博贴出了立案声明:王宝强与马蓉离婚决心已定,等待法院公正的判决。 [61] </p>
</body>
</html>
  • 结果展示
    在这里插入图片描述

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

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

相关文章

AFDet: Anchor Free One Stage 3D Object Detection

论文链接&#xff1a;https://arxiv.org/pdf/2006.12671v1.pdf 前言 在嵌入式系统上操作的高效点云3D目标检测对于包括自动驾驶在内的许多机器人应用来说都是重要的。 大多数以前的工作都试图使用基于Anchor的检测方法来解决这个问题&#xff0c;这些方法有2个缺点&#xff1…

《MySQL的基础语法》

【一】现实当前的数据库 show databases:记住这里的databases是复数形式&#xff0c;你可以简单理解为它不仅仅含有一个数据库&#xff0c;所以需要用到可数名词复数形式。 【二】创建数据库 create database 数据库的名字&#xff1a;记住这里的database用的是单数形式&#…

Django demo项目搭建

安装 Django 在应用程序开发中&#xff0c;分别创建env文件夹和wordspace文件夹。 env文件夹用于存放创建的虚拟环境&#xff0c;wordspace用于存放项目代码&#xff0c;至此实现虚拟环境和应用程序代码的分隔。 步骤1&#xff1a;创建文件夹&#xff0c;创建命令为mkdir en…

静态链接:空间与地址分配

前言 我们终于走到了链接这一步&#xff0c;对于链接这一步&#xff0c;它是将多个输入目标文件链接后输出一个可执行文件。我们拿两个程序a.c和b.c来举例说明链接的过程。 a.c&#xff1a; /* a.c */ extern int shared;int main(){int a 100;swap(&a,&shared); }…

从Mybatis到Mybatis-Plus学习

从Mybatis到Mybatis-PlusMybatis的入门Mybatis的配置解析核心配置文件分页配置注解开发mybatis的执行流程多对一一对多动态SQLmybatis 的缓存Mybatis-plus快速入门mybatis-plus的框架结构图分页查询和删除执行SQL分析打印条件构造器Wrapper代码生成器Mybatis的入门 环境&#…

io复用函数的使用

目录 一、概念 二、使用 1.select系统调用 代码实现 前言&#xff1a; 一般多客户端在和服务器通信时&#xff0c;服务器在执行recv时会先阻塞&#xff0c;然后按照顺序依次处理客户端&#xff0c;无论客户端有无数据都会被处理&#xff0c;这样大大降低了执行效率。此时就引…

代理 模式

代理模式 Proxy Pattern 为其他对象提供一个代理以控制对这个对象的访问 可以详细控制访问某个&#xff08;某类&#xff09;对象的方法&#xff0c;在调用这个方法前做前置处理&#xff0c;调用这个方法后做后置处理。 静态代理 直接写死的代码的代理逻辑 动态代理 动态…

12.2、后渗透测试--令牌窃取

攻击机kali&#xff1a;192.168.11.106靶机windows server 2008 R2&#xff1a;192.168.11.134&#xff08;包含ms17_010漏洞&#xff09;一、令牌简介与原理 令牌(Token) 就是系统的临时密钥&#xff0c;相当于账户名和密码&#xff0c;用来决定是否允许这次请求和判断这次请求…

二进制搭建k8s——部署node节点

上篇&#xff1a;二进制搭建k8s——部署etcd集群和单master 二进制搭建k8s——部署node节点二进制搭建k8s——部署node节点环境部署node节点部署网络组件方法一&#xff1a;部署Flannel方法二&#xff1a;部署 CalicoCNI网络插件介绍Kubernetes的三种网络K8S 中 Pod 网络通信&a…

浅浅讲解下Linux内存管理之CMA

说明&#xff1a; Kernel版本&#xff1a;4.14ARM64处理器&#xff0c;Contex-A53&#xff0c;双核使用工具&#xff1a;Source Insight 3.5&#xff0c; Visio 1. 概述 Contiguous Memory Allocator, CMA&#xff0c;连续内存分配器&#xff0c;用于分配连续的大块内存。CMA…

c语言内存和文件处理有关知识

内存 分配内存的函数calloc&#xff0c;malloc 定义于头文件 <stdlib.h>功能malloc分配内存(函数)calloc分配并清零内存(函数)realloc扩充之前分配的内存块(函数)free归还还之前分配的内存(函数)aligned_alloc(C11)分配对齐的内存(函数) 函数原型 void *malloc(unsigne…

Java基础之Collection的ArrayList

Java基础之Collection的ArrayList一、add()与addAll()二、remove()三、trimToSize()1、案例一、add()与addAll() 跟C 的vector不同&#xff0c;ArrayList没有push_back()方法&#xff0c;对应的方法是add(E e)&#xff0c;ArrayList也没有insert()方法&#xff0c;对应的方法是…

Oracle---初学篇

Oracle初学篇 Oracle的启动&#xff0c;监听&#xff0c;用户 文章目录Oracle初学篇Oracle的启动Oracle的监听监听服务的主要文件1.listener.ora2.tnsnames.ora3.sqlnet.oraOracle用户Oracle安装成功后默认的三个用户创建用户Oracle的启动 之前写了关于如何在CentOS7上搭建Ora…

2021年全国研究生数学建模竞赛华为杯D题抗乳腺癌候选药物的优化建模求解全过程文档及程序

2021年全国研究生数学建模竞赛华为杯 D题 抗乳腺癌候选药物的优化建模 原题再现&#xff1a; 一、背景介绍   乳腺癌是目前世界上最常见&#xff0c;致死率较高的癌症之一。乳腺癌的发展与雌激素受体密切相关&#xff0c;有研究发现&#xff0c;雌激素受体α亚型&#xff0…

LeetCode 0547. 省份数量:图的连通分量

【LetMeFly】547.省份数量 力扣题目链接&#xff1a;https://leetcode.cn/problems/number-of-provinces/ 有 n 个城市&#xff0c;其中一些彼此相连&#xff0c;另一些没有相连。如果城市 a 与城市 b 直接相连&#xff0c;且城市 b 与城市 c 直接相连&#xff0c;那么城市 a …

Windows文件夹开启大小写敏感

Windows 的文件系统的文件名&#xff0c;是大小写不敏感的&#xff0c;也就是你的文件名是 a.txt 或者 A.txt&#xff0c;在 Windows 中都是一视同仁&#xff0c;认为是同一个文件。 自从 Windows 10 引入 Linux 子系统&#xff08;WSL&#xff09;后&#xff0c;有越来越多开…

JAVA毕业设计——基于ssm的汽车租赁管理系统 (源代码+数据库)

代码地址 https://github.com/ynwynw/carRental-public 毕业设计所有选题地址 https://github.com/ynwynw/allProject 基于Springboot的汽车租赁管理系统 (源代码数据库)601 一、系统介绍 汽车租赁系统总共分为两个大的模块&#xff0c;分别是系统模块和业务模块。其中系统模…

基于混沌原子搜索优化的电力系统(HPS)负载频率自动控制(ALFC)(Matlab代码实现)

&#x1f468;‍&#x1f393;个人主页&#xff1a;研学社的博客 &#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜…

Spring Security 中的四种权限控制方式

Spring Security 中对于权限控制默认已经提供了很多了&#xff0c;但是&#xff0c;一个优秀的框架必须具备良好的扩展性&#xff0c;恰好&#xff0c;Spring Security 的扩展性就非常棒&#xff0c;我们既可以使用 Spring Security 提供的方式做授权&#xff0c;也可以自定义授…

如何实现外网访问API接口

Application Programming Interface 缩写为API&#xff0c;中文翻译为“应用程序接口”&#xff0c;是一些预先定义的函数&#xff0c;或指软件系统不同组成部分衔接的约定。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力&#xff0c;而又无需访问源码&…