精通CSS:入門基礎

2012-9-29 16:26:37 | tags | views

 

概覽:今天我們要介紹什么呢?

我們將從CSS的基本屬性和技術開始,這些都是我們創建基于CSS的網站經常用到的。

  1. Padding 和 Margin
  2. 浮動(Floats)
  3. 居中對齊
  4. 有序和無序列表
  5. 格式化標題
  6. 溢出(Overflow)
  7. 定位

你一旦熟悉了這些基礎,我們將開始介紹一些從頭開始創建CSS網站的巧妙技巧,以及如何做一些改進

  1. 背景圖片
  2. 圖像增強
  3. PSD 轉 XHTML
1. Padding 和 Margin

大多數初學者都搞不清楚 padding 和 margin,以致無法正確地使用它們。然而使用類似 height之類的來代替實現 padding 或 margin 常常會導致錯誤和不一致的情況出現。理解 padding 和 margin 是使用CSS的基礎。

什么是 Padding 和 Margin ?

Padding 是元素的 內邊距,而 margin 是 元素的 外邊距

當你使用要給元素添加 backgrounds 和 borders 屬性的時候,這種差別就會變得很明朗。不像padding,margins是不會被 background 或 border 所覆蓋的,因為它們是圍繞在元素外的空白區域。

看看下面的一個圖片:

Box Model

Padding/Margin Values
Margin 和 padding 值設置順序是順時針方向,從頂部開始。(也就是說Margin 和 padding 的四個值依次對應"上右下左")

實例: 這里是位于兩個段落間的 <h2> 標題。正如你所看到的,margin 創建了位于段落間的空白,而 padding (背景為灰色的地方) 給標題內部留了空白。

Box Model - Example

Margin 和 Padding 的屬性值

上面關于標題的例子,margin 和 padding 的屬性值可以為:

1
2
margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;

為了進一步優化這一行代碼,我們將使用一種叫做 “縮寫” 的技術,這樣可以減少重復的代碼。使用縮寫技術,可以將代碼縮減成:

1
2
margin: 15px 0;  /*--上邊距和下邊距 = 15px | 右邊距和左邊距 = 0 --*/
padding: 15px;  /*--上右下左邊距 = 15px --*/

這個標題h2的完整 CSS樣式可以寫成如下形式:

1
2
3
4
5
6
h2 {
    background: #f0f0f0;
    border: 1px solid #ddd;
    margin: 15px 0;
    padding: 15px;
}

快速指南:

請記住,padding會被添加到元素總的 width中。例如,如果你已經指定了元素的寬度為 100 像素,并且你設置了左邊距和右邊距為 10 像素, 那么這個元素的最終寬度為 120 像素。

100px (內容) + 10px (left padding) + 10px (right padding) = 120px (元素總的width)

然而 margin 除了擴展盒子box的樣式外,不會對元素造成直接的影響。這個技巧,尤其是在排列分欄的時候將會顯得非常方便。

更多資源(英文):

  • float: left;屬性可以讓元素居左浮動,并且可以作為一個定量的容器來創建布局(layouts)和列使用。讓我們來看看可以使用float: left;的實例

    Float to Create Layouts

    float: right;屬性讓元素居右浮動,讓它周圍的元素居左浮動。

    快速指南:因為塊級元素通常會占據它父級容器100%的寬度,所以讓一個元素居右浮動,它將會被擠到下一行。即使是純文本也會出現這樣的情況,因為浮動的元素不能擠到同一行。

    Floating right bug

    你可以使用以下兩種方法來解決這個問題:

    1. 顛倒 HTML 標記順序,這樣你可以先調用 float 元素,再調用相鄰的元素。
      Floating right fix
    2. 給周邊的元素指定一個確定的寬度,這樣當兩個元素并列排放的時候,它們的總寬度小于或等于它們父級容器的寬度。
      Floating right fix

    Internet Explorer 6 (IE6) 在對一個元素浮動的時候對 margin 會產生雙倍的距離。所以最初你指定margin為5像素,在IE6中會變成10像素。

    Double Margin Bug - IE6

    解決這個問題的一個簡單方法是,給需要 float 的元素添加 display: inline; ,像這樣:

    1
    2
    3
    4
    5
    6
    .floated_element {
        float: left;
        width: 200px;
        margin: 5px;
        display: inline; /*--IE6 的解決辦法--*/
    }

    更多資源(英文):

    3. 居中對齊

    使用 <center> HTML 標簽的時代早已逝去。讓我們來看看使元素居中的更多不同的方法。

    水平對齊

    你可以使用 text-align 屬性來調整文本元素的水平對齊方式。這是很容易做到的,但是要記住居中對齊 內聯 元素(inline elements)的時候,你必須添加 display: block;。這允許瀏覽器確定排列元素的邊界。

    1
    2
    3
    4
    .center {
        text-align: center;
        display: block;  /*--只用于內聯元素--*/
    }

    可以使用 margin 屬性來調整非文本元素的水平對齊方式。

    如 W3C 所說, “如果 margin-left 和 margin-right 都設置為 auto,那么他們的屬性值是相等的。這樣就使該塊元素以邊界來居中對齊。”

    通過設置left和right margins為auto,可以達到水平居中對齊。這是一個使非文本元素水平對齊的理想方法, 例如,布局(layouts)和圖片。當你要使布局或元素居中對齊的時候,你必須給他們指定一個確切的寬度。

    使布局居中:

    1
    2
    3
    4
    .layout_container {
        margin: 0 auto;
        width: 960px;
    }

    使圖片居中:

    1
    2
    3
    4
    img.center {
        margin: 0 auto;
        display: block; /*-- img是一個內聯元素 --*/
    }

    垂直對齊

    你可以使用 line-height 屬性來調整文本元素的垂直對齊方式,它指定了一個文本行的垂直空間距離(也就是行高)。簡單地給元素高度匹配一個 line-height,就可以很好地調整標題和其他文本元素的垂直對齊。

    Line-height

    1
    2
    3
    4
    5
    h1 {
        font-size: 3em;
        height: 100px;
        line-height: 100px;
    }

    使用 

    以下是水平和垂直對齊的完整CSS代碼:

    1
    2
    3
    4
    5
    6
    7
    8
    .vertical {
        width: 600px; /*-- 指定 Width --*/
        height: 300px; /*-- 指定  Height --*/
        position: absolute; /*-- 設置絕對(absolute)位置 --*/
        top: 50%; /*-- 設置距離頂部的坐標為 50% --*/
        left: 50%; /*-- 設置距離左邊的坐標為 50% --*/
        margin: -150px 0 0 -300px; /*-- 設置 上邊 和 左邊 的外邊距 --*/
    }

    相關文章(英文):

    4. 有序和無序列表

    有序列表 <ol> , 是一個用數字來標志其列表項的列表。

    無序列表 <ul> ,是使用黑點作為列表標記的列表。

    默認情況下,這兩種列表的列表項樣式都很簡單。但是借助于CSS,我們可以更輕松地自定義它們。

    為了保持代碼的語義,列表應該只用于那些需要像列表一樣逐一列出的內容,但是他們可以擴展來創建多個列和導航菜單。

    自定義無序列表

    單個點的列表標記是很枯燥的,可能不會引起引起人們對他們圈定內容的注意。你可以嘗試使用下面的簡單而有效的方法:去除默認的單個黑點的列表標記,給每個列表項使用背景圖片。

    下面是自定義項目符號的CSS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    ul.product_checklist {
        list-style: none; /*-- 去除默認的黑點列表標記--*/
        margin: 0;
        padding: 0;
    }
    ul.product_checklist li {
        padding: 5px 5px 5px 25px; /*-- 給每個列表項添加內邊距 --*/
        margin: 0;
        /*--下面的代碼添加小圖標作為列表標記的背景圖片--*/
        background: url(icon_checklist.gif) no-repeat left center; 
    }

    Custom List Items

    關于列表項的資源:

    使用無序列表創建導航欄

    大多數基于CSS的導航菜單都是使用列表來創建的。這里解釋了如何使一個普通列表變成橫向導航菜單。

    HTML: 先寫個簡單的無序列表,給每個列表項添加超鏈接。

    1
    2
    3
    4
    5
    6
    7
    <ul id="topnav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

    CSS: 使用list-style: none去除默認的黑點列表項標記。接著,我們使每個列表項向左浮動,這樣導航才當就水平對齊了,從左往右浮動。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    ul#topnav {
        list-style: none;
        float: left;
        width: 960px;
        margin: 0; padding: 0;
        background: #f0f0f0;
        border: 1px solid #ddd;
    }
    ul#topnav li {
        float: left;
        margin: 0; padding: 0;
        border-right: 1px solid #ddd;
    }
    ul#topnav li a {
        float: left;
        display: block;
        padding: 10px;
        color: #333;
        text-decoration: none;
    }
    ul#topnav li a:hover {
        background: #fff;
    }

    附加資源(英文):

    5. 格式化標題

    HTML的標題標簽對于SEO是很重要的, 但是規則的標題會顯得無趣。為什么不用CSS來美化它們而兩全其美?

    你一旦確立了主要的標題屬性,你就可以通過嵌套內聯元素(nest inline elements)來給文本指定確切的樣式。

    樣式化標題

    你寫的HTML代碼應該是這樣子的:

    1
    <h1><span>CSS</span> Back to Basics <small>Tips, Tricks, &amp; Practical Uses of CSS</small></h1>

    你寫的CSS代碼應該是這樣子的:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    h1 {
        font: normal 5.2em Georgia, "Times New Roman", Times, serif;
        margin: 0 0 20px;
        padding: 10px 0;
        font-weight: normal;
        text-align: center;
        text-shadow: 1px 1px 1px #ccc; /*--不支持IE--*/
    }
    h1 span {
        color: #cc0000;
        font-weight: bold;
    }
    h1 small {
        font-size: 0.35em;
        text-transform: uppercase;
        color: #999;
        font-family: Arial, Helvetica, sans-serif;
        text-shadow: none;
        display: block; /*--Keeps the small tag on its own line--*/
    }

    更多相關資源:

    6. 溢出(Overflow)

    overflow屬性可用于很多地方,是CSS核武庫中最有用的屬性之一。

    什么是溢出?

    根據w3school.com.cn上的解釋,“overflow 屬性規定當內容溢出元素框時發生的事情。”

    看一看下面的例子,看看它如何工作。

    Overflow

    顯而易見,overflow: auto;看起來像iframe,但是它更加的有用,并且是對SEO是友好的。當內容超出了元素的邊界,他就會自動添加一個滾動條(橫向,縱向或兩者都有)

    overflow: scroll;的工作原理也差不多,但是無論內容是否超出了元素邊界,滾動條都會出現。

    overflow: hidden;屬性可以掩藏掉超出元素邊界的內容。

    快速提示:你是否遇到父元素并不完全環繞其子元素呢?這時你可以給父容器設一個浮動元素。

    在某些情況下,向左或向右浮動并不是一個可行的解決方案-例如,如果你想中心對齊容器或不希望指定一個確切的寬度。這種情況下,在你的父容器中使用overflow: hidden可以完全環繞任何包含其中的子元素。

     

    更多資源:

    7. 定位

    定位(相對的,絕對的,固定)是CSS中最強大的特性之一。它允許你使用一個精確的坐標來定位元素,讓你可以在盒子之外隨意創作。

    使用定位技術的時候,你要做如下三件基本的事情:

    1. 設置坐標 (即設置位置的x和y坐標).
    2. 選擇正確的定位方式: relative, absolute, fixed or static.
    3. 設置z-index的屬性值: 來布局元素 (可選).

    使用position: relative;,一個元素是位于它自然所在位置的。例如,如果一個相對定位的元素位于圖片的左邊, 設置top和left的坐標為10px,將使元素距離頂部10px,距離左邊10px。

    相對定位,也常用于定義絕對定位嵌套元素新的原始位置點(x 和 y 坐標)。默認情況下,每個元素的原始位置是瀏覽器視窗的左上角,坐標(0,0)。當你指定一個元素為相對定位時,這樣任何絕對定位的子元素的原始位置,將會相對于他們父元素來定位,即(0,0)坐標現在是父元素的左上角,而不是瀏覽器視窗的左上角。

    Relative Position

    使用position: absolute的元素可以使用 x 和 y 坐標來定位于任何地方。默認情況下,它的原始位置是瀏覽器視窗的左上角,坐標(0,0)。 它忽略了所有自然浮動規則,也不受周圍元素的影響。

    使用position: fixed的元素,原始位置也是瀏覽器視窗的左上角,坐標(0,0)。不同的是固定定位的元素將固定于它所在的位置,當滾動網頁的滾動條時,它的位置也一直沒有任何改變

     

    附加資源:

    使用CSS來添彩

    現在你也大體了解如何使用CSS了。下面是一些關于加強布局和美化圖片的常見技術。

    8. 背景圖片

    背景圖片往往增強你的網頁視覺效果。無論你是用重復圖片來覆蓋一塊大的區域,還是使用小圖標來做你的導航欄,圖片都會使你的網頁更加生動。

    但是請注意,默認的打印設置時不包括背景屬性的。當創建可打印的網頁時,要留心那個元素使用了背景圖片或圖片標記。

    使用大的背景圖

    現在的電腦顯示器尺寸也做得越來越大,在網頁中使用大的背景圖片已經變得很流行。

    看看這個由Nick La 的 WebDesigner Wall 提供的關于如何實現這種效果的詳細教程:

    Large Backgrounds in Web Design

    同時可以瀏覽一下Webdesigner Depot上的文章 “Do’s and Don’ts of Large Website Backgrounds.”

    文字替換

    您可能知道,并不是所有的標準瀏覽器都支持在網站上嵌入自定義字體。但是你可以通過不同的方式將文字替換成圖片。其中較為簡單的方法是使用文本縮進屬性。

    從標題可以看出,這種技術是將HTML結構的文字替換成圖像。

    1
    2
    3
    4
    h1 {
        background: url(home_h1.gif) no-repeat;
        text-indent: -99999px;
    }

    有時候,你需要指定確切的寬度和高度(如果是內聯元素,display: block也是必須的).

    1
    2
    3
    4
    5
    6
    7
    .replacethis {
        background: url(home_h1.gif) no-repeat;
        text-indent: -99999px;
        width: 100%;
        height: 60px;
        display: block; /*-- 只用于內聯元素 --*/
    }

    關于文字替換的文章:

    相關文章:

發表評論:

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

手机捕鱼怎么下载
竞彩计算器 河北时时在线 pk10软件计划下载 90比分网 加拿大28双组合预测100% 香港正版钻石3肖6码 北京时时赛车是什么 重庆时时开奖结果记录 反倍投方案 娱乐影院 百人炸金花游戏开发 澳洲幸运10全天计划免费 时时彩为什么不能倍投 新疆时时5星走势图星 全天北京pk10计划下载 免费打麻将游戏下载