前端学习详细知识点讲解-CSS(第一天)

最新推荐文章于 2025-05-10 21:09:53 发布

华丽的臻丶

最新推荐文章于 2025-05-10 21:09:53 发布

阅读量126

点赞数 2

分类专栏： css讲解文章标签： css

本文链接：https://blog.youkuaiyun.com/hualidezhen/article/details/115519496

版权

css讲解专栏收录该内容

7 篇文章

订阅专栏

CSS的声明，原理及使用

1.css的使用

层叠样式表，将html文件的内容以更优雅的方式呈现给用户，
{
    属性：值
}

2.css声明

选择器 {
    属性名1：属性值；
    属性名2：属性值；
}

3.代码的可读性{规范}（css的语法）

1.缩进，空白
2.添加注释
3.速写
    margin-top:10px;
    margin-left:20px;
    margin-bottom:30px;
    margin-right:40px;

    -margin: 10px 40px 30px 20px;

4.原理

1.加载html文件
2.解析html文件里面的内容
3.解析html的同时加载css文件
4.创建dom树
5.将页面呈现出来

5.如何在html中使用css （参考下面的1-css.html）

对于内部的css，只需要在head标签里面加入style标签，在里面加入css样式即可。
也可以使用内部样式表/行内样式表，在标签的里面通过style属性引入css样式

对于外部的css，先创建一个外部css文件，在里面写入css的样式，然后在html文件里面
引入css的文件一般有两种常用方法：
	第一种内部样式表引入通过@import引入
	第二种外部样式表通过link标签引入

6.@import和link的异同（面试题）

相同：都可以导入外部的css样式表

不同：
    1.所属范围
        @import是css的语法
        link是html文件中的标签
    2.加载顺序
        link导入的css是在解析html文件的同时解析
        @import导入的css只有在html文件解析完成之后才加载
    3.兼容性
        link不存在兼容性问题
        @import是css的语法，所有会存在兼容性问题

1-css.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css的使用方式</title>
    <!-- 方式二：外部样式表 -->
    <link rel="stylesheet" href="./1-out.css">
</head>
<!-- 方式一：内部样式表 -->
    <style>
        /* @import './1-out.css'; */
        div {
            color: blue;
        }
    </style>
<body>
    <!-- 方式三：内联样式表\行内样式表 -->
    <div style="font-size: 30px;">css的第一天</div>
    
</body>
</html>