文本样式的使用 |
您所在的位置:网站首页 › 文本标记的样式以及区别是什么呢 › 文本样式的使用 |
这一节我们分享关于文本样式的内容。
字体样式和文本样式为什么要区分呢?字体样式主要涉及字体本身,而文本样式主要涉及多文字的排版效果,即整个段落文字的排版效果。因此,使用text前缀来区分。
CSS文本属性属性说明text-decoration下划线、删除线、顶划线text-transform文本大小写font-variant将英文文本转换为小型大写字母text-indent段落首行缩进text-align文本水平对齐方式line-height行高letter-spacing字距word-spacing词距
text-decoration划线属性:
在CSS中,使用text-decoration属性来定义段落文本的下划线、删除线和顶划线。
语法: text-decoration:属性值; text-decoration属性取值属性值说明none默认值,去掉划线样式underline下划线line-through删除线overline顶划线
示例代码:
划线属性 #p1 { text-decoration:underline;} #p2 { text-decoration:line-through;} #p3 { text-decoration:overline;} 我是下划线 我是删除线我是顶划线
在HTML学习中,我们知道了用是删除线,是下划线。现在学习css样式代码后,这些效果以后都使用text-decoration属性定义。
在学习css后,让HTML中的s标签和u标签就尘封吧。
text-decoration的none属性有一个很重要的使用方法,就是可以消除链接的下划线的。
示例代码:
none #link2 { text-decoration:none;}有下划线链接 无下划线链接
在实际开发中,大多数网站都会把链接的下划线给去除的,因为带下划线的链接实在是太丑了。这个小技巧请大家要记住的。
它们的用途:
下划线,一般用于文章的重点说明部分; 删除线,一般用于在电商网站中,对价格部分进行标记促销的; 顶划线,这个一般用不到;
text-transform文本大小写:
在css中,我们可以使用text-transform属性对文本的大小写进行变换,当然这个主要是针对的英文而言,中文字体不存在这个大小写的区分。
语法:
text-transform:属性值; text-transform属性属性值说明none默认值,无转换发生uppercase大写lowercase小写capitalize每个英文单词首字母大写,其余无转换发生
示例代码:
文本大小写 #p1 {text-transform:uppercase;} #p2 {text-transform:lowercase;} #p3 {text-transform:capitalize;} 大写:i love china.you love china. 小写:i love china.you love china. 首字母:i love china.you love china.
下节我们接着分享文本样式的内容。
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |