文本样式的使用

您所在的位置:网站首页 文本标记的样式以及区别是什么呢 文本样式的使用

文本样式的使用

2024-06-22 19:10| 来源: 网络整理| 查看: 265

这一节我们分享关于文本样式的内容。

 

字体样式和文本样式为什么要区分呢?字体样式主要涉及字体本身,而文本样式主要涉及多文字的排版效果,即整个段落文字的排版效果。因此,使用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