CSS语法

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

说明

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

  • CSS声明

总是以分号(;)结束，声明总以大括号({})括起来:

1
2
3
4
p{
  color:red;
  text-align:center;
}
  • CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 “/" 开始, 以 "/” 结束, 实例如下:

1
2
3
4
5
6
7
/*这是个注释*/
p{
  text-align:center;
  /*这是另一个注释*/
  color:black;
  font-family:arial;
}

id和class选择器

  • id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
以下的样式规则应用于元素属性 id=“para1”:

1
2
3
4
#para1{
    text-align:center;
    color:red;
}
  • class选择器

class选择器用于描述一组元素的样式,class选择器有别于id选择器，class可以在多个元素中使用。
class选择器在HTML中以class属性表示, 在CSS中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

1
.center {text-align:center;}

如何插入样式表

插入样式表的方法有三种:外部样式表(External style sheet)、内部样式表(Internal style sheet)、内联样式(Inline style)。

  • 外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用link标签链接到样式表。link标签在（文档的）头部：

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
  • 内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用style标签在文档头部定义内部样式表，就像这样:

1
2
3
4
5
6
7
<head>
<style>
  hr {color:sienna;}
  p {margin-left:20px;}
  body {background-image:url("images/back40.gif");}
</style>
</head>
  • 内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style属性可以包含任何CSS属性。本例展示如何改变段落的颜色和左外边距：

1
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
  • 多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style>(内部样式）Internal style sheet>（外部样式）External style sheet>浏览器默认样式

CSS背景

CSS背景属性用于定义HTML元素的背景。
CSS 属性定义背景效果:background-color、background-image、background-repeat、background-attachment、background-position。

  • background-color

定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中:body {background-color:#b0c4de;}。
CSS中，颜色值通常以以下方式定义:
十六进制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

  • background-image

描述了元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
页面背景图片设置实例:body {background-image:url(‘paper.gif’);}。

1
2
3
4
5
6
7
8
9
10
默认情况下background-image属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调。
body{
  background-image:url('gradient2.png');
}
如果图像只在水平方向平铺(repeat-x),页面背景会更好些:
body{
  background-image:url('gradient2.png');
  background-repeat:repeat-x;
}
1
2
3
4
5
6
7
8
9
10
11
12
如果你不想让图像平铺，你可以使用background-repeat属性:
body{
  background-image:url('img_tree.png');
  background-repeat:no-repeat;
}
背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。
可以利用background-position属性改变图像在背景中的位置:
body{
  background-image:url('img_tree.png');
  background-repeat:no-repeat;
  background-position:right top;
}
1
2
3
4
5
6
7
8
在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。背景颜色的简写属性为"background":
body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position

CSS文本格式

  • 文本颜色
1
2
3
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
  • 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式,文本可居中或对齐到左或右,两端对齐.

1
2
3
4
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
  • 文本修饰

text-decoration属性用来设置或删除文本的装饰。

1
2
3
4
5
从设计的角度看 text-decoration属性主要是用来删除链接的下划线：
a  {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
  • 文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

1
2
3
4
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
  • 文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

1
p {text-indent:50px;}
1
2
3
4
5
6
7
8
9
10
11
12
13
color                   设置文本颜色
direction               设置文本方向
letter-spacing          设置字符间距
line-height             设置行高
text-align              对齐元素中的文本
text-decoration         向文本添加修饰
text-indent             缩进元素中文本的首行
text-shadow             设置文本阴影
text-transform          控制元素中的字母
unicode-bidi            设置或返回文本是否被重写
vertical-align          设置元素的垂直对齐
white-space             设置元素中空白的处理方式
word-spacing            设置字间距