189 8069 5689

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 上画线 更多用于超链接样式*/}

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规定文本的换行规则。

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 设置字间距。

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 "了解!

希望对你有所帮助。

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

font-size字号

font-family什么字体

font-weight加粗

text-align水平居中

line-height垂直居中

text-indent首行缩进

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

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教程等,望大家能以学习为目的,每天阅读一篇文章,了解身边的技术。陪有梦想的人一起成长!


当前标题:css样式中的文本属性,CSS样式文本属性设置的优势在哪?
文章起源:http://cdxtjz.cn/article/hodigi.html

其他资讯