当前位置：首页 > news >正文

CSS的概念和基本用法

news 2025/8/26 3:08:48

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>

查看全文

http://www.lryc.cn/news/224555.html