《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。

相关阅读:
【PCB学习】几种接地符号
对比学习15篇顶会论文及代码合集，2023最新
前端解决跨域请求
【SQL引擎 - parse_type.cpp分析（二）】
Spring源码核心剖析
如何实现ElementUI动态表头？
jvm性能监控、故障处理命令行工具详解（jps、jstat、jinfo、jmap、jhat、jstack）（宝藏博文）
MySQL 视图View的SQL语法和更新（视图篇二）
Java--Spring应用在Web项目
深入理解Java异常处理机制（day20）

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