??欲成完滿筑基，必須先成為凝氣十層大圓滿，否則天道筑基無望。筑基又分為分為凡道筑基、地脈筑基和天道筑基…唉…奈何文筆太爛編不下去了。不過夯實基礎，還是非常重要，本文可能對筑基以上的（基礎扎實的）大佬沒什么用，廢話不多說直接進入主題吧。更多請訪問：老陳筆記

CSS簡介

??CSS，指的是Cascading Style Sheet（層疊樣式表），是用來控制網頁外觀的一門技術。

CSS引入使用共有以下3種方式。

• 外部樣式表 語法：<link rel="stylesheet" type="text/css" href="文件路徑" />。

• 內部樣式表 語法：<style type="text/css">......</style>。

• 行內樣式表 語法：<div style="屬性:屬性值;">......</div>。

• tips：es6 新增@import方式，不過用得非常少，這里就不介紹了。

css 選擇器

1、id選擇器；id屬性具有唯一性，也就是說在一個頁面中相同的id只能出現一次。如果出現了多個相同的id，那么CSS或者JavaScript就無法識別這個id對應的是哪一個元素。

語法：<div id="idname"></div>。在style里面用#idname{屬性："屬性值"}控制id樣式。

2、class選擇器；class，顧名思義，就是“類”，它與C++、Java等編程語言中的“類”相似。我們可以為同一個頁面的相同元素或者不同元素設置相同的class，然后使得相同class的元素具有相同的CSS樣式。

語法：<div class="idname"></div>。在style里面用.idname{屬性："屬性值"}控制class樣式。

3、元素選擇器；元素選擇器通常也稱標簽選擇器。

語法： 在style里面用標簽名{屬性："屬性值"}控制標簽樣式。

4、后代選擇器；就是選擇元素內部中所有的某一種元素，包括子元素和其他后代元素（如“孫元素”）。

語法：<div class="father"><span></span><span></span></div>。在style里面用.father span{屬性："屬性值"}控制后代樣式。

5、子代選擇器；就是選擇元素內部中所有的某一種元素，只包括子元素。

語法：<div><span></span></div>。在style里面用.div>span{屬性："屬性值"}控制子代樣式。

6、群組選擇器；對于群組選擇器，兩個選擇器之間必須要用英文逗號（,）隔開，不然群組選擇器就無法生效。

語法：<div></div><span></span>。在style里面用.div,span{屬性："屬性值"}控制群組樣式。

7、偽類選擇器；

字體樣式

字體CSS屬性表

屬性說明

font-family	字體類型
font-size	字體大小
font-weight	字體粗細
font-style	字體風格
color	字體顏色
tips:除了字體顏色，其他字體屬性都是以“font”前綴開頭的。其中，font就是“字體”的意思。

• font-family可以指定多種字體。使用多個字體時，將按從左到右的順序排列，并且以英文逗號（,）隔開。如果我們不定義font-family，瀏覽器默認字體類型一般是“宋體”。

? 語法：

font-family: 字體1, 字體2, ... , 字體N;

• font-size屬性來定義字體大小。

? 語法：

font-size: 像素值;

??tips:font-size屬性取值有兩種：一種是“關鍵字”，如small、medium、large等；另外一種是“像素值”，如12px、16px、24px等。

• font-weight屬性來定義字體粗細。

?語法：

font-weight: 取值;

tips:font-weight屬性取值有兩種：一種是“100~900的數值”；另外一種是“關鍵字”。

其中，關鍵字

normal正常（默認值）

lighter	較細
bold	較粗
bolder	很粗

• font-style屬性來定義字體效果。

?語法：

font-style: 取值; font-style屬性取值

normal	正常（默認值）
italic	斜體
oblique	斜體

• color屬性來定義字體顏色。

?語法：

color: 顏色值;

tips:color屬性取值有兩種，一種是“關鍵字”；另外一種是“16進制RGB值”。除了這兩種，其實還有RGBA、HSL等。

文本樣式

?文本樣式屬性表

屬性說明

text-indent	首行縮進
text-align	水平對齊
text-decoration	文本修飾
text-transform	大小寫轉換
line-height	行高
letter-spacing	字母間距
word-spacing	詞間距

• text-indent屬性來定義p元素的首行縮進。（也可以用&nbsp;來實現首行縮進兩個字的空格,但是這種方式冗余代碼很多。）

?語法：

text-indent: 像素值;

• text-align屬性來控制文本在水平方向上的對齊方式。

?語法：

text-align: 取值;

text-align屬性取值

屬性值說明

left	左對齊（默認值）
center	居中對齊
right	右對齊

• text-decoration屬性來定義文本的修飾效果

?語法：

text-decoration: 取值;

?text-decoration屬性取值

屬性值說明

none	去除所有的劃線效果（默認值）
underline	下劃線
line-through	中劃線
overline	頂劃線

• text-transform屬性來將文本進行大小寫轉換。text-transform屬性是針對英文而言，因為中文不存在大小寫之分。

?語法：

none無轉換（默認值）

uppercase	轉換為大寫
lowercase	轉換為小寫
capitalize	只將每個英文單詞首字母轉換為大寫

• line-height屬性來控制一行文本的高度。

?語法：

line-height: 像素值;

• letter-spacing屬性來兩個字之間的距離。

?語法：

letter-spacing: 像素值;

• word-spacing屬性來定義兩個單詞之間的距離。

?語法：

word-spacing: 像素值;

邊框樣式

?邊框樣式屬性

屬性說明

border-width	邊框的寬度
border-style	邊框的外觀
border-color	邊框的顏色

• border-width屬性用于定義邊框的寬度，取值是一個像素值。
• border-style屬性用于定義邊框的外觀。

?border-style屬性取值

屬性值說明

none	無樣式
dashed	虛線
solid	實線

• border-color屬性用于定義邊框的顏色，取值可以是“關鍵字”或“16進制RGB值”。
  tips:一個元素的邊框可以設（上、下、左、右）；上邊框border-top、下邊框border-bottom、左邊框border-left、右邊框border-right。
  每個邊框還可以設獨立的樣式。

例子：

border-top-width: 1px; border-top-style: solid; border-top-color: red;

還可以簡寫為：border-top: 1px solid red;

列表樣式

?列表樣式屬性

屬性值說明

list-style-type	定義列表項符號
list-style-image	定義列表項圖片

1、對于列表，無論是有序列表還是無序列表，我們都是使用list-style-type屬性來定義列表項符號。

?語法：

list-style-type: 取值;

• list-style-type屬性是針對ol或者ul元素的，而不是li元素。

ol的list-style-type屬性取值

屬性值說明

decimal	阿拉伯數字：1、2、3…（默認值）
lower-roman	小寫羅馬數字：i、ii、iii…
upper-roman	大寫羅馬數字：I、II、III…
lower-alpha	小寫英文字母：a、b、c…
upper-alpha	大寫英文字母：A、B、C…
ul的list-style-type屬性取值

屬性值說明

disc	實心圓●（默認值）
circle	空心圓○
square	正方形■
2、去除列表項符號list-style-type: none;。
3、list-style-image屬性來定義列表項圖片，也就是使用圖片來代替列表項符號。

?語法：

list-style-image: url(圖片路徑);

表格樣式

?表格樣式屬性

屬性值說明

caption-side	表格標題位置
border-collapse	表格邊框合并
border-spacing	表格邊框間距

• caption-side屬性來定義表格標題的位置。

?語法：

caption-side: 取值;

?caption-side屬性取值

屬性值說明

top	標題在頂部（默認值）
bottom	標題在底部

• border-collapse屬性來去除單元格之間的空隙，也就是將兩條邊框合并為一條。

?語法：

border-collapse: 取值;

?border-collapse屬性取值

屬性值說明

separate	邊框分開，有空隙（默認值）
collapse	邊框合并，無空隙

?html例子：

<table><caption>表格標題</caption><!--表頭--><thead><tr><th>表頭單元格1</th><th>表頭單元格2</th></tr></thead><!--表身--><tbody><tr><td>表行單元格1</td><td>表行單元格2</td></tr><tr><td>表行單元格3</td><td>表行單元格4</td></tr></tbody><!--表腳--><tfoot><tr><td>表行單元格5</td><td>表行單元格6</td></tr></tfoot></table>

• border-spacing屬性來定義表格邊框間距。

?語法：

border-spacing: 像素值;

圖片樣式

?圖片樣式屬性

屬性值說明

width/height	寬/高
border	圖片邊框
text-align	圖片水平對齊方式
vertical-align	圖片垂直對齊方式

• width和height這兩個屬性來定義圖片的大小（也就是寬度和高度）。

?語法：

width: 像素值; height: 像素值;

• border 和上面的語法一樣，只不過這里是用來定義圖片的而已。

例子：

border: 1px solid red;

• text-align屬性來定義圖片水平對齊方式。

?語法：

text-align: 取值;

?text-align屬性取值

屬性值說明

left	左對齊（默認值）
center	居中對齊
right	右對齊

• vertical-align來定義圖片的垂直對齊方式。

?語法：

vertical-align: 取值;

?vertical-align屬性取值

屬性值說明

top	頂部對齊
middle	中部對齊
baseline	基線對齊
bottom	底部對齊

背景樣式

?背景樣式屬性

屬性說明

background-image	定義背景圖片地址
background-repeat	定義背景圖片重復，例如橫向重復、縱向重復
background-position	定義背景圖片位置
background-attachment	定義背景圖片固定

• background-color屬性來定義元素的背景顏色。

?語法：

background-color: 顏色值;

tips：顏色值有兩種，一種是“關鍵字”，另外一種是“16進制RGB值”。其中關鍵字指的是顏色的英文名稱，如red、green、blue等。而16進制RGB值指的是類似“#FBE9D0”形式的值。

• background-image屬性來為元素定義背景圖片。

?語法：

background-image: url(圖片路徑);

tips：跟引入圖片（即img標簽）一樣，引入背景圖片也需要給出圖片路徑才可以顯示。

• background-repeat屬性來定義背景圖片的重復方式。

?語法：

background-repeat: 取值;

?background-repeat屬性取值

屬性值說明

repeat	在水平方向和垂直方向上同時平鋪（默認值）
repeat-x	只在水平方向（x軸）上平鋪
repeat-y	只在垂直方向（y軸）上平鋪
no-repeat	不平鋪

• background-position屬性來定義背景圖片的位置。

?語法：

background-position: 像素值/關鍵字;

tips：當background-position屬性取值為“像素值”時，要同時設置水平方向和垂直方向的數值。例如：background-position: 水平距離 垂直距離;

??當background-position屬性取值為“關鍵字”時，也要同時設置水平方向和垂直方向的值，只不過這兩個值使用關鍵字來代替而已。

??background-position屬性的關鍵字取值

屬性值說明

top left	左上
top center	靠上居中
top right	右上
center left	居中靠左
center center	正中
center right	居中靠右
bottom left	左下
bottom center	靠下居中
bottom right	右下

• background-attachment屬性來定義背景圖片是隨元素一起滾動還是固定不動。

?語法：

background-attachment: 取值;

?background-attachment屬性取值

屬性值說明

scroll	隨元素一起滾動（默認值）
fixed	固定不動

超鏈接偽類

?在CSS中，我們可以使用“超鏈接偽類”來定義超鏈接在鼠標點擊的不同時期的樣式。

?語法：

a:link{…} a:visited{…} a:hover{…} a:active{…}

tips:如果一次性定義4個偽類的話，必須按照“link、visited、hover、active”的順序進行，不然瀏覽器可能無法正常顯示這4種樣式。

瀏覽器鼠標樣式

?在CSS中，我們可以使用cursor屬性來定義鼠標樣式。

?語法：

cursor: 取值;

cursor屬性取值在實際開發中我們一般只會用到3個：default、pointer和text，其他的很少用得上。
tips：除了使用瀏覽器自帶的鼠標樣式，我們還可以使用cursor屬性來自定義鼠標樣式。

?語法：

cursor: url(圖片地址), 屬性值;

盒子模型

?每個元素都可以看成一個盒子，盒子模型是由四個屬性組成的：content（內容）、padding（內邊距）、margin（外邊距）和border（邊框）。

?盒子模型組成部分說明

屬性說明

content	內容，可以是文本或圖片
padding	內邊距，用于定義內容與邊框之間的距離
margin	外邊距，用于定義當前元素與其他元素之間的距離
border	邊框，用于定義元素的邊框

浮動布局

?可以用float屬性來實現文字環繞圖片的效果。

?語法：

float: 取值;

float屬性取值只有2個，非常簡單；如下：

屬性值說明

left	元素向左浮動
right	元素向右浮動
tips：浮動會影響周圍元素，并且還會引發很多預想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。

?語法：

clear: 取值;

?clear屬性取值

屬性值說明

left	清除左浮動
right	清除右浮動
both	同時清除左浮動和右浮動

定位布局

?定位布局共有4種方式，這4種方式都是通過position屬性來實現的。

?語法：

position: 取值;

?position屬性取值

屬性值說明

static	靜態定位（默認值）
fixed	固定定位
relative	相對定位
absolute	絕對定位

• 固定定位，指的是被固定的元素不會隨著滾動條的拖動而改變位置。

tips:固定定位；position:fixed;是結合top、bottom、left和right這4個屬性一起使用的。其中，position:fixed使得元素成為固定定位元素，接著使用top、bottom、left和right這4個屬性來設置元素相對瀏覽器的位置。

• 相對定位，指的是該元素的位置是相對于它的原始位置計算而來的。

tips：相對定位；position:relative;也是結合top、bottom、left和right這4個屬性一起使用的，其中，position:relative;使得元素成為相對定位元素，接著使用top、bottom、left和right這4個屬性來設置元素相對原始的位置。

• 絕對定位；給一個元素加上絕對定位，那么這個元素就完全脫離文檔流了，絕對定位元素的前面或后面的元素會認為這個元素并不存在，此時這個元素浮于其他元素上面，已經完全獨立出來了。

tips：絕對定位；position:absolute;是結合top、bottom、left和right這4個屬性一起使用的，其中position:absolute使得元素成為絕對定位元素，接著使用top、bottom、left和right這4個屬性來設置元素相對瀏覽器的位置。

trick：一般相對定位和絕對定位搭配起來使用的最廣泛；例如：把一盒子居中，可以給父盒子加相對定位，子盒子加絕對定位，也就是所謂的子絕父相。

總結

以上是生活随笔為你收集整理的前端修仙路之筑基（CSS篇）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。