首頁 > 開發者 > CSS

Lesson03_01 什麼是CSS和CSS的設定方式

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • 什麼是CSS
  • CSS的設定方式

第3講 CSS

  • 何為CSS
  • CSS的幾種設定方式
  • 樣式規則選取器
  • 樣式規則的注釋與有效範圍
  • 樣式屬性詳解

什麼是CSS和CSS的設定方式

作者:Loncer 更多學習資源盡在:wwww.loncer.cn
什麼是CSS

CSS即:Cascading Style Sheets這幾個英文單詞的縮寫,中文為:層疊樣式表.它除了可以輕鬆設定網頁元素的顯示位置和格式外,還能產生濾鏡,映像淡化,網頁淡入淡出的漸層效果.簡而言之.CSS就是要對網頁的顯示效果實現與Word一樣的排版控制.
例如下的代碼:
<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>
即設定了一個CSS樣式.

由上可知:一個HTML元素的style屬性可以指定多種樣式風格,每種樣式 風格的名稱和它的設定值之間用冒號來分開,每種樣式風格之間用分號來分開.各種"樣式風格名稱"被稱之為"CSS屬性",樣式風格的"設定值"被稱為"CSS屬性值".這種設定網頁元素的顯示效果的方式就是CSS.

CSS的設定方式

  • 內聯樣式表(inline style sheets)

直接設定HTML正方標籤的style屬性的方法稱為內聯樣式表。
例如：<body style="FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"> </body>
在使用內聯樣式表時HTML4.01標準建議使用者在網頁的<head></head>標籤之間增加一個<meta>標籤,
如下: <meta http-equiv="Content-Style-Type" content="text/css">
使用這種方法有兩點不足:
1、如果要將同樣的樣式風格設定到所有的段落上，則要對每一個<P>標籤進行重複的設定。
2、一個網頁可以在多種介質或媒體上輸出，使用內聯樣式表設定的樣式會在所有的媒體上輸出時都會起作用，而沒法為不同的媒體指定不同的樣式表。

  • 內建樣式表(Embedded style sheets)

<head>
<style type="text/css" media="screen,projection">
<!--
P{"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"}
-->
</style>
</head>
media說明這個樣式在什麼介質上顯示
<!-- -->是為了那些不支援CSS的瀏覽器而寫的

在<style><style>標籤對中定義的每條樣式規則的基本格式如下：
selector{property:value;property:value……}
selector:
當定義一條樣式規則時必須指定受這個樣式作用的網頁元素，在一條樣式規則中定義的網頁元素就是selector（選取器）,也就是選擇該樣式作用於網頁元素。
有三種樣式選取器：
  1. HTML標籤，如：P、BODY、A……
  2. CLASS
  3. ID

property:
指定那些將要被修改的樣式風格名稱，即：CSS屬性，如：color、font-size……
value:
賦給property的值，即CSS的屬性值。
如果要在不多個網頁中使用同一樣風格，則要在每一個網頁的HEAD中加入CSS定義，這就是內建樣式表的不足之處

  • 外部樣式表(Linked style sheets)

把內建樣式表中的<style></style>之間的樣式規則定義語句放在一個單獨的外部檔案中，這個外部檔案就是外部樣式表檔案，其副檔名這.css。一個外部樣式表檔案可以通過HTTP的<link>標籤串連到HTML文檔中。
例：

先建一個test.css檔案，代碼如下：
P{
"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋體;BACKGROUND-COLOR:gray;TEXT-DECORATION:underline"
}
再寫一個要使用該樣式表的檔案，設他倆在同一檔案夾下：
<head>
<link rel="StyleSheet" href="test.css" type="text/css" media="screen">
</head>
type和media是可選的,rel和href是必須的

使用外部樣式表，網頁製作者可以通過改變一個檔案就可以改變整個網路的外觀。大多數瀏覽器會將外部樣式表檔案儲存在緩衝區中，從而加快了網站的瀏覽速度。

  • 輸入樣式表(imported sytle sheets)

可以使用CSS的@import將一個CSS檔案輸入到另外一個CSS檔案中,被輸入的CSS樣式規則定義語句就成了輸入的CSS樣式規則定義語句的一部分。也可以用@inport將一個CSS檔案輸入到<style></style>標籤對中。被輸入的CSS樣式規則定義語句就成了<style></style>標籤對中的定義語句。
例：

<style type="text/css" media="screen"><br><br /> <!--<br><br /> @import url(http://………………);<br><br /> @import url(/XXXX……………);<br><br /> p{background:yellow;color:black}<br><br /> --><br><br /> </style><br>
註：所有的@import部分要放在前面

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
css ellipsis css oblique css scheduler css selectors css alarms skin css lynda css
相關文章
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

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

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

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More