2、CSS名称区分大小写和空格，看下有名称有没有错误，可以用背景颜色或边框试下，看下这两个CLASS有没有起作用。
3、CSS定义有优先，以最后定义的为准，可以用火狐的FireBug工具查看一下，看看那两个CSS样式具体是什么问题。
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在水平、竖直方向上的对齐方式。
CSS 语法CSS 语法由三部分构成：选择器、属性和值：
selector {property: value}选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：
body {color: blue}上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。在上述例子中，body 是选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为属性，blue 为值。
值的不同写法和单位
除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000}为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00}我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0)}
p { color: rgb(100%,0%,0%)}请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。
记得写引号
提示：如果值为若干单词，则要给值加引号：
p {font-family: "sans serif"}多重声明：
提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：
p {text-align:centercolor:red} 你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：
p {
text-align: center
color: black
font-family: arial
}空格和大小写
大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：
body {
color: #000
background: #fff
margin: 0
padding: 0
font-family: Georgia, Palatino, serif
}是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。
选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h2,h3,h5,h6 {
color: green
}继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：
body {
font-family: Verdana, sans-serif
}根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。
但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？
友善地对待Netscape 4
幸运地是，你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。
body {
font-family: Verdana, sans-serif
}
p, td, ul, ol, li, dl, dt, dd {
font-family: Verdana, sans-serif
}4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。
继承是一个诅咒吗？
如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：
body {
font-family: Verdana, sans-serif
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif
}
p {
font-family: Times, "Times New Roman", serif
}
派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但是无论你如何称呼它们，它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，我们可以使 HTML 代码变得更加整洁。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：
li strong {
font-style: italic
font-weight: normal
}
请注意标记为 <strong>的蓝色代码的上下文关系：
<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>
在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id，代码更加简洁。
再看看下面的 CSS 规则：
strong {
color: red
}
h2 {
color: red
}
h2 strong {
color: blue
}下面是它施加影响的 HTML：
<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
