css样式中的文本属性,CSS样式文本属性设置的优势在哪?

css常见的文本属性

css常见的文本属性：

p{

font-size:18px; /*文本尺寸*/

font-family:"隶书"; /*文本字体*/

font-weight:bold; /*文本加粗 bold 加粗 bolder 更粗*/

color:red; /*文本颜色*/

text-align:center; /*文本水平居中 center 居中 justify 两端对齐 left 左对齐 right 右对齐*/

background-color:#ccc; /*背景颜色*/

background-image:url(img/*.jpg); /*背景图片 可以简写 直接加颜色 就是添加背景颜色 图片也一样*/

font-style:italic; /*文本倾斜 oblique也可以 但最好用italic*/

letter-spacing:2px; /*字符间距*/

line-height:20px; /*行高*/

text-indent:2em; /*首行缩进*/

word-spacing:2px; /*单词间距*/

line-height:2px; /*垂直居中*/

text-decoration:underline; /*字符装饰线 underline 下划线 line-through 删除线 overline 上画线 更多用于超链接样式*/}

相关问答

Q1: css3文本属性有哪些

    /*text-align: justify;*//*默认left，可设right、center、justify、start、end*/

    /*line-height: 3;*//*设置行高：normal、数字、百分比、px、em*/

    /*text-indent: 20px;*//*设置首行缩进：像素、百分比、em*/

    /*text-decoration:line-through overline underline;*//*默认值none在超链接去掉默认下划线时可用到，下划线underline，上划线overline，删除线line-through，闪烁文本blink*/

    /*letter-spacing: 2em;*//*设置字符间距，默认normal，可用像素、em，可设负值*/

    

    /*word-spacing: 2em;*//*类似letter-spacing，可设负值*/

    /*text-transform: lowercase;*//*none默认；capitalize每个单词以大写字母开头，uppercase转换为大写字母，lowercase转换为小写字母*/

    /*text-shadow: 3px 3px 3px red, -6px -6px 3px green;*//*四个参数：横向偏移、纵向偏移、模糊度、颜色，可加多个阴影用逗号隔开*/

    /*white-space: pre;*//*设置元素中空白处理方式：默认normal；pre空白会保留，类似pre标签；nowrap文本不会换行，文本会在同一行上继续，直到遇到br标签为止；pre-wrap保留空白正常换行；pre-line合并空白正常换行*/

    /*direction: rtl;*//*默认ltr*/

    /*unicode-bidi: bidi-override;*//*从右向左读文字，一般配合direction使用，默认normal，可设embed*/    

    text-overflow设置是否使用一个省略标记...标示对象内文本溢出：clip默认值，当对象内文本溢出时不显示省略标记，而是将溢出部分裁掉；ellipsis当对象内文本溢出时显示省略号。此属性要和over-flow：hidden属性，white-space:nowrap配合使用。*/

    text-outline规定文本的轮廓；

    text-justify规定当text-align设置为justify时所使用的对齐方式；

    text-align-last设置如何对齐最后一行或紧挨强制换行符之前的行；

    text-emphasis向元素的文本应用重点标记以及重点标记的前景色；

    hanging-punctuation规定标点字符是否位于线框之外；

    punctuation-trim规定是否对标点字符进行修剪；

    tab-size设定一个tab在页面中的显示长度；

    text-wrap规定文本的换行规则。

Q2: css文本属性有哪些

color 设置文本颜色

direction 设置文本方向。

line-height 设置行高。

letter-spacing 设置字符间距。

text-align 对齐元素中的文本。

text-decoration 向文本添加修饰。

text-indent 缩进元素中文本的首行。

text-shadow 设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。

text-transform 控制元素中的字母。

unicode-bidi 设置文本方向。

white-space 设置元素中空白的处理方式。

word-spacing 设置字间距。

Q3: CSS设置文本样式的属性有哪些

1、文本缩进：text-indent

2、文本对齐：text-align

3、字间隔：word-spacing

4、字母间隔：letter-spacing

5、字母转换：text-transform

6、文本装饰：text-decoration

7、处理空白符：white-space

8、文本方向：decoration

9、文本颜色：color

10、背景颜色：background-color

11、文本阴影：text-shadow

还有一些属性，不是很常用，就没有列举了，了解每个具体的使用方法，可以到百度 "w3cschool "了解！

希望对你有所帮助。

Q4: css常用样式的字体和文本相关属性

font-size字号

font-family什么字体

font-weight加粗

text-align水平居中

line-height垂直居中

text-indent首行缩进

常用的差不多这些了，当然还有好多其他的不过用起来可能不如这些频率高。

Q5: CSS字体与文本样式详解

学习导航

1、css中的长度与颜色

2、css中的文字属性

3、css中的文本属性

1、文字样式属性

font-family 字体属性

作用：元素内文字以什么字体来显示

语法：font-family:[字体1],[字体2],[......];

说明：含空格字体名和中文，用英文引号（"）括起；多个字体用英文逗号隔开；引号嵌套，外使用双引号，内使用单引号。

font-size 文字大小

作用：元素内文字大小

语法：font-size:绝对单单位，相相对单位

color 文字颜色

语法：颜色名|十六进制|RGB

font-weight 文字粗细

语法：font-weight:normal 正常 | bold 加粗 | bolder 加粗 | lighter 细体 | 100-900

说明：默认值：normal 400等同于normal,而700等同于bold

font-style 文字样式

作用：为元素内文字设置样式

语法：font-style:normal 正常显示 | italic 文字倾斜 | oblique 文字倾斜（基本不用）

font-variant 字体变形

作用：设置元素中文本为小型大写字母

语法：font-variant:normal 正常显示| small-caps 将英文大小写字母调成为同宽

font 属性简写

语法：font:font-style font-variant  font-weight font-size/line-height font-family;

说明：值之间空格隔开，注意书写顺序。

2、CSS文本样式

text-align

作用：设置元素内文本的水平对齐方式

语法：tex-align:left 左对齐 | right 右对齐 | center 居中对齐 | justify 两端对齐

注意：该属性对块级元素设置有效

line-height

作用：设置元素中文本行高

语法：line-height:长度值 | 百分比

说明：一行文字的高度，行高指文本行的基线间的距离

文字基线

注意：基线并不是汉字文字的下沿，看图理解自行理解

行高和行距

行高：基线到基线的距离

行距：底线到顶线的距离

注意：看图自行理解

行框和行内框

注意：看图自行理解

vertical-align

作用：设置元素内容的垂直方式

语法：vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | 长度 | 百分比

注意：看图自行理解

text-indent 首行缩进

3、文本样式属性

text-transform: capitzlize 首字母大写 | uppercase 字母大写 | lowercase  字母小写 | none 正常

text-decoration: underline 下划线 | overline 上划线 | line-through 删除线 | none 正常

综合实操案例

如果您觉得有用，记得在下方点赞、关注、留言，我会定期奉 上更多的惊喜哦，您的打赏支持才是我继续努力的动力，么么哒。

每日分享在学习过程中总结的学习经验，学习笔记，笔试题，HTML，CSS，JavaScript，jQuery教程，Vue教程，PHP教程，TinkPHP教程等，望大家能以学习为目的，每天阅读一篇文章，了解身边的技术。陪有梦想的人一起成长！