一旦您開始涉足HTML，您可能會對為web頁面添加更多功能感興趣。CSS是最好的方法。CSS允許您在整個頁面上應用更改，而不依賴於內聯樣式。

下面是幾個簡單的CSS示例，向您展示如何在web頁面上進行一些基本的樣式更改。

1簡單段落格式的基本css代碼

使用CSS設置樣式意味著您不必每次創建元素時都指定樣式。你可以說“所有段落都應該有這種特殊的樣式”，你就可以開始了。

假設您希望每個段落（，每個人都應該知道的HTML標記之一）都比平時稍大一些。而深灰色的文本，而不是黑色。此項的CSS代碼為：

p { font-size: 120%; color: dimgray;}

很簡單！現在，每當瀏覽器呈現段落時，文本將繼承大小（正常值的120%）和顏色（“dimgray”）。

如果你想知道哪些純文本顏色可以使用，請查看Mozilla的CSS顏色列表。

2更改字母大小寫

想為應該用小號大寫的段落創建一個名稱嗎？一個CSS示例是：

p.**allcaps { font-variant: **all-caps;}

為了**一個完全用小標題的段落，我們將使用稍微不同的HTML標記。這是它看起來的樣子：

<p class="**allcaps">Your paragraph here.</p>

向元素添加點和類名指定由類定義的元素的子類型。你可以用文本、圖片、鏈接和其他任何東西來實現這一點。

如果要將一組文本的大小寫更改為特定大小寫，請使用以下CSS示例：

text-transform: uppercase;text-transform: lowercase;text-transform: capitalize;

最後一個大寫每個句子的第一個字母。

三。更改鏈接顏色

風格的改變並不侷限於段落。一個鏈接可以指定四種不同的顏色：標準顏色、訪問過的顏色、懸停顏色和活動顏色（單擊時顯示）。以下是這些的CSS代碼：

a:link {color: gray;}a:visited {color: green;}a:hover {color: purple;}a:active {color: teal;}

對於鏈接，每個“a”後面都跟一個冒號，而不是一個點。

這些聲明中的每一個都會更改特定上下文中鏈接的顏色。無需更改鏈接的類即可使其更改顏色。

4刪除鏈接下劃線

帶下劃線的文本清楚地表示鏈接，但有時刪除下劃線看起來更為合適。這是通過“文本裝飾”屬性完成的。此CSS示例演示如何刪除鏈接上的下劃線：

a {text-decoration: none;}

任何帶有鏈接（“a”）標記的內容都將保持無下劃線。當用戶懸停在上面時，是否要在其上加下劃線？只需添加：

a:hover {text-decoration: underline;}

您還可以將此文本裝飾添加到活動鏈接中，以確保單擊鏈接時下劃線不會消失。

5用css代碼**一個鏈接按鈕

想吸引更多的注意力到你的鏈接？鏈接按鈕是一個很好的方法來進行它。這一條需要更多的行，但我們將分別檢查它們：

a:link, a:visited, a:hover, a:active {background-color: green;color: white;padding: 10px 25px;text-align: center;text-decoration: none;display: inline-block;}

包括所有四個鏈接狀態可以確保當用戶懸停或單擊按鈕時按鈕不會消失。您還可以為懸停和活動鏈接設置不同的參數，例如更改按鈕或文本顏色。

使用背景色設置背景色，使用顏色設置文本顏色。Padding定義框的大小---文本在垂直方向上填充10px，在水平方向上填充25px。

文本對齊確保文本顯示在按鈕的中心，而不是關閉到一側。正如我們在上一個示例中所看到的，文本裝飾會刪除下劃線。

CSS代碼“display:inline block”要複雜一些。簡而言之，它允許您設置對象的高度和寬度。它還可以確保在**新行時開始一個新行。

6創建文本框

一個簡單的段落不是很令人興奮。如果要突出顯示頁面上的某個元素，可能需要添加邊框。下面是如何使用一組CSS代碼來實現這一點：

p.important {border-style: solid;border-width: 5px;border-color: purple;}

這個很簡單。它在任何重要的類段落周圍創建一個5像素寬的純紫色邊框。要使段落繼承這些屬性，只需如下聲明：

<p class="important">Your important paragraph here.</p>

不管段落有多大，這都會起作用。

您可以應用許多不同的邊框樣式；請嘗試“點”或“雙”而不是“實心”。同時，寬度可以是“細”、“中”或“厚”。CSS代碼甚至可以單獨定義每個邊框的厚度，如下所示：

border-width: 5px 8px 3px 9px;

結果是上邊框為5個像素，右邊框為8個像素，下邊框為3個像素，左邊框為9個像素。

7居中對齊元素

對於一個非常常見的任務，用CSS代碼將元素居中是非常不直觀的。一旦你做了幾次，它就會變得容易得多。你有幾種不同的方法來集中注意力。

對於塊元素（通常是圖像），請使用margin屬性：

.center {display: block;margin: auto;}

這樣可以確保元素顯示為塊，並且自動設置每側的邊距。如果要將給定頁面上的所有圖像居中，甚至可以在img標記中添加“margin:auto”：

img {margin: auto;}

要了解它為什麼這樣工作，請查看W3C的cs**ox模型解釋。

但是如果我們想用CSS將文本居中呢？使用以下示例CSS：

.centertext {text-align: center;}

要使用“centertext”類將文本置於段落中心嗎？只需將該類添加到標記中：

<p class="centertext">This text will be centered.</p>

8調整填充的css示例

元素的填充指定每邊應該有多少空間。例如，如果在圖像底部添加25個像素的填充，則以下文本將向下按25個像素。許多元素可以有填充，而不僅僅是圖像。

假設您希望每個圖像的左右兩側各有20個像素的填充，頂部和底部各有40個像素。最基本的執行是：

img {padding-top: 40px;padding-right: 25px;padding-bottom: 40px;padding-left: 25px;}

我們可以使用簡寫CSS代碼在一行中顯示所有這些信息：

img {padding: 40px 25px 40px 25px;}

這會將頂部、右側、底部和左側填充設置為正確的數字。由於只使用了兩個值（40和25），我們可以使其更短：

img {padding: 40px 25px}

當您只使用兩個值時，第一個值將設置為“頂部”和“底部”，而第二個值將設置為“左側”和“右側”。

9突出顯示錶行

CSS代碼使表看起來比默認網格好得多。添加顏色、調整邊框以及使您的表格對移動屏幕作出響應都是很容易的。我們將只看一個很酷的效果：當你鼠標移到它們上面時，突出錶行。

以下是您需要的代碼：

tr:hover {background-color: #ddd;}

現在，每當你鼠標在表格單元格上時，該行將改變顏色。要查看其他一些您可以做的酷的事情，請查看在花哨的CSS表上的W3C頁面。

10在透明和不透明之間切換圖像

CSS代碼也可以幫助你用圖像做一些很酷的事情。下面是一個CSS示例，用於顯示不完全不透明的圖像，因此它們看起來稍微“變白”。當您將鼠標移到圖像上時，它們將變為完全不透明度：

img {opacity: 0.5;filter: alpha(opacity=50);}

“filter”屬性的作用與“opacity”相同，但是internetexplorer8和更早版本不能識別不透明度度量。對於較舊的瀏覽器，最好將其包含在內。

現在圖像稍微透明瞭，我們將在鼠標上使其完全不透明：

img:hover {opacity: 1.0;filter: alpha(opacity=100);}

10個css示例，帶有源代碼

通過這些CSS代碼示例，您應該對CSS的工作原理有了更好的瞭解。CSS模板可以提供幫助，但是理解原始元素是至關重要的。

我們查看了10個簡單的CSS代碼示例：

1. 輕鬆設置段落格式
2. 更改字母大小寫
3. 更改鏈接顏色
4. 刪除鏈接下劃線
5. **鏈接buuton
6. 創建文本框
7. 居中對齊元素
8. 調整襯墊
9. 突出顯示錶行
10. 使圖像不透明

再次回顧它們，您將注意到可以應用於未來代碼的幾種模式。你知道自己已經開始成為一個CSS大師了。但記住這可能很難。您可能希望將此頁面添加書籤以供將來參考。您還應該學習如何檢查、清理和優化CSS。

要快速記住您在這裡學到的一些東西，請務必查看我們的CSS3屬性備忘單。