CSS3主要內容

時間  2019-12-04
標籤 css3 css 主要 內容 欄目 CSS 简体版
原文   原文鏈接

CSS3主要內容

1、CSS選擇器

​ CSS3選擇器規範地址： https://www.w3.org/TR/2011/RE...
​ CSS3最新選擇器規範: https://www.w3.org/TR/selectors
​ css

!---問題---!html

1.CSS的全稱是什麼？
Cascading Style Sheetscss3

2.樣式表的組成：
CSS選擇器 + CSS聲明塊：（一個個CSS聲明：屬性名+屬性值）web

3.瀏覽器讀取編譯CSS的順序？
CSS選擇器的解析順序：從右往左。這樣作是爲了減小無效匹配次數，從而匹配快、性能更優。瀏覽器

1.基本選擇器*,html,.,#,空格,>,+,~,,

  • （1）通配符選擇器：* {}
  • （2）元素選擇器：body {}任何一個HTML元素
  • （3）類選擇器：. .list {}
  • （4）ID選擇器：# #list {}
  • （5）後代選擇器：空格 .list li{}
  • （6）選擇器的分組：用逗號,隔開各個選擇器
    h1,h2,h3{color: pink;} 此處的逗號咱們稱之爲結合符
  • 基本選擇器擴展
    • （7）子元素選擇器：>，也可稱爲直接後代選擇器,此類選擇器只能匹配到直接後代，不能匹配到深層次的後代元素。
      #wrap > .inner {color: pink;}
    • （8）相鄰兄弟選擇器：+，它只會匹配緊跟着的兄弟元素。
      #wrap #first + .inner {color: #f00;}
    • （9）通用兄弟選擇器：~，它會匹配全部的兄弟元素(不須要緊跟)。
      #wrap #first ~ div { border: 1px solid;}

2.屬性選擇器

（1）存在 和 值 屬性選擇器
​[attr]：該選擇器選擇包含 attr 屬性的全部元素，不論 attr 的值爲什麼。
​[attr=val]：該選擇器僅選擇 attr 屬性被賦值爲 val 的全部元素。
​[attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的全部元素，好比位於被空格分隔的多個類（class）中的一個類。
​
​（2）子串值屬性選擇器
​[attr|=val] : 選擇attr屬性的值是val（包括val）或以val-開頭的元素。
​[attr^=val] : 選擇attr屬性的值以val開頭（包括val）的元素。
​[attr$=val] : 選擇attr屬性的值以val結尾（包括val）的元素。
​[attr*=val] : 選擇attr屬性的值中包含字符串val的元素。ide

3.僞類與僞元素選擇器

（1）連接僞類： 注意:link，:visited，:target是做用於連接元素的！
​:link： 表示做爲超連接，並指向一個未訪問的地址的全部錨 。
​:visited：表示做爲超連接，並指向一個已訪問的地址的全部錨 。
​:target： 表明一個特殊的元素，它的id是URI的片斷標識符 。函數

（2）動態僞類 : 注意:hover，:active基本能夠做用於全部的元素！
​:hover : 表示懸浮到元素上。
​:active : 表示匹配被用戶激活的元素（點擊按住時）。
​因爲a標籤的:link和:visited能夠覆蓋了全部a標籤的狀態，因此當:link，:visited，:hover，:active同時出如今a標籤身上時 :link和:visited不能放在最後！！！

隱私與:visited選擇器:只有下列的屬性才能被應用到已訪問連接：
​color
​background-color
​border-color 佈局

（3）表單相關僞類
​:enabled： 匹配可編輯的表單
​:disable： 匹配被禁用的表單
​:checked： 匹配被選中的表單
​:focus： 匹配獲焦的表單 性能

​
（4）結構性僞類
​index的值從1開始計數！！！！
​index能夠爲變量n(只能是n)
​index能夠爲even、 odd
​#wrap ele:nth-child(index)：表示匹配#wrap中第index的子元素 這個子元素必須是ele
​#wrap ele:nth-of-type(index)：表示匹配#wrap中第index的ele子元素
​除此以外:nth-child和:nth-of-type有一個很重要的區別！！:nth-of-type以元素爲中心！！！
​字體

  • :nth-child(index)系列

    • :first-child
    • :last-child
    • :nth-last-child(index)
    • :only-child(相對於:first-child:last-child 或者 :nth-child(1):nth-last-child(1))

  • :nth-of-type(index)系列

    • :first-of-type
    • :last-of-type
    • :nth-last-type(index)
    • :only-of-type (相對於:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))
    • :not
    • :empty(內容必須是空的，有空格都不行，有attr不要緊)

（5）僞元素

::after
::before
::firstLetter
::firstLine
::selection
​

4.CSS聲明的優先級

（1）選擇器的特殊性
選擇器的特殊性由選擇器自己的組件肯定，特殊性值表述爲4個部分，如0,0,0,0
一個選擇器的具體特殊性以下肯定：

  • 1.對於選擇器中給定的ID屬性值，加 0,1,0,0
  • 2.對於選擇器中給定的各個類屬性，屬性選擇，或僞類，加 0,0,1,0
  • 3.對於選擇器中的給定的各個元素和僞元素，加0,0,0,1
  • 4.通配符選擇器的特殊性爲0,0,0,0
  • 5.結合符對選擇器特殊性沒有一點貢獻
  • 6.內聯聲明的特殊性都是1,0,0,0
  • 7.繼承沒有特殊性

特殊性 1,0,0,0 大於全部以0開頭的特殊性(不進位)

選擇器的特殊性最終都會授予給其對應的聲明

若是多個規則與同一個元素匹配，並且有些聲明互相沖突時，特殊性越大的越佔優點

注意區分：id選擇器和屬性選擇器
div[id="test"]（0,0,1,1） 和 #test（0,1,0,0）

（2）重要聲明

  • 有時某個聲明比較重要，超過了全部其餘聲明，css2.1就稱之爲重要聲明，並容許在這些聲明的結束分號以前插入!important 來標誌。
  • 必需要準確的放置 !important 不然聲明無效。
  • !important 老是要放在聲明的最後，即分號的前面。
  • 標誌爲 !important的聲明並無特殊的特殊性值，不過要與非重要聲明分開考慮。
  • 實際上全部的重要聲明會被瀏覽器分爲一組，重要聲明的衝突會在其內部解決。
  • 非重要聲明也會被分爲一組，非重要聲明的衝突也會在其內部解決。
  • 若是一個重要聲明與非重要聲明衝突，勝出的老是重要聲明。

（3）繼承

  • 繼承沒有特殊性，甚至連0特殊性都沒有。
  • 0特殊性要比無特殊性來的強。

（4）來源

  • CSS樣式的來源大體有三種：

    • 創做人員
    • 讀者
    • 用戶代理

  • 權重：

    • 讀者的重要聲明
    • 創做人員的重要聲明
    • 創做人員的正常聲明
    • 讀者的正常聲明
    • 用戶代理的聲明

（5）層疊

  • 1.找出全部相關的規則，這些規則都包含一個選擇器。

  • 2.計算聲明的優先級

    • 先按來源排序
    • 再按選擇器的特殊性排序
    • 最終按順序

2、自定義字體

  • @font-face：容許網頁開發者爲其網頁指定在線字體。
  • 經過這種做者自備字體的方式，能夠消除對用戶電腦字體的依賴。
  • font-family：所指定的字體名字將會被用於font或font-family屬性。
  • src：字體資源。

注意:不能在一個 CSS 選擇器中定義@font-face。

3、新的UI方案

1.文本新增樣式

（1）opacity

  • opacity屬性指定了一個元素的透明度。
  • 默認值：1.0 ，不可繼承。

（2）新增顏色樣式rgba

（3）文字陰影(text-shadow)

  • text-shadow用來爲文字添加陰影，並且能夠添加多層，陰影值之間用逗號隔開。（多個陰影時，第一個陰影在最上邊）
  • 默認值：none ，不可繼承 。

（4）文字描邊(-webkit-text-stroke)

  • 只有webkit內核才支持：-webkit-text-stroke（準確的來講不能算是CSS3的東西，但須要知道）。

（5）文字排版

  • direction:控制文字的方向，必定要配合unicode-bidi:bidi-override;來使用。

  • text-overflow :肯定如何向用戶發出未顯示的溢出內容信號。

    • 它能夠被剪切，
    • 顯示一個省略號（'...'）

2.盒模型新增樣式

（1）盒模型陰影box-shadow

  • box-shadow
    以逗號分割列表來描述一個或多個陰影效果，能夠用到幾乎任何元素上。 若是元素同時設置了 border-radius ，陰影也會有圓角效果。多個陰影時和多個 text-shadows 規則相同(第一個陰影在最上面)。
  • 默認值: none ， 不可繼承。

（2）倒影-webkit-box-reflect

  • -webkit-box-reflect 設置元素的倒影（準確的來講不能算是CSS3的東西，但須要知道）。
  • 默認值:none，不可繼承。

（3）resize

  • resize CSS 屬性容許你控制一個元素的可調整大小性。
    （必定要配合overflow：auto使用）
  • 默認值：none， 不可繼承。

（4）box-sizing

  • box-sizing 屬性用於更改用於計算元素寬度和高度的默認的 CSS 盒子模型。可使用此屬性來模擬不正確支持CSS盒子模型規範的瀏覽器的行/列爲。
  • 默認值：content-box， 不可繼承。

3.新增UI樣式

（1）圓角border-radius

  • border-radius
  • 默認值：0， 不可繼承。

（2）邊框圖片border-image

  • border-image： CSS屬性容許在元素的邊框上繪製圖像。這使得繪製複雜的外觀組件更加簡單，使用 border-image 時，其將會替換掉 border-style 屬性所設置的邊框樣式。

  • 默認值： 不可繼承

    • border-image-source: none
    • border-image-slice: 100%
    • border-image-width: 1
    • border-image-outset: none
    • border-image-repeat: stretc

（3）背景background

（4）漸變

  • CSS 漸變 是在 CSS3 Image Module 中新增長的圖片類型；使用 CSS漸變能夠在兩種顏色間製造出平滑的漸變效果. 用它代替圖片，能夠加快頁面的載入時間、減少帶寬佔用。同時，由於漸變是由瀏覽器直接生成的，它在頁面縮放時的效果比圖片更好，所以你能夠更加靈活、便捷的調整頁面佈局。

  • 瀏覽器支持兩種類型的漸變：

    • 線性漸變 (linear)，經過 linear-gradient 函數定義
    • 徑向漸變 (radial)，經過 radial-gradient 函數定義.

4、佈局擴展

1.flex佈局

CSS3 彈性盒子(Flexible Box 或 Flexbox)，是一種用於在頁面上佈置元素的佈局模式，使得當頁面佈局必須適應不一樣的屏幕尺寸和不一樣的顯示設備時，元素可預測地運行/列。對於許多應用程序，彈性盒子模型提供了對塊模型的改進，由於它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。

彈性盒模型，分老版與新版：

老版本的咱們一般稱之爲`box `  
新版本的咱們一般稱之爲`flex`

主軸 與 側軸

由`flex-direction`/`-webkit-box-orient`肯定

有了新版本後，爲何還須要老版本？（新版本比老版本要強大的不少）

不少移動端瀏覽器內核版本都超低。

（1）老版
容器設置display爲webkit-box
（注意:項目永遠是在主軸上排列的）

  • -webkit-box-orient屬性本質上肯定了主軸是哪一根

    • horizontal:x軸
    • vertical:y軸

（注意:項目永遠是沿着主軸的正方向排列的）

  • -webkit-box-direction屬性本質上改變了主軸的方向

    • -webkit-box-direction: normal;
    • -webkit-box-direction: reverse;

  • 富裕空間的管理（主軸）

    • start
    • end
    • center
    • justify
    • -webkit-box-pack:start;
      不會給項目區分配空間，只是肯定富裕空間的位置

  • 富裕空間的管理（側軸）

    • start
    • end
    • center
    • -webkit-box-align:center;
      不會給項目區分配空間，只是肯定富裕空間的位置

  • 彈性空間的管理：將富裕空間按比例分配到各個項目上

    • -webkit-box-flex: 1;
    • 默認值:0 ， 不可繼承

（2）新版

  • 容器的佈局方向

    • flex-direction: row;
    • flex-direction: column;

  • 容器的排列方向

    • flex-direction:row-reverse;
    • flex-direction:column-reverse;

  • 更強大的富裕空間的管理（主軸）

    • justify-content: flex-start;
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around(box 沒有的)

  • 更強大的富裕空間的管理（側軸）

    • align-items: stretch;
    • flex-start
    • flex-end
    • center
    • baseline(box 沒有的)
    • stretch(box 沒有的)

  • 彈性空間的管理

    • flex-grow: 1

2.新版flex佈局詳解

https://developer.mozilla.org...

3.響應式佈局核心：媒體查詢選擇器

CSS3媒體查詢是響應式方案核心。

（1）媒體類型

  • all： 全部媒體
  • braille： 盲文觸覺設備
  • embossed： 盲文打印機
  • print： 手持設備
  • projection： 打印預覽
  • screen： 彩色屏幕
  • speech： 「聽覺」相似的媒體設備
  • tty： 不適用像素的設備
  • tv： 電視

（2）媒體特性（媒體屬性）

  • width （可加max min前綴）
  • height （可加max min前綴）
  • min-width：分辨率寬度大於設置值的時候識別
  • max-width：分辨率寬度小於設置值的時候識別
  • device-width （可加max min前綴）
  • device-pixel-ratio：像素比（可加max min前綴，須要加webkit前綴）
  • orientation：portrait ：豎屏
  • orientation：landscape：橫屏

（3）操做符、關鍵字

  • and： 鏈接媒體特性

    • 鏈接媒體屬性 、鏈接媒體類型
    • 對於全部的鏈接選項都要匹配成功才能應用規則

  • or : 和and類似

    • 對於全部的鏈接選項只要匹配成功一個就能應用規則
  • not： 排除指定媒體類型

  • only： 指定某種特定的媒體類型

    • 防止老舊的瀏覽器 不支持帶媒體屬性的查詢而應用到給定的樣式。
@media only screen and (min-width:800px ){
        規則；
        規則
}
@media  screen and (min-width:800px ){

        規則；
        規則
}
    • 在老款的瀏覽器下
    • @media only ---> 由於沒有only這種設備，規則被忽略。
    • @media screen ---> 由於有screen這種設備並且老瀏覽器會忽略帶媒體屬性的查詢。
    • 建議在每次書寫media query的時候帶上only。

4.多列布局（分欄佈局）

（1）欄目寬度

  • column-width指定每一欄的寬度（這是多列布局的第一種分法）

（2）欄目列數

  • column-count指定要多少欄（這是多列布局的第二種分法）

（3）欄目距離

  • column-gap

（4）欄目間隔線

  • column-rule

過渡

2d/3d變形

動畫

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程