CSS学习 快速入门

简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范 <style>可以编写CSS代码-->
    <!--在这h1是一个选择器 选择了html的h1标签并进行一定的设置-->
    <style>
        h1{
            color: brown;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

效果:

将css 放在其他文件符合规范

创建一个css文件

h1{
    color: brown;
}


在html通过link标签引用css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

其他的导入方式

CSS的使用原则是就近原则
1.在标签内部直接使用(不推荐)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 style="color: aquamarine">我是标题</h1>
</body>
</html>

2.使用import

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/style.css";
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

使用这种方式是先加载网页后渲染

posted @ 2021-05-05 15:23  一个经常掉线的人  阅读(69)  评论(0)    收藏  举报