css入门教程（一）

CSS入门（一）

一.什么是CSS

1.CSS：

cascading style sheet，中文译名为样式表或层叠样式表，是网页制作时采用的一种技术，用于更加灵活、有效地控制网页的布局、颜色、字体、背景等显示效果。

2.层叠次序：

样式通常保存在.css文件中，通过编辑一个外部的.css文件，可以同时控制多个页面的样式和布局。同样，一个页面也可以引入多个外部样式表。因此，这里会涉及到层叠次序的问题：当一个HTML元素被大于一个的样式定义时，实际采用的样式将会是哪一个？
优先权从高到低分别为：
（1）内联样式（直接定义在HTML元素内部的样式）
（2）内部样式表（定义在head中的样式）
（3）外部样式表（引用的外部样式表）
（4）浏览器缺省样式（默认值）

二.CSS基础语法

1.基本构成

selector {property: value}
selector:选择器，即希望定义的HTML元素或标签。
property：属性，即希望改变的属性。
value：值，即给属性赋予的值。
如：

p {color: #ff0000}

在上述例子中，p是选择器，color是属性，#ff0000是给该属性赋的值。也就是，将HTML的p标签的颜色设为红色。#ff0000是十六进制颜色值，也可以写成CSS的缩写形式：#f00.
另外，不要在属性值和单位间加空格，如，推荐的写法为：

p {margin-top: 20px}

如果写成：

p {margin-top: 20 px}

即在值20和单位px间加入空格，在某些浏览器中，可能会无法正常工作。

2.多重声明

如果需要对同一个选择器定义不止一个声明，则需要使用分号将每一条声明分开。此外，为了增强样式的可读性，建议每一行仅描述一个声明。
如：

p {    text-align: center;    color: black;    font-family: "sans serif";}

在上述例子中，定义了一个颜色为黑色、字体为“sans serif”的居中的段落。

提示:
（1）当值为若干个单词时，需要加上双引号。
（2）最后一条规则可以不加分号。但是，为了避免后期修改时产生遗漏，建议加上。
（3）空格不会影响CSS在浏览器中的效果。此外，CSS对大小写不敏感。（与HTML一起工作时，class和id的大小写除外）

三.高级语法

1.选择器分组

可以将多个选择器归为一组，同组选择器使用相同的规则，各个选择器之间使用逗号分开。
如：

h1,h2,h3,h4 {    font-family: "sans serif"}

在上述例子中，标题h1、h2、h3、h4使用同样的字体：“sans serif”

2.继承

通常情况下，CSS子元素将继承父元素的属性。
如：

body {font-family: "sans serif"}

在上述例子中，body中元素都将使用sans serif字体（如果有的话）。此外，根据CSS的继承规则，所有body的子元素（如：p、td、ul、ol、dl等），都将继承这一属性。

提示：对于一些旧式的浏览器（低于HTML4.0）而言，浏览器无法理解继承的原理，此时，可以使用选择器分组来达到同样的目的。
如：
body {font-family: "sans serif"}
p,td,ul,ol,dl {font-family: "sans serif"}

3.重写

与继承相对的，CSS也存在着类似于重写的规则。当不希望父元素的规则被某一个子元素继承时，可以单独为这个子元素创建一个特殊的规则。如，在上述body的例子中，如果希望body中的段落元素使用不同的Verdana字体，就可以这样写：

body {font-family: "sans serif"}p {font-family: Verdana}

4.CSS派生选择器

派生选择器（原称为上下文选择器），即依赖上下文关系来确定元素的样式。
如：

li strong {    font-style: ltalic    font-weight: normal}

在上述例子中，定义了在li列表项中，粗体字呈现为斜体。即

<p><strong>这里是粗体而非斜体</strong></p><ol><li><strong>根据上下文关系，这里的粗体字也是斜体</strong><li><li>这里是正常的字体</li></ol>

5.id选择器

id选择器以#符号开头，为特定id的html元素指定样式。其基本格式为：
#id {property: value}
定义了一个特定属性的id，则引用了该id的HTML将使用选择器规定的样式。如：

#red {color: red}

定义了一个id为red的选择器，使颜色为红色。那么，可以在HTML元素中：

<h1 id="red">该标题的颜色是红色</h1>

在html中，id属性不能重复。即对于上述例子中的red，不可以写成：
<h1 id="red">该标题的颜色是红色</h1>
<h2 id="red">该标题也是红色</h1>
虽然说这样通常在浏览器效果上可以实现，但是，在同一区域内，id需唯一，这是一项默认地规则，使js能准确地通过id获取对象
如果需要重复地引用同一样式，要使用CSS类

此外，在CSS中，id选择器经常被用于建立派生选择器。如：

#red h1 {color: red}#red h2 {color: red}

那么，就只有id为red的h1标题以及h2标题的样式会为红色。此时，red这个id选择器作为派生选择器，就可以在html文档中出现多次。

6.类选择器

类选择器以 . 符号开头，为指定class的html元素指定样式。其基本格式和id选择器类似：
.class {property: value}
class为类选择器的名称，引用了该类的html元素将使用选择器规定的样式。如：

.red {color: red}

定义了一个class为red的类选择器，那么，在html文档中，就可以这样引用它：

<h1 class="red">这个标题是红色的</h1><h2 class="red">这个标题也是红色的</h2>

也就是说，与id选择器不同，一个类选择器可以在html文档中多次重复被使用。
此外，也可以为特定的元素设置类选择器，如：

h1.red {color:red}

那么，类名为red的h1元素将是红色的，而其他元素均不使用这个类选择器规定的样式，也就是：

<h1 class="red">这个标题是红色的</h1><h1>这个标题不是红色的</h1><h2 class="red">如果未规定h2的red选择器，这个标题不是红色</h2>