语法

CSS包括选择器和{}内的一系列规则，每条规则用;隔开。

选择器 {
    属性: 值;
    ...
}

选择器

选择器可以是标签名，也可以是id名和class名。 id和class是HTML元素的属性值，id是唯一的，class可以对应多个元素。

如果想要多个元素具有同样的样式，选择器可以用,分割选择多个选择器来为它们同时附加属性。

div, p {
    color: #ccc;
    text-align: center;
}

也可以使用通用选择器(*)为所有的元素增加属性。

组合器用来解释选择器之间的关系。

后代选择器为指定元素的所有后代（包括嵌套的元素和嵌套元素所嵌套的元素，依次类推）附加属性。

div p {
    color: #ccc;
}

子代选择器为指定元素的所有子代（直接被嵌套的元素）附加属性。

div > p {
    color: #ccc;
}

为指定元素紧随其后的同级元素（两者具有相同的父级元素）附加属性。

div + p {
    color: #ccc;
}

为指定元素其后的所有所有同级元素（都具有相同的父级元素）附加属性。

div ~ p {
    color: #ccc;
}

可以通过三种方式使用CSS。

可以在与指定HTML文件的同级目录下编写后缀为.css的文件（eg：style.css），然后在HTML的<head></head>中增加<link>元素。

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

在<head></head>元素中增加名为<style></style>的元素，内容为想要实现的CSS。

为元素增添style属性，值是用;隔开的规则。（不推荐）

<p style="color:red;">欸嘿嘿(●ˇ∀ˇ●)</p>

CSS讨论布局时通常会使用这样一个词，从内到外包括元素、padding、border、margin

CSS的语法就是这样简单。
然后就是去了解CSS的各种属性和值，伪类，伪元素，规则了。。。

比如display属性，可以说是控制布局的最重要的元素了，用于规定如何显示元素。每个元素的默认display属性值通常为block或者inline，它们分别被称为块级元素和行内元素。

块级元素总是尽可能的占用全部的宽度，而且每次都是从新的一行开始。行内元素则是紧随其后，但是不具有高度之类的属性。

参考资料：CSS