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

html-css07

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

一般有两种方法：

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

实例演示如下：

1、实例代码如下：

此时页面效果如下：

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

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

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

实例演示如下：

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

此时页面效果如下：

用text-decoration设置

值  描述

none    默认。定义标准的文本。  

underline    定义文本下的一条线。  

overline    定义文本上的一条线。  

line-through    定义穿过文本下的一条线。  

blink    定义闪烁的文本。  

inherit    规定应该从父元素继承 text-decoration 属性的值。 

实例

设置 h1、h2、h3、h4 元素的文本修饰：

h1 {text-decoration:overline}

h2 {text-decoration:line-through}

h3 {text-decoration:underline}

h4 {text-decoration:blink}

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

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

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

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