📌  相关文章
📜  如何加载css(1)

📅  最后修改于: 2023-12-03 15:38:11.276000             🧑  作者: Mango

如何加载CSS

CSS（Cascading Style Sheets）是用来设计和美化网页的一种样式表语言。本文介绍如何在网页中加载CSS。

内部样式表

内部样式表是把CSS代码放在网页的头部，以标记结束。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <style>
        body {
            background-color: lightblue;
        }
        h1 {
            color: navy;
            margin-left: 20px;
        }
    </style>
</head>
<body>
    <h1>Welcome to my page</h1>
    <p>This is my first paragraph.</p>
</body>
</html>
外部样式表

外部样式表是把CSS代码放在一个单独的CSS文件中，以标记引入。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1>Welcome to my page</h1>
    <p>This is my first paragraph.</p>
</body>
</html>

其中，mystyle.css是一个样式规则文件，它的内容如下：

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}
内联样式

内联样式是把CSS代码直接放在HTML标签上，用style属性来定义。

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <h1 style="color:navy;margin-left:20px;">Welcome to my page</h1>
    <p style="background-color:lightblue;">This is my first paragraph.</p>
</body>
</html>
总结

对于小型网站或网页，可以使用内部或内联样式表，对于大型网站或网页，最好使用外部样式表，从而提高网站的可维护性和灵活性。

以上是如何加载CSS的方法介绍。感谢阅读！