css3知識整理

CSS3的現狀

1、浏覽器支援程度差，需要添加私有字首
2、移動端支援優于PC端
3、不斷改進中
4、應用相對廣泛

如何對待

1、堅持漸進增強原則
2、考慮使用者群體
3、遵照産品的方案
4、聽Boss的

css3新增利用屬性選擇标簽

E[attr] 存在attr屬性即可
E[attr=val] 屬性值完全等于val的标簽
E[attr*=val] 屬性值包括val，并且在 任意 位置
E[attr^=val] 屬性值以val開頭的值，并且在 開始 的位置
E[attr$=val] 屬性值以val結束，并且在 結束 的位置

//div的calss屬性裡面包含"test"屬性的标簽。
div[class*="test"]
{
background:#ffff00;
}

僞類

除了以前學過的:link、:active、:visited、:hover，CSS3又新增了其它的僞類選擇器。

1.結構(位置)僞類

以某元素（E）相對于其父元素或兄弟元素的位置來擷取無素；

E:first-child 其父元素的第1個子元素
E:last-child 其父元素的最後1個子元素
E:nth-child(n) 其父元素的第n個子元素
E:nth-last-child(n) 其父元素的第n個子元素（倒着數）
E:only-child選擇的元素是它的父元素的唯一一個了元素；

注意：指E元素的父元素，并對應位置的子元素必須是E

一旦父元素的子元素不完全是E時，需要。。。

E:nth-of-type()選擇指定的元素；
E:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
E:first-of-type選擇一個上級元素下的第一個同類子元素；
E:last-of-type選擇一個上級元素的最後一個同類子元素；
E:only-of-type選擇一個元素是它的上級元素的唯一一個相同類型的子元素；
E:empty選擇的元素裡面沒有任何内容。(使用并不是很廣泛)

2.目标僞類

E:target 結合錨點進行使用，處于目前錨點的元素會被選中；

目标僞類選擇器是一個動态選擇器，隻有存在url指向該比對元素時候，樣式才會生效。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #big-bam-boom:target {
            color: red;
        }
    </style>
</head>

<body>
    <h1 id="big-bam-boom">Kaplow!</h1>
    <a href="#big-bam-boom">Mission Control, we're a little parched up here.</a>
</body>

</html>

上述代碼的效果是當點選a連結，連結跳轉到h1的時候，h1的文字會顯示為紅色

3.排除僞類

E:not(selector) 除selector（任意選擇器）外的元素會被選中；

div:not(".box"){
}

僞元素

1.E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }//p标簽的第一個單詞或者字，為這個樣式

2.E::first-line

p:first-line{
    color:red
}//p标簽的第一行為這個樣式

3.E::selection

使被選中的文本成為紅色：

::selection
{
color:#ff0000;
}

::-moz-selection
{
color:#ff0000;
}

::selection 選擇器比對被使用者選取的選取是部分。

隻能向 ::selection 選擇器應用少量 CSS 屬性：color、background、cursor 以及 outline。

4、E:before和E:after

在E元素内部的開始位置和結束位建立一個元素，該元素為行内元素，且必須要結合content屬性使用。

E:after、E:before 在舊版本裡是僞元素，CSS3的規範裡“:”用來表示僞類，“::”用來表示僞元素，但是在高版本浏覽器下E:after、E:before會被自動識别為E::after、E::before，這樣做的目的是用來做相容處理。

p:after
{ 
content:"台詞：-";
background-color:yellow;
color:red;
font-weight:bold;
}//建議用:after,:before,相容低版本

顔色

- rgba(),a為透明度

opacity隻能針對整個盒子設定透明度，子盒子及内容會繼承父盒子的透明度；

transparent 不可調節透明度，始終完全透明

文本

text-shadow 文字陰影

div{
    text-shadow:px px px #ccc;
    //第一個表示x軸芙蓉偏移，正右負左
    //第二個字表示y軸的偏移，正下負上
    //第三個字為模糊度，隻能為正值
    //第四個值為顔色，可以為十六進制，也可以為rgba
}

盒模型

- box-sizing: border-box 盒子的大小為width(設定的大小：包括border+padding+content)

- border-sizing:content-box盒子的大小為width+padding+border.

邊框

border-radius圓角

border-radius:px //5個角都為5px的圓角
border-radius:px px //左上和右下為5px,右上和左下為6px;
border-radius:px px px px //依次為左上，右上，右下，坐下

邊框陰影

box-shadow和text-shadow一樣，多了一個内置陰影（inset）

邊框圖檔

border-image（平時不怎麼用）；

背景圖檔

背景在CSS3中也得到很大程度的增強，比如背景圖檔尺寸、背景裁切區域、背景定位參照點、多重背景等。

1.background-size

通過background-size設定背景圖檔的尺寸，就像我們設定img的尺寸一樣，在移動Web開發中做螢幕适配應用非常廣泛。

- background-size:100%,100%(寬高均100%)；

- background-size:cover(設定為cover時，會自動調整縮放比例，保證圖檔始終填充滿背景區域，如有溢出部分則會被隐藏，顯示不全。)

- background-size:contain(設定為contain會自動調整縮放比例，保證圖檔始終完整顯示在背景區域)

- 還可以設定成具體的px.

2、background-origin

通過background-origin可以設定背景圖檔定位(background-position)的參照原點。

border-box以邊框做為參考原點；
padding-box以内邊距做為參考原點；
content-box以内容區做為參考點；

3、background-clip

通過background-clip，可以設定對背景區域進行裁切，即改變背景區域的大小。

border-box裁切邊框以内為背景區域；
padding-box裁切内邊距以内為背景區域；
content-box裁切内容區做為背景區域；

多背景

p{background:url(demo.gif) no-repeat; //這是寫給不識别下面這句的預設背景圖檔
background:url(demo.gif) no-repeat ,url(demo1.gif) no-repeat left bottom, url(demo2.gif) no-repeat px px; //這是進階浏覽器的css多重背景，第一個最上面
background-color:yellow; //這是定義的預設背景顔色，全部适合
}

漸變

1.線性漸變

linear-gradient線性漸變指沿着某條直線朝一個方向産生漸變效果，

a、方向

b、起始色

c、終止色

d、漸變距離

方向：

設定漸變方向，可以用關鍵字如to top、to right，也可以用角度（正負值均可）如45deg、-90deg等，當以角度做為參數時，可0deg從下往上，90deg從左向右，進而可以推算出180deg從上向下。

參考網址

.test {
    background: linear-gradient(#fff, #);
}
.test2 {
    background: linear-gradient(#, #f00 %, #);
}
.test3 {
    background: linear-gradient(deg, # %, #f00 %, # %);
}
.test4 {
    background: linear-gradient(deg, #, #f00 %, #);
}
.test5 {
    background: linear-gradient(to top right, #, #f00 %, #);
}

2.徑向漸變

radial-gradient徑向漸變指從一個中心點開始沿着四周産生漸變效果

必要的元素：

a) 輻射範圍即圓半徑

b) 中心點即圓的中心

c) 漸變起始色

d) 漸變終止色

e) 漸變範圍

參考網址

radial-gradient(px, #f00, #ff0, #080); /* 1 */
radial-gradient(px px, #f00, #ff0, #080); /* 2 */
radial-gradient(px px, #f00, #ff0, #080); /* 3 */
代碼：隻給出px，是以被當成是正圓的半徑，于是就能确定一個直徑為px的圓；

代碼：給出了個值，按理應該是要畫一個橢圓的，但個值相等，是以這個橢圓其實此時是個正圓形态。需要注意的是，代碼如果加上 circle，那将是錯誤文法，因為這是個值隻有橢圓才接受；

代碼：表示了一個水準半徑為px，垂直半徑為px的橢圓

.test {
    background: radial-gradient(circle at center, #f00, #ff0, #080);
}
.test2 {
    background: radial-gradient(circle closest-side, #f00, #ff0, #080);
}
.test3 {
    background: radial-gradient(farthest-side, #f00 %, #ff0 %, #080 %);
}
.test4 {
    background: radial-gradient(at top right, #f00, #ff0, #080);
}
.test5 {
    background: radial-gradient(farthest-side at top right, #f00, #ff0, #080);
}
.test6 {
    background:
                radial-gradient(farthest-side at top right, #f00, #ff0, #080, transparent),

過渡( 超級重要)

transition-property設定過渡屬性

transition-duration設定過渡時間

transition-timing-function設定過渡速度（規定過渡效果的時間曲線。預設是 “ease”。）

transition-delay設定過渡延時

Internet Explorer 10、Firefox、Chrome 以及 Opera 支援 transition 屬性。

Safari 需要字首 -webkit-。

注釋：Internet Explorer 9 以及更早的版本，不支援 transition 屬性。

注釋：Chrome 25 以及更早的版本，需要字首 -webkit-。

div
{
transition: width s linear s;
/* Firefox 4 */
-moz-transition:width s linear s;
/* Safari and Chrome */
-webkit-transition:width s linear s;
/* Opera */
-o-transition:width s linear s;
//多個屬性過渡用逗号隔開，1s是整個過渡時間為1s,2s是延時2s才開始。
}

2D轉換（超級重要）

1、移動 translate(x, y) 可以改變元素的位置，x、y可為負值；

a) 移動位置相當于自身原來位置

b) y軸正方向朝下

c) 除了可以像素值，也可以是百分比，相對于自身的寬度或高度

2、縮放 scale(x, y) 可以對元素進行水準和垂直方向的縮放，x、y的取值可為小數；

3、旋轉 rotate(deg) 可以對元素進行旋轉，正值為順時針，負值為逆時針；

a) 當元素旋轉以後，坐标軸也跟着發生的轉變

b) 調整順序可以解決，把旋轉放到最後

4、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜，可為負值，第二個參數不寫預設為0。

3D轉換

用X、Y、Z分别表示空間的3個次元，三條軸互相垂直。如下圖

css3知識整理

1、透視(perspective)

電腦顯示屏是一個2D平面，圖像之是以具有立體感（3D效果），其實隻是一種視覺呈現，通過透視可以實作此目的。

透視可以将一個2D平面，在轉換的過程當中，呈現3D效果。（沒有perspective，便“沒有”Z軸）

目前浏覽器都不支援 perspective 屬性。

Chrome 和 Safari 支援替代的 -webkit-perspective 屬性。

3、perspective有兩種寫法

a) 作為一個屬性，設定給父元素，作用于所有3D轉換的子元素

b) 作為transform屬性的一個值，做用于元素自身

4、左手坐标系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐标系，拇指、食指和中指分别代表X、Y、Z軸的正方向。如下圖

5、左手法則

左手握住旋轉軸，豎起拇指指向旋轉軸正方向，正向就是其餘手指卷曲的方向。

css3知識整理

6、了解透視距離

透視會産生“近大遠小”的效果

7、3D呈現（transform-style）

設定内嵌的元素在 3D 空間如何呈現，這些子元素必須為變形原素。

flat：所有子元素在 2D 平面呈現

preserve-3d：保留3D空間

8、backface-visibility

動畫

動畫是CSS3中具有颠覆性的特征之一，可通過設定多個節點來精确控制一個或一組動畫，常用來實作複雜的動畫效果。

1、必要元素：

a、通過@keyframes指定動畫序列；

b、通過百分比将動畫序列分割成多個節點；

c、在各節點中分别定義各屬性

d、通過animation将動畫應用于相應元素；

2、關鍵屬性

a、animation-name設定動畫序列名稱

b、animation-duration動畫持續時間

c、animation-delay動畫延時時間

d、animation-timing-function動畫執行速度，linear、ease等

e、animation-play-state動畫播放狀态，running、paused等

f、animation-direction動畫逆播，alternate等

g、animation-fill-mode動畫執行完畢後狀态，forwards、backwards等

h、animation-iteration-count動畫執行次數，inifinate等

i、steps(60) 表示動畫分成60步完成

參數值的順序：

關于幾個值，除了名字，動畫時間，延時有嚴格順序要求其它随意

@keyframes myfirst
{
0%   {background: red; left:px; top:px;}
25%  {background: yellow; left:px; top:px;}
50%  {background: blue; left:px; top:px;}
75%  {background: green; left:px; top:px;}
100% {background: red; left:px; top:px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:px; top:px;}
25%  {background: yellow; left:px; top:px;}
50%  {background: blue; left:px; top:px;}
75%  {background: green; left:px; top:px;}
100% {background: red; left:px; top:px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:px; top:px;}
25%  {background: yellow; left:px; top:px;}
50%  {background: blue; left:px; top:px;}
75%  {background: green; left:px; top:px;}
100% {background: red; left:px; top:px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:px; top:px;}
25%  {background: yellow; left:px; top:px;}
50%  {background: blue; left:px; top:px;}
75%  {background: green; left:px; top:px;}
100% {background: red; left:px; top:px;}

//調用

div
{
animation: myfirst s;
-moz-animation: myfirst s; /* Firefox */
-webkit-animation: myfirst s;  /* Safari 和 Chrome */
-o-animation: myfirst s;   /* Opera */
}
//第二種
div
{
animation: myfirst s linear s infinite alternate;
/* Firefox: */
-moz-animation: myfirst s linear s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst s linear s infinite alternate;
/* Opera: */
-o-animation: myfirst s linear s infinite alternate;
}

伸縮布局

推薦學習

CSS3在布局方面做了非常大的改進，使得我們對塊級元素的布局排列變得十分靈活，适應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。

如下圖，學習新的概念：

主軸：Flex容器的主軸主要用來配置Flex項目，預設是水準方向

側軸：與主軸垂直的軸稱作側軸，預設是垂直方向的

方向：預設主軸從左向右，側軸預設從上到下

主軸和側軸并不是固定不變的，通過flex-direction可以互換。

CSS3彈性伸縮布局新版本

1.開啟彈性伸縮布局

display:flexbox;

2.設定布局中元素的排列方式和順序

flex-direction

可選的參數

row 水準

column 垂直

row-reverse 水準反向

column-reverse 垂直反向

3.設定無法容納時,自動換行

flex-wrap

可選的參數

nowrap 預設值都在一行或一列顯示

wrap 伸縮項目無法容納時,自動換行

wrap-reverse 伸縮項目無法容納時,自動換行,方向和wrap相反

4.flex-flow

集合了flex-direction 和 flex-wrap 的簡寫方式

display:flex;
flex-flow:row-reverse wrap;

5.justify-content調整主軸對齊

可選的參數

flex-start 伸縮項目以容器的起始點靠齊

flex-end 伸縮項目以容器的結束點靠齊

center 伸縮項目以容器的中心靠齊

space-between 伸縮項目平均分布(類似于老版本的-xxx-box-pack:justify,而且webkit和moz都是通用的)

space-around 伸縮項目平均分布,但兩邊留下伸縮項目之間距離一半的空白

6.align-items調整側軸對齊

可選的參考值

flex-start元素向側軸起點對齊。

flex-end元素向側軸終點對齊。

center元素向側軸中間對齊。

baseline如彈性盒子元素的行内軸與側軸為同一條，則該值與’flex-start’等效。其它情況下，該值将參與基線對齊。

stretch彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度。

7.flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮配置設定

8.align-content堆棧（由flex-wrap産生的獨立行）對齊

9.order控制子項目的排列順序，正序方式排序，從小到大

10.align-self 此屬性規定某一個特定的伸縮項元素在次軸上的布局方式，在某個元素上設定該屬性會覆寫它的align-items屬性。也就是這個屬性會讓某個元素更有個性，不走尋常路~

web字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        /*聲明字型*/
        /*聲明的第一個字型*/
        @font-face {
            font-family: 'itcast';
            src: url('./fonts/webfont.eot'); /* IE9*/
            src: url('./fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('./fonts/webfont.woff') format('woff'), /* chrome、firefox */
            url('./fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('./fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
        /*聲明的第二個字型*/
        @font-face {
            font-family: 'myfont';
            src: url('./fonts/webfont.eot'); /* IE9*/
            src: url('./fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('./fonts/webfont.woff') format('woff'), /* chrome、firefox */
            url('./fonts/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('./fonts/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
        .font {
            font-family: 'itcast';
            font-size: px;
            font-style: normal;
        }
        .myfont{
            font-family: "myfont";
            font-size: px;
            color: red;
            font-style: normal;
        }

    </style>
</head>
<body>
    <i class="font">執子之手，将子拖走!子若不走，拍暈了繼續拖走!</i>
    <br>
    <i class="font">執子之手，方知子醜，淚流滿面，子不走我走</i>
<i class="myfont">執子之手，方知子醜，淚流滿面，子不走我走</i>
</body>
</html>

css3知識整理

繼續閱讀

關于:first-child的誤區

flex彈性布局中的flex：1的了解

flex彈性盒模型及flex-grow與flex-shrink的計算

Flex布局及屬性

深入CSS vertical-align屬性

給背景圖檔添加超連結

去除div的滾動條但是依然可以滾動的方法

modern-normalize vs normalize.css

彈性web UI的核心：媒體查詢

CSS3 ---奔跑的小人

【CSS3】設定超連結樣式超連結樣式

分享幾個常用的css網站前言一、CSS 參考網站二、CSS 參考網站三、CSS集合，自由調節動畫參數，生成代碼片段：五、通過做飯，練習 CSS 選擇器六、送小青蛙回家，學習 flex 布局總結

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

談談css的僞類和僞元素

十大酷炫屌的圖像懸停特效

vue3 transitionvue3 transition元件和vue2 transition元件