领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

「测试开发全栈-HTML」(14)css字体文本装饰

nixiaole 2024-11-09 14:23:42 知识剖析 18 ℃

今天说下CSS字体装饰文本text-decoration, 该属性规定添加到文本的修饰，可以给文本添加下划线、删除线和上划线等。

具体的语法规则为:

div {

text-decoration:underline;

}

共有四种属性:

none 默认值 没有装饰线(最常用)

underline 下划线 链接a自带下划线(常用)

overline上划线 (基本不用)

line-through 删除线(不常用)


看下效果展示:

下划线展示如上，对应的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/*下划线展示*/

div {

text-decoration: underline;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>


接着是上划线展示:

用的不多，对应的代码如下:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/*上划线展示*/

div {

text-decoration: overline;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>


当下划线为none时，即不展示下划线。

如果想让带下划线的链接能跳转但是不展示下划线，应该怎么处理呢？

来看看效果:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/*不展示下划线*/

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

<a href="#">人保好，还是平安好呢？一个是央企，一个是巨头</a>

</body>

</html>


需要将第二行的下划线效果去掉，我们看下效果:

下划线不展示了，但是可以跳转，看下对应代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/*不展示下划线*/

a {

text-decoration: none;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

<a href="#">人保好，还是平安好呢？一个是央企，一个是巨头</a>

</body>

</html>

最后再试下删除线，来看下效果:

看下对应的代码:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<style>

/*删除线*/

div {

text-decoration: line-through;

}

</style>

</head>

<body>

<div>人保好，还是平安好呢？一个是央企，一个是巨头</div>

</body>

</html>


四种属性都已经展示了，今天就到这里了，大家晚安~

Tags：

猜你喜欢

最近发表
标签列表