网页设计设置文本属性,网页设计怎么添加文字样式

首页 > 实用技巧 > 作者:YD1662024-01-07 04:46:56

CSS文本属性

css text(文本)属性就是设置文本的外观,比如字体颜色对齐方式缩进行间距等。

属性名:color。

属性值

颜色英文单词:color:red;

16进制颜色值:color:#000000;

RGB代码:color: rgb(255,255,255)或rgb(100%,0%,0%)

一般在开发中常用的是十六进制写法。

代码示例:

<head> <style> /* 文本颜色属性 */ .red { color: red; } .colorNum { color: #f00; } .colorRgb{ color: rgb(255, 0, 0); } </style> </head> <body> <!-- 文本颜色属性 --> <p class="red">我是文本属性的单词颜色设置</p> <p class="colorNum">我是文本属性的16进制颜色设置</p> <p class="colorRgb">我说文本属性的rgb颜色设置</p> </body>

网页设计设置文本属性,网页设计怎么添加文字样式(1)

代码运行界面

属性名:text-align。

属性值

“text-align: left”:默认值,文本左对齐。

“text-align:center”:文本居中对齐。

“text-align:right”:文本右对齐。

代码示例:

<head> <style> /* 文本对齐方式 */ .l { text-align: left; } .cen { text-align: center; } .ri { text-align: right; } </style> </head> <body> <!-- 文本对齐方式 --> <p class="l">文本左对齐</p> <p class="cen">文本居中对齐</p> <p class="ri">文本右对齐</p> </body>

运行界面:

网页设计设置文本属性,网页设计怎么添加文字样式(2)

属性:text-decoration。

属性值

“text-decoration:none”:默认值,没有装饰线。

“text-decoration:underline”:给文本添加下划线。

注意:a标签中自带下划线,可以使用默认值属性去除a标签的下划线。

“text-decoration:overline”:给文本添加上划线。

“text-decoration:line-through”:给文本添加删除线。

代码示例:

<head> <style> /* 文本装饰线 */ .nor { text-decoration: none; } .underl { text-decoration: underline; } .upl { text-decoration: overline; } .lineTh { text-decoration: line-through; } </style> </head> <body> <!-- 文本装饰 --> <p class="nor">文本装饰线:默认状态</p> <p class="underl">文本装饰线:文本添加下划线</p> <p class="lineTh">文本装饰线:文本添加删除线</p> <p class="upl">文本装饰线:文本添加上划线</p> <a href="#">我是超链接标签,文本自带下划线</a><br> <a href="#" class="nor">我是超链接标签,文本自带下划线。使用默认值属性,可去除文本下划线</a> </body>

运行界面:

网页设计设置文本属性,网页设计怎么添加文字样式(3)

属性名:text-indent。通常指段落首行缩进。

属性值:px或em。

em是一个相对单位,

如果当前元素已经设置文字大小,就按照当前元素1个文字的大小显示缩进。

如果当前元素中没有设置,则按照父元素的1个文字大小,即1个em=16px显示缩进。

代码示例:

<head> <style> /* 文本缩进 */ .indEm { text-indent: 2em; /* em是一个相对单位, 在没有设置文字大小时,按照默认字体大小,即16px显示。 设置了文字大小,则按照设置的文字大小,几个em就是几个文字大小进行显示。 */ } .indPx { /* 像素是绝对单位,设置几就是几 */ text-indent: 32px; } </style> </head> <body> <!-- 文本缩进 --> <p class="indPx">我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 </p> <p class="indEm">我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 我是段落标签,试试首行缩进属性。一般指的是首行缩进,段落的第一行进行缩进。 </p> </body>

运行界面:

网页设计设置文本属性,网页设计怎么添加文字样式(4)

首页 12下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.