怎样用CSS样式在文字下面加下划线

html-css09

怎样用CSS样式在文字下面加下划线,第1张

一般有两种方法:

一、通过CSS下划线代码:text-decoration:underline来设置文字下划线。

实例演示如下:

1、实例代码如下:

此时页面效果如下:

2、修改第1步中的txt样式,加入text-decoration:underline。

此时页面效果如下,出现了下划线。

二、通过设置div的border实现效果:

实例演示如下:

在第一种方法的初始代码上,增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式,如下:

此时页面效果如下:

1、打开html开发工具并创建一个html文件。

2、在html页面上找到<body>标记,键入<body>标记,并用<a>标记覆盖内容。

3、修改<a>标签的内容,将颜色设置为蓝色。

4、将鼠标设置为在<a>标签上滑动,字体下方将变为红色下划线:a:hover {color:red}。

css去掉下划线只要我们把text-decoration属性改成none就可以了。

并不是很难,在HTML中,我们可以使用u标签来加下划线,但是在css中我们只能使用text-decoration属性,我们想把下划线设置成红色,只要我们保持和字体的颜色相同就可以了。在css中,我们可以使用text-decoration属性来表示下划线和删除线等样式,首先我们要了解一下text-decoration属性。

text-decoration属性一共有五个值,分别是none,blink,underline,line-through,overline,其中underline就表示下划线。语法如下:

div{text-decoration:none}表示:一般去掉下划线

div{text-decoration:underline}表示一般添加下划线样式

div{text-decoration:line-through}一般表示贯穿线

div{text-decoration:overline}设置上划线样式