专业微信网站建设公司首选公司,长沙中小企业有哪些公司,做清洁找什么网站,正规职业技能培训机构通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等#xff0c;CSS 中常用的文本属性如下所示#xff1a;
text-align#xff1a;设置文本的水平对齐方式#xff1b;text-decoration#xff1a;设置文本的装饰#xff1b;te…通过 CSS 中的文本属性您可以像操作 Word 文档那样定义网页中文本的字符间距、对齐方式、缩进等等CSS 中常用的文本属性如下所示
text-align设置文本的水平对齐方式text-decoration设置文本的装饰text-transform设置文本中英文的大小写转换方式text-indent设置文本的缩进方式line-height设置行高letter-spacing设置字符间距word-spacing设置单词与单词之间的间距对中文无效text-shadow设置文本阴影vertical-align设置文本的垂直对齐方式white-space设置文本中空白的处理方式direction设置文本方向。
1. text-align
text-align 属性用来设置元素中文本的水平对齐方式属性的可选值如下
值描述left默认值左对齐right右对齐center居中对齐justify两端对齐inherit从父元素继承 text-align 属性的值
【示例】使用 text-align 属性设置文本的水平对齐方式
!DOCTYPE htmlhtmlheadstylep{border: 1px solid black; /*为了能更直观的体现出文本的对齐方式这里给p标签设置一个边框*/}.text1 {text-align: left;}.text2 {text-align: right;}.text3 {text-align: center;}/style/headbodyp classtext1左对齐/pp classtext2右对齐/pp classtext3居中对齐/p/body/html运行结果如下图所示 图text-align 属性演示
当 text-align 设置为 justify 时将拉伸每一行文本增加字符之间的间距以使每行文本具有相同的宽度最后一行除外这种对齐方式通常用于出版物例如杂志和报纸。需要特别注意的是如果元素中的文本不足一行时是无法实现两端对齐的默认会以左对齐的效果显示。只有当元素中的文本足够长并且在元素中发生了自动换行时才会将除最后一行以外的文本实现两端对齐。如下例所示
!DOCTYPE htmlhtmlheadstylep{border: 1px solid black; /*为了能更直观的体现出文本的对齐方式这里给p标签设置一个边框*/}.text {width: 125px;text-align: justify;}/style/headbodyp classtext两端对齐、两端对齐/p/body/html运行结果如下图所示 图两端对齐演示
2. text-decoration
text-decoration 属性用于设置或删除文本的装饰最常用的做法就是使用 text-decoration 属性来删除a标签的默认下划线。当然了使用 text-decoration 属性也可以在需要的地方为元素中的文本添加一些装饰达到突出显示的效果。
text-decoration 属性的可选值如下
值描述none默认值标准文本没有额外装饰可以用来删除已有的文本装饰underline在文本下方添加一条下滑线overline在文本上方添加一条上滑线line-through在文本的中间定义一条横向贯穿文本的线类似于删除线blink定义闪烁的文本目前主流浏览器不再支持inherit从父元素继承 text-decoration 属性的值
【示例】使用 text-decoration 属性为文本添加装饰
!DOCTYPE htmlhtmlheadstyle.none {text-decoration: none;}.underline {text-decoration: underline;}.overline {text-decoration: overline;}.line-through {text-decoration: line-through;}/style/headbodyp classnone无装饰文字/pp classunderline带下划线文字/pp classoverline带上划线文字/pp classline-through带贯穿线文字/p/body/html运行结果如下图所示 图text-decoration 属性演示
3. text-transform
text-transform 属性用来控制文本中英文字母的大小写通过该属性您可以在不修改原文的基础上将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式。
text-transform 属性的可选值如下
值描述none默认值以原文显示对文本中的英文不做更改capitalize将文本中的每个单词更改为以大写字母开头的形式uppercase将文本中的英文字母全部更改为大写lowercase将文本中的英文字母全部更改为小写inherit从父元素继承 text-transform 属性的值
【示例】使用 text-transform 定义文本中英文的大小写
!DOCTYPE htmlhtmlheadstyle.none {text-transform: none;}.uppercase {text-transform: uppercase;}.lowercase {text-transform: lowercase;}.capitalize {text-transform: capitalize;}/style/headbodyp原文 text-transform emsp;span classnone转换后text-transform/span/pp原文 text-transform emsp;span classuppercase转换后text-transform/span/pp原文 TEXT-TRANSFROM emsp;span classlowercase转换后text-transform/span/pp原文 text-transform emsp;span classcapitalize转换后text-transform/span/p/body/html运行结果如下图所示 图text-transform 属性演示
4. text-indent
text-indent 属性用来为元素中的文本添加首行缩进的效果属性的可选值如下
值描述length以固定的值加单位的形式例如 2em定义缩进距离默认值为 0%以基于父元素宽度的百分比来定义缩进距离inherit从父元素继承 text-indent 属性的值
提示不论是使用具体的值还是使用百分比的形式都可以设置为负值但这么做可能会造成文本内容溢出元素区域。
【示例】使用 text-indent 为文本添加首行缩进效果
!DOCTYPE htmlhtmlheadstylep {border: 1px solid #ccc;text-indent:2em;}/style/headbodyptext-indent 属性用来为元素中的文本添加首行缩进的效果至于是从左侧还是从右侧缩进则取决于 direction 属性定义的文本方向。/p/body/html运行结果如下图所示 图text-indent 属性演示
注意文本是从左侧还是从右侧缩进取决于 direction 属性定义的文本方向。
5. line-height
line-height 属性用来设置文本的行高属性的可选值如下
值描述normal默认值使用默认的行高不对行高进行额外设置number以具体的数字设置行高这个数字会与当前的字体大小相乘并将得到的值设置为行高length以数字加单位的形式设置固定的行高%以百分比的形式设置基于当前字体尺寸百分比的行高inherit从父元素继承 line-height 属性的值
【示例】使用 line-height 为文本设置行高
!DOCTYPE htmlhtmlheadstylep.small {line-height: 0.8;}p.big {line-height: 200%;}/style/headbodyp这是默认的标准行高br这是默认的标准行高br这是默认的标准行高br/pp classsmall使用数字定义一个较小的行高br使用数字定义一个较小的行高br使用数字定义一个较小的行高br/pp classbig使用百分比的形式定义一个较大的行高br使用百分比的形式定义一个较大的行高br使用百分比的形式定义一个较大的行高br/p/body/html运行结果如下图所示 图line-height 属性演示
6. letter-spacing
letter-spacing 属性用来设置字符之间的间距属性的可选值如下
值描述normal默认值表示字符之间没有额外的间距length以数值加单位的形式设置字符之间的固定间距允许使用负值inherit从父元素继承 letter-spacing 属性的值
【示例】使用 letter-spacing 属性设置字符之间的间距
!DOCTYPE htmlhtmlheadstylep {letter-spacing: 2px;}/style/headbodypletter-spacing 属性用来设置字符之间的间距brletter-spacing 属性用来设置字符之间的间距brletter-spacing 属性用来设置字符之间的间距br/p/body/html运行结果如下图所示 图letter-spacing 属性演示
7. word-spacing
word-spacing 属性用来设置单词与单词之间的间距但对中文无效属性的可选值如下
值描述normal默认值表示单词与单词之间没有额外的间距length以数值加单位的形式设置单词与单词之间的固定间距允许使用负值inherit从父元素继承 word-spacing 属性的值
【示例】使用 word-spacing 属性设置字符之间的间距
!DOCTYPE htmlhtmlheadstylep {word-spacing: 2em;}/style/headbodypword-spacing 属性用来设置单词与单词之间的间距但对中文无效brword-spacing 属性用来设置单词与单词之间的间距但对中文无效brword-spacing 属性用来设置单词与单词之间的间距但对中文无效br/p/body/html运行结果如下图所示 图word-spacing 属性演示
8. text-shadow
text-shadow 属性用来为文本添加阴影及模糊效果属性的语法格式如下
text-shadow: h-shadow v-shadow blur color;
语法说明如下
h-shadow必填值设置阴影的水平位置允许为负值v-shadow必填值设置阴影的垂直位置允许为负值blur可选值设置模糊的距离color可选值设置阴影的颜色。
注意text-shadow 属性可以设置一个或多个阴影效果只需要将每组的值使用逗号,分隔即可类似于 background 属性的用法。
【示例】使用 text-shadow 属性为文本设置阴影效果
!DOCTYPE htmlhtmlheadstylep {text-shadow: 2px 15px red,0px -15px 5px blue;}/style/headbodyptext-shadow 属性可以为文本添加阴影和模糊效果/p/body/html运行结果如下图所示 图text-shadow 属性演示
9. vertical-align
vertical-align 属性用来定义元素内文本的垂直对齐方式属性的可选值如下
值描述baseline默认值将元素的基线与父元素的基线对齐sub下标对齐将元素的基线相对于父元素的基线降低super上标对齐将元素的基线相对于父元素的基线升高top顶部对齐将元素行内框的顶端与行框的顶端对齐text-top文本顶部对齐把元素的顶端与父元素字体的顶端对齐middle居中对齐通常使用在图片上将图片垂直方向的中线与文本的中线文字元素行内框的中线对齐bottom底部对齐将元素行内框的顶端与行框的底端对齐text-bottom文本底部对齐是将元素行内框的底端与行框的底线对齐length以数字加单位的形式设置元素基线距离父元素基线的距离可以为负值%使用 “line-height” 属性的百分比值来排列此元素允许使用负值inherit从父元素继承 vertical-align 属性的值
上表中提到了基线、底线、顶线、中线等概念它们到底指什么呢
顶线中文汉字的上边沿中线贯穿小写英文字母 x 中间的线基线小写英文字母 x 的下边沿底线中文汉字的下边沿内容区指底线与顶线包裹的区域行高包括内容区与以内容区为基础对称拓展的空白区域我们称之为行高也可以认为是相邻文本行基线间的距离行距指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离行内框是一个浏览器渲染模型中的概念无法显示出来但是它又确实存在它的高度与行高相同行框同行内框类似的概念行框是指本行的一个虚拟的矩形框也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值以行高值最大的行内框为基准其他行内框采用自己的对齐方式向基准对齐最终计算行框的高度。 图基线、底线、顶线、中线、内容区、行高、行距、行内框、行框示意图
【示例】使用 vertical-align 属性为元素设置垂直对齐方式
!DOCTYPE htmlhtmlheadstyleimg.btn {vertical-align: super;}img.top {vertical-align: text-top;}/style/headbodypvertical-align img classbtn src./eg_cute.gif属性用来定义元素内文本的垂直对齐方式/ppvertical-align img classtop src./eg_cute.gif属性用来定义元素内文本的垂直对齐方式/p/body/html运行结果如下图所示 图vertical-align 属性演示
10. white-space
white-space 属性用来设置如何处理元素内的空白属性的可选值如下
值描述normal默认值忽略文本中的空白pre保留文本中的空白类似于pre标签的效果nowrap文本会在一行中显示不会自动换行直到遇到br标签为止pre-wrap保留文本中的空白但是正常地进行换行pre-line合并文本中的空白但是保留换行符inherit从父元素继承 white-space 属性的值
【示例】使用 white-space 属性来处理元素内的空白
!DOCTYPE htmlhtmlheadstylep {white-space: nowrap;}/style/headbodypwhite-space 属性用来设置如何处理元素内的空白 white-space 属性用来设置如何处理元素内的空白/p/body/html运行结果如下图所示 图white-space 属性演示
11. direction
direction 属性用来设置文本的方向属性的可选值如下
值描述ltr默认值文本按从左到右的方向输出rtl文本按从右到左的方向输出inherit从父元素继承 direction 属性的值
【示例】使用 direction 属性来设置文本的方向
!DOCTYPE htmlhtmlheadstyle.ltr {direction: ltr;}.rtl {direction: rtl;}/style/headbodyp classltrdirection 属性用来设置文本的方向/pp classrtldirection 属性用来设置文本的方向/p/body/html运行结果如下图所示 图direction 属性演示
原文地址CSS文本格式化
