前端学习-CSS3学习第一步

最新推荐文章于 2024-07-30 16:49:30 发布

文艺青年o好像不是我

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量147

点赞数

分类专栏：前端学习文章标签：前端 web css css3 sass

本文链接：https://blog.csdn.net/u013255127/article/details/102453493

版权

前端学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS3学习第一步

CSS引用

一般来说,使用link来引用css样式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3学习第一步</title>
    <link rel="stylesheet" href="./css/a.css" type="text/css">
</head>
<body>
    <h1>CSS3学习第一步</h1>
</body>
</html>

a.css

body{
    background: red;
}

在这里插入图片描述
也可以使用内联样式和行内样式,不过不推荐使用:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3学习第一步</title>
    <link rel="stylesheet" href="./css/a.css" type="text/css">
    <style>
        h1 {
            color: blue;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 10px">CSS3学习第一步</h1>
</body>
</html>

在这里插入图片描述
内样样式和行内样式会使用html的代码变得臃肿,后期维护变得困难.

@import

当有多个样式有关联时,可以使用@import进行样式的导入:

@import url(./a1.css);

body{
    background: red;
}

a1.css

h1 {
    color: blue;
    font-size: 10px;
}

在这里插入图片描述

vscode添加sass

下载easy sass插件,新建a2.scss,然后保存:

h1 {
    color: white;
    font-size: 10px;
}

在这里插入图片描述

这里生成了两个文件a2.css,a2.min.css:

h1 {
  color: white;
  font-size: 10px;
}

h1{color:white;font-size:10px}

可以看到,a2.min.css里面讲所用的空格和换行都去掉了.这是因为,在加载css时候,css里面的空格也会因为加载时的带宽.weebpack,gulp也是这里操作的.

vscode同步浏览器刷新

下载live server插件,然后在右键菜单中选择open with live server这个相当于在vscode中开了一个小服务器,在保存的时候直接刷新,可以看到浏览器中新窗口中地址为127.0.0.1:5000.这样就不用每次保存再去刷新网页.
在这里插入图片描述

文艺青年o好像不是我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-CSS3学习第一步

CSS3学习第一步CSS引用一般来说,使用link来引用css样式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
复制链接

扫一扫

专栏目录