首页 > 其他分享 >CSS文本属性:字体、加粗、斜体、对齐方式、下划线、首行缩进、字母大小写、字间距,词间距、垂直排列、上标,下标、文本溢出。

CSS文本属性:字体、加粗、斜体、对齐方式、下划线、首行缩进、字母大小写、字间距,词间距、垂直排列、上标,下标、文本溢出。

时间:2024-11-23 21:30:29浏览次数:8  
标签:间距 斜体 text font xx 字体 文本 文本属性

1.非常常用!!!

字体大小:16px、18px

font-size:大小;

字体颜色:red、green、#ff0000、#f00(两个相同的可以省略一个)

coror:颜色;

2.字体设置

字体:Arial,Verdana,Thoma,sans-serif,simsun.....

font-family:字体;

3.加粗

font-weight:xx;

xx:下面的单词或整百数值(100-900)。

        normal:正常字体,相当于400。

        bold: 粗体,相当于数字值700。

        bolder: 更粗的,定义比继承值更重的值 。

        lighter: 定义比继承值更轻的值 。

4. 斜体

 font-style:xx;

xx:

        normal: 指定文本字体样式为正常的字体

        italic: 指定文本字体样式为斜体。这种斜体,是字体本身就设置了斜体的情况。对于没有设计斜体的 特殊字体,如果要使用斜体外观将应用oblique

        oblique: 指定文本字体样式为倾斜的字体。字体本身没有斜体效果,强制斜体,人为的使文字倾斜, 而不是去选取字体中的斜体字 。

因为一些标签自带斜体如i标签、em标签

5. 行高

 line-height:xx;

xx:

        normal:默认状态,允许内容顶开或溢出指定的容器边界。

        长度值:常用方式。设置行高为一个具体的值。

        数值:设置行高为一个倍数字,以字体大小为基数。

        百分比:设置行高为百分比大小,以字体大小为基数。

后面不是很常用就不过多解释了。

6.对齐方式:text-align:xx;

xx:left、center、right、justify(两端)。(word的对其方式)

7.下划线:text-decoration:xx;

xx:none、underline、line-through、overline(上划线)、blink(可忽略)

text-decoration-color: 下划线颜色;

text-decoration-style: 下划线风格(solid、double、dotted、dashed、wavy——波浪));

8.首行缩进:text-indent:xx;

9.字母大小写:text-transform:xx;

xx:none、capitalize、lowercase、uppercase

10.字间距和词间距

        letter-spacing:xx;

        word-spacing:xx;

11.文字垂直排列:writing-mode:xx;

xx:horizontal-tb(默认)、vertical-rl(上到下-右到左)、vertical-lr、sideways-rl、sideways-lr

vertical:上到下;

sideways:下到上;

rl:right-left右到左    反之     左到右

12. 上标和下标(<sup>和<sub>)

例:2的平方:

2<sup>2</sup>

13.文本溢出:text-overflow:xx;

        xx:

        ellipsis:显示省略符号 ... 来代表被修剪的文本。 

                搭配over-flow: hidden;实现

                        123456789...

        clip:剪切文本。

        string:自定义字符串来代表修剪的文本。不是所有浏览器都支持。

标签:间距,斜体,text,font,xx,字体,文本,文本属性
From: https://blog.csdn.net/bigbugjusteasy/article/details/143998579

相关文章

  • vue3下el-carousel的card模式下设置item之间的间距
    <el-carouselref="refCarousel"class="wh100Per":autoplay="false":loop="true"type="card"arrow="never"indicator-position="none"@change="priceChange">&......
  • css如何设置间距
    在CSS中设置间距是非常常见的需求,可以通过多种属性来实现。以下是一些常用的CSS属性及其用法,用于设置元素之间的间距:内边距(Padding)padding属性用于设置元素内容与元素边框之间的距离。可以分别设置四个方向的内边距。示例代码:.element{padding:10px;/*上下左右......
  • 【AD那些事 4 】AD铺铜之后如果发现铜皮与主控管脚的焊盘间距太小如何将其间距增大???????
    当我们画完板子之后,肯定会进行铺铜,那么AD铺铜之后如果发现铜皮与主控管脚的焊盘间距太小如何将其间距增大???????铺铜调大间距之后,可能会出现有些线的截断,到时可以将未连接的线进行过孔连接,背面铺铜     调整前                   ......
  • (五)焊缝检测之--测量间距并用ROS消息包发送
    前言在上一小节记录了矩形参照物的检测。这一小节将介绍基于识别到的圆形焊缝和矩形参照物的坐标,读出两点之间在x和y方向上的间距,并通过话题通信的方式发送初期一、测量圆心和焊缝间距在之前小节中已经分别通过霍夫圆检测拿到了圆心坐标和矩形参照物角点坐标,分别将其记......
  • 【CSS】从零开始学CSS第二篇:字体属性、文本属性、引入方式
    目录CSS字体属性1.1字体系列1.2字体大小1.3字体粗细1.4文字样式1.5字体复合属性1.6字体属性总结CSS文本属性2.1文本颜色2.2对齐文本2.3装饰文本2.4文本缩进2.5行间距2.6文本属性总结 CSS引入方式3.1CSS的三种样式表3.2内部样式表3.3行内......
  • PCB敷地铜皮距离板框间距:推荐15mil
    整个电路板一般敷地铜皮设置间距应该多少合适呢?有木有什么大厂的指导书之类的?或者理论指导类的书籍可以学习参考Altiumdesigner官方给的建议是>=0.03mm或12mil。带电铜皮与PCB板边的间距最好不小于0.3mm。如上图所示,在Design-Rules-Boardoutline页面来设置该项间距规......
  • 设计一位字段结构存储下面信息。 字体ID:0~255之间的一个数 字体大小:0~127之间的一个数
    /设计一位字段结构存储下面信息。字体ID:0~255之间的一个数字体大小:0~127之间的一个数对齐:0~2之间的一个数表示左对齐,居中,右对齐加粗:开(1)或闭(0)斜体:开(1)或闭(0)在程序中使用该结构来打印字体参数,并使用循环菜单来让用户改变参数。例如,该程序的一个运行示例如下:IDSIZEALIGNMEN......
  • 前端如何设置表格边框样式和单元格间距?
    前端如何设置表格边框样式和单元格间距?引言表格的基本概念基本结构示例一:基本表格样式CSS说明示例二:交替行颜色CSS说明示例三:固定表头CSS说明示例四:设置单元格间距HTMLCSS说明示例五:响应式表格CSSHTML说明实际工作中的使用技巧技巧一:优化单元格内的内容CSS技巧二:使......
  • 新能源车浪潮来袭,同时存在高压低压系统,如何准确进行高低压布线间距EMC分析?
    摘要随着车辆电气化水平的逐步提升,电气零部件布局和布线面临着前所未有的挑战,在不断的压缩电气零部件间间距后,EMC性能成为非常关键的性能指标。特别是对于新能源车型,同时存在高压和低压系统,高低压耦合若处理的不好则EMC问题会频发。本文重点对新能源车高低压布线间距进行EM......
  • PyMOL测量蛋白质中两个原子或残基空间距离
    测量距离在Pymol中实现两个原子间的空间距离测量一、 以PDB:4hbk为例,打开PyMOL运行命令载入蛋白(也可以直接 .pdb格式导入) 二、点击菜单栏中的Wizard->Measurement 就可以进行距离测量。然后分别选择两个2个原子就可以显示这2个原子的距离。比如我们想测定TYR48中侧链......