缩进和水平对齐

缩进文本: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属性设置为embedbidi-override时才会应用direction属性;

转载于:https://www.cnblogs.com/jinkspeng/p/4497078.html

css整理-03 文本相关推荐

  1. css中文本指什么,CSS中的文本属性

    本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性 文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...

  2. web前端培训:CSS中单行文本溢出显示省略号的方法

    CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...

  3. html css整理笔记,HTML CSS整理笔记 (八) 定位网页元素

    ----8 定位网页元素---- 51.Position属性:指定盒子的位置,相对它父级的位置或它自身应该在的位置. (1)static 默认无定位,元素按照标准文档布局. (2)relative相对 ...

  4. html 文本强调,CSS Emphasis Marks 文本强调标记

    我们常常会在网页中对文本某一关键词进行凸显强调,加粗.高亮.下划线等等一系列相对匹配的样式去装饰进而引起用户注意,今天我们看看另一种实现方法text-emphasis. 页面文本段落中,有时我们会根据 ...

  5. css之为文本添加线性渐变和外描边

    css之为文本添加线性渐变和外描边  一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边 解决:在before ...

  6. CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转)

    CSS 单行溢出文本显示省略号...的方法(兼容IE FF)(转) html代码: <div> <p><span>CSS Web Design 我爱CSS-Web标 ...

  7. html如何设置文本斜体,CSS/HTML:使文本斜体的正确方法是什么?

    Rupert Madden-Abbott 194 html css semantic-markup 使文本斜体的正确方法是什么?我见过以下四种方法: Italic Text Italic Text I ...

  8. linux编译c gedit,[2018年最新整理]LINUX-Gedit文本编辑器.ppt

    [2018年最新整理]LINUX-Gedit文本编辑器 Gedit文本编辑器 系别:电信系 班级:08 自动化 姓名:张小亚 学号: 30 号 辅导老师:兰建平 Gedit的启动与打开文本 Gedit ...

  9. [css] 实现单行文本居中和多行文本左对齐并超出显示“...“

    [css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...

  10. css禁用选中文本_使用CSS禁用文本选择突出显示

    css禁用选中文本 Introduction: 介绍: Texts are the most fundamental elements of any websites or web pages, th ...

最新文章

  1. tensorflow常用函数解析
  2. Embarcadero公司花2千3百万买下Borland的开发工具业务
  3. Hibernate映射关系
  4. react开发心路历程
  5. django构建网页_通过解决问题的方式学习django,律师如何构建副业
  6. ITK:减去两个图像
  7. oracle学习--循环语句
  8. 技术解析:一文看懂 Anolis OS 国密生态 | 龙蜥专场
  9. 一个函数统一238个机器学习R包,这也太赞了吧
  10. Java虚拟机运行时数据区
  11. pandas 中文打印无法对齐_2天学会Pandas
  12. 董明珠给格力员工加薪 10 亿;张小龙回应微信 7.0 界面变丑;库克怒怼高通 | 极客头条...
  13. Java中如何循环删除一个集合(如List)中的多个元素
  14. java拦截器_Java拦截器
  15. fcntl函数的SET用法
  16. 事件管理和问题管理,配置管理和变更管理的区别
  17. 读书笔记004:王阳明语录
  18. 双引号后面要加句号吗_双引号和句号的位置
  19. 伊利诺伊理工大学舒凯招收多名全奖博士生
  20. 在word中在方框里打钩

热门文章

  1. maven+scala和java_maven打包scala+java工程
  2. java技术分享ppt_精美PPT制作培训 | 技术二部内部分享
  3. 【HDU6286】2018(容斥)
  4. 【hdu1506/牛客小A的柱形图】单调栈入门题目
  5. spring 配置项 随机_Spring Boot--从配置文件中获取随机数
  6. 翻译: 2深度学习的基础技能 概览
  7. 自动驾驶 2-2 硬件配置设计 Hardware Configuration Design
  8. 价值连城 知名深度强化学习Pieter Abbeel的采访 给机器学习 深度学习 和机器人学研究者从业者的建议
  9. Charles 4.2 HTTPS抓包,乱码设置,证书信任,证书安装
  10. php_os用法,使用终端,如何让OS X使用MAMP版本的PHP