CSS概述和入门

最新推荐文章于 2023-06-20 21:27:08 发布

稻田里展望者

最新推荐文章于 2023-06-20 21:27:08 发布

阅读量48

点赞数

分类专栏： Web前端技术文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_46441425/article/details/122868811

版权

Web前端技术专栏收录该内容

86 篇文章 3 订阅

订阅专栏

css
概念：层叠样式表
作用：页面美化和布局控制
层叠：多个样式可以在一个html的元素上，同时生效

好处
1、功能强大

2、将内容展示和样式控制分离
降低耦合度。解耦
让分工协作更容易
提高开发效率

CSS的使用：CSS 与 Html 的结合
1、内联样式
在标签内使用style属性指定css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
    <!-- 内联样式 -->
    <div style="color: red;">hello css</div>
</body>
</html>

2、内部样式
在head标签内定义style标签，style标签的标签体内容就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <!-- 内部样式 -->
    <div>hello css</div>
</body>
</html>

3、外部样式
1、定义CSS的资源文件

div{
    color: green;
}

2、在head标签内，定义link标签，来引入外部的资源文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link rel="stylesheet" href="./a.css">
</head>
<body>
    <div>hello css</div>
</body>
</html>