《HTML+CSS+JavaScript》之第11章 CSS简介

11.1 CSS简介

11.1.1 CSS是什么

Cascading Style Sheet，层叠样式表，控制网页外观。

11.1.2 CSS和CSS3

CSS1.0、CSS2.0、CSS2.1、CSS3.0。
这里CSS指CSS2.1。

11.2 引入方式

11.2.1 外部样式表

HTML文件中使用link标签引用CSS文件。

link标签放在head标签内。

<link rel="stylesheet" type="text/css" href="css文件"/>
1

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10

11.2.2 内部样式表

CSS代码放在style标签内，style标签放在head标签内。

<style type="text/css">
	......
</style>
1
2
3

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <style type="text/css">
        div{color:red;}
    </style>
</head>
<body>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
    <div>绿叶，给你初恋般的感觉。</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

11.2.3 行内样式表

CSS在标签的style属性中定义。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
</head>
<body>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
    <div style="color:red;">绿叶，给你初恋般的感觉。</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

11.2.4 @import引入外部样式

与link类似。

@import先加载HTML后加载CSS，用户体验差。
link先加载CSS后加载HTML。

相关阅读:
快照隔离，与Percolatory分布式解决方案
2024全国青少年电子信息智能创新大赛（决赛)python ·模拟四卷解析
根据上下级关系统计数据
如何成为一个年薪188W的Java资深架构师成功的秘密，Java 面试题解析
超级账本Fabric的世界状态操作与账本操作
【机器学习】岭回归和LASSO回归详解以及相关计算实例-加利福尼亚的房价数据集、红酒数据集
flutter 运行ios模拟器报错
Jmeter 之 “查看结果树” 界面功能介绍
【刷题训练】牛客：JZ31 栈的压入、弹出序列
Go运算操作符全解与实战：编写更高效的代码！

原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125608784