HTML和CSS 入門系列（一）：超連接、選擇器、顏色、盒模式、DIV佈局、圖片

1、超連接

2、CSS選擇器

CSS的全稱叫作： Cascading Style Sheets 級聯樣式表的縮寫。

2.1 類型選擇器

2.2 派生選擇器

2.3 僞類選擇器

<style >

        a{
            text-decoration: none;
            color: black;
        }
        /*注意它們是有前後順序的，不然不起效果！！！*/
        
        /*未訪問的連接，和a{}相同而且同時存在時會覆蓋a{}*/
        a:link{
            color:darkblue;
        }
        /*鼠標移動到超連接上時*/
        a:hover{
            text-decoration: underline;
            color: darkred;
        }
        /*被選定的超連接*/
        a:active{
            text-decoration: underline;
            color: yellow;
        }
        /*已訪問的超連接*/
        a:visited{
            color: lightblue;
        }
    </style>

2.4 類選擇器

2.5 link標籤

是一個空標籤，所以只須要寫屬性便可

2.6

3、CSS顏色

4、CSS盒模式

塊級標籤： Block-level Tags

內聯標籤：Inline-level Tags

塊標籤之間的距離：

4.2 盒模式

若是都同樣：margin: 6px

計算盒子的尺寸：

總結：

5、DIV佈局

5.2 內容居中

1. text-align: center

   或

2. 固定寬度：width: 500px; margin: 30px auto 0 auto

6、圖片

圖片是如何加載的：

6.1 內容圖片

在Google瀏覽器中須要爲圖片定義高度和寬帶才能在圖片沒有加載成功的時候顯示alt描述文字。

6.2 佈局圖片

簡寫的形式比分開寫的性能更高，能簡寫儘可能簡寫。

6.3 用戶交互圖片

a標籤是內聯標籤，不能設置寬和高。
height: 28px; display:inline-block; 內聯塊標籤：可讓該標籤擁有內聯標籤同時能夠擁有獨立的寬和高。

line-height: 28px; 設置行高和圖片高度一致，是讓圖片和文字垂直居中的一個小技巧。

下一篇：HTML和CSS 入門系列（二）：文字、表單、表格、浮動、定位、框架佈局、SEO

參考教學視頻：HTML和CSS 6小時入門經典視頻教程