CSS 笔记

CSS 的全称是 Cascading Style Sheets. CSS 对于前端页面来说，是十分重要的，但它的使用规则，却是非常简单的。CSS 到在目前(2011)已经早到第三版了，俗称 CSS3，不过这里不区分 CSS1/2/3。

CSS 的最基础的语法：selector {property:value} 更复杂的内容可以参考本文末所附的参考链接。

使用 CSS 的三种方式

  1. 使用外部 .css 文件（具体有两种方式）
  2. 在<head>部分定义
  3. 内联使用

以下是它们的例子：

1. 使用外部 .css 文件

当外部的CSS文件定义好後，<head>标签内添加类似下面的内容即可：

  1. <link href="../CSS/main.css" rel="stylesheet" type="text/css">
  2. 或：
  3. <style type="text/css">
  4. @import url(../CSS/main.css);
  5. </style>

注意必须使用相对于本页面的相对路径引用. 根据实验，对于 Iceweaset 浏览器，无论用 HTML4 还是 HTML5，第一种方式是无效的，只有第二种方式可行。

对于外部文件本身，可以在第一行添加类似如下的信息确定编码：

@CHARSET "UTF-8";

对于 XML 文档，如果要使用 CSS 控制样式，似乎只有使用外部 CSS 文件的方式，格式如下：

<?xml-stylesheet type="text/css" href="hello.css"?>

在上面引用的 hello.css 中，对不同标签的内容进行格式限定。

2. 在<head>部分定义

<head>
     <style type="text/css">
         hr {color:sienna}
         p {margin-left:20px}
         body {background-image:url("images/back40.gif")}
     </style>
</head>

对于一些古董级浏览器，可能不支持CSS，那么就用如下方式：

<head>
<style type="text/css">
    <!--
     hr  {color:sienna}
     p {margin-left:20px}
     body {background-image:url("images/back40.gif")}
    -->
</style>
</head>

3.内联方式:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

以上三种写法，有一种优先级关系：内联 > 页面定义 > 外部引用。If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet! （翻译：如果在 <head> 部分定义了 CSS 的同时也引入了外联的 CSS 文件，而且外联语句在定义之後，那么外联的属性会覆盖前面定义的。）这个和浏览器行为有关系，从头到尾解析HTML，後解析的覆盖先解析到的）。这种优先级关系对比 Java，似乎可以如此认为：从1到3有顺次有一种继承关系，用 Java 的方式去写，应该就是：3 extends 2 extends 1. 如果同时使用几种方式的CSS, 则按照"内联", head, "外联"的优先级调用. 如果一个属性的 CSS 的样式在两种或全部的 CSS 中都有定义, 那么他们会被合并(继承), 并依据优先级覆盖.

CSS 选择器

CSS 总的语法结构非常简单，就是“选择器+声明部分”（Selector + Declaration block），选择器有如下几种：

  1. ID 选择器
  2. #id {
  3. 属性名:属性值; /*property; value*/
  4. ...
  5. }
  6. 类选择器
  7. .类选择器 {
    1. 属性名:属性值;
    2. ...
    3. }
    4. 注意：类选择器名称不能以数字打头。
  8. 标签选择器
    1. HTML标签名 {
    2. 属性名:属性值;
    3. ...
    4. }
    5. 根据实际测试，标签名也可以自定义，如 <hello>, <world> 一类。

选择器优先级：id>类>html。声明部分，类似一个 HashMap 的结构。

选择器是可以有复杂的组合，如：

上面是一个复杂的例子，集“ID选择器”，“重写”，”标签选择器“，”浏览器行为名称“于一体，下面再举例说明组合关系。

  1. 并列关系，用逗号隔开多个 selector。如果多个标签定义一样的样式，可以用下面的方式：
      1. selector1, selector2, ... {...}
    1. 如：
      1. body, table {
      2. FONT-SIZE: 9pt; WORD-SPACING: 2pt; COLOR: #333333; LINE-HEIGHT: 17pt;
      3. FONT-FAMILY: "宋体"; LETTER-SPACING: 0.5pt
      4. }
  2. 对某选择区域中的某一类别的区域进行再选择，应用如下方式：
      1. selector1.selector2 {...}
    1. 如：
    2. #hello.world {...} 定位到 <demo id="hello"><demo2 class="world'>...</demo2></demo> ID 为 hello 的块中 class 名称为 world 的元素。
    3. 又如：
    4. 对于相同标签的内容，要使用不同的 CSS 定义，那么，就要在标签中添加 class 属性，以示区别。
    5. 要对不同段落施加不同的样式, 先在段落的里设置class属性值, 然後 CSS 分别定义. 举例:
      1. p.astyle {...}
      2. p.bstyle {...}
      3. ... ...
      4. <p class="astyle">...</p>
      5. <p class="bstyle">...</p>
  3. #hello world {...} 定位到 <demo id="hello"><world>...</world></demo>中，注意是 <demo id="hello"> 中的 <world>，而不是其他块中的 <world>.
  4. hello world {...} 定位到 <hello><world>...</world></hello>中。
  5. #navigation li a:link {...} 定位到 <div id="navigation">。还可以对某一selector的不同行为进行不同定义，方式如下(这种方式也成为“伪类”)：
      1. selector: method {...}
    1. 如：
      1. A:visited {
      2. COLOR: #000000; FONT-STYLE: normal; TEXT-DECORATION: none
      3. }
      4. 注：对于标签<a>, 有如下属性：visited, hover, link 等，这部分内容可以在这里（Blabla.in 的教程）查找到。

嵌套和继承

假如有这么一块 HTML 代码：

<html>
    <head>
    <title>继承</title>
    <style type="text/css">
        #hello {color:sienna}
    </style>
    </head>
    <body>
        <div id="hello">
        外部文字
            <div id="world">
                内部文字，如果设置了 #hello 的文字属性，这里也是要跟着变化的。
            </div>
        </div>
    </body>
</html>

它的显示效果如图：

可见 <div id="world"> 部分的文字颜色和也是 sienna。这说明，子节点的属性和父节点的属性是一样的，我们说子节点“继承”了父节点的属性。如果要让子区域的属性有所不同，就要“重写”，如：

<html>
    <head>
    <title>继承</title>
    <style type="text/css">
        #hello {color:sienna}
        #world {color:red}
    </style>
    </head>
    <body>
        <div id="hello">
        外部文字
            <div id="world">
                内部文字，如果设置了 #hello 的文字属性，这里也是要跟着变化的。<br/>
                但这部分的属性也是可以“重写”的。
            </div>
        </div>
    </body>
</html>

它的显示效果如图：

关于 CSS 继承，在这里(from www.slideshare.net)有一个非常生动的幻灯片。对于继承，不是所有属性都会继承继承的，比如 border 就不会被继承。通常，文本，列表，颜色相关的属性是继承的。对于 font-size 为百分比的情况，继承需要留意，详细不表，可参看本段提到的 slideshare.net 中的幻灯片讲解。

DIV+CSS 布局

DIV+CSS 布局已经流行很多年了，已经成为通用的布局模式了。它之所以能取代 table，我想是因为它可以和具体的 HTML 分开，不影响页面的数据，能够灵活改变的特性有关。

它的基本思路是用 DIV 确定区域，然後用 CSS 定义样式。页面的排列也可以 CSS 来操作，其中有一个很重要的属性：float，它能让 DIV 浮动到任意位置，这是 CSS 操纵页面布局的基础所在。

TODO

其他

用 CSS 的时候是比较鄙弃使用 <font> 标签的。

<div> 与 <span> 的区别

对于单个区域来讲，它们是没区别的，但对于多个区域并列，如：

  1. <div>a</div> <div>b</div> <div>c</div>
  2. <span>a</span> <span>b</span> <span>c</span>

页面代码：

<div> 的并列，是换行的，而 <span> 的并列是不换行的，显示效果如下：