CSS Text(文本)
color
文本颜色:可以使用颜色名称,十六进制,RGB,RGBA(A:代表透明度)
color: green;
正常文本
文本方向
.p1{/* 设置文本方向 *//* 默认值 :从左到右与正常文本相同*//* direction: ltr; *//* 从右到左 */direction: rtl;
}
letter-spacing
设置字符间距
/* 设置字符间距,既可以改变两个字母的间距也可以改变两个文字的间距 */
.p2{/* 默认值:字符间没有额外空间 *//*letter-spacing: normal;*//* 定义字符间的固定空间 ,可使用负数*/letter-spacing: 20px;
}
line-height
设置行高
.p5{/* 设置数字,该数字与当前字体尺寸相乘,设置行间距 */line-height: 2;/* 设置固定行间距 *//* line-height: 200px; *//* 基于当前字体尺寸的百分比行间距 *//* line-height: 200%; */
}
固定间距
百分比方式,与第一幅图相同
text-align
对齐元素中的文本
.p6{/* 两端对齐 */text-align: justify;/* 左对齐 *//* text-align: left; *//* 右对齐 *//* text-align: right; *//* 居中对齐 *//* text-align: center; */
}
justify:两端对齐
left:左对齐
right:右对齐
center:居中对齐
text-decoration
用于添加文本修饰,下划线、上划线,删除线等
.p7{/* 定义文本下的一条线 */text-decoration: underline;/* 定义文本上的一条线 *//* text-decoration: overline; *//* 定义穿过文本下的一条线 *//* text-decoration: line-through; *//* 定义闪烁文本,浏览器不显示*//* text-decoration: blink; */
}
none
默认。定义本准文本
underline
定义下划线
overline
定义上划线
line-through
定义穿过文本的一条线
bink
定义闪烁的文本,一般浏览器不显示
text-indent
规定文本块中的首行缩进
.p8{/* 固定缩进 */text-indent: 20px;/* 基于父元素宽度的百分比缩进 */text-indent: 20%;
}
设置固定的值
使用百分比表示
是基于父元素宽度的百分比缩进
text-transform
控制文本的大小写
.p9{/* 每个单词以大写字母开头 */text-transform: capitalize;/* 定义仅有大写字母 *//* text-transform: uppercase; *//* 仅有小写字母 *//* text-transform: lowercase; */
}
none
默认值,定义带有小写字母与大写字母的标准文本
capitalize
文本中的每个单词以大写字母开头
uppercase
定义仅有大写字母的文本
lowercase
定义仅有小写字母的文本
unicode-bidi
设置文本是否被重写。与direction一起使用可以达到真正意义上的改变文本方向
.p10{direction: rtl;/* 创建一个附加的嵌入层面 */unicode-bidi: embed;/* 创建一个附加嵌入层面,重新排序取决于direction属性 */unicode-bidi: bidi-override;/* 设置为他的默认值 */unicode-bidi: initial;
}
normal
默认值,不使用附加的键入层面
embed
创建一个附加的嵌入层面,效果以默认无区别
bidi-override
创建一个附加的嵌入层面重新排序取决于direction
initial
设置该属性为他的默认值
vertical-align
设置垂直对齐,允许指定负值
.p11 span{font-size: 20px;/* 垂直对齐文本的下标 *//* vertical-align: sub; *//* 垂直对齐文本的上标 *//* vertical-align: super; *//* 元素顶端与行中最高元素对齐 *//* vertical-align: top; *//* 把元素顶端与父元素顶端对齐 *//* vertical-align: text-top; *//* 把此元素放在父元素中部 *//* vertical-align: middle; *//* 使元素及其后代元素底部与整行底部对齐 *//* vertical-align: bottom; *//* 使元素低端与父元素低端对齐 *//* vertical-align: text-bottom; *//* 升高或降低指定高度:可为负数 *//* vertical-align: 50px; *//* 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值*//* vertical-align: 20%; */vertical-align: baseline;
}
baseline
默认值,元素放置在父元素的基线上
sub
垂直对齐文本的下标
super
垂直对齐文本的上标
top
把元素的顶端与行中最高元素对齐
text-top
把元素的顶端与父元素字体的顶端对齐
middle
把此元素放置在父元素中部
bottom
是元素及后代元素底部与整行底部对齐
text-bottom
使元素低端与父元素低端对齐,效果与上图相同。在父元素低端与整行底部不对齐是效果不同
使用像素值
升高或降低指定高度。可为负值,
使用百分比
baseline默认值
使元素放在父元素的基线上
CSS Text(文本)相关推荐
- CSS Text文本
文本颜色 color属性用来设置文字的颜色.颜色值有三种表示方法:十六进制值,RGB值,名称. <style>.p1{color: #ff0000;}.p2{color: rgb(0,25 ...
- HTML/CSS中文本text属性详解
我们可以通过添加一些HTML标记和CSS属性来设置text文本的样式. HTML中的标记包括结构化标记和语义化标记两种,结构化标记简单来说是用来标记标题和段落的,而语义化标记则是不会影响到网页的结构. ...
- css里td自带什么属性,关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
- css text top,text-align属性(css中文本对齐属性)
text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...
- 关于input type=“text”文本框的 默认宽度
当文本框的td设置宽度设置为百分比时,出现了一些没有搞懂的地方. 类选择设置td的width 为百分比时,通常 要定义父元素的宽度,在我的实战中父元素只能是table,给定table时. 而且这就是说 ...
- CSS实现文本周围插入符号
CSS实现文本周围插入符号的方案 本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求 在文 ...
- 推荐20款基于 jQuery CSS 的文本效果插件
jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQue ...
- HTML文本下划线效果,聊聊CSS中文本下划线_CSS, SVG, masking, clip-path, 会员专栏, text-decoration 教程_W3cplus...
在Web中给文本添加下划线常常出现在链接的文本上,早期一般使用text-decoration属性给文本添加下划线.删除线等.除了text-decoration之外,CSS还有很多技术方案可以给文本添加 ...
- CSS 匿名文本和匿名框
一个元素可以按照HTML元素的嵌套方式包含其他元素,大多数情况下,框都是由显式定义的元素所生成的. 然而,当把文本直接添加到一个块容器元素中(不是包含在行内元素)时,即便没有为这些文本显式定义元素,它 ...
最新文章
- python删除字符串中指定_python删除字符串中指定字符
- CodeForces - 786C——二分+模拟?
- 【CodeForces - 602D】Lipshitz Sequence(思维,单调栈,斜率单调性)
- IOS--Tableview选中一个cell
- python标准输出_Python(2.7)-标准输入输出,标准错误输出
- 鸿蒙OS代码正式开源!!!
- Java-实现图书管理系统
- Github | 标星 1W+ 清华大学计算机系课程攻略!
- 搜索引擎原理第一阶段之爬行和抓取
- 如何把图片压缩到200k?怎么压缩图片大小kb?
- 三星S5P 6818开发板无线使用ADB功能方法
- php仿微信语音条,html5的audio实现高仿微信语音播放效果
- Java8 使用 stream().sorted()对List集合进行排序
- 论文阅读5 Cv-CapsNet:Complex-Valued Capsule Network
- Linux目录与管理
- 在windows电脑定时运行python脚本
- Argoverse--Motion Forecasting Dataset评价指标minADE/minFDE详细介绍
- VUE项目制作大致方法和流程
- 面试题之如何实现一个深拷贝
- 人员定位系统硬件篇:蓝牙定位信标知识科普