css 设置段落样式 各种设置方式详细解释

2023-11-07

我本来打算告诉你 当你不在我身边的这段日子里 我遇到的所有糟糕事 但最后我只想告诉你 我很想你

设置段落样式

今天我们详细讲讲设置段落样式的方式:
网页的排版离不开对文字段落的设置,这里主要讲述常用的段落样式,包括文字对齐方式,段落首行缩进,首字下沉,行高,单词间距,字符间距和文本大小

1.设置文字的对齐方式
设置文字对齐方式需要使用 text-align 属性来实现效果。
语法:text-align:left | right | center | justify
参数:left “左对齐” ,right “右对齐”,center “居中”,justify “两端对齐”

有了这个属性大家可以在浏览器中实现一下

2.设置首行缩进
首行缩进就是段落的第一行从左向右缩进一定距离,其他行则不缩进。设置首行缩进我们使用 text-indent 属性实现。
语法:text-inent:length
参数:length为百分比数字或由浮点数字,单位标识符组成的长度值,可以为负值

3.设置首字下沉

首字下沉指的是:设置段落第一行第一个字的字体变大,并且向下一定距离,而段落的其他部分保持不变。那么设置首字下沉可以使用first-letter属性,控制第一个字符样式。

4.设置行高

行高:指的是两行文字之间的垂直距离
在css中使用 line-height 属性控制行与行之间的垂直距离
语法:line-height:length | normal
参数:length为百分比熟悉或由数值,单位标识符组成的长度值,可以为负值 normal 为默认行高

5.设置字间距
使用word-spacing设置字间距。
语法:word-spacing:length | normal
参数:normal 默认是单词间的标准间距。length为由浮点数字和单位标识符组成的长度值,可以为负值。

6.设置字符间距
我们使用letter-sapcing 属性栓塞制字符间或字母间的间距
语法:letter-spacing:length | normal
参数:normal 为默认值,定义字符间的标准间距。length为由浮点数字和标识符组成的长度值,允许为负值。

7.设置文本的大小写
我们使用text-transform 属性设置文本的大小写。
语法:text-transform:none | capitalize| uppercase | lowercase
参数:none为默认值,定义带有大小写字母的标准文本;capitalize 指定文本中的每个单词以大写字母开头;uppercase 定义仅有大写字母,无小写字母;lowercase 定义仅有小写字母,五大写字母。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

css 设置段落样式 各种设置方式详细解释 的相关文章

  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件
  • 掘金个人主页头像旋转效果

    img src https sf1 ttcdn tos pstatp com img user avatar d1d3c1b115358ea70f51edcd697b58b2 300x300 image alt 钱端挖掘机师傅的个人资料头像
  • 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)

    阿里百秀首页案例 技术选型 方案 我们采取响应式页面开发方案 技术 bootstrap框架 设计图 本设计图采用 1280px 设计尺寸 1 页面布局分析 2 屏幕划分分析 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的 因此我们列 定义为
  • 更改element button 按钮颜色

    在全局的index scss里面改 显示时按钮样式 el button inblack 需要更改的按钮类型 background 060606 important border color 060606 important color ff
  • Saas-Export项目之部门数据回显(下拉框和单选框回显)

    Saas Export项目之部门数据回显 之前的经验 做数据回显一般就是在数据修改时需要查询出这条信息 然后再将数据拆分每一项逐一赋值在表单上 通常赋值就行 而且都是input type text这种类型的 所有只要在input里增加val
  • Web前端开发概述

    Web World Wide Web 全球广域网 是指一种基于互联网的信息系统 通过超文本链接将全球各地的文档 图像 视频等资源相互关联起来 并通过Web浏览器进行交互浏览和访问 Web的发展使得人们可以方便地获取和共享各种类型的信息 成为
  • 【宠粉福利】这次我们准备了 iPhone 12、AirPods Pro、罗技鼠标等大礼等你来领!...

    喜迎开学季 C 站开豪礼 最高可开 iphone 12 盲盒开出的不只是一份礼物 更是对于一切美好的期待 拆开一个盲盒 就像开始一场未知的爱丽丝梦游仙境 为 两点一线 朝九晚九 的生活 埋下一刻期待的种子 去收获一份未知的惊喜 这次 价格再
  • ElementUi常用组件创建前端页面

    elementui 创建前端页面
  • css中float用法

    float浮动 指将指定元素悬浮于所在整体之上 即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的 对于这个顺序我们称之为标准流 而浮动则是脱离标准流的另一个独立标准 下面给出float定义 float left 左浮
  • border-radius使用详解

    我在使用这个属性的时候 一般都是用在给div或者button加上一点圆角弧度 显得好看一点 或者用来画一个圆形div 用的稍微高级一点的 也就是用来画了一个右半圆来做为侧边栏的展开 收缩按钮 一 border radius使用 border
  • css图片不断放大缩小的动画效果

    img class move img width 26px src assets img btn coupon 2x png alt move img animation name scaleDraw 关键帧名称 animation tim
  • flex布局详解

    声明 本人的所有博客皆为个人笔记 作为个人知识索引使用 因此在叙述上存在逻辑不通顺 跨度大等问题 希望理解 分享出来仅供大家学习翻阅 若有错误希望指出 感谢 flex基本概念 任何一个容器都可以指定为Flex布局 例如 box displa
  • JavaScript 实现html导出为PDF文件

    相信各位前端工程狮们在一些报表项目 管理系统项目中都会遇到在这样的需求 申请报 表格 简历等等图文信息有导出为PDF文件 下面是记录我在项目中完成该需求的代码dome 发布出来也是希望对大家有些帮助 1 整体思路 将HTML元素打印或导出为
  • HTML5的多个video标签:截取视频源的封面图poster,监听视频播放状态的功能;

    在日常项目中 html5的video标签还是比较常用到的 开发过程中 我们都会使用到 通过监听video标签的播放 暂停 停止等等来使用 我们是否也会遇到过 有些浏览器在显示这标签 兼容不太友好 video标签的封面是一层黑色的 ok 那么
  • 超简单:很火的3D立体动态相册,送给心爱的那个人

    1 首先 我们一共需要三个文件 目录关系如下所示 先建index html文件吧 电脑上先创建一个 txt文件 在里面加入代码后保存 重命名为index html 记得把原来的 txt后缀覆盖 html我用的谷歌浏览器 index html
  • 滚动条样式

    一 在div中的滚动条样式 div webkit scrollbar width 5px 滚动条宽度 div webkit scrollbar thumb border radius 10px 滚动条圆角 webkit box shadow
  • 第8章 多媒体嵌入

    学习目标 了解视频 音频嵌入技术 能够总结HTML5视频 音频嵌入技术的优点 了解常用的视频文件格式和音频文件格式 能够归纳HTML5支持的视频和音频格式 掌握HTML5中视频的嵌入方法 能够在HTML5页面中添加视频文件 掌握HTML5中
  • vue实现 marquee(走马灯)

    样式 代码 div class marquee prompt div class list prompt span class prompt item span div div data return listPrompt xxx xxxx
  • 网页订货系统的诸多优势|企业APP订单管理软件

    1 订单信息 发货信息 账目信息一目了然 生产企业 总代理 和分销商之间可以清楚直观的了解到商品和货款的实时状态 以便高效的订货 发货 进行货款催收以及商品的物流跟踪 2 建立稳固的客户关系 避免客户被竞争对手挖墙脚 有了网上订货系统 企业
  • 使用企业订货软件的担忧与考虑|网上APP订货系统

    使用企业订货软件的担忧与考虑 网上APP订货系统 网上订货系统担心出现的问题 1 如果在订货系统中定错 多 货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误 但是网上订货平台为大家提供了很多的解决方案 其中对于订单的修改

随机推荐

  • HJ77 火车进站

    Powered by NEFU AB IN Link 文章目录 HJ77 火车进站 题意 思路 代码 HJ77 火车进站 题意 给定一个正整数N代表火车数量 0
  • C# WPF+skyline可视化学习笔记(一)------在WPF中加载fly地图

    我是学Java的 校招进了公司 是做这个的 我就只有现学了 还好有耐心的师傅和同事们友好帮助 不然我可能就凉了 好了 话不多说 本章内容就是使用vs2017 创建一个WPF项目并且一步一步手把手加载fly地图文件吧 前提准备 你得有这个软件
  • Java聊天--聊天界面

    import java awt import javax swing public class myMain extends JFrame JTextField tsend 在外部声明文本框 用来写留言 Choice clist 声明下拉框
  • 分享一个自媒体副业,认真做可以月入6000+

    做的这个副业并不难 每天花费2 3小时做视频剪辑 上个月一个新账号收益6000多 如果你现在每天的空闲时间比较多 也可以去尝试着做一下视频剪辑 这期内容来把方法分享给粉丝们 如果对你有所帮助 记得点赞支持一下大周 很多人都不知道我们在自媒体
  • Jenkins配置及插件安装

    Jenkins里应该如何把master节点以及slave节点搞到一起 进行一个联系 首先应该访问到安装好Jenkins的机器 下图是Jenkins首页的内容 暂时没有任何的流水线及agent 完善一下基本的信息 root jenkins m
  • TVM(一):简介与安装

    简介 TVM是一个用于深度学习系统的编译器堆栈 它旨在缩小以生产力为中心的深度学习框架与以性能和效率为中心的硬件后端之间的差距 TVM与深度学习框架合作 为不同的后端提供端到端编译 换句话说 TVM就是一种将深度学习工作负载部署到硬件的端到
  • 【Endnote20】批量导入enw格式,便捷快速

    1 将所有参考文献的enw文件整理到同一文件夹内 2 command a全选 我是mac win的话应该ctrl a全选 3 右键点击打开 4 完成
  • FreeRTOS-定时器详解

    作者简介 嵌入式入坑者 与大家一起加油 希望文章能够帮助各位 个人主页 rivencode的个人主页 系列专栏 玩转FreeRTOS 保持学习 保持热爱 认真分享 一起进步 目录 前言 一 软件定时器的简介 二 软件定时器的创建 1 软件定
  • 对登录接口的简单图形验证码进行识别 20221004

    Python黑客编程原理与实战 作业 二 1 编程题 1 语言限定为python3 环境准备 使用虚拟python3环境 pip3 install virtualenv virtualenv python 3 10 vpy3 10 sour
  • 什么是持续集成的自动化测试

    如今互联网软件的开发 测试和发布 已经形成了一套非常标准的流程 最重要的组成部分就是持续集成 Continuous integration 简称CI 目前主要的持续集成系统是Jenkins 那么什么是持续集成 持续集成指的是 频繁地 一天多
  • RainDiffusion: When Unsupervised Learning Meets Diffusion Models for Real-world Image Deraining

    一 摘要 介绍及相关工作 传统方法 图像去雨的传统方法通常利用不同的先验 例如稀疏编码 高斯混合模型和低秩表示 然而 这些手工制作的先验表现出有限的代表性能力 导致在复杂和多变的下雨情况下的结果不佳 监督 通过从大量合成的无雨 下雨图像对中
  • 基于Pytorch的深度学习 —— 非线性激活函数

    文章目录 作用 Sigmoid tanh ReLU Leaky ReLU SoftPlus 开发环境 作用 非线性激活函数获取输入 并对其进行数学变换后生成输出 非线性激活函数为神经元引入了非线性因素 使得神经网络可以任意逼近任何非线性函数
  • [编程开发工具-7]:四款功能强大的代码比较工具:Araxis Merge、Beyond compare、DiffMerge、WinMerge

    前言 我们经常会遇到需要比较同一文件的不同版本 特别是代码文件 比如在两个不同的github仓库之间merge代码 如果人工去对比查看 势必费时实力还会出现纰漏和错误 因此我们需要借助一些代码比较的工具来自动完成这些工作 对于专业人员 立即
  • 我制作了python脚本自动抢购淘宝秒杀产品,学会优先享受双十一福利

    这是本文的标题 前言 第一步 第二步 第三步 第四步 零基础Python学习资源介绍 Python学习路线汇总 Python必备开发工具 Python学习视频600合集 实战案例 100道Python练习题 面试刷题 资料领取 好文推荐 前
  • 【笔记:模拟CMOS集成电路】两级运算放大器设计与仿真(带版图)

    笔记 模拟CMOS集成电路 两级运算放大器设计与仿真 带版图 前言 1 电路分析 1 1电路结构 电路描述 1 2小信号分析 1 3公式 2指标设计 2 1预期设计指标参数 2 2参数分析 1 确定gm1 gm6 2 分配电流 3 确定M1
  • 技术管理者培训小结一:内在修养

    经过技术管理者培训课程 将一些内容以小结方式记录下来 既能作为培训沉淀 又能作为备忘 一 管理者的内在修养 1 情绪控制应该脱离 刺激 回应模式 人的终极自由是自己的情绪由自己控制 发挥四大天赋潜能 自我意识 想象力 良知 独立意志 由受制
  • Java线程安全性中的对象发布和逸出

    转自 http www cnblogs com yulinfeng p 5975728 html 发布 Publish 和逸出 Escape 这两个概念倒是第一次听说 不过它在实际当中却十分常见 这和Java并发编程的线程安全性就很大的关系
  • 银行编码规则

    编号 银行名称 001 中国人民银行 011 国家金库 102 中国工商银行 103 中国农业银行 104 中国银行 105 中国建设银行 201 国家开发银行 202 中国进出口银行 203 中国农业发展银行 301 交通银行 302 中
  • 静态编译与动态编译的区别以及为什么需要静态编译

    1 由于博创杯开发板的不可更改性 所以导致的结果是什么呢 那就是无法动态连接 还有一个需要注意的是 板子上面上面用的是4 4 1的gcc 一旦你Ubuntu使用的开发板高于它 都有可能导致运行程序失败 这就是程序失败的例子 2 Linux
  • css 设置段落样式 各种设置方式详细解释

    我本来打算告诉你 当你不在我身边的这段日子里 我遇到的所有糟糕事 但最后我只想告诉你 我很想你 设置段落样式 今天我们详细讲讲设置段落样式的方式 网页的排版离不开对文字段落的设置 这里主要讲述常用的段落样式 包括文字对齐方式 段落首行缩进