CSS速成教程——1

一、CSS 介绍及学习路径

CSS 指的是层叠样式表（Cascading StyleSheet）。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

学习路径

2.CSS 的基础语法

基础语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {
    declaration1; 
    declaration2;
    ... 
    declarationN;
}

选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

例如：

h1{
   color:red;
   font-size:14px;
}

属性大于 1 个之后，属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

下面的示意图为您展示了上面这段代码的结构：

注意：如果值大于 1 个单词，则需要加引号,如下：

p{font-family:"sans serif"}

css 高级语法

1.选择器的分组

你可以对选择器进行分组，这样被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是红色的。

h1，h2，h3，h4，h5，h6{
      color：red;
   }

2.继承

根据 CSS，子元素从父元素继承属性。看看下面这条规则：

body{
     color：green;
}

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示绿色，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。