天天看點
傳回

CSS3 基礎知識CSS3

CSS3

CSS3 新增選擇器

  • 子級選擇器
  • 兄弟選擇器
  • 結構僞類選擇器
  • 僞元素選擇器
  • 屬性選擇器

子級選擇器

作用：用于選取具有父子關系，父元素的子元素

文法：

.box>p { color: red}

如果不是父子級關系，是祖父級或者其他，都不會生效

兄弟選擇器

  • 相鄰兄弟選擇器
  • 其他兄弟選擇器

相鄰兄弟選擇器

  • 書寫：

    element1 + element2 { color: red}
    • 選擇 element1 标簽後緊鄰的第一個 element2 标簽,若是倆者之間有其他元素存在就不會生效
  • 可以選擇一個同級元素之後的緊鄰元素
  • 倆者要有相同父元素
  • 多種情況
    • 當我們書寫一個

      p + p { color: red}

       
    <div class="box1">
  <h2>二級标題</h2>
  <p>段落0</p>
  <div>内容</div>
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <p>段落4</p>
</div>
    段落2，3，4都會被選中，是以緊鄰在某些情況下會選擇多個滿足條件的标簽

其他兄弟選擇器

書寫：

element1 ~ element2 { color: red}

作用：選擇同一個父元素中 在 element1 後所有 element2

  • 不再限制被緊鄰

結構僞類選擇器

  • E:first-child
    • 比對父元素結構中第一個子元素
  • E:last-child
    • 比對父元素結構中最後一個子元素
  • E:nth-child(n)
    • 比對父元素結構中第n個子元素
  • E:first-of-type
    • 比對父元素結構中同類型的第一個子元素
  • E:last-of-type
    • 比對父元素結構中同類型的最後一個子元素
  • E:nth-of-type(n)
    • 比對父元素結構中同類型第n個子元素

E:first-child

寫法：

.box1 :first-child { color: red}

.box1 p:first-child { color: red}

加了 p 标簽，若是 box1 第一個元素不是 p 标簽就不會生效

E:last-child

寫法：

.box1 :last-child { color: red}

.box1 p:last-child { color: red}

加了 p 标簽，若是 box1 最後一個元素不是 p 标簽就不會生效

E:nth-child(n)

寫法：

.box1 p:nth-child(4)

選中 box1 結構中第四個标簽，若這個标簽是 p 标簽就會生效 否則不生效 也可以不要 p

.box1 :nth-child(4)

選中 box1 結構中第四個标簽

屬性值

  • 數字
    • n 就是數字 寫第幾個就選第幾個
  • 關鍵子
    • even 偶數
    • odd 奇數
  • 公式( n 從 0 開始,間距 1 遞增)
    • 2n 偶數
    • 2n+1 奇數

    • -n + 5 前5個

      等等

  • 0 元素 或超出了元素個數就會忽略

E:first-of-type

寫法：

.box1 h2:first-of-type

作用：選取 box1 中 标簽為 h2 的第一個子元素

E:last-of-type

寫法：

.box1 h2:first-of-type

作用：選取 box1 中 标簽為 h2 的最後一個子元素

E:nth-of-type(n)

寫法：

.box1 p:nth-of-type(4)

左右：選取 box1 中 标簽為 p 的第四個子元素

與 E:nth-child(n) 差別 : nth-of-type 是現根據子元素标簽類型分組，再排序。而 nth-child(n) 是不區分子元素類型直接按結構順序排序

屬性值

  • 數字
    • n 就是數字 寫第幾個就選第幾個
  • 關鍵子
    • even 偶數
    • odd 奇數
  • 公式( n 從 0 開始,間距 1 遞增)
    • 2n 偶數
    • 2n+1 奇數

    • -n + 5 前5個

      等等

  • 0 元素 或超出了元素個數就會忽略

僞元素選擇器

  • E::before
    • 在 E 元素内部的第一行前面插入一個元素

    • div::before {content: "1";display: block;height: 50px;background-color: skyblue}
  • E::after
    • 在 E 元素内部的第後一行後面面插入一個元素

    • div::after {content: "1";display: block;height: 50px;background-color: skyblue}
  • E::first-letter
    • 選擇 E 容器中的第一個字母（文字）

    • div::first-letter {color: red}
  • E::first-line
    • 選擇 E 容器中的第一行文本

    • div::first-line {color: red}

注意：

  • 僞元素隻能給雙标簽的元素添加
  • 書寫時元素與僞類選擇器之間不能有空格

    E ::before

     錯
  • 僞元素必須加内容 content
  • before 和 after 建立的僞元素屬于行内元素
  • DOM 裡看不見這樣建立的元素，故稱為僞元素
  • div::before 和 div:before 都是可以的雙冒号是H5的文法規範

屬性選擇器

  • E[att]
    • 選擇具有 att 屬性且是元素 E 的
  • E[att=“val”]
    • 選擇具有 att 屬性且屬性值是 val 的 E 元素
  • E[att^=“val”]
    • 比對具有 att 屬性且屬性值開頭值包含 val 的 E 元素
  • E[att$=“val”]
    • 比對具有 att 屬性且屬性值結尾值包含 val 的 E 元素
  • E[att*=“val”]
    • 比對具有 att 屬性且屬性值包含 val 的 E 元素 
input[name] {
  width: 30px;
  height: 30px;
}
input[type="radio"] {
  width: 30px;
  height: 30px;
}
input[class^="icon"] {
  width: 30px;
  height: 30px;
}
input[class$="dan"] {
  width: 30px;
  height: 30px;
}
input[type*="o"] {
  width: 30px;
  height: 30px;
}
...
<input type="radio" name="sex" class="icon-dan"> 男性

新增選擇器的權重變化

僞類選擇器，屬性選擇器的權重等于類選擇器。

僞元素選擇器的權重等于标簽選擇器。

CSS3 盒模型

CSS3 中可以通過 box-sizing 來這指定盒模型

屬性值分别是

  • content-box (Standard 模式)
    • 内容區域(width + height)固定,設定 padding 和 border 後擴充整個盒子的實際大小，内容區域大小不變
  • border-box (Quirks 模式)
    • 實體化區域不變(width + height + padding + border)固定, 設定 padding 和 border 後整個盒子的實體化區域大小不變，内容區域縮減

我們盒模型一般預設是 content-box

CSS3 新增屬性

  • border-radius 邊框圓角
  • text-shadow 文字陰影
  • box-shadow 盒子陰影

邊框圓角 border-radius

作用：設定邊框圓角

屬性值：可以是像素或百分比，百分比參考盒子整體寬度，高度百分比。

  • x-radius / y-radius 水準方向和垂直方向
  • radius 整體

當盒子是一個正方形時，若是想整個圓形就設定 radius 為寬高的 50%。

單一屬性：以盒子的頂點方向來劃分

  • border-top-left-radius: 值
  • border-top-right-radius:
  • border-bottom-left-radius:
  • border-bottom-right-radius:

注意 ：top 跟 left 不能互換位置來寫，違反文法規定

簡寫：

  • 四值法 按順時針方向來寫
    • 左上，右上，右下，左下
  • 三值法
    • 左上，右上和左下，右下
  • 二值
    • 左上和右下，右上和左下
  • 一值
    • 四值相同

特殊的 /

border-radius: x / y

x 也可用四值法或其它幾值寫法單獨寫

y 同理

x 與 y 分開計算互不影響。

例：

border-radius: 10px 20px 30px / 40px 50px

相容問題：ie8 和它以下不支援 border-radius屬性

文字陰影 text-shadow

作用：可以給文本設定陰影

屬性值

  • h-shadow
    • 水準陰影的位置，必填，可為負值
  • v-shadow
    • 垂直陰影的位置，必填，可為負值
  • blur
    • 模糊距離 選填
  • color
    • 陰影顔色 選填

寫法：水準值 + 垂直值 + 模糊值 + 顔色

text-shadow: 2px 2px 2px red;

多層陰影用逗号隔開連續書寫

text-shadow: 2px 2px 2px red,3px 3px 3px blue;

盒子陰影 box-shadow

作用: 給盒子邊框添加陰影

屬性值：

  • h-shadow
    • 水準陰影的位置，必填，可為負值
  • v-shadow
    • 垂直陰影的位置，必填，可為負值
  • blur
    • 模糊距離 選填
  • spred
    • 陰影尺寸 選填
  • color
    • 陰影顔色 選填
  • inset
    • 将預設值外部陰影改為内部陰影

書寫順序

水準值 + 垂直值 + 模糊值 + 尺寸 + 顔色 + 是否設為内部陰影

box-shadow: 3px 3px 2px 1px yellow inset;

多層陰影寫法跟文字陰影一樣，用逗号隔開

box-shadow: 3px 3px 2px 1px yellow inset,5px 5px 3px 1px blue inset;

注意 ： 外部陰影為預設值，不需要設定啥；先寫陰影壓蓋後寫的

CSS3 過度屬性 transition

作用：當元素有條屬性發生變化時，例如寬度，我們使用 transition 就可以實作平滑的過度效果

屬性值：

  • 監測的屬性
    • 就是元素裡某個屬性值會發生變化
  • 過度時間
    • 從狀态開始變化到結束的時間
  • 運動曲線
    • 變化過程中快慢速度
  • 延時時間
    • 延遲多久再讓屬性的發生變化

書寫順序

transition: 屬性 過度時間 過度曲線 延時時間;

transition: all 2s ease 0s; ``transition: all 2s cubic-bezier(0.29, 0.3, 0.25, 1) 0s;

單一屬性寫法

  • transition-property
    • 過渡的 CSS 屬性名稱
    • none 表示沒有
    • all 表示所有變化屬性都過渡
    • 多個過渡屬性名中間用逗号隔開
  • transition-duration
    • 過渡花費的時間 預設 0
    • 秒 s 為機關
  • transition-timing-function
    • 過渡效果的時間曲線 預設"ease"
    • linear 從開始到結束都是相同時間
    • ease 開始到結束：慢-快-慢
    • ease-in 開始到結束：慢-快
    • ease-out 開始到結束：快-慢
    • ease-in-out 開始到結束：慢-快-慢
    • cubic-bezier(x1,y1,x2,y2) 自己定義開始到結束的快慢 參考谷歌浏覽器控制中的調試效果 又名：貝塞爾曲線
  • transition-delay
    • 過渡效果多久後開始 預設是0
    • 秒 s 為機關

相容問題

IE9及以下不支援 transition 屬性

蘋果浏覽器 Safari 需要字首 -webkit-

-webkit-transition: all 2s ease 0s;

Chrome Firfox Opera 都支援

2D轉換 transform

作用:對元素進行移動、縮放、轉動、拉伸或拉長

屬性值：很多

  • translate() 移動
    • translate(x,y) x,y 分别為水準方向和垂直方向移動距離，可以是 px 和百分比
    • translate(x) 隻有一個數值,表示水準方向位移
  • scale() 縮放
    • scale(x,y) x,y 分别是元素寬度和高度縮放的倍數
    • scale(n) 元素寬度和高度等比例縮放 n 倍
    • scaleX(n) 縮放元素寬度
    • scaleY(n) 縮放元素高度
  • rotate() 旋轉
    • rotate(數字+deg)
    • 正數順時針旋轉，負數逆時針
    • 注意： 元素旋轉後，坐标軸也發生了旋轉。是以移動和旋轉的先後順序不同，最後元素所在的位置是完全不同的
  • skew() 傾斜
    • skew(數字+deg,數字+deg) 倆個值分别表示水準和垂直方向的傾斜，值可以正，可以負，第二個值不寫預設0

設定基準點 transform-origin

作用：設定元素水準和垂直方向的原點位置

屬性值：

  • x
    • 定義 X 軸的原點在何處。left、center、right、像素值、百分比
  • y
    • 定義 Y 軸的原點在何處。top、center、bottom、像素值、百分比

例：

transform-origin: left top;

3D 轉換-透視 perspective

要想看 3D 效果必須設定一個透視屬性 perspective

  • perspective
    • 作用：設定在 Z 軸方向上的觀察位置，實作 3D 檢視效果
    • 屬性值：px 值越大，觀察點距離 Z 軸原點越遠，效果越好
    • 注意：透視屬性需要設定給 3D 變化元素的父級

3D 轉換-旋轉

屬性名：transform

屬性值：

  • rotateX(數字+ deg) 沿 3D X軸方向旋轉
  • rotateY(數字+ deg) 沿 3D Y軸方向旋轉
  • rotateZ(數字+ deg) 沿 3D Z軸方向旋轉

正數順勢針旋轉，負數逆時針

3D 轉換-位移

屬性名：transform

屬性值：為像素或是百分比，正值向正方向移動，負值向負方向移動

  • translateX(x) 設定X軸位移值
  • translateY(y) 設定Y軸位移值
  • translateZ(z) 設定Z軸位移值

注意：同 2D 一樣旋轉或移動的先後順序，會改變原點，最後得到的圖形并不一緻

transform-style 屬性

作用：用于設定被嵌套的子元素在父元素的 3D 空間中顯示，子元素保留自己的 3D 轉換坐标軸。

屬性值：

  • flat :所有元素在 2D 平面呈現
  • preserve-3d ：保留 3D 空間

相容問題

IE10，Firefox，Opera 支援 transform 屬性

Chrome 和 Safari 需要字首 -webkit-

IE9 需要字首 -ms-

動畫

1.建立動畫

2.綁定動畫

  • @keyframes 規則
    • 作用： @keyframes 用于建立動畫，讓元素由一種樣式變成另一種，不限樣式不限次數
    • 用百分比或 from 和 to 來表示開始到結束。from 等價于 0%，to 等價于 100%
    • 書寫方法： 
    @keyframs 動畫名稱 {
  from {
    /* 開始樣式最好和原始樣式一緻，避免動畫不連貫 */
    樣式1 
  }
  to {
    樣式2
  }
}
@keyframs 動畫名稱 {
  0% {
    樣式1
  }
  25% {
    樣式2 可以任意添加細節
  }
  40% {
    樣式3
  }
  100% {
    樣式4
  }
}
  • animation 屬性
    • 作用：用于把動畫綁定到對應元素上
    • 文法：其中必須設定動畫名稱和過度時間，其他不是必填 
    div {
  animation: 動畫名稱 過度時間 速度曲線 動畫次數 延時時間
}
    • 單一屬性
      • animation-name 動畫名稱
      • animation-duration 花費時間
      • animation-timing-function 動畫速度曲線，預設"ease"
      • animation-delay 延時時間
      • animation-iteration-count 動畫播放次數 預設1 infinite 表示循環播放

相容問題

IE10，Firefox，以及Opera 支援 @keyframs 規則和 animation 屬性

Chrome 和 Ssfari 需要字首 -webkit-

IE9 及一下 不支援 @keyframs 規則和 animation 屬性

前端基礎知識 css3 css
上一篇: redhat6使用163 yum源
下一篇: css屬性：hover 僞元素 :before :after

繼續閱讀