## CSS基础知识 > CSS层叠样式表，主要是给页面编写样式的 ### 1.CSS的导入方式 - 行内样式 ``` /* * 行内样式：通过元素的style属性设置CSS样式 * 1

CSS基础知识

CSS层叠样式表，主要是给页面编写样式的

1.CSS的导入方式

• 行内样式

/*
 * 行内样式：通过元素的style属性设置CSS样式
 *   1）结构和样式混在一起，页面代码量多的时候，特别的混乱，不利于性能以及开发和维护
 *   2）真实项目中一般不用，偶尔需要提高样式的层级权重会用一下（行内样式的优先级是最高的）; JS中设置元素的样式，一般都是设置的行内样式；
 */
<header style="background:red;">
</header>

• 内嵌样式

/*
 * 内嵌样式：在HTML页面中，把样式写在STYLE代码块内（STYLE一般放到HEAD内部中）
 *   1）也是要把CSS代码放到页面中，CSS代码过多，页面一样会非常的臃肿
 *   2）如果CSS代码不是很多，为了加快页面加载的速度，我们一般也会用内嵌式来进行性能优化（移动端经常这么干）
 */
<style>
    header{
        background: green;
    }
</style>

• 外链样式

/*
 * 外链式：把样式写在外部的CSS文件中(xxx.css)，在页面的HEAD中基于link标签，把样式表导入进来即可（最常用的）
 *   REL='STYLESHEET' 这个才是导入CSS，如果是ICON代表导入页面的图标
 */
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/xxx.css">

• 导入样式

/*
 * 导入式：类似于外链式，只不过是基于@import导入进来的外部样式（不咋常用）
 */
<style>
    @import 'css/index.css';
</style>

link和@import的区别

• 进程：每一个程序运行都会占用一到多个进程（浏览器打开一个页面也会占用一个进程）
• 线程：一个进程包含多个线程，每一个线程就是做的一件事

link不会阻断页面的渲染线程（开辟新的线程加载资源文件），而@import是当前渲染线程请求资源文件，阻断了页面的渲染进度（@import资源在没有请求完成，后面页面是无法继续渲染的）

2.CSS选择器

CSS选择器就是用来在样式中获取到对应的元素，从而设置相关样式的

• 基本选择器
  • 标签选择器：div{} 获取到页面中所有的DIV标签
  • ID选择器：#box{} 获取到页面中ID为BOX的盒子
  • 样式类名选择器：.box{} 获取页面中class='box’的元素
  • 群组选择器：div,.box{} DIV和样式类为BOX的具备共同样式
  • 通配符选择器：*{} 页面中所有的标签
• 结构选择器
  • 后代选择器：.box a{} 获取样式类名为BOX，它后代元素中所有的A
  • 子代选择器：.box>a{} 获取样式类名为BOX，它儿子元素中所有的A
  • 弟弟选择器：.box+a{} 获取样式类名为BOX，它下一个弟弟并且是A的元素（最后获取的是A）
  • 同级筛选选择器：.box a.line{} 获取样式类名为BOX，它后代元素中所有的A，并且这个A得有LINE这个样式
• 伪类选择器
  • 结构伪类选择器
    • :nth-child(1) 获取当前容器儿子中的第一个
    • :nth-of-type(1) 和nth-child类似，但是它按照分组来选
    • :not() 除了某某某
  • 动态伪类选择器
    • :hover 鼠标滑过
    • :active 鼠标按下
• 属性选择器
  • a[href=‘javascript:;’] 获取所有的A标签，在其中筛选出HREF属性的值是指定值的（还可以用!=，不加='xxx’意思是只要包含这个属性即可）
• …