如何在 HTML 中應用 CSS基礎詳解

接下來用這個 index<code>.html</code> 将在下文講解中用到。

我們可以通過三種方式對 html 的内容作修飾。

第一種是直接引用外部檔案 (比如：<code>index.css</code>)。

第二種是在 html 檔案頭中嵌入 css 樣式。

第三種是直接寫入标簽中。

綜合起來，html 可以是這樣的 (選擇一種方法即可)。鑒于友善修改的緣故，通常選擇第一種方法。

修飾某一個或多個标簽、标簽内容有三種方式：直接通過标簽名修飾、通過唯一的 id 修飾、通過 class 修飾。首先，考慮修飾單一的标簽、id 和 class。

/* 内部元素以;分開，結尾可以不用; */

并列修飾(修飾多個)。

嵌套修飾(修飾子标簽)，下面兩者對于給出的 <code>demo.html</code> 具有相同效果。

對于嵌套的情況，可以是嵌套多層的、隔層的，并且可以标簽名、id、class 并用。

對要實作的效果都胸有成竹之後，更多的考慮在于如何組織css。這裡的組織指的是css的嵌套和分解，通過良好的組織達到較好的可讀性和可維護性。這可以通過學習其他架構來提高這種組織的能力，比如 bootstrap。通過學習bootstrap至少可以讓人發現兩個值得關注的地方：元素的共性和特性的分解；元素嵌套關系的組織。

另外，為了保持與html盡量分離，通常是用元素的 <code>class</code> 來修飾元素，其次是标簽名。<code>class</code> 裡面樣式的并列展現了樣式的“分解”。

css 中用 <code>/* */</code> 作為注釋标記

修飾語句通過分号隔開 <code>h2{font-size:100px;color:red;}</code>

檢視 html 内容的 css 修飾：在浏覽器中右鍵選擇檢查元素，可以實作檢視、修改、添加

firefox 提供了 3d 檢視效果來檢視 html 的層結構

由于浏覽器解析不同，需要考慮 css 樣式的相容性，為多個浏覽器适配

考慮 css 之間是否會存在沖突。比如，通過标簽設定為一種顔色，但是在另外的地方又通過 id 設定為另外一種顔色。這可能使得修飾達不到預期的效果。

css 樣式的精簡。通過适當的分解 css，通過并列嵌套等修飾内容，減少備援的 css。

css 一方面可以實作基本的對内容的修飾，也可以實作與使用者的互動響應。

一個标簽中的多個 class 通過空格來分開，比如 <code>&lt;div class="class1 class2&gt;&lt;/div&gt;"</code>。

子選擇器 <code>body &gt; div &gt; div &gt; blockquote{ margin-left: 30px; }</code>。

兄弟選擇器 <code>.post h1 + p:first-line{ font-variant: small-caps; }</code>, <code>.post h1 ~ p{...}</code>。

屬性選擇器 <code>div[class*="post"]{color: #eee;}</code>, <code>input[type="text"]{width=200px;}</code>。

僞元素 <code>ul li:first-child{...}</code>, <code>ul li:nth-child(2n+1){...}</code>, <code>.clearfix:after{clear:both;}</code>,<code>a:active{...}</code>, <code>p:first-letter{...}</code>, <code>.post &gt; p:first-of-type:first-line{...}</code>,<code>input:not([type="submit"]){...}</code>,

…。