day 03

知識回顧

1、點選文字"跳轉到百度"後，在瀏覽器新視窗中出現百度頁面（網址為https://www.baidu.com），如何實現？

<a href="https://www.baidu.com" target="_blank">跳轉到百度</a>

2、在當前頁面中如何實現錨點連結？

• 定義錨點

<div id="box"></div>

• 使用錨點

<a href="#box"></a>

3、無序列表標籤的語法是什麼？

<ul>
    <li>列表項1</li>
    <li>列表項1</li>
    <li>列表項1</li>
    <li>列表項1</li>
</ul>

4、如何去掉無序列表與有序列表的列表符

list-style:none;

5、表格的作用是什麼

展示資料

6、表格常用的標籤屬性有哪些？

width、height、cellpadding、cellspacing、border

7、如何跨行跨列合併單元格？

rowspan 跨行

colspan 跨列

8、請簡述thead、tbody和tfoot的作用

thead、tbody和tfoot是為了使表格的結構更加清晰

thead標籤是用來定義表格的表頭（頁首）

tbody標籤是用來定義表格的主要內容（正文）

tfoot標籤是用來定義表格的底部（頁尾）

9、簡述語義化及好處

語義化是指使用合理的html標籤和屬性來呈現頁面的結構

好處四條

10、css的三種引入方式是什麼?

行內樣式、內部樣式、外部樣式

一、基礎選擇器

選擇器：找物件，將想要的元素挑選出來

選擇器是分為基礎選擇器和複合選擇器的

1、萬用字元選擇器

將頁面中所有元素都挑選出來

語法：

*{
    屬性1：屬性值1;
    屬性2:屬性值2;
    ......
}

例如：

<style>
    *{
        background-color: red;
    }
</style>
 

以上程式碼將頁面中的所有元素都選擇出來，並且添加了背景顏色為紅色

注意：

萬用字元選擇器會將頁面中所有元素匹配出來，因此會降低頁面的響應速度，不建議隨便使用

去掉頁面中所有元素自帶間距時可以使用萬用字元選擇器

*{
    padding:0;
    margin:0;
}

2、標籤選擇器

也叫做元素名稱選擇器、型別選擇器

標籤選擇器是將頁面中具有指定標籤名稱的元素挑選出來

語法：

標籤名稱{
    屬性1：屬性值1;
    屬性2:屬性值2;
    ......
}

例如：

<style>
    div {
        width: 300px;
        height: 200px;
        background-color: red;

    }
</style>

以上程式碼是將頁面中所有的div標籤都選擇出來了，並且添加了寬度300畫素，寬度200畫素，背景顏色為紅色的樣式

適用於多個標籤擁有相同樣式時使用，但是不能設計差異化

3、class選擇器

也叫做類選擇器

將頁面中所有具有指定類名的元素挑選出來

語法：

• HTML 需要給標籤新增class屬性

<標籤名 class="類名"></標籤名>

• CSS 以點（.）為標識

.類名{
    屬性1：屬性值1;
    屬性2:屬性值2;
    ......
}

例如：

<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
</style>

以上程式碼，是將頁面中類名為box的元素選擇出來了，並且添加了寬高各300畫素，背景顏色為黃色的樣式

注意：

class可以使用多次

class可以設定詞列表：可以給一個元素起多個類名

<div class="box colorRed">div2</div>

<style>
    .box {
        width: 300px;
        height: 300px;
        background-color: yellow;
    }
    .colorRed {
        color: red;
    }
</style>

4、id選擇器

將頁面中具有指定id名稱的元素挑選出來

語法：

• HTML 給標籤新增id屬性

<標籤名 id="id名稱"></標籤名>

• CSS 以井號（#）作為標識

#id名稱{
    屬性1：屬性值1;
    屬性2:屬性值2;
    ......
}

注意：

id具有唯一性，同一個頁面中不能出現重複的id名稱

id不能使用詞列表

class和id的命名規範：

• 區分大小寫
• 不要以數字開頭
• 不要包含除中劃線（-）和下劃線（_）以外的其他字元
• 見名知意

5、基礎選擇器的優先順序

id選擇器 100

class選擇器 10

標籤選擇器 1

萬用字元選擇器 0

權值越大，基礎選擇器的優先順序越高

二、文字屬性

1、font-family屬性

設定文字的字型型別

font-family:"微軟雅黑";

• 常見的字型型別：宋體、隸書、微軟雅黑、Arial...

• 字型型別可以設定多個，多個字型之間用逗號（英文狀態）隔開，多個字型會當做"回退系統"來進行處理，匹配第一個字型是否支援，如果支援將使用第一個字型，如果不支援則回去匹配第二個，依次類推...

• 實際專案中建議大家使用系統自帶的字型

• 中文字型必須要加引號，英文字型可以不加（如果英文字型中包含特殊字元就需要加引號）

• 如果多個字型中有中文字型，也有英文字型時建議把英文字型放在前面，中文字型放在後面

2、font-size屬性

設定文字的大小

font-size:20px;

• 瀏覽器預設的字號是16畫素的
• 實際專案中，建議字號設定為偶數，因為低版本瀏覽器中奇數的字號有bug

3、font-style屬性

設定文字的風格

font-style: normal | italic;

• normal 正常
• italic 傾斜

4、font-weight屬性

設定文字的粗細

font-weight:normal | bold | lighter | bolder;

• normal 正常（400）
• bold 加粗（700）
• lighter 更細（100-300）
• bolder 更粗（900）

5、line-height屬性

設定文字的行高

line-height:length | number | normal;

基線：小寫字母x最底端的那根線

行高是指基線與基線之間的距離就是行高

行高的測量需要注意從第一行文字的文字底端到第二行文字的頂端進行測量，文字上間距（量出的距離/2）+字號+文字的下間距就等於行高

注意：

• 行高撐不起盒高

• 如果line=height:2代表的是當前元素的font-size乘以2得到的結果就是行高的值

應用：

實現單行文字在盒子中的垂直居中 設定行高等於盒子的高度

6、font簡寫

font: [font-style] [font-weight] font-size[/line-height] font-family;

font-size和font-family設定時，font簡寫屬性生效

三、文字屬性

1、text-align屬性

設定文字的水平對齊方式

text-align:left | right | center | justify;

• left 左對齊（預設值）
• right 右對齊
• center 居中對齊
• justify 兩端對齊

2、text-indent屬性

設定文字的首行縮排的

text-indent: px | em;

如果需要設定首行縮排兩個字元，使用以下程式碼：

text-indent:2em;

3、text-decoration屬性

設定文字裝飾線

text-decoration：none | underline | overline | line-through;

• none 沒有
• underline 下劃線
• overline 上劃線
• line-through 中劃線

4、color屬性

設定文字的顏色

四、css長度單位

1、px

絕對長度單位

2、em

相對長度單位，相對於當前元素的font-size來進行計算

但是在設定font-size時，em是相對於父元素的font-size來進行計算的

假如父元素的font-size為20畫素，子元素設定font-size:2em，代表的含義是子元素現在的字號是40畫素

3、%

相對長度單位，相對於父元素來計算的

4、rem

相對長度單位，相對於根元素html的font-size來進行計算的

五、css顏色表示

1、顏色關鍵詞

紅色-----red 黃色-----yellow 白色-----white 黑色-----black

2、十六進位制顏色表示法 #rrggbb

r-red g-green b-blue

十六進位制 逢十六進一 0-9 a-f

常用顏色：

• 白色------#ffffff
• 黑色------#000000
• 紅色-------#ff0000
• 綠色-------#00ff00
• 藍色-------#0000ff

簡寫：

• ffffff ----- #fff

• ff0000-----#f00

3、rgb()表示法 rgb(r,g,b)

r-red g-green b-blue

取值範圍0-255

常用顏色：

• 白色------rgb(255,255,255)
• 紅色------rgb(255,0,0)

4、rgba()表示法

rgba(r,g,b,alpha引數)

alpha引數取值是在0-1之間，0表示完全透明，1表示完全不透明，0-1之間表示半透明效果

六、盒模型

所有元素都可以看做一個盒子，具有盒模型，盒模型包含：內容（content）、內填充（padding）、邊框（border）、外邊距（margin）。

盒模型也叫做框模型

盒模型的計算

1、內容區域相關屬性

（1）width屬性

設定元素的寬度

• px 絕對長度單位
• % 根據父元素的寬度進行計算
• auto 瀏覽器自己計算寬度

（2）height屬性

設定元素的高度

• px 絕對長度單位
• % 根據父元素的高度進行計算
• auto 瀏覽器自己計算高度

（3）max-width、min-width屬性

max-width屬性是用來設定最大寬度

min-width屬性是用來設定最小寬度

（4）max-height、min-height屬性

max-height屬性是用來設定最大高度

min-height屬性是用來設定最小高度

2、內填充屬性

（1）單邊內填充設定

• padding-left 左邊的內填充
• padding-right 右邊的內填充
• padding-top 上邊的內填充
• padding-bottom 下邊的內填充

（2）複合寫法

padding:一個值 | 兩個值 | 三個值 | 四個值;

/* 複合寫法 */
/* 一個值：上下左右的內填充都是50畫素 */
/* padding: 50px; */
/* 兩個值 : 上下的內填充是50畫素，左右的內填充是30畫素 */
/* padding: 50px 30px; */
/* 三個值 : 上內填充是100畫素，左右內填充是50畫素，下內填充是30畫素 */
/* padding: 100px 50px 30px; */
/* 四個值:上內填充是100畫素，右內填充是80畫素，下內填充是60畫素，左內填充是40畫素 */
padding: 100px 80px 60px 40px;

（3）注意

如果設定了width和height屬性時，再設定padding會撐開盒子