CSS常用樣式屬性錦集

以下快捷鍵針對webstorm，idea原則上也可以，我用idea打標籤快捷鍵都可以，樣式快捷鍵打不出。

一、文字屬性

1、文字樣式屬性

格式：font-style: italic;
取值：normal:正常顯示 italic:斜體

快捷鍵：
fs font-style: italic;
fsn font-style: normal;

2、文字粗細屬性

格式：font-weight:bold;
取值：lighter:細線（默認） bold:加粗 bolder:加粗更粗

快捷鍵：
fw font-weight:;
fwb font-weight: bold;
fwbr font-weight: bolder;

3、文字大小屬性

格式：font-size:30px;
單位：px

快捷鍵：
fz font-size:;
fz30 font-size: 30px;

4、文字字體屬性

格式：font-family:;

注意：
1、中文需要雙引號或單引號
2、設置的字體必須是用戶電腦安裝的字體
設置的字體不存在，系統使用默認字體顯示，想要使用設置的字體，可設置備選方案，用逗號隔開
中文英文單獨設置字體：
中文字體都包含英文
中文都有英文名稱，能處理中文才是中文字體，因此先英文後中文
常見字體：中文：宋體、黑體、微軟雅黑 英文：“Times New Roman”、“Arial”
快捷鍵：
ff font-family:;

簡寫連體：

font:style weight size family;

注意： 簡寫中，樣式、粗細可省略，可交換位置；大小字體不能省略、交換位置。

 

二、文本屬性：

1、文本裝飾屬性

格式：text-decoration: underline;
取值:underline下劃線 line-through刪除線 overline上劃線

快捷鍵：
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;

2、文本水平對齊屬性

格式：text-align: left;
取值：left左 right右邊 center中間

快捷鍵：
ta text-align: left;
tar text-align: right;
tac text-align: center;

3、文本縮進屬性

格式： text-indent:;
取值：em,px

快捷鍵：
ti text-indent:;

4、文本顏色屬性

格式：color: #000;
取值方式：英文單詞、rgb（0,0,0）、rgba（0,0,0，亮度（0-1））、16進制（#000）

 

三、選擇器

1、標籤選擇器

選中當前界面所有的標籤

格式：

標籤{
    屬性:值；
    }

2、id選擇器

根據制定的id選擇對應的標籤，具有唯一性，只能字母/數字、下劃線組成，並且不能數字開頭，大多數是給js使用

格式：

#id名稱{
    屬性:值；
    }

3、類選擇器

根據制定的類選擇對應的標籤，具有重複性，命名方式與id一樣，一個標籤可設置多個類名，以空格隔開。

格式：

.類名稱{
    屬性:值；
    }

4、後代選擇器

找到指定標籤中所有指定標籤

格式：

標籤1 標籤2{
    屬性:值；
    }

5、子元素選擇器

找到指定標籤中所有特定子元素標籤

格式：

標籤1>標籤2{
    屬性:值；
    }

6、交集選擇器

格式：

標籤1標籤2{
    屬性:值；
    }

7、並集選擇器

格式：

標籤1.標籤2{
    屬性:值；
    }

8、兄弟選擇器

相鄰：給指定選擇器後緊跟選擇器選中的標籤設置屬性

格式：

標籤1+標籤2{
    屬性:值；
    }

通用：給指定選擇器後所有選擇器選中的標籤設置屬性

格式：

標籤1~標籤2{
    屬性:值；
    }

9、序選擇器

同級別第幾個：

:first-child同級別第一個
:last-child同級別最後一個
:nth-child(n)同級別n個
:last-child(n)同級別倒數n個
:only-child同級別唯一一個

:nth-child(odd)同級別奇數，
:nth-child(even)同級別偶數
:nth-child(xn+y)

同級別同類型第幾個：

:first-of-type同級別同類型第一個
:last-of-type同級別同類型最後一個
:nth-of-type(n)同級別同類型n個
:last-of-type(n)同級別同類型倒數n個
:only-of-type同級別同類型唯一一個

:nth-of-type(odd)同級別同類型奇數，
:nth-of-type(even)同級別同類型偶數
:nth-of-type(xn+y)

10、屬性選擇器

根據指定的屬性選擇對應標籤

格式：

[attribute]
[attribute=value]

(1、)屬性取值以什麼開頭

[attribute|=value] CSS2（只能找到value開頭並-隔開的）
[attribute……=value] CSS3

(2、)屬性取值以什麼結尾

[attribute$=value] CSS3

(3、)屬性取值包含某個特定值

[attribute~=value] CSS2
[attribute*=value] CSS3

11、通配符選擇器

格式：

*{
    屬性:值；
}

 

四、CSS三大特性

1、繼承性

作用： 父元素設置的屬性，子元素也能使用

注意：並不是所有的屬性都可以繼承
1、只有以color/font-/text-/line開頭的屬性纔可以繼承
2、不僅僅兒子可以繼承，後代都可以繼承

特殊性：
a標籤的文字顏色和下劃線不能繼承，h標籤的文字大小不能繼承

繼承應用： 設置網頁的共用信息
 

2、層疊性

多個選擇去選擇同一標籤，設置相同的屬性纔會發生層疊性
 

3、優先級

當多個選擇去選擇同一標籤，設置相同的屬性，如何層疊由優先級決定

優先級判斷的三種方式：

1、間接選中指繼承
誰離目標標籤近聽誰的

2、相同選擇器（直接選中）
都是同類型選擇器，寫在後面的有效

3、不同選擇器（直接選中）
不是同類型選擇器，按選擇器優先級層疊
id>類>標籤>通配符>繼承>瀏覽器默認

！important：用於提升某個直接選中標籤的選擇器中的某個屬性的優先級，可以將被指定的屬性的優先級提升爲最高
只能用於直接選中，不能用於間接選中
通配符是直接選中標籤
！important只能提升被指定屬性的優先級，其他屬性優先級不會被提升

優先級權重問題（直接選中）：

作用： 多個選擇器混合在一起使用，可通過計算權重方式判斷高優先級
計算規則： 先看id個數，相同則看類個數，再相同則看標籤名稱個數，之後不再計算，寫在後面的有效

四、頁面背景與盒模型

1、背景顏色

格式：background-color:;
取值：單詞、rgb(0,0,0);、rgba(0,0,0,亮度);、#000;

2、背景圖片

格式:background-image: url();

background-repeat:repeat;默認

background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;

3、背景定位

background-position: 0 0;
取值： 具體方位名詞（left center right top center bottom）或具體像素

關聯方式：
格式：background-attachment:scroll;默認
取值：fixed，

背景屬性簡寫：background：背景顏色 背景圖片 平鋪方式 關聯方式;，任何一個屬性都可省略

4、css精靈圖

減少請求次數，降低服務器的壓力
需要配合背景圖片和背景定位使用

5、邊框屬性

格式：

連寫1：

border：邊框寬度 邊框樣式 邊框顏色

快捷鍵：bd+
連寫中：顏色可以省略，默認黑色，樣式不能省略，寬度能省略

連寫2：

border-top：邊框寬度 邊框樣式 邊框顏色
border-right：邊框寬度 邊框樣式 邊框顏色
border-left：邊框寬度 邊框樣式 邊框顏色
border-bottom：邊框寬度 邊框樣式 邊框顏色

連寫3：

border-width：上 右 下 左
border-style：上 右 下 左
border-color：上 右 下 左

非連寫：

border-top-width：
border-top-style：
border-top-color：

內邊距屬性：

非連寫格式：

padding-top：

連寫：

padding：上 右 下 左

省略取值與邊框屬性一樣

外邊距屬性：

margin-top：

連寫：

padding：上 右 下 左

省略取值與邊框屬性一樣

外邊距合併：
默認佈局水平方向外邊距進行疊加，垂直方向外邊距取最大值

6、盒模型

內容區域+內邊距+邊框+外邊距
內容的寬度和高度：內容區域
元素的寬度和高度：可視範圍，內容區域+內邊距+邊框
元素空間的寬度和高度：元素所有區域，內容區域+內邊距+邊框+外邊距

box-sizing屬性
格式：box-sizing：border-box；

css3新增屬性，盒子增加padding和border，盒子寬高不變，自動減去內容的寬高。
如果兩個盒子是嵌套關係，設置了裏面盒子頂部的外邊距，大盒子與小盒子同時被頂下，需要給大盒子設置邊框
padding是控制父子關係的間隙
margin是控制兄弟關係的間隙

注意： 嵌套關係中，利用margin：0 auto， 控制裏面元素水平居中與外面元素

盒子居中與內容居中：
盒子居中：margin：0 auto；
內容居中：text-align:center；

五、網頁佈局方式：

1、標準流排版：

塊級：垂直排版
行內/行內塊級：水平排版
瀏覽器默認排版方式

2、浮動流排版

半脫離標準流排版，只能水平排版

注意： 浮動流沒有居中對齊，margin：0 auto；在浮動流中無效
特點： 在浮動流中不區分塊級、行內塊級、行內元素；並且都可以設置寬高。

浮動元素脫標：相當於在標準流刪除

浮動元素排序規則：
相同方向的浮動，先浮動的會顯示在前面
不同方向的浮動，左浮動會對應左浮動，有浮動會對應右浮動
浮動元素浮動之後位置會根據浮動之前標準流的位置確定

清除浮動

在標準流中內容可以撐起父元素的高度，而在浮動中不能撐起

方式1：
給前面一個父元素設置高度（在企業開發中能不寫高度就儘量不寫），因此不常用

方式2：
給後面的盒子添加clear屬性
clear取值：left，right，both，none
注意：設置了clear屬性，margin屬性會失效

方式3：隔牆法（不常用）
1、外牆法：
兩個盒子中間添加塊級元素並清除浮動
注意：可以讓第二個盒子使用margin-top屬性，但不能讓第一個盒子使用margin-bottom，可直接設置高度達到margin效果

2、內牆法：
第一個盒子最後添加塊級元素並清除浮動

注意點： 可以讓第二個盒子使用margin-top屬性，也能讓第一個盒子使用margin-bottom，可直接設置高度達到margin效果

區別： 外牆法不能撐起第一個盒子的高度，內牆法能撐起第一個盒子的高度

僞元素選擇器：
1、給指定標籤的內容前面或後面添加一個子元素
格式：

標籤名稱::before{
    屬性名稱：值；
    }

2、給指定標籤前面添加一個子元素
格式：

標籤名稱::after{
    屬性名稱：值；
    }

給指定標籤後面添加一個子元素

div::before{
    content"添加的內容"
}在div內容的前面添加內容

方式4：
設置添加的子元素內容爲空、塊級元素、高度爲0，添加的子元素看不見並清除浮動（類似內牆法）
ie6兼容：

.box{
    *zoom:1;
}

方式5：

設置第一個盒子的overflow：hidden；屬性進行清除浮動，ie6下兼容增加*zoom：1；
overflow其他用途：
overflow：hidden；可以將超出標籤範圍的內容清除掉
可以通過裏面的盒子設置margin-top，外面的盒子設置overflow：hidden；不會被頂下

3、定位流排版

定位流： 相對定位、絕對定位、固定定位、靜態定位

相對定位
格式：

position: relative;
	垂直方向：;
	水平方向：;

相對於以前在標準流的位置進行移動
注意： 不脫離標準流，在標準流定位佔用空間，同一方向只能設置一個屬性，區分行內元素和塊級元素
應用： 微調、配合絕對定位

絕對定位
格式：

position: absolute;
        垂直方向：;
        水平方向：;

相對於body的位置移動

注意： 脫離標準流，在標準流定位不佔用空間，同一方向只能設置一個屬性，不區分行內元素和塊級元素
默認所有絕對定位以body爲參考點移動，若祖先元素有定位流（相對、絕對、固定），默認以最近祖先元素爲參考點移動
1、絕對定位的元素以body作爲參考點，是以首屏網頁作爲參考點，不是以整個網頁作爲參考點
2、絕對定位會忽略祖先元素的padding

元素水平居中：

left：50%
margin-left：元素寬度一半

固定定位

格式：

 position: fixed;
    垂直方向：；
    水平方向：；

注意： 脫離標準流，在標準流定位不佔用空間，不區分行內元素和塊級元素

z-index屬性： 控制定位流元素覆蓋關係
默認情況下，所有元素都有z-index屬性，取值爲0；
定位流元素會蓋住標準流元素，後定位元素會蓋住先定位元素，
先看父元素z-index屬性，再看子元素

a標籤僞類選擇器
修改a標籤不同狀態的樣式
狀態：
默認：a：link{}
點擊後：a：visited{}
鼠標移入：a:hover{}（hover可用於任何標籤）
鼠標長按：a：active{}
注意：一起出現，必須按照順序編寫，否則失效

過渡模塊：
transition-property: ;(哪個屬性需要執行過渡效果)
transition-duration: ;（過渡效果持續時長）
transition-timing-function: ;（延遲開始過渡時間）
transition-delay: ;（過渡效果運動速度）

注意： 要過渡，必須滿足三要素（屬性變化、哪個屬性發生過渡、過渡時長），多個屬性過渡用“，”隔開

簡寫：transition：過渡屬性 過渡時長 運動速度 延遲時間；

多個屬性運動速度、延遲時間、持續時間一致，簡寫爲：transition：all （）s;

六、2D3D轉換模塊

基礎：
deg是單位，代表旋轉多少度

transform:rotate(45deg);

第一個參數:水平方向，第二個參數:垂直方向

transform: translate(-100px, 50px);

第一個參數:水平方向，第二個參數:垂直方向,相同參數可用一個參數

transform:scale(1, 1.5);

transform:rotate（）；旋轉相關屬性：

形變中心點：
默認情況下以中心爲參考點旋轉
第一個參數：水平方向，第二個參數：垂直方向。取值：具體像素、百分比、特殊關鍵字（top bottom left right）。
格式：transform-origin: 0 0;

旋轉軸向：
默認情況下所有元素圍繞z軸旋轉,*代表軸向（X、Y、Z）
格式：transform:rotate*();

透視屬性：
特點：近大遠小，像素代表離物體距離
格式：perspective：px；
注意：透視屬性必須添加到呈現近大遠小父元素上面

盒子陰影與文字陰影：
盒子陰影（默認外陰影）：
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度） spread（陰影擴展） color（陰影顏色） inset（內外陰影）;
快速添加陰影需要添加3個參數：ox-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度）；

默認情況下，陰影顏色與盒子內容顏色一致

文字陰影：
box-shadow:h-shadow(水平偏移) v-shadow(垂直偏移) blur（模糊度） color（陰影顏色）；
默認情況下，陰影顏色文字顏色一致

七、動畫模塊

1、過渡與動畫之間的區別

不同點：
1)、過渡必須人爲觸發纔會生效
2)、動畫不需要人爲觸發就能執行

相同點：
1)、都是給元素添加動畫的
2)、都是系統新增的屬性
3)、都需要滿足三要素纔能有動畫效果

2、動畫步驟格式

1、告訴系統需要執行哪個動畫

animation-name:xxx;

2、告訴系統需要自己創建一個名稱叫xxx的動畫

方式1：

@keyframes xxx{
    from{
    }
    to{
    }
}

方式2：

@keyframes xxx{
    1%{
    }
    2%{
    }
    ...%{
    }
}

3、告訴系統動畫持續時長

animation-duration: 3s;

3、其他屬性

1、動畫執行的速度

animation-timing-function: linear;

2、動畫執行次數

 animation-iteration-count: 1;

3、動畫是否需要做往返動畫

   animation-direction: alternate;

4、動畫執行狀態

animation-play-state: paused;

5、執行動畫等待狀態與結束狀態樣式
取值：
none:默認
forwards：動畫元素結束處於最後一幀狀態樣式
baxkwards:動畫元素開始處於第一幀狀態樣式
both:動畫元素結束處於最後一幀狀態樣式，動畫元素開始處於第一幀狀態樣式
animation-fill-mode: ;

連寫格式：

animation:動畫名稱 動畫時長 動畫運動速度 延遲時長 執行次數 往返動畫；

前端編碼步驟：

1、 重置樣式，設置全局樣式
2、 引入全局樣式表，引入單頁樣式表
3、 搭建網頁結構及樣式結構
4、 佈局劃分，區塊化編寫