HTML和CSS基础-CSS添加到HTML的基本方式

时间：2025-03-25 09:31:50

1.内联（lnline）：在HTML元素中使用样式属性

<!-- lnline(内联)css样式应用到一个元素上 -->
    <h1 style="color: red;">红色标题</h1>
    <p style="color: brown;">棕色的段落</p>

2.内部（lnternal）：在<head>部分使用<style>元素，用于定义HTML页面风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        /* lnternal(内部)CSS */
        body{background-color: blue;}
        h1{color: rgb(81, 203, 0);}
        p{color: brown;}
        #p01{color:yellow}
        p.error{color: aqua;}
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>段落内容</p>
</body>
</html>

3.外部（External）：使用外部CSS文件，可以用来定义多个HTML页面风格
使用外部样式表，是在HTML页面的<head>部分添加一个css链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="t01.css">
</head>
<body>
    <h1>标题</h1>
    <p>段落内容</p>
</body>
</html>

外部样式表可以使用任何文本编辑器编写。文件不能包含任何HTML代码，必须保存为一个以 .css 为扩展名的文件。样式如下：

body{
    background-color: blanchedalmond;
}
h1{
    color: blue;
}
p{
    color: red;
}

相关文章