初學CSS,這些內容你都知道了嗎？

• CSS介紹
• 引入css樣式表方法
• CSS選擇器
• CSS常用屬性

CSS介紹：

• CSS全稱是（Cascading Style Sheet）層疊樣式表；
• 層疊：層疊就是對一個元素多次設置同一個樣式

特點：

1）豐富的樣式定義

• CSS提供了豐富的文檔樣式外觀，以及設置文本和背景屬性的能力；
• 允許為任何元素創建邊框，以及元素邊框與其他元素間的距離，以及元素邊框與元素內容間的距離；
• 允許隨意改變文本的大小寫方式、修飾方式以及其他頁面效果。

2）易於使用和修改

• CSS可以將樣式定義在HTML元素的style屬性中
• 可以將其定義在HTML文檔的header部分
• 可以將樣式聲明在一個專門的CSS文件中，將所有的樣式聲明統一存放，進行統一管理。

3）多頁面應用

• CSS樣式表可以單獨存放在一個CSS文件中，這樣我們就可以在多個頁面中使用同一個CSS樣式表。

4）頁面壓縮：

• CSS樣式表的復用更大程序的縮減了頁面的體積，減少下載的時間。

引入css樣式表方法：

1）行內樣式

• 直接使用標記的style屬性

style=" width:100px; height:100px; background-color:#F00;」
複製代碼

2）內嵌樣式

• 使用<style></style>標記，將樣式寫在<style>標記內
• <style>標記要指定type屬性為text/css

3）鏈接樣式(外鏈式)

• 將CSS寫入單獨的一個文件中，注意該文件的文件擴展名為 .css
• 在HTML文檔中使用標記引入css文件
• 標記需要指定兩個屬性：type和rel

例：

< link type=「text/css」 rel=「stylesheet」 href=「sy.css" />
複製代碼

CSS選擇器

1）通配符選擇器

• 選擇對象：所有標籤
• 語法：

* {
font-family: "宋體";
}
複製代碼

2）類型（標記）選擇器

• 選擇對象：使用標籤名做選擇符
• 語法：

p {
font-size: "8";
}
複製代碼

3）ID選擇器

• 選擇對象：對應id名的元素
• 語法：

＃idname {
…
}
複製代碼

4）類（class）選擇器

• 選擇對象：使用此類名的元素
• 語法：

.classname {
…
}
複製代碼

5）包含選擇器

• 選擇對象：被嵌套標籤包含的元素
• 語法：

選擇符a　選擇符b {
…
}
複製代碼

CSS常用屬性：

1）CSS字體與文本樣式

• font-family：設置文本的字體類型；
• font-size：設置文本的字體大小；
• font-style：設置文本的字體樣式；
• font-weight：規定字體的粗細；
• color： 設置文本的顏色
• letter-spacing：設置字元間距
• line-height：設置文本行高
• text-align：設置文本的對齊方式

2）CSS邊框和背景相關屬性

• border：設置所有邊框屬性；
• border-width：設置四條邊框的寬度；
• border-color： 設置四條邊框的顏色；
• background： 設置所有的背景屬性；
• background-color： 設置元素的背景顏色；
• background-image： 設置元素的背景圖像；

3）CSS列表和表格相關屬性

• list-style：在一個聲明中設置所有的列表屬性；
• list-style-image：將圖像設置為列表項標記；
• list-style-position： 設置列表項標記的放置位置；
• list-style-type： 設置列表項標記的類型；
• border-collapse：設置是否把表格邊框合併為單一的邊框；
• border-spacing：設置分隔單元格邊框的距離；
• caption-side：設置表格標題的位置，默認在上面；
• empty-cells：設置是否顯示錶格中的空單元格；

文章結尾分享給大家一些基礎的html，css面試題，喜歡這篇文章可以點贊加關注哦！還有更多html，css，JavaScript，Vue相關面試題，需要的戳這裡，免費分享。