css选择器下划线设置,css中怎么设置字体下划线

css中设置字体下划线的方法：1、使用“text-decoration:underline;”设置下划线样式；2、通过“border-bottom”属性设置下划线样式。

本教程操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

在CSS中可以使用text-decoration属性或border-bottom属性来给字体设置下划线样式。

1、使用text-decoration:underline;设置下划线样式

CSS的text-decoration属性用于指定添加到文本的修饰，其underline属性值可以定义文本下的一条线。

语法：text-decoration:underline;

代码示例：

css 文字下划线样式

.demo span{

text-decoration:underline;

}

这是一段测试文字，php中文网！

css text-decoration属性添加的下划线是最简单样式，而且没有办法设置什么比较特别的样式，比如把下划线设置成虚点状的。下面我们看看另一种添加下划线的方法，可以设置不同的下划线样式。

【推荐：《css视频教程》】

2、使用border-bottom属性设置下划线样式

CSS的border-bottom属性可以设置元素下边框样式，这样就可以在文字下添加一条线。

语法：border-bottom: width style color;

参数：

width：规定下边框的宽度。

style：规定下边框的样式。

color：规定下边框的颜色。

说明：border-bottom属性可以通过控制线的粗细、颜色、样式来实现不同的文字下划线样式。

代码示例：

css 文字下划线样式

.demo{

width: 400px;

height: 400px;

margin:100px auto;

}

.demo1 span{

border-bottom: 1px solid #000000;

}

.demo2 span{

border-bottom: 5px solid #0081EF;

}

.demo3 span{

border-bottom: 2px dashed #000000;

}

.demo4 span{

border-bottom: 2px dotted #000000;

}

.demo5 span{

border-bottom: 5px double #000000;

}

这是第1段测试文字，php中文网！

这是第2段测试文字，php中文网！

这是第3段测试文字，php中文网！

这是第4段测试文字，php中文网！

这是第5段测试文字，php中文网！

大家可以直接复制代码在本地测试！

css选择器下划线设置,css中怎么设置字体下划线相关推荐

html语言添加下划线,HTML页面中怎么文本添加下划线？
怎么在HTML页面中给文本添加下划线?下面本篇文章就来给大家介绍一下HTML.CSS给文本添加下划线的方法,希望对大家有所帮助. HTML添加下划线在HTML中可以使用标签定义下划线文本,即为文本添 ...
css选择器，什么是css选择器
CSS选择器 1.什么是选择器 CSS选择器是CSS规则的第一部分,每个CSS规则都以一个选择器或一组选择器为开始 CSS选择器即用于"查找"(或选取)要设置样式的 HTML 元素 ...
css选择器按功能分,CSS 选择器
概览在 CSS 中,选择器用于选择需要添加样式的元素. CSS 选择器非常丰富,现将 CSS 1 - 3 目前所有的选择器列举如下. 选择器例子例子描述 CSS版本 .class .intro ...
css选择器自定义属性_使用CSS选择器和自定义属性升级项目
css选择器自定义属性 This article was originally published by TestProject. Thank you for supporting the part ...
js找css选择器,Nightwatch.js通过CSS选择器查找的问题（最新版本）
我查看了this question与CSS选择器的问题.接受的答案是完全离开nightwatch.js.我希望这种情况不是这样,但有问题.Nightwatch.js通过CSS选择器查找的问题(最新版本 ...
css选择器是什么？css选择器有哪些类型？
css选择器在css的学习中无疑是十分重要的,所以,什么是css选择器?css选择器有哪些类型?这是我们必须要掌握的,本篇文章将给大家来介绍关于css选择器的基本定义,以及css选择器有哪些类型. 我 ...
java中utf-8怎么设置_eclipse中UTF-8设置
eclipse中UTF-8设置 1.windows->Preferences 打开"首选项"对话框: 2.然后,general->Workspace,右侧Text fi ...
linux socket默认超时时间设置,Socket中如何设置连接超时 (转)
Socket中如何设置连接超时 (转) Socket中如何设置连接超时 AntGhazi/2001.12.14 主页:antghazi.yeah 把CSDN与中文翻了底朝天,也没找到如何设置socke ...
html图片环绕怎么设置,word中如何设置让图片环绕文字的效果
word2007中怎么编辑图片?大家在使用word2007插入图片的时候有没有发现可以对图片进行很多种的修改,比如说将图片设置成围绕文字的效果,但是很多初学者相信应该还不知道怎么进行设置,下面小编就详 ...
android 横屏竖屏设置,Android中强制设置横屏与竖屏，与横竖屏生命周期的设置
许多小的知识点,是面试中经常会被提问到的,面试题也方式也会不一样,比如,让你在配置文件中设置Activity 为竖屏模式,答题方式是把相关的配置节点代码也给写出来,多少有点懵逼... 全屏在Acti ...

css选择器下划线设置,css中怎么设置字体下划线

css选择器下划线设置,css中怎么设置字体下划线相关推荐

最新文章

热门文章