ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS学习 快速入门

2021-05-05 15:32:14  阅读:28  来源: 互联网

标签:入门 Title color h1 标题 学习 css 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>

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

标签:入门,Title,color,h1,标题,学习,css,CSS
来源: https://www.cnblogs.com/OfflineBoy/p/14731834.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有