IT Notes‎ > ‎Web Front Dev‎ > ‎

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. 或:
    <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),选择器有如下几种:

  1. ID 选择器
    #id {

      属性名:属性值;
    /*property; value*/
      ...

    }
  2. 类选择器
    .类选择器 {

        属性名:属性值;
        ...
    }
    注意:类选择器名称不能以数字打头。
  3. 标签选择器
    HTML标签名 {
        属性名:属性值;
        ...
    }
    根据实际测试,标签名也可以自定义,如 <hello>, <world> 一类。

选择器优先级:id>类>html。声明部分,类似一个 HashMap 的结构。
选择器是可以有复杂的组合,如:

上面是一个复杂的例子,集“ID选择器”,“重写”,”标签选择器“,”浏览器行为名称“于一体,下面再举例说明组合关系。
  1. 并列关系,用逗号隔开多个 selector。如果多个标签定义一样的样式,可以用下面的方式:
    selector1, selector2, ... {...}
    如:
    body, table {
        FONT-SIZE: 9pt; WORD-SPACING: 2pt; COLOR: #333333; LINE-HEIGHT: 17pt;
        FONT-FAMILY: "宋体"; LETTER-SPACING: 0.5pt
    }
  2. 对某选择区域中的某一类别的区域进行再选择,应用如下方式:
    selector1.selector2 {...}
    如:
    #hello.world {...} 定位到 <demo id="hello"><demo2 class="world'>...</demo2></demo> ID 为 hello 的块中 class 名称为 world 的元素。
    又如:
    对于相同标签的内容,要使用不同的 CSS 定义,那么,就要在标签中添加 class 属性,以示区别。
    要对不同段落施加不同的样式, 先在段落的里设置class属性值, 然后CSS分别定义. 举例:
    p.astyle {...}
    p.bstyle {...}
    ... ...
    <p class="astyle">...</p>
    <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的不同行为进行不同定义,方式如下(这种方式也成为“伪类”):
    selector: method {...}
    如:
    A:visited {
        COLOR: #000000; FONT-STYLE: normal; TEXT-DECORATION: none
    }
    注:对于标签<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> 的并列是不换行的,显示效果如下:



 
Ref

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