用戶:東東君/基礎CSS樣式

簡介

CSS是英語"Cascading Style Sheets"的縮寫，也稱作層疊樣式表、級聯樣式表等。

在瀏覽網頁時，你一定想過：這裏的顏色、那裏的形狀，它們都是如何產生，如何控制的；你所看到的這段文字，又是依據什麼規則顯示的等等...這一切，都來源於CSS。

CSS樣式是近代網頁樣式的根本，目前我們瀏覽的網頁，其中的樣式、排版、以及一部分的動畫效果都是由CSS定義的，由wikitext編寫出內容也不例外。

你可能已經發現了，在許多模版中提供的參數中，就有需要輸入CSS代碼的參數，原因在於CSS為我們提供了一系列便捷、靈活的樣式，藉此我們可以製作出各種各樣獨一無二的效果。

那麼，就開始學習CSS，為條目添加屬於它們的style=""吧。

前期準備

• 基礎的wikitext知識
• 基礎的HTML知識（不了解也可以）
• 一個代碼沙盒，你可以使用本頁面下的沙盒：User:東東君/基礎CSS樣式/沙盒 或公共沙盒：Help:沙盒 來進行測試，或者也可以在下欄輸入一個沙盒名，創建自己的沙盒。

注意：只需要輸入沙盒名即可，將自動在你的用戶頁下創建。

• 打開這個頁面，在「編輯工具」中找到「Syntax highlighte」代碼高亮工具並開啟，保存。

開始

CSS本身由選擇器、樣式等構成，這裏我們先來學習樣式。

其中，樣式按書寫位置可以劃分為三種：內聯樣式、style標籤樣式、以及css樣式文件。由於wiki系統的限制，我們不能使用style標籤樣式，所以這裏只介紹內聯和css文件樣式。

所謂內聯樣式，就是寫在HTML標籤中style屬性里的CSS代碼，它不需要選擇器，只作用於當前節點及其子節點（如果該樣式默認繼承的話）。

<div style=""></div>

css樣式文件，顧名思義，就是專門寫css樣式的文件，和內聯不同樣式不同的是，其中可以使用「選擇器」，來解決在許多相同元素需要添加相同樣式時重複書寫所造成的代碼冗餘問題，同時，還可以利用其實現一些有趣的交互功能。

規則總述

一段普通的包含CSS樣式的HTML代碼：

<span style="color:red; font-size:16px">萌娘百科，万物皆可萌！</span>

• 樣式和值之間使用:（半角冒號）隔開，樣式與樣式之間使用;（半角分號）隔開
• 後面的樣式優先級大於前面的樣式
• 子節點的樣式優先級大於父節點的樣式
• 忽略所有空格及換行
• CSS有較高的容錯性，錯誤的樣式或值將被忽略