本文已参与「新人创作礼」活动，一起开启掘金创作之路。

写Web课设时总结的知识点

关于CSS样式

1.html怎么设置下划线

1、使用HTML 标签添加下划线

在HTML中可以使用标签定义下划线文本，即为文本添加下划线。【推荐：html文档】

下划线标签告诉浏览器把加入到u标签的文本加下划线样式呈现显示给浏览者。对于所有浏览器来说，这意味着要把这段文字加下划线样式方式呈现给大家显示。

语法：

<u>我被加下划线了</u>

说明：标签定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>html下划线标签实例</title>
    </head>

    <body>
        测试文本！<u>加了下划线的文本</u> ！
    </body>
</html>

效果图：

1.jpg-600

2、使用CSS text-decoration属性或者border-bottom属性添加下划线

方法1：使用text-decoration:underline;添加下划线

CSS的text-decoration属性用于指定添加到文本的修饰，其underline属性值可以定义文本下的一条线。【相关推荐：css在线手册】

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 文字下划线样式</title>
        <style>
            .demo span{
                text-decoration:underline;
            }
        </style>
    </head>
    <body>
        <p class="demo">这是一段测试文字，<span>加了下划线的文本</span>！</p>
    </body>
</html>

效果图：

2.jpg-600

方法2：使用border-bottom属性添加下划线

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

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 文字下划线样式</title>
        <style>
            .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;
            }
        </style>
    </head>
    <body>
        <div class="demo">
            <p class="demo1">这是第1段测试文字，<span>加了下划线的文本</span>！</p>
            <p class="demo2">这是第2段测试文字，<span>加了下划线的文本</span>！</p>
            <p class="demo3">这是第3段测试文字，<span>加了下划线的文本</span>！</p>
            <p class="demo4">这是第4段测试文字，<span>加了下划线的文本</span>！</p>
            <p class="demo5">这是第5段测试文字，<span>加了下划线的文本</span>！</p>
        </div>
    </body>
</html>

效果图：

3.jpg-600

使用“text-decoration”CSS样式属性，使用标签不再是强调文本的正确方法。而是使用“text-decoration”CSS属性，语法为：这将加下划线。
如果要为某段文本加下划线，请使用标签，将开始标签与“text-decoration”属性一起放在要开始下划线的位置。将结束放置在您想要停止的位置。
在页面的<style>部分声明HTML元素。您也可以在CSS样式表上执行此操作，首先通过将HTML元素声明为样式，可以使下划线过程更容易。
考虑其他突出文本的方法。应避免使用下划线以避免混淆读者。一种流行的方法是使用标记，它将文本设为斜体。您可以使用CSS进一步定义此标记以获得独特的重点。

这么多的方法中，个人认为正常的方式是利用text-decoration这个属性将标签的内容进行改变从而实现下划线的设置。或者可以对div等块级元素进行border的选择。