HTML CSS

更新时间：2021-11-12 14:34
CSS设置HTML样式
CSS可以通过3种方式添加到HTML元素：
  • 内联 - 通过在HTML元素中使用style属性
  • 内部 - 通过使用<style>元素在<head>元素内定义
  • 外部 - 使用外部CSS文件
内联CSS

内联CSS用于将单一样式应用于单个HTML元素。 内联CSS使用HTML元素的style属性。 此示例将<h1>元素的文本颜色设置为蓝色：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>95知识库（995w.com）</title>
</head>
<body>
<h1 style="color:blue;">欢迎来到95知识库</h1>
</body>
</html>

尝试一下>>

内部CSS

内部CSS用于为单个HTML页面定义样式。 内部CSS在HTML页面的<head>元素中一个<style>元素中定义：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>95知识库（995w.com）</title>
    <style>
        body {background-color: powderblue;}
        h1   {color: blue;}
        p    {color: red;}
    </style>
</head>
<body>
<h1>PHP是世界上最好的语言！</h1>
<p>Java表示不服！</p>
</body>
</html>

尝试一下>>

外部CSS

外部样式表用于定义许多HTML页面的样式。 使用外部样式表，您可以通过更改一个文件来更改整个网站的外观！ 要使用外部CSS，请在HTML页面的<head>部分中添加指向它的链接：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>95知识库（995w.com）</title>
    <link rel="stylesheet" href="http://www.995w.com/css/site.css">
</head>
<body>
<h1 class="lqwvjeButton">欢迎来到95知识库（995w.com）！</h1>
<p>Java比C++如何？</p>
</body>
</html>

尝试一下>>

注意：外部css可以用绝对路径，也可以用相当路径（相对当前html文档的路径）。

相对路径：

1
<link rel="stylesheet" href="/css/styles.css">

绝对路径：

1
<link rel="stylesheet" href="http://www.995w.com/css/styles.css">

更多关于CSS的教程请访问CSS教程