CSS 概述_hehe.employment.over.8.2

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

哈喽天空

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

阅读量123

点赞数

分类专栏： # 03.间接 over 文章标签： css html

Be an ambitious young man .

本文链接：https://blog.csdn.net/qq_44686266/article/details/113584448

版权

03.间接 over 专栏收录该内容

138 篇文章 0 订阅

订阅专栏

8.5 CSS_概述

CSS：页面美化和布局控制
概念： Cascading Style Sheets 层叠样式表
- 层叠： 多个样式可以作用在同一个html的元素上，同时生效。
好处：
- 功能强大；
- 将内容展示和样式控制分离：
  - 降低耦合度。解耦；
  - 让分工协作更容易；
  - 提高开发效率。

8.6 CSS与HTML结合的方式

内联样式
- 在标签内使用style属性指定css代码。
- 示例：

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

内部样式
- 在head标签内，定义style标签，style标签的标签体内容就是css代码。
- 示例：

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

外部样式
- 1.定义css资源文件；
- 2.在head标签内，定义link标签，引入外部的资源文件。
- 示例：

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

    <!--<style>-->
        <!--@import "css/w.css";-->
    <!--</style>-->
    
</head>
<body>
    <div>hello</div>
</body>
</html>

notes：
- 内联样式、内部样式、外部样式， css作用范围越来越大；
- 内联样式不常用，后期常用内部样式、外部样式；
- 外部样式可以写为：

				<style>
			        @import "css/w.css";
			    </style>

哈喽天空

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录