CSS Learning
1. 标签位置
1.1 行内样式
行内样式/内联样式，与其他两种样式相比优先级最高，eg：
<h1 style="color: red;font-size: 20px;">这是标题</h1>
存在书写繁琐、样式不能复用的问题，结构和样式没有分离，不推荐
1.2 内部样式
写在一个html内部，将所有的样式提取出来写在/标签内部，写在/标签内
<head>
<style>
h1 {
color: red;
font-size: 20px;
}
p {
color: green;
font-size: 10px;
}
</style>
</head>
<body>
<h1>标题</h1>
<p>这是一段话</p>
</body>
然而结构与样式并没有完全分离，存在多个html页面时无法复用的问题
1.3 外部样式
写在单独的.css文件中：
/* 这是CSS注释，这种类型就属于元素选择器 */
h1 { /* h1 为选择器 selector */
color: red; /* 大括号的内容为声明块 */
font-size: 20px;
}
p {
color: green;
font-size: 10px;
}
之后在html文件中引用
<head>
<link rel="stylesheet" href="./xxx.css">
</head>
href：指定关联的css文件路径，rel：即relation，说明引入文档与当前文档的关系
内部样式与外部样式优先级相同，后写的覆盖前面的
webpack 工具可以帮助项目上线时将CSS的展开风格代码转换为紧凑风格，以帮助减少代码大小
2. 选择器
2.1 通配选择器
* {
color= red;
font-size= 20px;
}
对所有html元素进行设定
2.2 元素选择器
为页面中某种元素统一设定样式，如<h1>, <h2>, <p> 等标签的内容。这种类型无法实现差异化设置
2.3 类选择器
<head>
<style>
.say {
color= red; /* 类选择器，前面要加. 且不能是纯数字*/
}
.answer {
color= blue;
}
.big {
font-size= 20px;
}
</style>
</head>
<body>
<p class="say big">111</p> <!-- 同个标签不能写多个class -->
<p class="say">222</p>
<p class="answer">333</p>
<p class="answer">444</p>
</body>
2.4 ID选择器
id：给标签指定唯一标识，一个html内id不能重复。不能用数字开头，不能包含空格。
<head>
<style>
.say {
color= red; /* 类选择器，前面要加. 且不能是纯数字 */
}
.big {
font-size= 20px;
}
#mystyle {
color= red; /* ID选择器，前面要加# 且不能数字开头 */
}
</style>
</head>
<body>
<p id="mystyle" class="say big">111</p> <!-- 同个html不同标签不能有同样的id -->
</body>