文章目录
- 一. CSS概述
- 1. 来源
- 2. 发展
- 3. 使用CSS的好处
- 二. CSS定义
- 1. CSS层叠样式表（Cascading Style Sheet）
- 2. 定义CSS的基本语法
- 三. 在HTML文档中应用定义好的CSS
- 方式一：(内联样式，行内样式)
- 1. 定义：
- 2. 语法：
- 3. 缺点：
- 方式二：(内部样式表)
- 1. 定义：
- 2. 语法：
- 3. 优点：
- 4. 缺点：
- 方式三：(外部样式表)
- 1. 定义：
- 2. 语法
- 3. 样式表(stylesheet)特点：
- 方式四：导入式
- 1. 定义
- 2. 基本语法
- 四. Chrome调试工具
- 1. 使用调试工具
一. CSS概述
1. 来源
一开始W3C将许多的对网页表现形式的的标签，加入到HTML规范中，。大量的标签使得网页结构越来越复杂，极大的影响网页的维护以及浏览器的速度
之后W3C组织对web标准引入CSS规范，HTML标签用于确定网页的结构内容，CSS用于决定网页的表现形式
2. 发展
1996年 CSS1.0
1998年 CSS2.0
2004年 CSS2.1
2010年 CSS3.0
3. 使用CSS的好处
CSS以HTML语言为基础，提供丰富的格式设置，以及排版等格式设置内容
- 将格式和结构分离，利于网页维护
- 精准控制网页的布局
- 制作体积更小，下载更快的网页
CSS只是简单的文本，使用它可以减少表格标签、图像用量，其他HTML不需要的代码
- 实现多个网页同时刷新
让多个网页指向同一个CSS文件
二. CSS定义
网页分为三个部分
结构（HTML）
表现（CSS）
行为（JavaScript）
1. CSS层叠样式表（Cascading Style Sheet）
网页实际上是一个多层的结构，通过CSS可以为网页的每一层来设置样式
而最终我们能看到的只是网页的最上面一层
总之一句话，CSS用来设置网页中元素的样式
2. 定义CSS的基本语法
选择器{
属性1：属性值1；
属性2：属性值2；
....
}选择器：
指定对哪些网页元素进行样式设置，所有可标识一个网页元素的内容都可以作为选择器使用
比如
HTML元素标签、元素的类名、元素的ID名
分类：
CSS基本选择器
CSS复合选择器
属性值：
一般不需要加引号，如果属性值由若干个单词组成需要加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式</title>
<style>
/* 选择器 {样式}
给谁该样式 {改什么样式}
*/
p {
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<p>CSS样式</p>
</body>
</html>
三. 在HTML文档中应用定义好的CSS
CSS是用来格式化HTML页面对象的
使用CSS来修改元素的样式，必须先将HTML与CSS关联
以下有几种关联方式：
方式一：(内联样式，行内样式)
1. 定义：
- 在标签内部通过style属性来设置元素的样式
- 在标签的 style 属性上设置”key:value value;”，修改标签样式。
2. 语法：
<标签名 style="属性1：属性值1；属性2：属性值2；....">
3. 缺点：
- 使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素，必须在每一个元素中都复制一遍
- 并且当样式发生变化时，我们必须要一个一个的修改，非常不方便
- 如果标签多了。样式多了。代码量非常庞大。
- 可读性非常差。
- css 代码没什么复用性可方言。
注意：开发时绝对不要使用内联样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
</head>
<body>
<p style="color: red; font-size: 40px;">少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>
结论：不推荐使用，当再来一个p标签时，还需要再次设置style样式
方式二：(内部样式表)
1. 定义：
- 将样式编写到head中的style标签里
- 然后通过CSS的选择器来选中元素并为其设置各种样式
2. 语法：
<style type="text/css">
CSS样式定义格式如下：
xxx{
Key : value value;
}
</style>
3. 优点：
- 可以同时为多个标签设置样式，并且修改时只需修改一处即可
- 内部样式表更加方便对样式进行复用
4. 缺点：
- 我们的内部样式表只能对一个网页起作用，它里边的样式不能跨页面进行复用
- 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style>
p{
color:green;
font: 50px;
}
</style>
</head>
<body>
<p>少小离家老大回，乡音无改鬓毛衰</p>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>
方式三：(外部样式表)
1. 定义：
- 将CSS样式编写到一个外部的CSS文件中，然后在页面头部区域通过link标签来引入外部的CSS文件
2. 语法
<link rel="stylesheet" type="text/css" href="所引用的css文件名">
rel="stylesheet"用于定义链接的文件和HTML文档之间的关系
3. 样式表(stylesheet)特点：
- 外部样式表需要通过link标签来引入，意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同的页面之间进行复用
将样式编写到外部CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验
这种是最佳的实践方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>少小离家老大回，乡音无改鬓毛衰</p>
<p>落霞与孤鹜齐飞，秋水共长天一色</p>
</body>
</html>
p{
color:tomato;
font-size: 55px;
}
方式四：导入式
1. 定义
在多个页面重用CSS，除了使用链接方式外，还可以使用导入CSS文件的方式实现
导入CSS样式，通过在HTML页面头部区域使用style标签导入一个外部的CSS文件
2. 基本语法
<style type="text/css">
@import url("CSS样式文件名");
其他样式代码
</style>
四. Chrome调试工具
Chrome 浏览器提供了一个非常好用的调试工具，可以用来调试我们的 HTML 结构和 CSS 样式。
1. 使用调试工具
