css3中文字属性的使用示例

这篇文章给大家分享的是有关css3中文字属性的使用示例的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

css3中文字属性有:1,颜色属性颜色;2、文本对齐属性text-align; 3,字符间距属性字母间距;4、文本行高属性行高;5、文本修饰属性文字修饰。

1,颜色

作用:指定文本的颜色

说明:该属性在块,行内,行内块的样式表中都可以使用,改变被控制元素内部所有文本的颜色

示例:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title> CSS3之文本属性& lt;/title> 　　 　　& lt;风格类型=拔谋?css"比; 　　# coDiv { 　　颜色:# 00 c6ff; 　　} 　　#警察{ 　　颜色:# 2 b542c; 　　} 　　# coSpan { 　　颜色:浅紫红; 　　} 　　# coStrong { 　　颜色:blueviolet; 　　} 　　#科林{ 　　颜色:一个; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=癱oDiv"祝辞 　　& lt; p id=癱oP"祝辞 　　我是一名前端爱好者1 　　& lt;/p> 　　我是一名前端爱好者2 　　& lt;/div> 　　 　　& lt;跨度id=癱oSpan"祝辞 　　我是一名前端爱好者3 　　& lt;强烈的id=癱oStrong"在我是一名前端爱好者4 & lt;/strong> 　　& lt;/span> 　　 　　& lt;输入类型=皌ext"id=癱olIn"/比; 　　& lt;/body> 　　& lt;/html>

2, text-align

作用:指定元素文本的水平对齐方式

说明:只在块级元素中使用生效,直接用在内联元素上不生效。如果使用该属性,在块元素中包含的文本,内联元素将会对齐,其内的块元素默认不设置此属性的话也会对齐,是因为子块元素继承父块元素的text-align的属性

示例:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"/比; 　　& lt; title> CSS3字体之属性& lt;/title> 　　 　　& lt;风格类型=拔谋?css"比; 　　div { 　　边界:1 px固体; 　　宽度:1200 px; 　　身高:150 px; 　　} 　　 　　# showdiv1 { 　　text-align:左; 　　} 　　 　　# showdiv2 { 　　text-align:中心; 　　} 　　 　　# showdiv3 { 　　text-align:正确; 　　} 　　 　　# showdiv4 { 　　text-align:证明; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; div id=皊howdiv1"祝辞 　　大家好 　　& lt;/div> 　　 　　& lt; div id=皊howdiv2"祝辞 　　大家好 　　& lt;/div> 　　 　　& lt; div id=皊howdiv3"祝辞 　　大家好 　　& lt;/div> 　　 　　& lt; div id=皊howdiv4"祝辞 　　在某种意义上我们# 39;已经来我们国家# 39;资本兑现一张支票。当我们的共和国的建筑师写壮丽的宪法和独立宣言,他们签署一个期票,每个美国人的继承人。这个注意是一个承诺,所有的男人,是的,黑人和白人一样,将保证“不可剥夺的Rights"的“生命、自由和追求幸福的权利!”很明显,今天美国违约> & lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title> CSS3之文本属性& lt;/title> 　　 　　& lt;风格类型=拔谋?css"比; 　　# lsSpan1 { 　　字母间距:正常; 　　} 　　 　　# lsSpan2 { 　　字母间距:10 px; 　　} 　　 　　# lsSpan3 { 　　字母间距:4 px; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt;跨度id=發sSpan1"祝辞你好World & lt; br> 　　& lt;跨度id=發sSpan2"祝辞你好World & lt; br> 　　& lt;跨度id=發sSpan3"祝辞你好World & lt; br> 　　& lt;/body> 　　& lt;/html>

4,行高:

作用:设置文本的行高

说明:不允许使用负值

示例:

& lt; !DOCTYPE html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title> CSS3之文本属性& lt;/title> 　　 　　& lt;风格类型=拔谋?css"比; 　　# lsSpan1 { 　　行高:16 px; 　　边界:1 px固体; 　　} 　　 　　# lsSpan2 { 　　行高:2 em; 　　边界:1 px固体; 　　} 　　& lt;/style> 　　& lt;/head> 　　& lt; body> 　　& lt; p id=發sSpan1"祝辞你好World

& lt; br> 　　& lt; p id=發sSpan2"祝辞你好World

& lt; br> 　　& lt;/body> 　　& lt;/html>

5,文字修饰

作用:规定添加到文本的修饰,下划线,上划的线,删除线等

说明:该属性有以下三种简写text-decoration-line, text-decoration-color, text-decoration-style

css3中文字属性的使用示例