自訂網站樣式(輸入從到的完整樣式表)

來源:互聯網
上載者:User
樣式表     樣式表是網頁設計的重要組件。由於得到 Microsoft Internet Explorer 4.0 和 Netscape Navigator 4.0 的認可,樣式表已經成為可用的排版和設計工具。這兩種瀏覽器都有限地(不完整)支援由 Cascading Style Sheet 1.0 制定的 World Wide Web Consortium. 標準。在設計時,樣式表可以使您完整地控制網頁上文字元素的表現,為您帶來幾乎與出版業的設計一樣的多靈活性。

本文向您介紹建立和使用樣式表的基本內容,以及跨瀏覽器安全色問題和樣式表在 Web 上的發展趨勢。假定您已掌握了基本的 HTML 知識。

基本內容

樣式表只是一個格式化命令的列表,它使您可以在簡單 HTML 命令(如 <FONT>標記)的基礎上控制網頁的外觀。樣式表的概念並非全新的,它們來自文文書處理器和排版軟體。頁面上的每個元素,從個別字元到整個頁面均可通過樣式表中包含的資訊來單獨定製格式。

在 Web 上,由於存在多種不同類型 瀏覽器,所以排版上有許多限制。並且每個瀏覽器僅有限地支援樣式表。用在 Web 上的樣式表被成為層疊樣式表 (CSS),其被 W3C 所認可的最新版本是 2.0。然而,象這裡寫的一樣,沒有瀏覽器 100% 地支援 CSS 1.0 和 2.0 版。本文將集中介紹 CSS 1.0 版 - 不用擔心它會被淘汰,因為 2.0 版完全向下與 1.0 版相容。

您可以建立的最簡單的樣式表被稱作"內建樣式表"。它可以直接被放置或寫在到您要用的 HTML 文檔中,該網頁的結構如下所示:

<HTML>
<HEAD>
<TITLE>Style Sheets Demo</TITLE>
<STYLE type="text/css" media="screen">
<!-- hide from legacy browsers
P {color: red;
     font: Arial, Helvetica, sans-serif}
A {color: blue;
     font: Comic Sans MS, sans-serif}
-->
</STYLE>
</HEAD>
<BODY>.....

現在您看到了樣式表的樣子,我們來解析它並為您解釋每個組件。

<STYLE type="text/css" media="screen">....</STYLE>


該標記包含了被調用的樣式表資訊,不奇怪, <STYLE>標記。 類似於大多數的 HTML 標籤,它也需要被"封閉",以正確實現功能(就是說,它必須以 </STYLE> 標記結束)。這個特殊的標記必須出現在 <HEAD>標記之間,以使其能夠被大多數的瀏覽器解析。在這個開放標記的聲明中,必須包含兩個屬性: 屬性告訴瀏覽器要使用的樣式表的格式 (在此例中,可用的類型是"text/css"),而 media屬性告訴瀏覽器顯示介質是顯示器(螢幕)還是列印頁面(印刷品);但對當前的瀏覽器來說,該值只代表"螢幕"。

我剛才添加的這兩個 <STYLE> 屬性未必是所有的瀏覽器都需要的。Microsoft Internet Explorer 對樣式表的解釋不是非常嚴格,可以忽略這些屬性。Netscape Navigator卻不可思議的對這些屬 性的要求非常嚴格。我還是加上它們 - 這畢竟是好的編碼方式。如果 W3C聲明這些屬性是必 須的,那就加上它們吧。唯一的方法是建議兩大公司 (Microsoft and Netscape)採取一致行動, 為我們這些網頁設計者制定統一的 CSS標準。

<!-- .... -->
下面是注釋行。它出現在 <STYLE> 標記行的下面,和 </STYLE>標記行的上邊。注釋不是必須的,但添加註釋是好的編碼習慣;理由是注釋行可以在使用者使用舊瀏覽器(兩大公司的 3.0、2.0 和 1.0 系列)查看網頁時,可以使樣式表資料不被顯示出來。舊瀏覽器會自動略過它們無法識別的標記,但由於在 <STYLE> 標記之間的內容是純文字,又未被任何標記括起來,所以舊瀏覽器就可能會將它們顯示出來。但如果在這些內容的前後加上注釋標記,就可以確保這些內容被那些瀏覽器略過。別忘了封閉您的註解區塊,否則整個頁面都將不顯示。

P {color: red; font: Arial, Helvetica, sans-serif}
最後我們來到 CSS 的核心 - 定義元素。通過下列方法定義每個元素:元素 {屬性: 值; 屬性: 值}。這裡的"元素"是您要重新指定樣式的 HTML 標籤;"屬性:值"是預定義的樣式表的外觀(以 CSS 規範設定)及相應的值。所有的"屬性:值"的組合必須用"{ }"括起來。屬性也可以通過冒號 [ : ] 帶一個值來描述,屬性-值的配對可以通過分號 [ ; ] 帶其它配對來描述。最後一個屬性-值的配對後不需帶 [ ; ],因為在該括弧中沒有其它的配對跟隨其後了。

這裡是一些定義特定元素樣式所例舉的屬性及其相應的值:

屬性 可接受的值 註解
font-size xx-large, x-large, large, small, x-smll, xx-small, Npx, Npc, Npt, Nmm, Ncm, Nin

N = 數字, px = 像素, pc = Picas, pt = 點, mm = 毫米, cm =厘米, in = 英寸。

這些值是絕對的,不管查看裝置如何,將按同樣大小準確顯示:Picas、點、毫米、厘米和英寸。其它值將根據查看裝置和字型比例相對顯示。

font-family cursive, fantasy, mono-space, sans-serif, serif, 字型組合名稱

字型樣式的描述 (cursive、fantasy 等等) 告訴瀏覽器選取與描述類型相匹配的預設字型 - 請記住,並非每個人都有您所擁有的字型。

如果您可以確定您網站的觀眾已安裝了所需的字型,那麼選取特定的字型是好辦法。例如,所有 Windows 系統的使用者都預設安裝了 Arial 字型,因此如果您的目標觀眾是 Windows 使用者,那麼將 Arial 設定為 font-family 就是安全的。

在解釋樣式表時,如果瀏覽器沒有檢測到指定的字型,那麼它將自動移到該列表的下一個字型(如上面的例子,每個字型用逗號分隔)。如果列出的字型均未被發現,那麼瀏覽器將使用預設字型。

color 顏色名, 十六進位顏色代碼 只有使用字型名可以被 W3C 指定的瀏覽器識別。但使用十六進位值也是個好習慣。
font-weight normal, bold 作用與 ...... 標記類似,但只用於樣式表。
font-style normal, italic 作用與 ...標記類似,只用於樣式表。
font 字型名 比 font-family 更明確。需要單獨字型的名稱,而不是一個字型組合。與 font-family 一樣,如果瀏覽器找不到該字型,就使用預設字型。

上面列出的屬性和值僅是整個集合的一小部分,但它們對您著手排版網頁已經足夠了,不用再只使用<FONT> 標記了。在您為某個元素定義了樣式之後,那麼在網頁上該元素的實體將採用指定的格式。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。