CSS学习 快速入门

时间:2021-05-05 17:23:52   收藏:0   阅读:11

简单例子

<!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>

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

原文:https://www.cnblogs.com/OfflineBoy/p/14731834.html

评论(0
© 2014 bubuko.com 版权所有 - 联系我们:wmxa8@hotmail.com
打开技术之扣,分享程序人生!