首页 > Web开发 > 详细

CSS学习 快速入门

时间:2021-05-05 17:23:52      阅读:13      评论:0      收藏:0      [点我收藏+]

简单例子

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

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

CSS学习 快速入门

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!