关于CSS的那些事儿

最新推荐文章于 2022-04-23 18:00:27 发布

原创最新推荐文章于 2022-04-23 18:00:27 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

笔记专栏收录该内容

99 篇文章

订阅专栏

1. 什么是CSS

CSS，全称是Cascading Style Sheet 层叠样式表
Word文档多个样式层层叠加，相互之间共同修饰一个文本...这里就是一个层叠样式

CSS里面也是使用各种样式，各种修饰完成对于HTML页面的美化过程。

2.CSS的功能是什么

1. 美化HTML
2. 提高代码的复用性，提高开发效率
3. HTML和CSS样式分离，后期好维护
4. HTML和CSS样式分离，还能降低公司成本，带宽成本

3.CSS的三种引用方式

内联

外联

行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
     内联样式
     head标签内定义一个style标签，在style标签内都是CSS样式
     -->
    <style>
        /*
        .cls选择器 修饰HTML标签属性class为cls的标签
        大括号内是CSS样式
        */
        .cls {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <!--
    外联样式
        使用link标签连接外联样式表
        rel 声明连接的类型
        type text/css 可视化的CSS样式
        href 表示CSS样式的地址，该地址可以是一个网络地址
    -->
    <link rel="stylesheet" type="text/css" href="./css/03-CSS三种引入方式.css">
</head>
<body>
<!--
行内样式表
HTML标签的Style属性
    CSS样式是一个键值对形式 width:200px;
        属性名:属性值;
-->
<div style="width: 200px; height: 200px; background-color: blue;"></div>
<div class="cls"></div>
<div id="id1"></div>
</body>
</html>

/* 外联样式表，这里使用的ID选择器 */
#id1 {
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}

三种引入方式对比
1. 行内样式表权重最高
2. 外联样式表墙裂推荐，这里可以节约资源，同时提高复用度