CSS简介

CSS(层叠样式表)，是一种用来为结构化文档(html)添加样式(比如字体，颜色)的计算机语言，CSS文件扩展名为.css。

其中CSS规定由两个部分构成，分别是选择器以及一条或多条声明

CSS构成

选择器就是html中的元素

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来

例如：

p {
    color:red;
    text-align:center;
}

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。

CSS注释以 /* 开始, 以 */结束

例如：

/*这是个注释*/
p
{
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

id 选择器是 HTML 元素特定的样式，一个html页面只能声明一个，不能重复。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

例如：

#a {
    text-align:center;
    color:red;
}

class 选择器用于描述一组元素的样式，class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：

例如：

.b {
    text-align: center;
}

插入样式表的方法有三种:

编写在.css文件中

例如：

// mystyle.css
.a {
	color: '#ddd';
}

// 引入
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

写在html内部使用 <style> 标签在文档头部定义

例如：

<head>
    <style>
        hr {
            color:sienna;
        } 
    </style>
</head>

就是将样式和元素写在一起。

例如：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

优先级是浏览器通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序

!important > 内联样式 > Id选择器 > 伪类 = 属性选择器 = 类选择器 > 元素选择器 = 伪元素选择器 > 通用选择器(*)

CSS7种选择器

CSS权值

CSS 优先级法则：