CSS 笔记

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

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

使用 CSS 的三种方式

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

以下是它们的例子：

1. 使用外部 .css 文件

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

<link href="../CSS/main.css" rel="stylesheet" type="text/css">
或：
<style type="text/css">
@import url(../CSS/main.css);
</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），选择器有如下几种：

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

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

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

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

并列关系，用逗号隔开多个 selector。如果多个标签定义一样的样式，可以用下面的方式：
1. 如：
  1. body, table {
  2. FONT-SIZE: 9pt; WORD-SPACING: 2pt; COLOR: #333333; LINE-HEIGHT: 17pt;
  3. FONT-FAMILY: "宋体"; LETTER-SPACING: 0.5pt
  4. }
对某选择区域中的某一类别的区域进行再选择，应用如下方式：
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>
#hello world {...} 定位到 <demo id="hello"><world>...</world></demo>中，注意是 <demo id="hello"> 中的 <world>，而不是其他块中的 <world>.
hello world {...} 定位到 <hello><world>...</world></hello>中。
#navigation li a:link {...} 定位到 <div id="navigation">。还可以对某一selector的不同行为进行不同定义，方式如下(这种方式也成为“伪类”)：
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> 的区别

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

<div>a</div> <div>b</div> <div>c</div>
<span>a</span> <span>b</span> <span>c</span>

页面代码：

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

其他区别。<span>中不能包含<p>，但<div>可以。

Ref

还不错的中文资料：http://www.w3school.com.cn/css/index.asp
W3CSchool Tutorial: http://www.w3schools.com/css/default.asp
CSS Reference: http://www.w3schools.com/cssref/default.asp
Another CSS Colors Reference: http://www.whoishostingthis.com/resources/css-colors/

Page updated

Google Sites

Report abuse