快速了解css

基础语法：

选择器{属性：值；属性：值}

选择器

基本选择器

id选择器

class选择器

伪类
：hover
伪元素
firstline
伪类/伪元素

属性选择器
[属性]

多值选择器 [属性=属性值]

分组和嵌套

分组

h1,h2,p
{
    color:green;
}

嵌套

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

组合选择

样式优先级

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

内联样式表

外联样式表

盒子模型

image

盒子区域

轮廓模型

简写规律

margin：t r b l
margin:t lr b
margin:tb lr
margin:trbl