一、選擇器

基本選擇器：

• 通用元素選擇器
• 標籤選擇器
• 類選擇器
• id選擇器

 組合選擇器：

• 多元素組合選擇器
• 後代元素選擇器
• 子代元素選擇器
• 毗鄰元素選擇器

屬性選擇器：

• [title] & P[title]
• [title=mk]
• [title~="mk"]
• [title|=mk]
• [title^=Nick]
• [title$=Nick]
• [title*=Nick]

偽類選擇器：

• link、hover、active、visited
• before、after

 

屬性選擇器

1.[title] & P[title]

        設定所有具有title屬性的標籤元素；

        設定所有具有title屬性的P標籤元素。

[title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
  
<div title>hello</div>
<p title>hello</p>

2.[title=mk]

        設定所有title屬性等於“mk”的標籤元素。 

[title="mk"]
    {
        color: yellow;
    }
  
<p title="mk">mk</p>

3.[title~="mk"]

　　設定所有title屬性具有多個空格分隔的值、其中一個值等於“mk”的標籤元素。

[title~="mk"]
    {
        color: yellow;
    }
  
<p title="mk Jenny">Mk</p>
<p title="Jenny mk">Mk</p>
 

4.[title|=mk]　

設定所有title屬性具有多個連字號分隔（hyphen-separated）的值、其中一個值以"mk"開頭的標籤元素。

 例：lang屬性："en"、"en-us"、"en-gb"等等

[title|="mk"]
    {
        color: yellow;
    }
  
<p title="mk-Jenny">mk</p>

5.[title^=Nick]

　　設定屬性值以指定值開頭的每個標籤元素。

[title^="mk"]
    {
        color: yellow;
    }
  
<p title="mkJenny">mk</p>

6.[title$=Nick]

　　設定屬性值以指定值結尾的每個標籤元素。

[title$="mk"]
    {
        color: yellow;
    }
  
<p title="Jenny mk">mk</p>

7.[title*=Nick]

　　設定屬性值中包含指定值的每個元素。

[title*="mk"]
    {
        color: yellow;
    }
  
<p title="SmkJenny">mk</p>

 偽類選擇器：

1. link、hover、active、visited

•  a:link（未訪問的連結狀態）,用於定義了常規的連結狀態。
•  a:hover（滑鼠放在連結上的狀態）,用於產生視覺效果。
•  a:active（在連結上按下滑鼠時的狀態）。
•  a:visited（已訪問過的連結狀態）,可以看出已經訪問過的連結。

2. before、after

• P:before 在每個<p>元素的內容之前插入內容;
• P:after 在每個<p>元素的內容之後插入內容。

二、屬性

1.color 

• HEX（十六進位制色：color: #FFFF00 --> 縮寫：#FF0）
• RGBA（紅綠藍透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
• HSL（CSS3有效,H表示色調，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
• HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）

transparent

• 全透明，使用方式：color: transparent

 2.文字屬性:

  white-space: 設定元素中空白的處理方式

• normal：預設處理方式。
• pre：保留空格，當文字超出邊界時不換行
• nowrap：不保留空格，強制在同一行內顯示所有文字，直到文字結束或者碰到br標籤
• pre-wrap：保留空格，當文字碰到邊界時換行
• pre-line：不保留空格，保留文字的換行，當文字碰到邊界時換行

direction: 規定文字的方向 

• ltr 預設，文字方向從左到右。
• rtl 文字方向從右到左。

vertical-align: 文字所在行高的垂直對齊方式

• baseline 預設
• sub 垂直對齊文字的下標，和<sub>標籤一樣的效果
• super 垂直對齊文字的上標，和<sup>標籤一樣的效果
• top 物件的頂端與所在容器的頂端對齊
• text-top 物件的頂端與所在行文字頂端對齊
• middle 元素物件基於基線垂直對齊
• bottom 物件的底端與所在行的文字底部對齊
• text-bottom 物件的底端與所在行文字的底端對齊

  text-indent: 文字縮排

  letter-spacing: 新增字母之間的空白

  word-spacing: 新增每個單詞之間的空白

  text-transform: 屬性控制文字的大小寫

• capitalize 文字中的每個單詞以大寫字母開頭。
• uppercase 定義僅有大寫字母。
• lowercase 定義僅有小寫字母。

 text-overflow: 文字溢位樣式

• clip 修剪文字。
• ellipsis 顯示省略符號...來代表被修剪的文字。
• string 使用給定的字串來代表被修剪的文字

text-decoration: 文字的裝飾

• none 預設。
• underline 下劃線。
• overline 上劃線。
• line-through 中線。

text-shadow：文字陰影

• 第一個引數是左右位置
• 第二個引數是上下位置
• 第三個引數是虛化效果
• 第四個引數是顏色
• text-shadow: 5px 5px 5px #888;

word-wrap：自動換行

• word-wrap: break-word;

去掉li前的點：li{list-style：none}

三、背景屬性

 background-position 設定背景影象的位置座標

• background-position: center center; 圖片置中，x軸center，y軸center
• 1px -195px  擷取圖片某部分，分別代表座標x，y軸

  background-repeat 設定背景影象不重複平鋪

• no-repeat 設定影象不重複，常用

• round 自動縮放直到適應並填充滿整個容器

• space 以相同的間距平鋪且填充滿整個容器

background-attachment 背景影象是否固定或者隨著頁面的其餘部分滾動

  background 簡寫

• background: url("o_ns.png") no-repeat 0 -196px;

• background: url("o_ns.png") no-repeat center bottom 15px;

• background: url("o_ns.png") no-repeat left 30px bottom 15px;

四、列表屬性

list-style-type: 列表項標誌的型別

• none 去除標誌
• decimal-leading-zero;  02.
• square;  方框
• circle;  空心圓
• upper-alph; & disc; 實心圓

  list-style-image：將圖象設定為列表項標誌

  list-style-position：列表項標誌的位置

• inside
• outside

五、頁面佈局

visibility

• collapse 當在表格元素中使用時，此值可刪除一行或一列，不會影響表格的佈局。

clip 剪裁影象

rect 剪裁定位元素：

• auto 預設值，無剪下
• 上-右-下-左（順時針）的順序提供四個偏移值
• 區域外的部分是透明的
• 必須指定 position:absolute;
• 例：clip:rect(0px,60px,200px,0px);

overflow  設定當物件的內容超過其指定高度及寬度時如何顯示內容

• visible 預設值，內容不會被修剪，會呈現在元素框之外。
• hidden 內容會被修剪，並且其餘內容是不可見的。
• scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
• auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。

outline 邊框輪廓

• outline-width 輪廓寬度
• outline-color 輪廓顏色
• outline-style 輪廓樣式

zoom 縮放比例 ：100%/150%/200%

 

transform 轉換，變形

• origin 定義旋轉基點（left top center right bottom 座標值）    transform-origin: 50px 50px; transform-origin: left;。
• rotate 旋轉            transform:rotate(50deg) 旋轉角度可以為負數，需要先定義origin。
• skew  扭曲             transform:skew(50deg,50deg)  分別為相對x軸傾斜,相對y軸傾斜。
• scale  縮放             transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。 
• translate 移動        transform:translate(50px, 50px) 分別為相對x軸移動,相對y軸移動

Transition 平滑過渡

• transition-property：           變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）
• transition-duration：           變換持續時間
• transition-timing-function： 變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然後減速)、cubic-bezier:(自定義時間曲線））
• transition-delay：               變換延遲時間
• transition：                        縮寫

cursor 滑鼠的型別形狀

url: 自定義游標

Auto: 預設

   Default: 預設    e - resize    ne - resize    nw - resize    n - resize    se - resize    sw - resize    s - resize    w - resize    Crosshair    Pointer    Move    text    wait    help