css整理-03 文本
缩进和水平对齐
缩进文本:text-indent
- 可以设置为负值
- 可以为所有块级元素应用,但无法应用到行内元素,图像之类的替换元素;
水平对齐: text-align
left,center,right,justify
- 只应用到块级元素
垂直对齐
行高: line-height
- 指的是文本行基线之间的距离,而不是字体的大小;它确定了将各个元素框的高度增加或减少多少
- line-height值和字体大小只差就是行间距
文本行
- 文本行中的每一个元素都会生成一个内容区,这由字体的大小确定;
- 这个内容区会生成一个行内框(line-height),行间距会影响行内框高度
- 行间距可以是负的,行间距+内容区=行内框
垂直对齐文本: vertical-align
- 值:
baseline, sub, super, bottom, text-bottom, middle, top, text-top
- 只应用于行内元素和替换元素; 不影响块级元素中的内容对齐,不过可以影响表单元素中元素的垂直对齐
- 基线对齐: baseline: 子元素的基线和父元素的基线对齐;
- 上标和下标:sub,super,相对于基线,并没有明确的定义;距离取决于用户代理
- 底端对齐: bottom,将元素行内框的底端与行框的底端对齐;text-bottom: 指的事行内文本的底端;
- 顶端对齐: top, text-top
- 居中对齐: middle, 往往应用于图像
- 百分数:会把元素的基线相对于父元素的基线升高或降低
- 长度对齐: 同上,不过是具体的高度
字间隔和字母间隔
字间隔: word-spacing
字母间隔:letter-spacing
间隔和对齐
- 如果一个文本设置两端对齐且没有设置
letter-spacing
或设置为normal
,则字母和字的距离会调整 - 如果设置了
letter-spacing
则不会受text-align
影响
文本转换, text-transform
uppercase, lowercase, capitalize
文本装饰, text-decoration
underline,overline,line-through, blink,none
- 不被继承,但仍可能会有‘穿过’的现象
文本阴影
text-shadow: color offset-x offset-y [blur-radius]
- color可以放在最前或最后
- 可以重复
处理空白符: white-space
nowrap
: 不允许自动换行,除非使用了br
元素pre
: 保留空格和换行,不允许自动换行pre-wrap
: 保留额外的空格和换行,不允许自动换行pre-line
: 保留换行,不保留额外空白,允许自动换行
文本方向: direction
- 值:
ltr
,rtl
- 影响块级元素中文本的书写方向,表中列布局的方向,内容水平填充其元素框的方向以及两端对齐元素中最后一行的位置
- 对于行内元素,只有
unicode-bidi
属性设置为embed
或bidi-override
时才会应用direction
属性;
转载于:https://www.cnblogs.com/jinkspeng/p/4497078.html
css整理-03 文本相关推荐
- css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
- web前端培训:CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
- html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素
----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...
- html 文本强调,CSS Emphasis Marks 文本强调标记
我们常常会在网页中对文本某一关键词进行凸显强调,加粗.高亮.下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法text-emphasis. 页面文本段落中,有时我们会根据 ...
- css之为文本添加线性渐变和外描边
css之为文本添加线性渐变和外描边 一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)
CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...
- html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?
Rupert Madden-Abbott 194 html css semantic-markup 使文本斜体的正确方法是什么?我见过以下四种方法: Italic Text Italic Text I ...
- linux编译c gedit,[2018年最新整理]LINUX-Gedit文本编辑器.ppt
[2018年最新整理]LINUX-Gedit文本编辑器 Gedit文本编辑器 系别:电信系 班级:08 自动化 姓名:张小亚 学号: 30 号 辅导老师:兰建平 Gedit的启动与打开文本 Gedit ...
- [css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
- css禁用选中文本_使用CSS禁用文本选择突出显示
css禁用选中文本 Introduction: 介绍: Texts are the most fundamental elements of any websites or web pages, th ...
最新文章
- tensorflow常用函数解析
- Embarcadero公司花2千3百万买下Borland的开发工具业务
- Hibernate映射关系
- react开发心路历程
- django构建网页_通过解决问题的方式学习django,律师如何构建副业
- ITK:减去两个图像
- oracle学习--循环语句
- 技术解析:一文看懂 Anolis OS 国密生态 | 龙蜥专场
- 一个函数统一238个机器学习R包,这也太赞了吧
- Java虚拟机运行时数据区
- pandas 中文打印无法对齐_2天学会Pandas
- 董明珠给格力员工加薪 10 亿;张小龙回应微信 7.0 界面变丑;库克怒怼高通 | 极客头条...
- Java中如何循环删除一个集合(如List)中的多个元素
- java拦截器_Java拦截器
- fcntl函数的SET用法
- 事件管理和问题管理,配置管理和变更管理的区别
- 读书笔记004:王阳明语录
- 双引号后面要加句号吗_双引号和句号的位置
- 伊利诺伊理工大学舒凯招收多名全奖博士生
- 在word中在方框里打钩
热门文章
- maven+scala和java_maven打包scala+java工程
- java技术分享ppt_精美PPT制作培训 | 技术二部内部分享
- 【HDU6286】2018(容斥)
- 【hdu1506/牛客小A的柱形图】单调栈入门题目
- spring 配置项 随机_Spring Boot--从配置文件中获取随机数
- 翻译: 2深度学习的基础技能 概览
- 自动驾驶 2-2 硬件配置设计 Hardware Configuration Design
- 价值连城 知名深度强化学习Pieter Abbeel的采访 给机器学习 深度学习 和机器人学研究者从业者的建议
- Charles 4.2 HTTPS抓包,乱码设置,证书信任,证书安装
- php_os用法,使用终端,如何让OS X使用MAMP版本的PHP