如何在 HTML 中添加外部 CSS

17 Mar 2025 | 5 分钟阅读

在本文中，我们将讨论如何在 HTML 中添加外部 CSS。

HTML

HTML 是 超文本标记语言 (Hypertext Markup Language) 的缩写，用于提供网页的结构。

CSS

CSS 是 层叠样式表 (Cascading Style Sheet) 的缩写，用于为 HTML 元素提供样式，使其看起来更具吸引力，从而使网页引人注目。

在 HTML 中添加 CSS 有 3 种方法

外部 CSS
内部 CSS
内联 CSS

我们将逐一详细理解每种方法。

1. 外部 CSS

外部 CSS 用于为多个 HTML 页面提供样式，因为我们使用一个包含 CSS 的单独文件。这个单独的文件以 .css 扩展名 保存。这个文件可以添加到任何 HTML 文档中。如果样式发生变化，我们可以轻松更改样式，而无需更改 HTML 文档。

我们可以将 CSS 文件与 HTML 文档链接起来，以提供网页的样式。我们可以使用 “link” HTML 元素 来添加外部文件。<link> 标签 位于 <head> 标签 内。<link> 标签包含许多属性，例如 src、rel、type 等。“src” 属性 用于定义位置，因此我们将要添加的 CSS 文件名写在其中。

“rel” 属性 用于解释 CSS 文档和 HTML 文档之间的关系。“type” 属性 用于定义我们与 HTML 文档链接的内容。“type” 属性是可选的，但如果使用它，对于样式表，我们必须将其值设置为 text/CSS。

在 HTML 中添加外部 CSS 的演示

我们将构建单独的 HTML 和 CSS 文件，然后使用 <link> 标签链接这两个文件。

CSS 代码

* {
    margin: 5px;
    padding: 5px;
    background-color: bisque;	
    color: brown;
    box-sizing: border-box;
}
h3 {
    font-size: 40px;
}
label {
    display: block;
    font-size: 18px;
    font-weight: bold;
}
input {
    border-radius: 5px;
    border: 1px solid rgb(240, 156, 156);
    box-shadow: inset 0px 0px 15px brown;
    width: 350px;
    height: 36px;
}
#submit {
    width: 86px;
    font-weight: bold;
}

HTML 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Student Form</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Student Form</h3>
    <form>
        <label for="first_name">First Name:</label> 
        <input type="text" id="first_name" name="first_name"> <br>
        <label for="last_name">Last Name:</label> 
        <input type="text" id="last_name" name="last_name"> <br>
        <label for="email_id">Email ID:</label> 
        <input type="email" id="email_id" name="email_id"> <br>
        <label for="course">Course:</label> 
        <input type="text" id="course" name="course"> <br><br>
        <input type="submit" id="submit" value="Submit">
      </form> 
</body>
</html>

输出

当 CSS 文档未链接到 HTML 文档时，网页将如下所示。它非常简单，需要看起来更引人注目。

当 CSS 文档链接到 HTML 文档时，网页将如下所示。它现代且引人注目。

2. 内部 CSS

内部 CSS 写在 “style” HTML 元素 内部。我们需要应用于 HTML 文档的 CSS 写在 <style> 标签内部，并且 <style> 标签 写在 <head> 标签 内部的 <title> 标签 之后。

在 HTML 中添加内部 CSS 的演示

在此示例中，我们将 CSS 和 HTML 都写在同一个文档中。

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login Form</title>
        <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }
  
        body {
            background: Peru;
            font-family: 'Rubik', sans-serif;
        }
        
        .login-form {
            background: #fff;
            width: 500px;
            margin: 65px auto;
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                    flex-direction: column;
            border-radius: 4px;
            box-shadow: 0 2px 25px rgba(0, 0, 0, 0.2);
        }
        .login-form h1 {
            padding: 35px 35px 0 35px;
            font-weight: 300;
        }
        .login-form .content {
            padding: 35px;
            text-align: center;
        }
        .input-field {
            padding: 12px 5px;
        }
        input {
            font-size: 16px;
            display: block;
            font-family: 'Rubik', sans-serif;
            width: 100%;
            padding: 10px 1px;
            border: 0;
            border-bottom: 1px solid #747474;
            outline: none;
            -webkit-transition: all .2s;
            transition: all .2s;
        }
        input::placeholder {
            text-transform: uppercase;
        }
        input:focus {
            border-color: #222;
        }
        .link {
            text-decoration: none;
            color: #b38787;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            display: inline-block;
            margin-top: 10px;
        }
        .button{
            text-decoration: none;
            color: #5e0f0f;
            letter-spacing: 0.2px;
            text-transform: uppercase;
            display: inline-block;
            margin-top: 10px;
        }
</style>
</head>
<body>

<div class="login-form">
    <form>
        <h1>Login</h1>
        <div class="content">
            <div class="input-field">
                <input type="email" placeholder="Email" autocomplete="nope">
            </div>
        <div class="input-field">
            <input type="password" placeholder="Password" autocomplete="new-password"> <br> <br>    
            <button class="button" type="submit" form="login-form" value="Submit">Submit</button>
            <button class="button" type="button">Cancel</button>
        </div>
        <a href="#" class="link">Forgot Your Password?</a>
        </div>
    </form>
</div>
</html>

输出

下面是输出，其中我们可以看到登录表单，它使用内部 CSS 进行了样式设置。

3. 行内 CSS

当 CSS 写在每个需要应用样式的元素内部时，它被称为 行内 CSS。“style” 属性 用于添加样式。不建议使用它，因为它需要大量时间为每个 HTML 元素应用样式，并且之后很难更改任何元素的样式。

在 HTML 中添加行内 CSS 的演示

在此示例中，我们将构建一个列表框并添加行内 CSS。

代码

<!DOCTYPE html>    
<html> 
    <head>
        <title>List Box</title>  
    </head>   
<body style="background-color: rgb(249, 249, 145)">   
<h3 > FOOD : </h3>

<select name="Food" size="10" id="Food">  
<optgroup label="Pizza" style="background-color: rgb(249, 249, 145);">
    <option value="Corn Pizza">Corn Pizza</option>    
    <option value="Margherita Pizza">Margherita Pizza</option>
    <option value="Chilli Paneer Pizza">Chilli Paneer Pizza</option> 
    <option value="Paneer & Onion Pizza">Paneer & Onion Pizza</option>
    <option value="Cheesy Pizza">Cheesy Pizza</option>
    <option value="Capsicum Pizza">Capsicum Pizza</option> 
    <option value="Onion Pizza">Onion Pizza</option>  
    <option value="Paneer Pizza"> Paneer Pizza</option> 
</optgroup> 
<optgroup label="Burger" style="background-color: rgb(249, 249, 145);">
    <option value="Aloo Tikki Burger">Aloo Tikki Burger</option>
    <option value="Egg Burger">Egg Burger</option>
    <option value="Dosa Masala Burger">Dosa Masala Burger</option>
    <option value="Chicken Burger">Chicken Burger</option>
    <option value="Schezwan Veggie Burger">Schezwan Veggie Burger</option>  
    <option value="Aloo Cheese Burger">Aloo Cheese Burger</option>  
    <option value="Veggie Burger">Veggie Burger</option>
    <option value="Veg Chilli Burger">Veg Chilli Burger</option>
</optgroup>   
</select> <br> <br>
<input type="submit" value="submit" style="background-color: rgb(119, 241, 129); width: 75px; height: 36px; border-radius: 5px; font-weight: bold;">
</body>    
</html>

输出

在输出中，我们可以看到一个列表框，它使用行内 CSS 进行了样式设置。

结论

我们已经理解了 如何在 HTML 中添加外部 CSS。下面是一些需要记住的要点

1. 在 HTML 中添加 CSS 有三种方法

外部 CSS：它写在一个单独的文档中，扩展名为 .css。
内部 CSS：它写在 <head> 标签 下的 <style> 标签 内部。
行内 CSS：它写在每个需要使用 “style” 属性 进行样式设置的元素内部。

下一主题HTML 扩展

如何在 HTML 中添加外部 CSS

HTML

CSS

1. 外部 CSS

2. 内部 CSS

3. 行内 CSS

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

如何在 HTML 中添加外部 CSS

HTML

CSS

1. 外部 CSS

2. 内部 CSS

3. 行内 CSS

结论

相关帖子

HTML 创建器

如何将 Google 翻译按钮添加到您的网页

HTML 解码

HTML 表格标题背景颜色

HTML 字体大小

HTML 中的块级元素

HTML 中的图片文字

HTML 颜色

HTML 表格属性

Web 2.0

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器