css中允许多个class：
<h1 class="green bold">... </h1>。
举例：如果同时有一个p元素和一个h1元素下都有一个 class = uppercase ，那么可以通过在类名前添加它的父类来加以区分：
注意：两个元素之间没有空格。(类似的， background-image: url(图片地址) ，url和后面的括号之间也不能有空格）
想要设置 <li>... </li> 的css样式，可以通过嵌套元素的设置方法设置：
同时选中：
通过用逗号分隔 .h1 和 .menu ， 这两个类都会被相应的css格式修饰。
CSS declarations are structured into property and value pairs.
CSS语句都是属性和值相对应的结构。
font-family 定义了元素的字体。
font-size 控制文字显示的大小。
font-weight 定义文字的粗细程度。
text-align 属性控制文字的对齐方式，可以取的分别为： left , right , center 。
文字可以有两种颜色属性：前景色—— color 和背景色—— background-color 。 color 控制文字的颜色， background-color 控制文字的背景色。
CSS中可以用 opacity 属性来令某个元素透明。
CSS中也可以通过 background-image 属性来设置某个元素的背景为一张图片。
除了颜色、边框样式、边框大小之外，还可以调节边框的圆角大小，单位也是 px ：
可以分别声明padding-top、padding-right、padding-bottom以及padding-left的值。
同时也可以直接声明 padding: 3px 4px 5 px 6px ，顺序分别是上、右、下、左。
使用上面这种写法时，所有边的padding数值都必须写明。
不过，如果上下、左右的padding值是相等的，也可以写作：
padding: 5px 10px ，这代表上下的padding都是5px，而左右的padding都是10px。
margin和padding类似，也有 margin-top 、 margin-right 、 margin-bottom 、 margin-left 。
同样可以写作
margin: 10px 20px 10px 2opx或者 margin: 10px 20px，表示上下边距为10px，左右边距为20px。
margin的叠加有一点特殊：
水平方向的叠加就是简单的数字叠加。例如，如果左边盒子 margin-right = 10px，而右边盒子的 margin-left = 20px，那么这两个盒子放置在一起时，他们交界处的 margin= 10 + 20 = 30px。
而竖直方向的情况则有所不同，对于叠放的两个盒子，如果上面盒子的 margin-bottom = 30px，而下面盒子的 margin-left = 20px，则交界处的 margin值 为：30px。
利用margin实现居中对齐：
首先需要父元素有固定的 width 或者 height 。比如如果想要让 div1 实现横向居中对齐，首先应该设置其父元素 div0 的 width= 400px ，然后在 css文件 中设置div1的margin值为： margin: 0 auto
被父元素包裹着的子元素可能会占据空间过大而超过父元素的容纳范围，此时可以通过设置overflow的值来进行调整。
overflow的值可以为： scroll 、 hide 、 display 。
可以利用 display 属性来设置HTML元素的显示方式。
可以设置为： none , block , inline-block , inline 。
none 表示元素不显示；
block 表示显示为块级元素；
inline 表示显示为行内元素；
inline-block 表示显示为行内块级元素。
块级元素和行内块级元素可以设置 width height 属性，
而行内元素则不能。
注：一旦给元素加上absolute或float就相当于给元素加上了 display:block。
1. static属性：
static是html元素的默认position值，也就是按照正常的文档流排列。
2. fixed属性：
fixed的效果参见各种定在网页上的广告。
3. relative属性：
relative的元素是相对于自己的default position来定位的。
3.1 默认情况下：
可以看到与默认情况并无区别，
这是因为没有指定目标HTML元素相对其default position的偏移量。
结果：
结果：
结果：
结果：
通过float属性，可以使HTML元素脱离正常的文档流，竖直方向上将不再占用文档的空间，不过水平方向上不变。
比如可以利用这一特性，让序列横向排列:
HTML文件：
CSS文件：
默认情况下的结果：
利用float属性来ul元素横向排列：
结果：
此时只需要设置一下backPanel的height即可：
比如现在 ul元素 都没有父元素包裹了，上面只有一个 <p></p>元素，float之后的 ul元素 并不会“飞到”文档顶端去：
css中的color从类型上可以分为 color (前景色) 和 background-color ：
效果：
举例：
结果：
font-family: 字体名称
font-weight: bold | normal
也可以用数值来表示，数值的范围为[100, 900]且必须是100的整数倍。
举例：
font-style: italic ——斜体；
text-transform: uppercase | lowercase
text-align: left | right | center
举例：
以上CSS语句的意思是：
注：
相对应地，也存在 非衬线字体 ： sans-serif fonts
grid-template-columns: 100px 200px的意思是：将此网格分为两列。
其中，第一列的width = 100px，第二列的width = 200px。
宽度的单位也可以不是 px ，可以用 百分数 表示：
上面grid的宽度是1000px， 所以第一列的宽度是1000 * 20% = 200px；同理，第二列的宽度是500px。
也可以混用 px 和 % ：
这3列中，第一列width为20px，第二列为100 * 40% = 40px，第三列width为60px。
注意： 也就是说，总宽度20 + 40 + 60 = 120px，超过了100px，元素会超出grid的界限。
与定义 grid columns 是类似的:
结果：
结果：
通过单位 fr ，我们可以将行和列定义为对grid的length和width的划分——作用类似于 % ，但是用 % 是有超出父容器边界的风险的，而用 fr 则不用担心，因为浏览器会自动对grid进行划分。
如果行高或列宽相等，可以用 repeat() 函数来简化语句：
结果：
.grid {
display: grid
grid-template-columns: 100px minmax(100px, 500px) 100px
}
结果：
行间距同理：
grid-row-gap: 10px
同时设置行、列间距：
grid-gap: 20px 10px —— 一句话，分别设置行间距为20px，列间距为10px。
注：
这一简写形式并不需要 / ，如果只提供了一个值，比如： grid-gap: 10px，则相当于 grid-gap: 10px 10px。
简写形式：
同理，
同样，也可以写作：
span 可以明确地指出希望行或列跨越的距离：
比如，如果想要row从第4行开始，占两行，就可以直接写作：
不用 grid-row 的简写形式，也可以写作：
当然， span 也可以用在 grid-row-start 之后，浏览器会自动为我们计算出结果：
结果：
可以用一句话声明一个item占grid的多少行、列，并限定它在grid中的具体位置。
结果：
利用这个属性，可以先做出一个模板，然后让各个元素分别去“认领”他们所占的行和列。
比如 container 下面有5个板块:
注：
图中的grid是四行两列的，当header 和 header并列时，表示header占两列，此时header将占据整行，即使存在grid gap，依然不会将两个header分隔开。虚线只是为了便于理解，实际并不存在。
设置grid元素在每个格子中水平方向上的 对齐方式 。
justify-items 属性可以接收的值为：
注：这个属性是container中的，而不是每个item的。
设置grid元素在每个格子中竖直方向上的 对齐方式 ：
同样可以接收以下值：
注：这个属性是container中的，而不是每个item的。
设置整个grid在其父容器中，水平方向上的对齐方式：
可以取的值为：
同理，利用 align-content 属性可以设置整个grid在其父容器中，竖直方向上的对齐方式。
原理均与 justify-content 属性相似，不再赘述。
利用 justify-self 、 align-self 属性，可以分别设置grid的每个格子中，具体某个item在水平、竖直方向上的对齐方式。
网页的源代码是html代码。css则是层叠样式表。如果把网页比作一间房屋，那么html就是框架结构以及墙壁、地板、天花等基础结构，而css则是内外装修。房子不装修也是可以住人的，就是难看点而已。同样，网页没有css也仍然是网页，就是丑点。
一般写在<head>和</head>之间，参考下面写法：
<style type="text/css">
body {margin:0 autowidth:100%font-size:12pxcolor:#666}
.c{border-collapse:collapsemargin:0 auto}
</style>
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说，CSS具有以下特点：
（1）丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
（2）易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
（3）多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
