CSS基础积累总结（上）

原文来自搬砖工，如需转载请注明出处

---

java基础专栏请戳这里http://blog.youkuaiyun.com/column/details/14176.html

博主SSH框架专栏请戳这里http://blog.youkuaiyun.com/column/details/14227.html

一：CSS的工作原理

1.基本的CSS语法

比方说，我们要用红色作为网页的背景色：

用HTML的话，我们可以这样：

       <body bgcolor="#FF0000">

用CSS的话，我们可以这样获得同样的效果：

       body {background-color: #FF0000;}

上例也向你展示了基本的CSS模型：

为HTML文档应用CSS，有三种方法可供选择。下面对这三种方法进行了概括。我们建议你对第三种方法（即外部样式表）予以关注。

方法1：行内样式表（style属性）

为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：

      <body style="background-color: #FF0000;">

方法2：内部样式表（style元素）

为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：

        <style type="text/css">

          body {background-color: #FF0000;}

        </style>

方法3：外部样式表（引用一个样式表文件）

我们推荐采用这种引用外部样式表的方法。外部样式表就是一个扩展名为css的文本文件。跟其他文件一样，你可以把样式表文件放在Web服务器上或者本地硬盘上。

导入语法：

    <link rel="stylesheet" type="text/css" href="style/style.css" />

   

注意要在href属性里给出样式表文件的地址。

这行代码必须被插入HTML代码的头部（header），即放在标签<head>和标签</head>之间。就像这样：

    <html>

      <head>

    <title>我的文档</title>

        <link rel="stylesheet" type="text/css" href="style/style.css" />

      </head>

      <body>

      ...

   

这个链接告诉浏览器：在显示该HTML文件时，应使用给出的CSS文件进行布局。
这种方法的优越之处在于：多个HTML文档可以同时引用一个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档的布局。

这一方法可以令你省去许多工作。例如，假设你要修改某网站的所有网页（比方说有100个网页）的背景颜色，采用外部样式表可以避免你手工一一修改这100个HTML文档的工作。采用外部样式表，这样的修改只需几秒钟即可搞定——修改外部样式表文件里的代码即可。

然后，把这两个文件放在同一目录下。记得在保存文件时使用正确的扩展名（分别为“htm”和“css”）。

二：颜色与背景

前台页面背景和颜色主要包括下面内容：

· color

· background-color

· background-image

· background-repeat

· background-attachment

· background-position

· background

前景色：‘color’属性

CSS属性color用于指定元素的前景色。

例如，假设你要让页面中的所有标题（headline）都显示为深红色，而这些标题采用的都是h1元素，那么可以用下面的代码来实现把h1元素的前景色设为红色。

       h1 {

        color: #ff0000;

    }

CSS属性background-color用于指定元素的背景色。

因为body元素包含了HTML文档的所有内容，所以，如果要改变整个页面的背景色的话，那么为body元素应用background-color属性就行了。

你也可以为其他包含标题或文本的元素单独应用背景色。在下例中，我们为body和h1元素分别应用了不同的背景色。

       body {

        background-color: #FFCC66;

    }

    h1 {

        color: #990000;

        background-color: #FC9804;

    }

注意：我们为h1元素应用了两个CSS属性，它们之间以分号（“;”）分隔。

CSS属性background-image用于设置背景图像。

如果要把这个蝴蝶的图片作为网页的背景图像，只要在body元素上应用background-image属性、然后给出蝴蝶图片的存放位置就行了。

       body {

        background-color: #FFCC66;

        background-image: url("butterfly.gif");

    }

    h1 {

        color: #990000;

        background-color: #FC9804;

    }

注意我们指定图片存放位置的方式：url("butterfly.gif")。这表明图片文件和样式表存放在同一目录下。你也可以引用存放在其他目录的图片，只需给出存放路径即可（比如url("../images/butterfly.gif")）；此外，你甚至可以通过给出图片的地址来引用因特网（Internet）上的图片（比如url("http://www.html.NET/butterfly.gif")）。

平铺背景图像[background-repeat]

下表概括了background-repeat的四种不同取值。

值	描述	示例
background-repeat:repeat-x	图像横向平铺	显示示例
background-repeat:repeat-y	图像纵向平铺	显示示例
background-repeat:repeat	图像横向和纵向都平铺	显示示例
background-repeat:no-repeat	图像不平铺	显示示例

例如，为了避免平铺背景图像，代码应该这样：

       body {

        background-image: url("butterfly.gif");

        background-repeat: no-repeat; }

固定背景图像[background-attachment]

CSS属性background-attachment用于指定背景图像是固定在屏幕上的、还是随着它所在的元素而滚动的。

一个固定的背景图像不会随着用户滚动页面而发生滚动（它是固定在屏幕上的），而一个非固定的背景图像会随着页面的滚动而滚动。

下表概括了background-attachment的两种不同取值。你可以点击示例察看二者的区别。

值	描述	示例
background-attachment:scroll	图像会跟随页面滚动——非固定的	显示示例
background-attachment:fixed	图像是固定在屏幕上的	显示示例

例如，下面的代码将背景图像固定在屏幕上。

       body {

        background-image: url("butterfly.gif");

        background-repeat: no-repeat;

        background-attachment: fixed;

    }

放置背景图像[background-position]

缺省地，背景图像将被放在屏幕的左上角。但是，你可以通过CSS属性background-position来修改这一缺省设置，将背景图像摆放在屏幕上你觉得满意的地方。

设置background-position属性的值有多种方式。不过，它们都是坐标的格式。举例来说，值“100px 200px”表示背景图像将被放置在位于距浏览器窗口左边100像素、顶部200像素处。

坐标可以是以百分比或固定单位（比如像素、厘米等）作为单位的值，也可以是“top”、“bottom”、“center”、“left”和“right”这些值。
下表给出了一些例子。

值	描述	示例
background-position:2cm 2cm	图像被放置在页面内距左边2厘米、顶部2厘米的地方	显示示例
background-position:50% 25%	图像被放置在页面内水平居中、离顶部四分之一处	显示示例
background-position:top right	图像被放置在页面的右上角	显示示例

在下例中，背景图像被放置在页面的右下角：

       body {

        background-image: url("butterfly.gif");

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-position: right bottom;

    }

缩写[background]

CSS属性background是上述所有与背景有关的属性的缩写用法。

使用background属性可以减少属性的数目，因此令样式表更简短易读。

比如说下面五行代码：

       background-color: #FFCC66;

    background-image: url("butterfly.gif");

    background-repeat: no-repeat;

    background-attachment: fixed;

    background-position: right bottom;

   

   

如果使用background属性的话，实现同样的效果只需一行代码即可搞定：

       background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;

各个值应按下列次序来写：

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

如果省略某个属性不写出来，那么将自动为它取缺省值。比如，如果去掉background-attachment和background-position的话：

       background: #FFCC66 url("butterfly.gif") no-repeat;

这两个未指定值的属性将被设置为缺省值：scroll和top left。

三：字体

CSS字体属性主要包括下面几个：

font-family，font-style，font-variant，font-weight，font-size

，font

字体族[font-family]

CSS属性font-family的作用是设置一组按优先级排序的字体列表，如果该列表中的第一个字体未在访问者计算机上安装，那么就尝试列表中的下一个字体，依此类推，直到列表中的某个字体是已安装的。

有两种类型的名称可用于分类字体：字体族名称（family-name）和族类名称（generic family）。下面来解释这两个术语。

字体族名称（就是我们通常所说的“字体”）的例子包括“Arial”、“Times New Roman”、“宋体”、“黑体”等等。

一个族类是一组具有统一外观的字体族。sans-serif就是一例，它代表一组没有“脚”的字体。

你在给出字体列表时，自然应把首选字体放在前面、把候选字体放在后面。建议你在列表的最后给出一个族类（generic family），这样，当没有一个指定字体可用时，页面至少可以采用一个相同族类的字体来显示。

下面是一个按优先级排列的字体列表的例子：

    h1 {font-family: arial, verdana, sans-serif;}

    h2 {font-family: "Times New Roman", serif;}

h1标题将采用Arial字体显示。如果访问者的计算机未安装Arial，那么就使用Verdana字体。假如Verdana字体也没安装的话，那么将采用一个属于sans-serif族类的字体来显示这个h1标题。

注意我们为“Times New Roman”采用的写法：因为其中包含空格，所以我们用引号将它括起来。

字体样式[font-style]

CSS属性font-style定义所选字体的显示样式：normal（正常）、italic（斜体）或oblique（倾斜）。在下例中，所有h2标题都将显示为斜体。

  h2 {font-family: "Times New Roman", serif; font-style: italic;}

字体变化[font-variant]

CSS属性font-variant的值可以是：normal（正常）或small-caps（小体大写字母）。small-caps字体是一种以小尺寸显示的大写字母来代替小写字母的字体。不太明白？我们来看几个例子：

如果font-variant属性被设置为small-caps，而没有可用的支持小体大写字母的字体，那么浏览器多半会将文字显示为正常尺寸（而不是小尺寸）的大写字母。

    h1 {font-variant: small-caps;}

    h2 {font-variant: normal;}

字体浓淡[font-weight]

CSS属性font-weight指定字体显示的浓淡程度。其值可以是normal（正常）或bold（加粗）。有些浏览器甚至支持采用100到900之间的数字（以百为单位）来衡量字体的浓淡。

    p {font-family: arial, verdana, sans-serif;}

    td {font-family: arial, verdana, sans-serif; font-weight: bold;}

字体大小[font-size]

字体的大小用CSS属性font-size来设置。

字体大小可通过多种不同单位（比如像素或百分比等）来设置。在本教程中，我们将关注于最常用和最合适的单位。比如：

    h1 {font-size: 30px;}

    h2 {font-size: 12pt;}

    h3 {font-size: 120%;}

    p {font-size: 1em;}

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小，而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸

缩写[font]

CSS属性font是上述各有关字体的CSS属性的缩写用法。

比如说下面四行应用于p元素的代码：

       p {

        font-style: italic;

        font-weight: bold;

        font-size: 30px;

        font-family: arial, sans-serif;

    }

如果用font属性的话，上述四行代码可简化为：

       p {font: italic bold 30px arial, sans-serif; }

font属性的值应按以下次序书写：

font-style | font-variant | font-weight | font-size | font-family

四：文本

文本主要包括下列CSS属性：

text-indent.,text-align,text-decoration,letter-spacing.

text-transform

文本缩进[text-indent]

CSS属性text-indent用于为段落设置首行缩进，以令其具有美观的格式。在下例中，我们为采用p元素的段落应用了30像素的首行缩进。

   p {text-indent: 30px;}

文本对齐[text-align]

CSS属性text-align与HTML属性align的功能相同。该属性的值可以是：left（左对齐）、right（右对齐）或者center（居中）。除了上面三种选择以外，你还可以将该属性的值设为justify（两端对齐），即伸缩行中的文字以左右靠齐。报刊杂志经常采用这种布局。

在下例中，标题（th）中的文字被设置为右对齐，而表中数据（td） 被设置为居中。正常的文本段落被设置为两端对齐。

    th {text-align: right;}

    td {text-align: center;}

    p {text-align: justify; }

文本装饰[text-decoration]

CSS属性text-decoration令我们可以为文本增添不同的“装饰”或“效果”。例如，你可以为文本增添下划线、删除线、上划线等等。在接下来的例子中，我们为h1标题增添了下划线，为h2标题增添了上划线，为h3标题增添了删除线。

    h1 {text-decoration: underline;}

    h2 {text-decoration: overline;}

    h3 {text-decoration: line-through;}

字符间距[letter-spacing]

CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如，假如你希望p元素里的文本段落的字间距为3个像素，而h1标题的字间距为6个像素，代码可以这样写：

  h1 {letter-spacing: 6px; }

 p {letter-spacing: 3px;}

文本转换[text-transform]

CSS属性text-transform用于控制文本的大小写。无论字母本来的大小写，你可以通过该属性令它首字母大写（capitalize）、全部大写（uppercase）或者全部小写（lowercase）。

比如，单词“headline”在展现给网页浏览者时，可以是“HEADLINE”或者“Headline”。

text-transform属性有四个可选值：

capitalize将每个单词的首字母转换为大写。

uppercase所有字母都转换为大写。

lowercase所有字母都转换为小写

none不作任何转换——文本怎么写的就怎么显示。

五：链接

在前面讲到的属性也可以应用到链接上（比如修改颜色、字体、添加下划线等）。但不同的是，CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样，我们便可为网站增添奇特而有用的效果。你需要通过伪类（pseudo-class）来控制这些效果。

伪类是什么？

伪类（pseudo-class）令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内。

我们来看一个例子。正如你所知道的，在HTML里，链接是通过a元素来定义的。因此，在CSS里，我们可以将a作为一个选择器

  a {color: blue;}

一个链接可以有不同的状态。例如，它可以是已访问过的，也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。

a:link {color: blue;}

a:visited {color: red;}

为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active，有鼠标悬停的链接对应的伪类为a:hover。

伪类： active

伪类:active用于活动的链接（即获得当前焦点的链接）。

a:active {background-color: #FFFF00;}

   

伪类： hover用于有鼠标悬停的链接。

如果你要当鼠标光标移到链接上时将链接显示为橙色斜体，那么CSS可以这样写：

    a:hover {color: orange;

        font-style: italic; }

如何去掉链接的下划线是一个常见的问题。

       a {text-decoration:none;}

六：元素的分类与标识（class和id）

1.用class对元素进行分类

我们希望白葡萄酒的链接全部显示为黄色，红葡萄酒的链接全部显示为红色，其余的链接显示为缺省的兰色。为了实现这一要求，我们将链接分为两类。对链接的分类是通过为链接设置HTML属性class实现的。参加如下代码：

       <p>制造白葡萄酒的葡萄：</p>

    <ul>

    <li><a href="ri.htm" class="whitewine">雷司令（Riesling）</a></li>

    <li><a href="ch.htm" class="whitewine">夏敦埃（Chardonnay）</a></li>

    <li><a href="pb.htm" class="whitewine">白比诺（Pinot Blanc）</a></li>

    </ul>

    <p>制造红葡萄酒的葡萄：</p>

    <ul>

    <li><a href="cs.htm" class="redwine">卡百内索维农（Cabernet Sauvignon）</a></li>

    <li><a href="me.htm" class="redwine">墨尔乐（Merlot）</a></li>

    <li><a href="pn.htm" class="redwine">黑比诺（Pinot Noir）</a></li>

    </ul>

然后，我们就可以为白葡萄酒和红葡萄酒的链接分别应用不同的风格了。

a {color: blue;}

a.whitewine {color: #FFBB00;}

a.redwine {color: #800000; }

如上例所示，你可以通过在样式表里利用.classname来为属于某一类的元素定义CSS属性。

利用id标识元素

除了可以对元素进行分类以外，你还可以标识单个元素。这是通过HTML属性id实现的。HTML属性id的特别之处在于，在同一HTML文档中不能有两个具有相同id值的元素。文档中的每个id值都必须是唯一的。在其他情况下，你应该使用class属性。下面，我们来看一个使用id属性的例子：

<h1 id="c1">第1章</h1>

 ...

<h2 id="c1-1">第1.1节</h2>

   ...

<h2 id="c1-2">第1.2节</h2>

假如我们要求第1.2节显示为红色，那么CSS可以这样写：

       #c1-2 {

        color: red;

    }

如上例所示，你可以在样式表里通过#id为特定元素定义CSS属性。