css基础

css绝对是一个能够写到爆炸的东西，so，机智的小北方才不会写各种css样式具体的效果，相比之下更推荐大家记一些常用的key，至于效果，每次用的时候百度下就可以了

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

css的作用是对符合条件的标签进行渲染，那么首先就要匹配到对应标签啦，我萌有三种基础的模式来匹配希望改变样式的标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1 {
 8             color: red;
 9         }
10 
11         .class1 {
12             color: blue;
13         }
14 
15         div {
16             color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="id1">id选择器</div>
22     <div class="class1">class类选择器</div>
23     <div>标签选择器</div>
24 </body>
25 </html>

显而易见这三种选择器会对符合条件的标签进行对应渲染，在日常使用中我们最多使用的是类选择器，因为在一个页面中一个id只能对应一个标签，而类选择器则可以赋予多个标签，所以id选择器最具有针对性，它的优先级也是最高的，而类选择器则比标签选择器高

Id > class > 标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1 {
 8             color: red;
 9         }
10 
11         .class1 {
12             color: blue;
13         }
14 
15         div {
16             color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div id="id1" class="class1">id选择器</div>
22     <div class="class1">class类选择器</div>
23     <div class="class1">标签选择器</div>
24 </body>
25 </html>

好啦，我萌知道了怎么给对应的标签加特效了，duang，但是在有多层级的时候怎么办呢，我又不能给每个标签加上id或者class，因为有很多都是没有必要的，so，此时我萌就要用到层级选择器啦

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             color: red;
 9         }
10 
11         div > div {
12             color: blue;
13         }
14 
15         div > div > div{
16             color: green;
17         }
18     </style>
19 </head>
20 <body>
21     <div>
22         <div>
23             <div>3层</div>
24         </div>
25 
26         <div>2层</div>
27     </div>
28 
29     <div>1层</div>
30 </body>
31 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #id1 ~ div {
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <div id="id1"></div>
14     <div>1层</div>
15 </body>
16 </html>

层级的选择主要使用的就是>，代表去子元素中继续匹配，所以我们可以在首层使用一个id，这样就可以立刻锁定一个标签块的范围然后继续去匹配了

最后还有一个问题，那就是如何使用css呢，我们有三种方法

在标签的属性内增加style属性，然后进行编辑，这种方式的优先级最高
在head内增加<style>标签然后编辑对应需要匹配标签的效果，这种方式的优先级中等
第三种使用<link>标签外联uri引入css，css文件内容与第二种一样只是不需要<style>标签了，这种方式的优先级最低，但是确实我们最常使用的

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="main.css">
 7     <style>
 8         div {
 9             color: blue;
10         }
11     </style>
12 </head>
13 <body>
14     <div style="color: red">66666666666666</div>
15 </body>
16 </html>

1 div {
2     color: green;
3 }

为什么我萌最常使用第三种呢？这个在最后的前端优化里会介绍~