CSS的三种样式及选择器
一.概述
css一共有三种样式，分别是：行内样式，内部样式，外部样式
行内样式：写入在HTML标签内，是最不规范的写法，没有突出HTML+CSS的关键就是骨架和美化分离，这样写在一起的行内样式，代码的复读性也很低，所以一般不建议使用
内部样式：一般写在头部标签中，代码可读性比较高，不适合大量的css样式的写入
外部样式：单独建一个stylesheet文件用来专门控制样式，适用于大量的css样式写入，文件后缀.css
测试：
HTML文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的三种导入方式</title> <!--外部样式--> <link rel="stylesheet" href="/CSS/frist.css"> <!--内部样式--> <style type="text/css"> h1{ color: orange; } </style> </head> <body> <!--行内样式--> <h2 style="color: red">hello，world！</h2> </body> </html>
CSS样式：
/*外部样式*/ h1{ color: blue; }
注意：
对于样式生效的优先级，行内样式始终处于最高级
内部样式和外部样式则采用就近原则的规律来生效，指的就是那个样式离对应的HTML标签近，那个css就生效，也可以理解为内部样式和外部样式谁在下面谁就生效
外部样式的两种导入方式：
HTML中的<link>标签
css2.1特有的@import （）导入，这个导入必须嵌入<style>标签中
<link rel="stylesheet" href="CSS/frist.css"> <style> @import url("CSS/frist.css"); </style>
二.选择器
一般有三种基础选择器：
标签选择器 h1{
}，
类选择器 .class类名{
}，
id选择器 # i d名{
}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*标签选择器*/ h1{ color: red; } /*类选择器*/ .abandon{ color: orange; } /*id选择器*/ #oop{ color: khaki; } </style> </head> <body> <h1>标签选择器</h1> <h1 class="abandon">类选择器</h1> <h1 id="oop">id选择器</h1> </body> </html>
注：
当三种基础选择器撞到一起的时候，我们的优先级就不再是就近原则了；
选择器的优先级就是很明显的顺序：id选择器 > 类选择器 > 标签选择器
在这其中：
id选择器必须全局唯一
三.层次选择器
后代选择器：空格隔开
body h1{
}
子选择器：后面一代有变化
body>p{
}
相邻兄弟选择器：（相邻的才会有效）
.acj + p{
}
通用选择器：（通用兄弟选择器）
.ach~p{
}
