HTML+CSS學習筆記（五）

一、CSS樣式初步

       從今天開始我開始學習另一個大塊——CSS。CSS是英語Cascading
Style Sheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或 XML 等檔案式樣的電腦語言。通俗點講CSS就是把網頁中內容的格式分離出來，這樣有益於網站的修改與維護。

1.一個簡單的CSS樣式

h1 {    color: red;    text-align: center;}a {    color: green;    text-align: right;}p {    color: blue;}

      這些代碼看著很熟悉，沒錯，這些代碼就相當於把HTML中的屬性等給提出來集中到一起。h1{}設定大標題的樣式；a{}設定連結的樣式；p{}設定段落的樣式。

這段代碼可以放在html代碼裡，這需要使用<style></style>標籤，也可以放在單獨的檔案中，即CSS檔案中，這就是外部樣式表。

2.布局屬性

布局屬性包括影響網頁中元素位置的屬性。比如，布局屬性可以控制內容的寬度、高度、邊距、填充和對齊，甚至可以控制內容在網頁中的準確位置。

①display
 block：另起新行顯示
 list-item：另起新行顯示，前面有列標記元素（這個目前我用好像沒有標記）

 inline：緊接著前面內容顯示

 none：隱藏且不佔用空間②width和height
控制元素矩形地區的大小，單位用像素、厘米都行，盡量統一。

③margin
控制元素矩形地區以外的大小，比如margin-left=10px，將設定左邊距為10個像素

3.格式化屬性

格式化屬性用於控制網頁內容的外觀，比如外邊框，字型等等

①border
border-width;border-color;border-style;border-left;這些不用解釋一看就懂。

②font
這裡不再詳細說，只強調一下，font-family指的是字型；font-style指的是斜體字的使用，

另外，可以使用text-indent控制首行縮排量，可以使用2em表示縮排兩個中文或四個英文字元。

 

二、樣式類

樣式類就是將同一種類型的內容設定成不同的格式。比如說，設定兩個h1，一個字型用紅色，一個字型用藍色，使用一個h1樣式是沒法實現的。

這樣我們可以使用樣式類實現，只需要在原樣式後面加個“.”和類名就行，然後使用時添加class=“樣式類名”，如下：

h1.red {color:red;}

 h1.blue {color:blue;}

<h1 class="red">這裡是紅字標題</h1>

<h1 class="blue">這裡是藍字標題</h1>

◇通用類

可以設定不同類型的內容樣式相同，去掉類型只保留點和類名，那用到就可以用

.bold {font-weight:bold}

 <h1 class="bold">標題<h1>

<h3
class="bold">標題<h3>

◇一次設定相同樣式，使用逗號分隔h1.text,p.text
{color:red;}

 

三、格式化文本進階技巧

1.使用小型大寫字母：font-variant:samll-caps

 2.增加字母間距：letter-spacing:5px

3.增加單詞間距：word-spacing:5px

4.大小寫轉換：text-transform:uppercase(大寫)，lowercase(小寫)，capitalize(首字母大寫)

 

四、修改連結的外觀連結

一般預設的會設定為藍色底線文本，開啟連結後變為紫色。

設定串連的樣式使用偽類，要使用冒號（:）,而不是點，使用時不用加class=""CSS包含根據連結狀態修改連結外觀的機制，

連結包括link（連結未訪問）、hover（指向連結）、active（單擊連結）、visited（訪問過的連結）四種狀態。

比如我可以設定滑鼠指向連結時的樣式

a:hover { font-weight:bold;color}

五、代碼注釋

/* 注釋 */

練習結果點擊開啟連結
______________________________________________________