一、CSS 引入
掌握了 HTML 基础，已可以做出简单的页面，但是要做出更加精美的网页还是要依靠CSS，一个网页中所看到的字体、间距、颜色和部分特效等都是由CSS来实现的，通过选择器对文档某个部分添加样式。显然，CSS不能单独使用。把网页比作建房子的话，HTML 做出毛胚房，CSS来装修。CSS与HTML是两个语言，引入CSS就是将它们关联在一起。
CSS有四种引用方式：内嵌、内联、外联、导入。
1）内嵌
<div style="color: pink;">Hellow world !!!</div>
给单个标签使用，因为十分具体所以优先级最高。但是当网页内容变多后，想要更改样式就比较费时间。不利于更改样式、不利于SEO。不建议使用这种方式。
2）内联
<style>
div{color: pink;} /* color为更改字体颜色 */
</style>
在head部分添加style标签，在标签内直接写CSS，在代码量少时为了方便可以这样，为了规范还是不建议使用这种方式。
3）外联
将 CSS 单独写在.css 文件中，通过 HTML 的标签从外部导入到。
<link rel="stylesheet" type="text/css" href="./style.css" />
符合“结构样式行为相分离”，规范并且便于后期维护。
4）导入
/* 在CSS文件导入 */
@import url(style.css);
/* 在html文件内导入 */
<style>
@import url(style.css);
</style>
与外联相似，都是导入外部文件。不过导入优先级比外联低，过多使用会延长浏览器渲染页面的时间。
优先级方面，内嵌 > 内联 > 外联 > 导入。也就是说通常情况下如果同时用多种方法给同一个元素设置相同的属性但是不同的属性值时，会优先显示内嵌的样式，没有内嵌样式的话就是内联，接着是外联，最后就是导入。
二、CSS 选择器
上学的时候老师依靠同学的名字或者位置准确的叫某位同学回答问题。CSS也是如此,依靠选择器对网页中的每一个HTML元素添加样式。写代码讲究"高内聚弱耦合",如果几行代码都实现同样的功能,可以简化就简化。所以选择器我就从范围最广到最小来介绍，最常见的选择器有以下几种：
1、通配符选择器
<style>
*{ /* 针对所有元素 */
margin: 0; /* 所有元素边距为0 */ /*body、ol、table、form等标签自带maring*/
padding: 0; /* 所有元素填充为0 */ /*option、textarea等标签自带padding*/
}
</style>
*在计算机中通常是当作通配符用的，代表 N 个字符(无论长短)。也就是说文档内所有元素都会被添加上通配符选择器内的CSS属性。为了方便布局，通常都会将所有元素自带的margin、padding都去掉。为了方便直接使用通配符选择器来完成，但是当页面内标签多的话理论上是影响页面性能的。生产环境中通常都会有“初始化CSS文件”，文件主要内容就是使用标签选择器具体指定某个标签清除自带样式。
2、标签选择器
<style>
a{ /* 针对所有a标签 */
text-decoration: none; /* 将所有a标签下划线去掉 */
}
</style>
直接在 HTML 某个标签后加花括号。网页中 HTML 中的 a 标签默认是带下划线并且是蓝色的,然而这显然不符合现代人的审美。通常都会用一个标签选择器来去掉下划线,改下字体样式。
3、属性选择器
<style>
input[name="danxuan"] {
/* 标签 + [属性] */
font-weight: 700; /* 针对input标签内有name属性并且值为duanxuan的标签 */
}
</style>
如果用了标签选择器后想再具体点对带有某个属性的元素进行操作，可以使用属性选择器。类似于老师指定了班上的男同学打扫卫生，再单独指定长得高的都去擦窗户。
4、class选择器(类选择器)
<head>
<style>
.demo {
color: pink;
} /* 在class名前加个 . */
</style>
</head>
<body>
<div class="demo"></div>
</body>
在标签中加class="class-name"，标签就有了自己的类名。多个标签可以有相同的类名。这个类名不能以数字、"-"和“_”开头，不过可以用中文甚至是 emoji 表情命名。当然，为了符合规范还是以有意义的单词来命名最好。给标签选择器加类名可以理解为将某些同学分到到指定的组，指定某个组的同学打扫卫生。
5、id选择器
<head>
<style>
#demo {
color: pink;
} /* 在id名前加个 # */
</style>
</head>
<body>
<div id="demo"></div>
</body>
在标签中加id="id-name" 标签就有了自己的id。多个标签可以有相同的 id 不过为了规范,通常一个id只给一个标签,保证其唯一性,就如同每个人的身份证号码一般。
小结：
在优先级方面，针对的对象多，优先级自然不会高。”唯一“的 id 选择器优先级最高。如下：
id选择器>class选择器>属性选择器>标签选择器>通配符选择器
