css下划线 浅谈css自定义下划线

使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现？我们知道css字体下划线使用text-decoration样式实现，而虚线下划线则不能使用此css样式属性。要实现通过下边框border-bottom实现虚线边框来制作出虚线下划线效果。那么一起来了解一下。

css下划线——浅谈css自定义下划线

自定义下划线。使用:after，首先添加一个空的内容，为了让它排列到标题的下面，需要将其变成块级元素，用border-bottom设置下划线，可设置其颜色、粗细，下划线的长度通过设置空内容的width属性来实现，还可以通过margin-top调整下划线与文字的距离。

css语言特点

css为html标记语言提供了一种样式描述，定义了其中元素的显示方式。css在web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。

总体来说，css具有以下特点：

丰富的样式定义

css提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

易于使用和修改

css可以将样式定义在html元素的style属性中，也可以将其定义在html文档的header部分，也可以将样式声明在一个专门的css文件中，以供html页面引用。总之，css样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的html标签中，也可以将一个css样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

css的多页面应用

css样式表可以单独存放在一个css文件中，这样我们就可以在多个页面中使用同一个css样式表。css样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

层叠

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套css样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

页面压缩

在使用html定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的html标签，从而使页面文件的大小增加。而将样式的声明单独放到css样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，css样式表的复用更大程序的缩减了页面的体积，减少的时间。

对字体文字实现虚线的下划线样式布局不是采用常规下划线属性text-decoration实现，而是通过边框border样式的下边框border-bottom的虚线边框样式来实现。如果大家还想了解更多与之有关的信息，欢迎关注我们文军营销的官网。

推荐阅读