幾個不常見的 HTML & CSS 效果

  1. 在 body 設定色彩,影響的範圍不只於內文文字,還包含影響下列的標籤
    • 圖像上的 alt 屬性
    • 列表元素的外框顏色 (border-color)
    • 列表的項目符號
    • hr 的顏色 (需設定 border-color:inherit; 且 IE 不支援)
  2. border 有下面幾種方式的簡寫
    • 邊框的粗細:border-width:5px 10px 15px 20px;
    • 邊框的樣式:border-style: solid dashed dotted double;
    • 邊框的色彩:border-color: red blue yellow green;
  3. word-wrap 自動折行:
    在處理連續無空格的英數字串時 (例如一個很長的網址),基於排版的需要,有時我們會希望把這個字串限制在一個固定大小的寬度中,這時我們就可以透過設定該容器的 word-wrap: break-word; 來達到這樣的效果。下面是範例:

    CSS:

    p.example{width:200px; border:#ccc 1px solid; padding:15px; word-wrap:break-word;}

    HTML:

    <p class="example">http://www.tt5.org/wordpress/css/example/word-wrap/</p>

    效果:

    http://www.tt5.org/wordpress/css/example/word-wrap/

  4. white-space 處理空白字元:
    空白/連續空白 Tab/連續 Tab 換行/連續換行
    normal 皆保留一個空白 皆替換一個空白 皆替換一個空白
    nowrap 皆保留一個空白 皆替換一個空白 皆替換一個空白
    pre 全部保留 全部保留 全部保留
    pre-wrap 全部保留 全部保留 全部保留
    pre-line 皆保留一個空白 皆替換一個空白 全部保留
    • 簡單的來說,normal 和 nowrap 都會把所有的格式轉換成一個空白,不論是空白、連續空白、Tab、連續 Tab、換行及連續換行皆轉換成一個空白,差異只在於 normal 支援自動換行,nowrap 則強制不可換行。
    • per 和 pre-wrap 則完整保留所有格式,pre-wrap 多了自動換行。
    • pre-line 則保留換行格式,且支援自動換行,其餘皆轉換成一個空白
  5. base 標籤:

    base 標籤放置在 head 標籤裡,可以設定的屬性有兩個,一個是 href,一個是 target,我比較常用的是 target,只要設定一次,整個網站的連結就可以直接套用,讓 HTML 的檔案看起更加精簡。

封面照片:

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料