这是我参与「第四届青训营」笔记创作活动的第1天

CSS是什么？

CSS全名Cascading Style Sheets(层叠样式表)，主要用于定义页面元素的样式

CSS基本语法

首先我们来看一段CSS代码:

h1{
    color:bule
    font-size:20px
}

CSS基本语法为：选择器Selector + { + 选择器Property:属性值Value; + ··· + }，其中括号内的每一组选择器Property:属性值Value叫做一条声明(Declaration)，每一个声明块中可以包含若干条声明。

使用link标签引入一个外部的CSS文件

<link rel="stylesheet" href="/style.css">

在HTML页面内使用style标签并写入CSS代码

<style>
    h1{
        color:bule
        font-size:20px
    }
</style>

内联式引入直接写在HTML元素标签内,因此不需要选择器

<h1 style="color:bule">test</h1>

通配选择器：选择器名称为“*”，它会匹配所有标签
标签选择器：选择器的名称就是标签的名称，它会匹配HTML中所有对应的标签
id选择器：选择器名称为“#”+id，它会匹配所有定义了该id的标签
类选择器：选择器名称为“.”+类名，它会匹配所有定义了该类的标签
属性选择器：使用“[属性名]”这样的格式来匹配带有这个属性的标签，使用“[属性名=值]”这样的格式来匹配带有这个属性且拥有该值的标签
伪类选择器：伪类选择器通常有两种，一种是状态伪类（如:link :visited :active :hover :focus等）,一种是结构伪类（如:first-child :list-child :nth-child(n)等）
组合选择器：使用组合选择器可以选中无法通过上述选择器直接选中的元素，组合方式有直接组合、后代组合、亲子组合、兄弟选自器、相邻选择器

使用方式优先级：内联式>嵌入式>外链式
选择器优先级：比较两个选择器的优先级可看特异度，即依次对比两个选择器的id个数、类个数和标签个数，个数多的优先级高，需要注意的是只有前一项个数相同才需要比较后一项