CSS學習之一 CSS樣式引入方法

2024-07-11 08:26:29

字體：大中小

來源：轉載

供稿：網友

HTML中，我們通常使用link元素引入外部樣式表，link有以下幾個屬性：
1、rel，代表“關系”（relation），在這里，關系（即rel值）為“stylesheet”；
2、type，總是設置為“text/css”，描述了使用link加載的數據類型；
3、href，值為樣式表的URL，可以是相對的也可以是絕對的；
4、media，默認值是“all”，說明樣式表要運用于表現的媒體，還有其他取值：aural（用于語音合成器、屏幕閱讀器和文檔的其他聲音表現）、braille（用Braille設備表現文檔時使用）、embossed（用Braille設備打印時使用）、handheld（用于手持設備）、print（為視力正常的用戶打印文檔時使用，還會在顯示文檔的“打印預覽”時使用）、projection（用于投影儀）、screen（在屏幕媒體，如計算機顯示器中使用）、tty（在固定間距環境，如電傳打印機中顯示文檔時使用）、tv（在電視上顯示文檔時使用）。不過，各個瀏覽器對它們的支持情況可能不同。
5、title，不常用，但是當rel值為“alternate stylesheet”時，使用title屬性可以生成一個候選樣式表列表供用戶選擇。
當rel值為“alternate stylesheet”時，還可以提供候選樣式表，只有在用戶選擇這個樣式表時才用于文檔表現。代碼示例如下：

復制代碼

代碼如下:
<link rel="stylesheet" type="text/css" href="style1.css" media="screen,print" />
<link rel="alternate stylesheet" type="text/css" href="style2.css" media="screen,print" title="big" />
<link rel="alternate stylesheet" type="text/css" href="style3.css" media="screen,print" title="small" />

除此之外，我們還可以使用內部樣式表為頁面添加樣式：

復制代碼

代碼如下:
<style type="text/css">

</style>

經常看到很多朋友在<style>后面加入HTML注釋，然后再在里面寫樣式，終于知道原因如上。
還有一種方法，就是使用@import方法導入樣式表，只是要注意以下，擺放的位置，因為@import是css定義的引用樣式的方法，所以它應該放在<style>元素里面，而且，它前面不能夠有任何其他規則（當然，不包括其它的@import，因為一個<style>里可以放不止一個@import），否則，后面導入的樣式講失效，代碼示例：

復制代碼

代碼如下:
<style type="text/css">

</style>

上一篇：CSS學習之二選擇器

下一篇：CSS長度單位 px和pt的區別

發表評論

共有條評論