CSS入门教程（二）

CSS入门（二）

一.插入CSS样式表

这一部分介绍如何插入CSS样式表，也就是如何让一个html文档可以正确的引用写好的CSS样式。浏览器在展示html页面时，就会根据读到的CSS样式来对其进行格式化。
插入样式表的主要方式有：外部样式表、内部样式表、内联样式表。

1.外部样式表

在多个页面使用相同样式的情况下，通常使用外部样式表。即在html文档外部定义CSS样式表（.css文件），并在html文档头部使用link标签引用这个样式。如：

<head>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/commons/css/common.css"/>
</head>

href中写的是.css文件的路径，浏览器会从该文件中读取样式，并根据它来格式化页面。
外部样式表可以用任意软件编辑，其中不能包含任何html标签，并保存为.css格式。

2.内部样式表

当一个样式表仅用于一个页面时，使用内部样式表，即直接在html文档的头部定义内部样式表。
如：

<head>
    <style type="text/css">
        p {color: red;}
    </style>
</head>

3.内联样式表

当一个样式仅在某一特定元素上使用，且仅使用一次时，可以使用内联样式表。但是要慎用这种方法，当一个页面同时使用多种插入样式表的方式时，内联样式可能不起作用。此外，使用内联的样式表，会将内容和样式杂糅在一起，会损失掉使用样式表的优势。
内联样式表的例子如下：

<body>
    <h1 style="color: red">这个标题是红色的</h1>
</body>

4.多重样式

当页面中同一元素同时被不同样式表中的选择器所定义，那么，该元素将继承更具体的样式表的属性值。
如：在外部样式表和内部样式表中，同时有选择器对属性p进行定义
外部样式表中：

p {
    color: red;
    text-align: center;
}

内部样式表中：

p {text-align: left;}

那么，拥有该内部样式表，并同时链接到了上述外部样式表的页面中，p属性继承的样式为：
color: red;
text-align: left;
也就是说，颜色属性（内部样式表中并未对此进行定义）继承自外部样式表，而文字排列属性，则来自内部样式表。

二.CSS背景

CSS可以为元素创建相当复杂的背景效果。背景相关的属性基本都不可i继承。

1.背景色

可以使用background-color属性为特定的元素设置背景色。属性值可以是任意合法的颜色值。
而且，background-color属性不可继承，默认值为transparent（透明），可显示出父元素的背景色。
如：

h1 {background-color: blue;}

设置h1标题的背景色为蓝色

<body>
<h1>背景色为蓝色的标题</h1>
<h2>没有设置背景色的标题</h2>
</body>

其显示效果如下：

此外，还可以通过添加padding属性的方式，令背景色比文字稍微向外延展。如，将上面例子中的样式增补如下：

h1 {
    background-color: blue;
    padding: 20px;
}

则呈现的效果为：

2.背景图

类似地，使用图像作为背景时，使用background-image属性。该属性不可继承，其默认值为none，即不使用背景图片
如：

body {background-image: url(a.jpg)}

url部分为背景图片的路径。
背景图片通常用于为body设置背景，当图片大小不足以铺满整个页面时，会自动重复。background-image属性也能用于为段落等设置背景图片。

3.背景图片重复

使用background-repeat属性，来规定背景图片的重复方式。
默认的属性值为repeat，即在xy轴方向上都重复。其余的取值还有：repeat-x,只x轴方向重复；repeat-y；只在y轴方向上重复；no-repeat，图片不重复。
如：

body {
    background-image: url(a.jpg);
    background-repeat: no-repeat;
}

4.背景图片位置

使用background-position属性，来规定背景图片的初始位置。默认情况下，背景图将从元素的左上角开始。图片位置的取值有：水平方向上：left、center、right；垂直方向上：top、center、bottom。可以将水平和垂直方向上的取值组合起来，或是使用水平或垂直方向上位置的百分比或像素数来表明图片的起始位置。
如：

body {
    background-image: url(b.jpg);
    background-position: center center;
}

或：

body {
    background-image: url(b.jpg);
    background-position: 50% 50%;
}

需要注意的是，在上述两个例子中，图片默认为在水平和垂直方向上都重复，只是图片的起始位置位于页面正中。

5.背景图片是否随滚动轴移动

使用background-attachment属性来定义背景图片随滚动轴滚动的方式。默认值为scroll，即背景图片会随着页面的滚动轴移动，另外，还可以设置为fixed，即背景图片不随页面的滚动轴移动。
如：

body {
    background-image: url(b.jpg);
    background-repeat:no-repeat;
    background-attachment:fixed;
}

在上述例子中，使用了该样式的页面中，页面的背景图片将固定，不随着文档的滚动而滚动。

三.CSS文本

CSS的文本属性用于控制文字、段落、空格、单词等的样式

1.首行缩进

使用text-ident属性实现文本的首行缩进效果，且缩进量允许为负值。
通常，只能对块级元素使用该属性。且该属性可以继承。
如：

p {text-indent: 20px}

注意，当缩进量为负值时，最好为设置缩进量的元素设定一些外边框或是内边距，避免次行文字超出浏览器的左边框。
如：

p.a {text-indent: -5em;padding-left: 7em}

2.水平对齐

使用text-align属性来规定元素中文本行相互对齐的方式，它不会影响元素本身的对齐方式。其取值有：left（左对齐）、right（右对齐）、center（居中）、justily（两段对齐，通常在打印等时使用）
如：

<html>
<head>
<title>CSS测试</title>
<style type="text/css">
p.a {text-align: left}
p.b {text-align: right}
p.c {text-align: center}
p.d {text-align: justily}
</style>
</head>
<body>
<p class="a">左对齐</p>
<p class="b">右对齐</p>
<p class="c">居中</p>
<p class="d">两端对齐</p>
</body>
</html>

在浏览器中展示的效果如下：

在上图中可以看出，justify属性值并没有显示出应有的效果。这是因为，此处，需要由代理，而不是CSS来确定两段对齐文本如何拉伸，以填满父元素左右边界之间的空间。因此，要慎用这个属性值。

3.字间隔

使用word-spacing属性来设置字或单词之间的标准间隔，默认值为normal（即0）.其属性值可以是一个正或负的长度值，正值将两个字之间的距离拉远，负值将两个字之间的距离拉近。
如：

<html>
<head>
<title>CSS测试</title>
<style type="text/css">
p.a {word-spacing: 30px}
p.b {word-spacing: -10px}
</style>
</head>
<body>
<p>these are some words</p>
<p class="a">these are some words</p>
<p class="b">these are some words</p>
</body>
</html>

浏览器显示的效果为：

上述示例程序仅在段落中为英文时起作用，中文时则无效。

4.字母间隔

使用letter-spacing属性，来设置字母之间的标准间隔，用法与字间隔的word-spacing基本一致。

5.字符大小写转换

使用text-transform属性，来进行字符的大小写准换。其默认值为：none，不对字符进行准换，保留原有的大小写情况。其余的值还有：
uppercase（全部转为大写字母）；lowercase（全部转换为小写字母）；capitalize（将单词的首字母大写）。
如：

<html>
<head>
<title>CSS测试</title>
<style type="text/css">
p.a {text-transform: uppercase}
p.b {text-transform: lowercase}
p.c {text-transform: capitalize}
</style>
</head>
<body>
<p>Do not do case conversion</p>
<p class="a">Change To Uppercase</p>
<p class="b">Change To Lowercase</p>
<p class="c">capitalizes the first letter in each word</p>
</body>
</html>

在浏览器中显示的效果为：

6.文本划线

使用text-decoration属性定义文本是否有下划线以及划线方式。其取值有：none（去掉文本上的一切装饰）、underline（下划线）、overline（上划线）、line-through（贯穿线）、blink（文本闪烁）。通常情况下，默认值为none，但某些情况下，如超链接，文本下会出现下划线，此时就可以用text-decoration：none去掉超链接的下划线。
例子如下：

<html>
<head>
<title>CSS测试</title>
<style type="text/css">
p.a {text-decoration: underline}
p.b {text-decoration: overline}
p.c {text-decoration: line-through}
p.d {text-decoration: blink}
</style>
</head>
<body>
<p class="a">这里添加了一条下划线</p>
<p class="b">这里添加了一条上划线</p>
<p class="c">这里添加了一条贯穿线</p>
<p class="d">这里使用了闪烁效果</p>
</body>
</html>

在浏览器中显示的效果如下：

在本实例中，使用ie浏览器进行测试，未见文本闪烁效果。

7.文字排版

使用white-space属性控制文字的排版方式。默认值为normal，所有的空白符合并为一个空格，文本自动处理换行，其余的取值有：pre（保存源代码的空格和换行）、nowrap（强制文本位于同一行，除非遇上br换行符）、pre-wrap（同pre，但在超出容器范围时会自动换行）、pre-line（同pre，但在处理连续空格时，会合并成一个）。
例子如下：

<html>
<head>
<title>CSS测试</title>
<style type="text/css">
p.a {white-space: normal}
p.b {white-space: pre}
p.c {white-space: nowrap}
p.d {white-space: pre-wrap}
p.e {white-space: pre-line}
</style>
</head>
<body>
<p class="a">这是一段话，以下是五个空格     接着是换行
一段话结束了</p>
<p class="b">这是一段话，以下是五个空格     接着是换行
一段话结束了</p>
<p class="c">这是一段话，以下是五个空格     接着是换行
一段话结束了</p>
<p class="d">这是一段话，以下是五个空格     接着是换行
一段话结束了</p>
<p class="e">这是一段话，以下是五个空格     接着是换行
一段话结束了</p>
</body>
</html>

在浏览器中显示的效果为：

四.CSS字体

CSS字体用于控制文字的大小、粗细、字体等。
常用的属性有：
font-family:用于定义字体类型。
font-size：用于定义字体大小，需要注意的是，这里的font-size取值与html中不同，是相对于一个最小字号进行比对，可能的取值有：larger、smaller、250%等
font-style：用于定义字体风格。如：normal（正常）、oblique（斜体）、italic（斜体）
font-weight：用于定义字体粗细。

除上述部分外，CSS还有边框、边外补白、边内补白等特性，具体可查阅w3cschool