引言
CSS：Cascading Style Sheets ( 层叠样式表 )
CSS 的作用
CSS 能够对网页中元素位置的排版进行像素级的精确控制，实现美化页面的效果，且能够做到页面的样式和结构分离。使用了CSS，就相当于女生化妆之后。
CSS 基础格式
选择器 { 属性：值; }
一、CSS 引入方式
1. 内部样式表
内部样式表是写在当前编辑的 html 中的 style 标签内，理论上来说 style 标签可以放到 html 的任意位置，但我们一般都是习惯放到 head 标签中。其中 p { } 表示选择器。
<!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>demo1</title> <style> p { /* 颜色为绿色 */ color: green; /* 字体大小 */ font-size: large; } </style> </head> <body> <p>welcome to the world </p> </body> </html>
注意注释的写法：
正确写法：/* */ 错误写法：// 另外，在 VS Code 中，可以使用 Ctrl + / 进行快速注释和快速反注释
展示结果：
2. 行内样式表
行内样式表是通过 style 属性，来直接指定某个标签的样式。
<body> <p style="color: red; font-size: larger;">welcome to the world </p> </body>
展示结果：
注意：行内样式表的优先级更高
<!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>demo1</title> <style> p { /* 颜色为绿色 */ color: green; /* 字体大小 */ font-size: large; } </style> </head> <body> <p style="color: red; font-size: larger;">welcome to the world </p> </body> </html>
注意：
由于行内样式表的优先级高于内部样式表，所以 style 属性会覆盖 p 选择器中的一些设置。
在我们使用 CSS 的时候，一个元素最终的样式，其实可以是 " 多方叠加 " 的效果，也就是说，一个元素的样式可以由很多地方同时设置，最终是一个叠加效果，但在这个过程中，有些设置的样式能够生效，有些可能不会生效，这取决与语法实现。
展示结果：
3. 外部样式
(1) 创建一个 css 文件，在 css 文件中，编辑样式。
(2) 在 html 文件中，使用 link 标签，并通过路径引入 css 文件。
css 文件
div { color: red; }
html 文件
<!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>demo2</title> <link rel="stylesheet" href="demo2.css"> </head> <body> <div>卡布达爱吃西瓜</div> </body> </html>
展示结果：
注意
使用外部样式的时候，可能在修改内容后，不会生效。造成这种情况的原因：受到浏览器缓存的影响。
关于缓存：
这是计算机中一种常见的提升性能的技术手段，网页依赖的资源 ( 图片/CSS/JS等 ) 通常是从服务器上获取的，而如果用户频繁访问该网站，那么这些外部资源就没必要反复从服务器获取。所以计算机就将缓存先存起来 ( 就是存在本地磁盘上了 )，从而提高访问效率。
在使用浏览器的时候，如果真的遇到修改内容不生效的这种情况，就可以通过 Ctrl + F5 强制刷新页面，即强制浏览器重新获取 css 文件。
二、CSS 代码风格
1. 展开
p { color: red; font-size: 30px; }
开发阶段，一般建议写成展开风格，使得代码可读性更高。
2. 紧凑
p { color: red; font-size: 30px;}
部署阶段，一般建议使用紧凑风格。
因为 CSS 的作用是对页面进行美化，此外，在编写 css 代码的时候，和 html 一样，空格、换行在代码中是不生效的。而当我们将所编写的 css 代码全部确认后，就可以写在一起，这样就能减少不必要的空格、缩进、换行等，从而达到节省带宽的效果。我们在前面提到，CSS 是从服务器下载到浏览器中的，CSS 代码越长，要下载的内容就越多，所以就会消耗带宽。
而由于 CSS 和 JS 都是从服务器下载到浏览器的本地的，所以对应的 css 文件 和 js 文件中的代码一般都会使用专业的工具进行压缩。
压缩效果就如下图所示：
3. 注意代码的写法
在 CSS中，对于更复杂的代码，一般都是使用 " 脊柱命名法 "
编程语言常见的命名风格：
① 驼峰命名法：形如 【fontSize】 ( Java / JS / C++)
② 蛇形命名法：形如 【font_size】( C / C++ )
③ 脊柱命名法：形如 【font-size】( CSS )，比较少见。
④ 匈牙利命名法：类似于驼峰，但会先加上一个前缀，表示类型。
形如 【ifrontSize】( 整型变量 )
形如 【sfrontSize】( 字符串类型变量 )
( 比较少见，当下时代基本不这么写了，Windows API 中很多都是这么搞的 )
三、CSS 基础选择器 ( 重要 )
1. 标签选择器 ( 标签 )
标签选择器可以为所有同一类型的标签设置样式。
<!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>demo3</title> <style> p { color: red; } </style> </head> <body> <p>卡布达</p> <p>卡布达</p> <p>卡布达</p> <p>卡布达</p> <p>卡布达</p> </body> </html>
展示结果：
2. 类选择器 ( . )
类选择器可以让属于同一 class 的属性拥有同样的样式。
<!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>demo4</title> <style> p { color: red; } .green { color: green; } .blue { color: blue; } .font { font-size: 30px; } </style> </head> <body> <p>卡布达</p> <p class="font" >卡布达巨人</p> <p class="green">呱呱蛙</p> <p class="blue">蟑螂恶霸</p> <p class="green font">金龟次郎</p> </body> </html>
我们必须明确，标签选择器为每个相同标签的内容设置了样式，但当类选择器也存在的时候，那么标签中的内容就会以类选择器设置的样式为优先。上面代码中的【呱呱蛙、蟑螂恶霸、金龟次郎】就是这么回事。
展示结果：
注意
CSS 中的类与 Java 中的类不同，CSS 中的类只是将一类的归在一起，起到了一个分类的作用。而 Java 中的类，无疑代表了面向对象的的一些特性，比如：继承、封装、多态…
3. id 选择器 ( # )
每个 html 中的元素都有一个 id 属性，要求这个属性是整个页面中唯一的值，也可以通过这个值来找到对应的元素。
<!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>demo5</title> </head> <style> div { color: red; } #flag { color: green; } </style> <body> <div id="flag">飞翔机器人</div> </body> </html>
同样地，标签选择器与 id 选择器在一起的时候，也是以 id 选择器设置的样式为先。
展示结果：
4. 通配符选择器 ( * )
通配符选择器用来统一所有的标签，它存在的意义往往是能够消除浏览器的默认样式，一般用来清空内外边距。
<!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>demo6</title> <style> * { background-color: gray; } p { color: red; } .green { color: green; } .blue { color: blue; } .font { font-size: 30px; } </style> </head> <body> <p>卡布达</p> <p class="font" >卡布达巨人</p> <p class="green">呱呱蛙</p> <p class="blue">蟑螂恶霸</p> <p class="green font">金龟次郎</p> </body>
展示结果：
<!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>demo7</title> <style> * { color: red; } </style> </head> <body> <h1>卡布达巨人</h1> <p>卡布达</p> <div>金龟次郎</div> </body> </html>
展示结果：
