學習 XHTML 及 CSS: 基本概念
June 7, 2008
這是一篇給學習編寫 XHTML 及 CSS 的新手學習 XHTML 語言的編寫方法。學習 XHTML 代碼前，最好先看看一些範例，一步一步地改及測試，嘗試不同的編寫方法，就能掌握 XHTML 的編寫方法。
首先，我們看看 XHTML 代碼大概的模樣，將以下儲存為 index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>這是網頁標題</title> <meta name="author" content="作者" /> <meta name="description" content="網頁的描述" /> <meta name="keywords" content="一些關鍵字" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <style type="text/css" media="screen">@import url("style.css");</style> <style type="text/css" media="print">@import url("print.css");</style> </head> <body> </body> </html>
建立一個 style.css 的純文字檔案，儲存在與 index.html 同一個資料夾：
/* CSS Stylesheet Template Name: Author: E-mail: Website: Copyright (C) All rights reserved. */ /* CSS Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } /* ======[ 網頁整體設計 ] ====== */ body { line-height: 1; font:100%/1.25 Arial, Helvetica, sans-serif; } h1 { } h2 { } h3 { } h4 { } h5 { } p { } blockquote { } small { } strong { } img { } acronym, abbr { cursor:help; letter-spacing:1px; border-bottom:1px dashed; } /* ------ [ 連結 ] ------ */ a { } a:visited { } a:hover { } /* ------ [表單 ] ------ */ form { margin:0; padding:0; display:inline; } input, select, textarea { font:1em Arial, Helvetica, sans-serif; } textarea { width:100%; line-height:1.25; } label { cursor:pointer; } /* ------ [ 表格] ------ */ table { border:0; margin:0 0 1.25em 0; padding:0; } table tr td { padding:2px; } /* ======[ 網頁排版設計 ] ====== */ #wrap { } #header { } #nav { } #content { } #sidebar { } #footer { }
Pages: 第 1 頁 第 2 頁
Leave a Reply