系統學習——CSS

筆記目錄

- 字首
- 選擇器
- - 後代選擇器和子元素選擇器
  - 弟弟選擇器
  - 屬性選擇器
  - 選擇器分組
- 僞選擇器
- - a标簽
  - 僞元素
- 屬性
- - font-family
  - font-size
  - font-weight
  - font-variant
  - vertical-align
  - text-decoration
  - text-indent
  - text-transform
  - letter-spacing
  - word-spacing
  - white-space
  - border-style
  - background-attachment
  - list-style
  - table标簽的CSS屬性
  - cursor
  - display
  - position
  - z-index
  - box-shadow
  - 線性漸變
  - 徑向漸變
  - background-size
  - background-clip
  - 層疊背景圖
  - transition(過渡)
  - transform(轉變)
- 動畫
- - 3D轉換

寫在前面的：始于2019-11-20，終于2019-12-19，系統的學習CSS，以w3cschool提供的微課和文檔為基準，記錄自己之前不知道的知識點。曆時一個月，斷斷續續地學了一遍，今後就是項目中的應用和深入的學習了，筆記不斷。各位僅供參考。

字首

Safari、Chrome ： -webkit- ;
Firefox ： -moz- ;
Opera ： -o- ；
IE ： -ms- 。

選擇器

後代選擇器和子元素選擇器

後代選擇器：選擇器的名字之間用 空格 隔開，不限制級數，級數最高的最準。
子元素選擇器：父子名字之間以 > 連結，要求父子元素直連，兩者之間不存在其他任何元素否則失效。

弟弟選擇器

選擇器之間以 + 号直連，要求兩者必須同級，且兩者之間不存在其他任何元素，後者在前者之下。

屬性選擇器

普通用法：在 [] 中書寫選擇器該有的屬性，個數不限，與的關系同時滿足。選擇器名為 * 則表示全選。
```
/***設定頁面上所有同時含有class和id屬性的div元素***/
a[class][id]{
    color:red;
}
           
```

含有某屬性且某屬性為定值的

a[href="http://www.skk007.tech/html/" target="_blank" rel="external nofollow" ]{
    color:red;
}

含有class屬性并且屬性值的詞清單的某個詞等于定值
```
div[class~="w3cschool"]{
    color:red;
}
           
```

含有class屬性并且屬性值中以w3cschool開頭

div[class^="w3cschool"]{
    color:red;
}

含有class屬性并且屬性值中以w3cschool結尾

div[class$="w3cschool"]{
    color:red;
}

含有class屬性并且屬性值中包含w3cschool

div[class*="w3cschool"]{
    color:red;
}

含有class屬性并且屬性值等于w3cschool或者以w3cschool開頭
```
div[class|="w3cschool"]{
    color:red;
}
           
```

選擇器分組

多個選擇器使用一套樣式，使用選擇器分組，将選擇器名字寫到一起以 , 分割。沒有前後關系。

僞選擇器

a标簽

a:link ：正常的未通路的連結。
a:visited ：通路過的連結。
a:hover ：滑鼠懸浮在連結上。
a:active ：點選連結時。
設定屬性時，必須按照以上順序。

僞元素

::first-line ：選擇器中文本的第一行。
::first-letter ：選擇器中文本的第一個字母。
::selection ：選擇器中使用者選中的部分，如文本元素中使用者選中的文本。
::before ：在元素之前插入一些内容。
::after ：在元素之後插入一些内容。

屬性

font-family

字型系列：特定的字型系列（如Times New Roman或Arial）
通用族：一組具有相似外觀的字型族（如Serif或Monospace）
備選：屬性值應多寫幾個字型以作備選，防止浏覽器不支援某字型。多個字型名以 , 隔開，當名字不隻一個單詞時需要用 "" 引住以表明這是一個字型。

font-size

關鍵字屬性值：xx-small,small,medium,large,larger,etc等。
絕對值和相對值：px，em。1em預設為16px

font-weight

關鍵字：normal，lighter，bold，bolder。
數值：100-900。400=normal，700=bold。

font-variant

将字型轉換為所有小型大寫字母。normal，small-caps，inherit。

vertical-align

垂直對齊。對于不同的元素實作效果不同。
屬性值：top，middle，bottom，baseline，sub，super，%，px。

對于div元素垂直居中的實作。

<div class="main">
   <div class="paragraph">
   w3cschool
   </div>
</div>

.main {
    height: 150px; width: 400px;
    background-color: LightSkyBlue;
    /* 關鍵屬性 */
    display: inline-table;
}
.paragraph {
	/* 關鍵屬性 */
    display: table-cell;
    vertical-align: middle;
}

text-decoration

如何裝飾文本，值：none，inherit，overline，underline，line-through。

text-indent

首航文本縮進距離。屬性值：數值（px，em，cm），%，inherit

text-transform

對文本的大小寫進行轉換。屬性值：none，capitalize，lowercase，uppercase。

letter-spacing

用于設定文本中字元之間的間距。用px，pt，cm，mm等測量機關。

word-spacing

用于設定文本中單詞之間的間距。用px，pt，cm，mm等測量機關。
單個漢字按字元算，如果漢字之間有空格按單詞算。

white-space

設定元素内的空格和換行符。
nowrap ：屏蔽該元素中的所有空格和換行符。
pre ：支援所有空格和換行符。
pre-line ：支援換行符，忽略其他空格。
pre-wrap ：文本将在必要的時候或者行的結尾進行換行。比 pre 換行可能性更大，增加了額外的換行符，以防止文本突破元素框。

border-style

屬性值：none，solid，dotted，dashed，double，groove，ridge，inset，outset，hidden
樣式效果圖：

系統學習——CSS

background-attachment

設定背景圖像是固定還是跟随頁面滾動。
屬性值：scroll（預設），fixed，inherit。
fixed ：設定為該屬性值後，即使元素具有滾動機制，背景圖像也會固定在某個位置不随頁面元素滾動。

list-style

設定不同的類表項标記。為三個屬性的簡約寫法。
list-style-type ：設定标志樣式。none，disc（預設），circle，square，decimal，lower-roman，upper-roman，lower-alpha，upper-alpha等。
list-style-image ：用圖檔代替預設的标志、序号。
list-style-position ：标志符的位置。inside，outside。

table标簽的CSS屬性

border-collapse ：指定表格邊框是否折疊為單個邊框。預設分開。
border-spacing ：若表格邊框是分開的，則調整邊框間距。一個值則是水準和垂直的間距，兩個值則前者為水準間距後者為垂直間距。允許繼承，不允許為負值。
caption-side ：設定表格标題标簽所在位置。 top ， bottom 。
empty-cells ：指定是否在表格中的空單元個格上顯示邊框和背景。 hide ， show 。
table-layout ：指定如何計算表格列的寬度。 auto ， fixed 。

cursor

設定滑鼠在該元素區域時光标的樣式。
屬性值：pointer，help等

系統學習——CSS

display

屬性值：none，block，inline，list-item，table，table-cell，table-column，grid等。
設定元素的display屬性隻是改變元素的顯示方式，而不會改變元素的類型。是以，帶有display:block的内聯元素不允許在其中包含其他塊元素。

position

屬性值：static（預設值），relative，absolute，fixed，inherit。
絕對定位：相對于具有 非靜态 位置的第一個父級元素進行定位，如果找不到則相對于 <html> 。

z-index

該屬性起效必須有 position 屬性且其值為：relative、absolute、fixed其中之一不能是 static 。

box-shadow

可是使用 , 分割，對同一對象使用多個陰影，第一個在最高層，最後一個在最下層，若有重疊以排序靠前的為準。

線性漸變

linear-gradient ：線性漸變，可直接規定漸變起始方向， left 、 top(預設值) 、 right 、 bottom ，方向值可組合使用，如 left top 。也可設定角度，0deg為從左到右，90deg為從下到上。
repeating-linear-gradient ：重複線性漸變 background:-webkit-repeating-linear-gradient(blue, green 20px)。

徑向漸變

shape： ellipse ，預設值，橢圓； circle ，圓形。該值也可寫作兩個值 a b ，前者為橫向直徑，後者為縱向直徑，兩者相同則為圓形。
size： farthest-corner (預設) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角； closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊； farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊； closest-corner ：指定徑向漸變的半徑長度為從圓心到離圓心最近的角。
position： center （預設），top、left等。
background: radial-gradient(shape size at position, start-color, ..., last-color);

background-size

contain：圖像按比例縮放，不超過容器尺寸。
cover：圖像縮放以适應尺寸，比例不同會被剪裁。

background-clip

border-box：背景被繪制到邊框的外邊緣。預設值。
padding-box：背景繪制到填充的外邊緣。
content-box：背景被繪制在内容框中。

text：背景色僅被繪制與文字。需要搭配對應的浏覽器字首，可實作文字漸變色。

background: linear-gradient(to bottom, rgba(223, 191, 144, 1) 0%, rgba(173, 136, 85, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text; /* 對應浏覽器的字首 */
  color: transparent; /* 将文字本身的顔色設為透明 */

層疊背景圖

background-image 的屬性值使用 , 分割寫多個背景圖，靠前的在上層。 background-position 的屬性值可以确定各個背景圖的位置，使用方位詞 left top 等，使用 , 分割。注意使用 background-repeat 來保證小的背景圖不重複。

transition(過渡)

transition-property：指定要轉換的屬性。
transition-duration：轉換發生的持續時間。
transition-timing-function：指定轉換的速度在其指定的時間内如何變化。 ease 先慢後快（預設值）， ease-in 先慢後快在猛停， ease-out 先快後慢， ease-in-out 類似于ease，加減速稍微不同， linear 線性勻速。 cubic-bezier(x1,y1,x2,y2) 賽貝爾曲線，确定運動軌迹，值都在0,1之間。
transition-delay：指定過渡效果的延遲時間，秒為機關。

transform(轉變)

rotate():根據給定的 deg 進行旋轉，正是為順，負值為逆。
transform-origin：指定旋轉的中心，用百分數表示，左上為原點，預設： 50% 50% 。與rotate()/transofrm-rotate一起使用。
translate()：平移元素位置，向左向下，負值則相反。
skew()：通過給元素設定X軸和Y軸的傾斜角度進行傾斜。預設為0。
scale()：根據設定的寬高設定縮放倍數，1為原本大小，不設定第二個值，則都用第一個值。
多重轉變：同時寫多個函數，用空格隔開。

動畫

關鍵幀（

@keyframes

)：聲明動畫名稱和定義内容。可以寫多個形式，處于動畫程序的不同幀，可用百分數表示也可用

from

和

to

，前者為0%後者為100%。

@keyframes my-animation {
    0%  {background-color: red;}
    50%  {background-color: yellow;}
    70%  {background-color: blue;}
    100% {background-color: green;}
}

animation-name ：用于元素的動畫。

animation-duration

：動畫持續的時間。預設為

0s

。機關s和ms。

div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: my-animation;
   animation-duration: 1s;
}

animation-timing-function ：動畫速度曲線。ease、ease-in、ease-out、ease-in-out、linear、cubic-bezier(x1,y1,x2,y2)。
animation-delay ：動畫開始前的延時。預設為 0s 。機關s和ms。
animation-iteration-count ：動畫執行次數。無限次用 infinite 。
animation-direction ：動畫的執行方式。 normal ，預設值從0%到100%； reverse ，從100%到0%； alternate ，奇數次播放動畫時，先到0到100，偶數次時100到0； alternate-reverse ，奇數次播放時100到0，偶數次時0到100。

簡寫形式，順序不可錯亂。

div {
   animation-name: colorchange;
   animation-duration: 4s;
   animation-timing-function: ease-in;
   animation-delay: 2s;
   animation-iteration-count: infinite;
   animation-direction: reverse;
}
div { 
   animation: colorchange 4s ease-in 2s infinite reverse;
}

3D轉換

ratate()擴充為rotateX()、rotateY()、rotateZ()或者rotate3D()包含前三者。
translate()擴充為translateX()、translateY()、translateZ()（正值移入負值移出）或者translate3D()包含前三者。
perspective：定義了如何渲染3D場景的深度。将視角看作從觀衆到物體的距離。值越大，距離越遠，視覺效果越不強烈， 子元素 所呈現的邊緣越小。