一、属性命名方式
- 驼峰命名 goodMan
- 蛇形命名 good_man
- 脊柱命名 good-man
在很多语言中 ‘ - ’ 表示减号，有具体含义，而CSS中不能进行算术运算。CSS中常使用脊柱命名。也就是good-man front-size
二、注释：
和java的多行注释格式一样 ，但是注意CSS只支持这一种注释方式，并且不能嵌套。
可以通过 ctrl+ / 的方式快速注释！
三、CSS的引入方式
1. 内部样式
嵌入到 html 文件中就需要这个标签
叫做 选择器，只是一个名字，可以自己设定
CSS具体设置的属性，用键值对表示
是vscode编译器自动检测并呈现出来的，代码中并不包含
<body> <!-- 内部样式 --> <style> div { color: blue; font-size: 20px; } </style> <div> 你好 </div> </body>
2. 内联样式
通常后期修改的时候 直接在内部进行更改
<body> <!-- 内联样式 --> <div style="color: red;"> 你好 </div> </body>
3. 外部样式
最常用写法：把 css 单独的写到一个 .css 文件中，通过 link 标签引入到 html 里面
href 属性：指定 .css 文件的路径
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>Document</title> <!-- 通过link导入 --> <link rel="stylesheet" href="demo1.css"> </head> <body> <a>你好</a> <div>你好</div> </body> </html>
CSS文件：
1. a{ 2. color: gold; 3. } 4. div{ 5. color: aqua; 6. }
四、选择器的几种写法
1. 标签选择器
写个标签名字，这个名字就针对当前页面所有的指定标签都生效
div{ color: gold; } article{ color: aqua; }
2. 类选择器
让样式差异化，与 java 的类含义不一样，不要想当然
很方便，最能打的一种方法，想用就用
<!-- 类选择器的定义 --> <style> .one{ color: aqua; font-size: 20px; } .two{ color: brown; } </style> <!-- 类选择器的使用 --> <div class="one"> 你好啊 </div> <div class="two"> 你好啊 </div>
3. id 选择器
- 每个元素都有一个 id 属性，这个 id 属性是唯一的！
- 使用 id 选择器来选中到对应的元素上。
- # 开头表示id选择器，# 后面的表示对应到的id。如下图的 the-id
4. 通配符选择器
选中页面中所有的元素。
通常用于干掉 浏览器默认样式，例如字体大小，行间距，字体颜色 等等！
浏览器不同默认不同。而让用户在不同浏览器看到效果一样，就需要用到这个选择器!
5. 复合选择器
标签选择器、类选择器、id选择器、通配符选择器 是四种基础选择器。
而复合选择器，就是把这几种基础选择器结合起来。
① 后代选择器
②子选择器
和后代选择器差不多，但是只选择子标签，无法选择孙子和以后的
③ 并集选择器
④ 伪类选择器
是选择元素的不同状态
- :hover 鼠标放上去
- :active 鼠标按下去
<body> <style> div { color: black; } div:hover { <-- 鼠标放上去的状态 --> color: blue; } div:active { <-- 鼠标按下去的状态 --> color: red; } </style> <!-- 你好，有三种状态。原本：黑色 鼠标放上去：蓝色 鼠标按下去：红色--> <!-- 在按钮处常用，给与用户反馈 --> <div>你好</div> </body>
