CSS的概念和基本用法

追寻梦想的蜗牛

于 2023-11-07 00:11:31 发布

阅读量613

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/lee514/article/details/134257373

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS的作用：

页面美化和布局控制。

1.概念：

Cascading Style Sheets 层叠样式表。

层叠：多个样式可以作用在同一个html的元素上，同时生效。

2.好处：

(1).功能强大

(2).将内容展示和样式控制分离

* 降低耦合度，解耦。

* 让分工协作更容易。

* 提高开发效率。

3.CSS的使用：CSS与html结合方式。

(1).内联样式

* 在标签内使用style属性指定css代码。

* 如：<div style="color:red;">hello css</div>

(2).内部样式

* 在head标签内，定义style标签，style标签的标签体内容就是css代码。

                * 如：
                        <style>
                                    div{
                                        color:blue;
                                        }

</style>

(3).外部样式

1).定义css资源文件。

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

* 如：

a.css文件：

                                div{
                                        color:green;
                                    }

在head标签内，用link引入外部资源文件

总结：

* (1),(2),(3)种方式 css作用范围越来越大。

第(1)种方式作用于单个标签。

第(2)种方式作用于单个页面。

第(3)种方式作用于多个页面，哪个页面引入样式，就会有相应的效果。

* 第(1)种方式不常用，后期常用方式(2)和(3).

* 第(3)种格式还可以写为：

示例：

第(1)种内联样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联样式</title>
</head>
<body>
<!--
内联样式
    * 在标签内使用style属性指定css代码
-->
    <div style="color:red;">hello css</div>

</body>
</html>

第(2)种内部样式：

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

    </style>
</head>
<body>
<!--
内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
    <div>hello css</div>
    <div>hello css</div>
</body>
</html>

第(3)种外部样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <!--第1种引入外部文件的方式-->
   <!-- <link rel="stylesheet" href="css/a.css">-->
    
    <!--第2种引入外部文件的方式-->
    <style>
        @import "css/a.css";
    </style>
</head>
<body>

<!--

外部样式
    1. 定义css资源文件。
    2. 在head标签内，定义link标签，引入外部的资源文件
-->
    <div>hello css</div>
    <div>hello css</div>
</body>
</html>