CSS權威指南學習筆記系列(1)CSS和文檔

時間 2019-12-07

標籤 css 權威指南學習筆記系列文檔欄目 CSS 简体版

原文原文鏈接

題外話：
HTML是一種結構化語言，而CSS是它的補充；這是一種樣式語言。CSS是前端三板斧之一，所以學習CSS很重要。而我仍是菜鳥，因此須要增強學習CSS。這個是我學習CSS權威指南的筆記，若有不對，請諒解和指出。謝謝你們。
正文：css

第一章 CSS和文檔

1.CSS，稱爲層疊樣式表。使用CSS的理由有：a.易於使用，樣式表能大大減小Web創做人員的工做量；b.在多個頁面上使用樣式，能夠建立一個樣式表，而後把這個樣式表應用到多個頁面；c.層疊，CSS還規定了衝突規則；這些規則統稱層疊；d.縮減文件大小，它有助於儘量地縮減文檔大小，以便加快下載；e.爲未來準備。html

2.元素前端

元素是文檔結構的基礎，文檔中的每一個元素都對文檔的表現起必定做用。在CSS中，至少在CSS2.1中，這意味着每一個元素生成一個框(box，也稱爲盒。通俗的說，就是包裝盒)，其中包含元素的內容。瀏覽器

3.替換和非替換元素學習

在CSS中，元素一般有兩個形式：替換和非替換。this

替換元素（replaced element）：指用來替換元素的內容部分並不是由文檔內容直接表示，(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素每每沒有實際的內容，便是一個空元素，例如： <img src=」howdy.jpg」 /> <input type="submit" name="submit" value="提交" />瀏覽器會根據元素的標籤類型和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。url

非替換元素（noreplaced element）：大多數HTML和XHTML元素都是替換元素，這意味着，其內容由瀏覽器在元素自己生成的框中顯示。例如，<span>hi this is noreplaced element</span>就是個非替換元素，文本「hi this is noreplaced element」將由瀏覽器顯示。段落p、標題<h1>到<h6>、表單元格<table></table>和列表<ul><ol>和XHTML的幾乎全部元素是非替換元素。spa

4.元素顯示角色code

CSS2.1還使用另外兩種基本元素類型：塊級（block-level）元素和行內（inline-level）元素。
塊級元素
塊級元素生成一個元素框（默認地）它會填充其父元素的內容區，旁邊不能有其餘元素。換句話說就是它在元素框以前和以後生成了「分隔符」。最爲熟悉應該是p和div。
替換元素能夠是塊級元素，不過一般都不是。而列表項是塊級元素的特例。除了表現方式與其餘塊元素一致，列表項還會生成一個標記符——無序列表中這一般是個圓點，有序列表中則是一個數字。這個標記符會「關聯」到元素框。除此以外，列表項與其餘塊級元素相同。
行內元素
行內元素在一個文本行內生成元素框，而不會打斷這行文本。行內元素不會在它自己以前或以後生成「分隔符」，因此能夠出如今另外一個元素的內容中，而不會破壞其顯示。例如a元素、strong元素和em元素。
在HTML和XHTML中，塊級元素不能繼承行內元素（即不能嵌套在行內元素），可是在CSS中，對於顯示角色如何嵌套不存在任何限制。要了解這是如何工做的，下面來考慮一個CSS屬性display。display有不少值，目前只關注block和inline。考慮下面標記：htm

<body>
<p>This is a paragraph with <em>an inline element</em>within it.</p>
</body>

這有2個塊級元素（body和p）和一個行內元素（em）。按照XHTML規範，em能夠繼承p，可是反過來就不行。通常地，XHTML層次結構要求：行內元素能夠繼承塊級元素，而反之不容許。與此不一樣，CSS就沒有這種限制。以下：

p{display:inline;}
em{display:block;}

這會使元素在一個行內框中生成一個塊框，這是徹底合法的。不違反任何規範。惟一問題是若是試圖以下反轉元素的嵌套關係：<em><p>boom</p></em>不論經過CSS對顯示角色作什麼改變，在XHTML中都是不合法。

5.link標記

link標記基本目的是容許HTML創做人員將包含link標記的文檔與其餘文檔相關聯。CSS使用這個標記來連接樣式表和文檔。若有一個sheet1.css的樣式表要連接到HTML文件：

<link rel="stylesheet" type="text/css" href="sheet1.css">。

這個樣式表並非HTML文檔的一部分，可是仍會由HTML文檔使用，這稱爲外部樣式表（external style sheet），爲了成功地加載一個外部樣式表，link必須放在head元素中，但不能放在其餘元素內部（如title）。

對於link標記的餘下部分，其屬性和值都很直接明瞭，rel表明「關係（relation）」，在這裏，關係爲stylesheet。type老是設置爲tex/css。這個值描述了使用link標記加載的數據的類型。href屬性的值表示樣式表的URL。能夠是絕對URL和相對URL。

media屬性，這裏使用的值爲all,說明這個樣式表要應用於全部表現的媒體。CSS2爲這個屬性定義不少可取值。all:用於全部表現媒體。aural：用於語音合成器、屏幕閱讀器和文檔的其餘聲音表現。braille：用於Braille設備表現文檔使用。還有其餘值不一一說明。3個比較主要的是all、screen和print。
注意一個文檔可能關聯有多個連接樣式表。若是是這樣，文檔最初顯示時只會使用rel爲stylesheet的link標記。所以，若是但願連接名爲basic.css和splach.css的兩個樣式表，能夠以下設置

<link rel="stylesheet" type="text/css href="basic.css/> 
 <link rel="stylesheet" type="text/css href="splash.css/>

候選樣式表——將rel設置爲alternate stylesheet，就能夠定義候選樣式表，只有在用戶選擇這個樣式纔會用於文檔表現。

6.@import指命

與link標記相似，@import指命用於指示瀏覽器加載一個外部樣式表，並在表現HTML文檔時使用其樣式。惟一區別在於命令的具體語法和位置。@import命令必須放在style容器中。要放在其餘CSS規則以前，不然將根本不起做用。

<style type="text/css">
    @import url(styles.css);
    h1{color:gray;}
</style>

7.CSS註釋

CSS支持註釋。與C與C++註釋很是類似，CSS註釋也用/和/包圍：/*this is a css1 comment*/,也能夠跨多行

/* this is boom
    can be sw
    any
*/

注意不能嵌套。

8.內聯樣式：只想一想爲單個元素指定一些樣式，而不須要嵌套和外部樣式表，就可使用HTML的style屬性來設置一個內聯樣式。

<p style="color:gray">the most wonderful</p>

除了在body外部出現的標記（例如，head或title），style屬性能夠與任何其餘HTML標記關聯。

更多細節請看《CSS權威指南》

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。