212、CSS---基础介绍

最新推荐文章于 2024-06-11 11:55:45 发布

l0510402015

最新推荐文章于 2024-06-11 11:55:45 发布

阅读量117

点赞数

分类专栏： 04_html

本文链接：https://blog.csdn.net/l0510402015/article/details/104377149

版权

04_html 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、概念：Cascading Style sheets 层叠样式表
    * 层叠：多个样式可以作用在同一个html的元素上，同时生效
二、好处：
    1、功能强大
    2、将内容展示(html)和样式控制分离，降低了耦合度，让分工协作更容易，提高开发效率，可以一个做内容展示，另外一个人做样式控制。
三、CSS的三种使用方式
    1、内联方式：放在某个标签内部。只能作用域当前标签，一般不常用,格式举例如下：

<!--内联方式只能作用域单个的标签-->
    <div >你好，世界</div>
    <div style="color: red">你好，世界</div>

2、内部连接方式：放在html文档的head作用域内。只能能作用于当前html页面，较常用，格式举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: green;
        }
    </style>
</head>
<body>
<!--内联方式只能作用域单个的标签-->
    <div >你好，世界</div>
    <div style="color: red">你好，世界</div>

</body>
</html>

3、外联方式：将css样式放在一个css文档内，html需要用时引入该文档。可以用作任何html，较常用
（1）、定义CSS资源文件

DemoCSS.css文件内容如下，后缀名css可以不写，但是一般都写这个

div{
    color: blue;
}

（2）、在html文件的head标签内，定义link标签，引入外部的css资源文件。
（3）、 html文件内引入写法格式，卸载html的head作用域
* link写法


 <link rel="stylesheet" href="CSS/DemoCSS.css">

* import写法

<style>
        @import "CSS/DemoCSS.css";
</style>

注意：如果上面三种方式的几种同时起作用，对象最终样式使用离他最近的那个表达

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: green;
        }
    </style>
    <link rel="stylesheet" href="CSS/DemoCSS.css">
</head>
<body>
<!--内联方式只能作用域单个的标签-->
    <div >你好，世界</div>
    <div style="color: red">你好，世界</div>

</body>
</html>