CSS权威指南阅读笔记第六章01

简介: 文本属性

文本属性

文本是网页的重要元素,CSS提供了很多相关的属性,以不同的方式控制文本;

缩进和行内对齐(只适用于块级元素)

  • 缩进文本使用text-indent

    text-indent属性把元素的第一行文本缩进指定的长度,缩进的长度可以是负值,通常用于缩进段落的第一行;
    可以使用百分数和任意长度单位,百分数是相对于父级块元素的宽度;
    text-indent属性可以用在任何块级元素上,沿着行内方向缩进;不能用在行内元素或者图片上;
    使用负值时,最后加上外边距或内边距;
    文本缩进只会影响元素的第一行,即使存在换行的也是如此;

  • 文本对齐使用text-algin

text-algin控制元素中各文本行的对齐方式;
可用值:start end left right center justify match-parent start end
默认值是left(css3规定是start),最常用值有left right center;
text-algin不控制元素的对齐方式,只影响元素的内容;

块级对齐

  • 行高属性line-height

line-height属性指的是行的基线的距离,与字号无关;决定着元素所在方框的高度是增还是减;
line-heigth控制的是行距,是除字体高度之外在文本行上方的额外空间;也就是说,line-height的值与字体高度只差就是行距;
从父元素继承line-height属性值时,是根据父元素的字号计算的,而不是根据子元素;可以通过设置line-height为纯数字解决;设置纯数字时,继承的将是设定的换算系数,而不是得到的值;

  • 纵向对齐文本vertical-align

vertical-align属性只能用于行内元素和置换元素,而且不继承;

默认值是baseline,可选值有baseline sub,super top,text-top middle,bottom,text-bottom等八个关键字和百分数。长度值等;

单词间距和字符间距

  • 单词间距word-spacing

word-spacing属性的值为长度,可正可负。指定的长度值追加到单词的标准间距上;默认值normal表示为0;

  • 字符间距letter-spacing

letter-spacing属性修改的是字符或字母之间的间距;允许任何长度值,默认值也是normal;指定的长度值将把字符之间的距离增加和减少的量;

文本转换text-transform

  • text-transform属性转变文本的大小写;

    可选值:uppercase |lowercase |capitalize |none

文本装饰text-decoration

  • 取值: none [underline, overline, line-through, blink ]

    underline为元素添加下划线
    overline在文本的上方绘制一条线
    line-through绘制一条贯穿文本中部的线;也叫删除线
    blink让文本一闪一闪的;
    none值把应用到元素上的装饰效果都去掉;
    属性不被继承;

文本阴影text-shadow

  • text-shadow属性是为了给文本添加阴影

    每个阴影由一个可选的颜色和三个长度值定义,最后一个长度值可选;

    颜色设定的是阴影的颜色,如果省略颜色,阴影的颜色与文本的颜色相同
    前两个长度值是阴影离文本的距离,第一个长度值设定横向偏移,第二个设定纵向,第三个长度值定义阴影的模糊半径;

处理空白white-space属性

  • white-space属性影响文档源码中空格、换行符合制表符的处理方式;

    取值有: normal nowrap pre pre-wrap pre-line
    默认值normal采用丢掉多余空白的方式处理;换行符变成空白。对个空格合并为一个空格;
    设置为pre,空白不会被忽略
    nowrap禁止元素中的文本换行,除非是br元素;

文本换行overflow-wrap

  • 主要针对英文单词来说

    overflow-wrap也叫word-wrap;可取值有normal和break-word;使用默认值normal时,按正常方式换行;使用break-word时,可以在单词内部换行;

另外还有其他属性如:
书写模式:writing-mode; 文本方向:text-orientation

相关文章
|
2月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
15天前
|
XML 编解码 前端开发
css设计文本样式 前端开发入门笔记(十二)
css设计文本样式 前端开发入门笔记(十二)
6 0
|
15天前
|
Web App开发 XML 前端开发
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
CSS中的非布局样式+CSS布局 前端开发入门笔记(十一)
31 0
|
15天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
20 1
|
15天前
|
编解码 前端开发 iOS开发
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
前端开发入门笔记(八)CSS3属性详解:动画详解+Flex布局图文详解+Web字体
57 1
|
15天前
|
前端开发 容器
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
CSS3属性详解(一)文本 盒模型中的 box-ssize 属性 处理兼容性问题:私有前缀 边框 背景属性 渐变 前端开发入门笔记(七)
27 2
|
15天前
|
前端开发 JavaScript 容器
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
CSS属性:定位属性+案例讲解:博雅互动 前端开发入门笔记(五)
17 1
|
15天前
|
前端开发 JavaScript UED
CSS3选择器详解 前端开发入门笔记(六)
CSS3选择器详解 前端开发入门笔记(六)
35 1
|
15天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
21 1
|
15天前
|
移动开发 前端开发 搜索推荐
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
HTML图片标签(2) HTML5+CSS3+移动web 前端开发入门笔记(三)
21 0