核心樣式、H5 + C3 新特性<a name="top"></a>

二、HTML5

三、CSS 3

一、CSS核心樣式

1.2 盒模型（框模型）

1.3 盒模型擴充套件

1.4 標準文件流

1.5 浮動

1.6 偽類

1.7 css常用樣式-背景

1.8 定位

1.9 靜態輪播案例

1.1 css常用樣式

• 粗細font-weight

  • 作用：設定文字是否加粗

  • 屬性定義方式： 單詞型別，數字型別

    • 單詞型別：normal（正常）、bold（粗體字型）、bolder（更粗字型）、lighter（更細字型）

    • 數字型別：100-900整百數字，400等價於normal，700等價於bold

• 字型風格font-style

  • 作用：設定文字是否斜體顯示

  • 屬性值：normal（設定正規字型）、italic、oblique

    • italic: 主要針對英文, 要求英文以字型中的斜體樣式i顯示

    • oblique: 只是講文字傾斜顯示, 與字型無關

    • 如果italic沒有斜體的字型, 會強行載入oblique的樣式的字型

    • 如果設定了oblique但沒有傾斜的字型(與字型無關), 則會強行載入italic的字型

    • i 標籤的的font-style屬性預設是italic

• 行高line-height

  • 作用: 設定一行文字實際佔有的高度, 文字字號在行高中是垂直居中

    的.

  • 字型會有預設行高，font-size加上4px小於16（cheome瀏覽器，因為chrome瀏覽器的font-size最小為12px）的時候會以16px行高，超過的話就以font-size+4來顯示

  • 文字預設是在它所被設定的行高裡面垂直居中顯示的

  • 屬性值: px畫素值、百分比數值

    • 畫素值即直接設為多少為多少

    • 百分比為本身字型字號的百分比（如果font-size為14px，那麼如果line-height設為200%，則為28px）

• 量取方法

  • fireworks

    • 在文字效果圖中，使用不同顏色的兩個字型（換行再加一個），修改字號還有字型型別以及行高使兩個文字重疊

    • 有時候即使字型字型字號相同也會出現不能重疊的現象，比如：14px和15px字型大小雖然相同，但是字型間距不一樣

• 字型綜合font

  • 順序: 加粗, 斜體, 字號/行高, 字型

  • 格式：

    • 只有字號行高：font: 16px/20px;

    • 只有字號行高+字型： font: 16px/20px '宋體';

    • 全部都有： font: bold italic 16px/20px '宋體';

    • 全寫的時候font-style跟font-weight可以調換位置

• 水平對齊text-align

  • 作用: 設定文字水平方向的對齊, 在盒子中, 不論文字是單行還是多行, 都會對應方向對齊

  • 屬性值: let, right, center

• 文字修飾: text-decoration

  • 屬性值: none, overline, line-through(<del>預設值), underline(<a>標籤預設值)

• 首行縮排: text-indent

  • 屬性: px單位、em單位、百分比

    • px: 固定單位

    • em：字型的寬度

    • 百分比：參考的是盒子的width寬度

1.2 盒模型（框模型）<a name="a1_2"></a>

回到頂部

• 盒子模型又叫框模型，包含了五個用來描述盒子位置、尺寸的屬性，分別是寬度width、高度height、內邊距padding、外邊距margin、邊框border

• 模型區域：

  • 書寫區域：width+height

  • 實體化區域（顏色區域）：w+h+pd+bd

  • 實際佔位：w+h+pd+bd+mg

• 寬度width: auto(預設值, 自動計算實際寬度), px(自定義), %(父元素w百分比)

  • body會自適應瀏覽器視窗的寬度的100%

  • span這種不是獨佔一行的標籤預設值auto不是佔父元素的100%而是根據自身內容來增加

• 高度height: auto(預設值), px, %與width相似

  • auto不是佔父元素的100%, 而是根據子元素內容撐開

• 內邊距padding

  • 作用: 設定元素邊框內部到content之間的距離

  • 特點: 可以去載入背景(背景圖, 背景色), 不能書寫巢狀的內容

  • 有單一屬性和複合屬性(除了四值/一值設定之外, 左右總是相等的)

    • 四個值: 依次是top、right、bottom、left

    • 一個值: 四邊同時設定

    • 兩個值: (top bottom), (right right)

    • 三個值: (top) (right left) (bottom)

• 邊框border

  • 作用: 設定的是內邊距外面的邊界區域, 作為盒子模型實體化的最外層

  • border有單一屬性, 但是推薦直接用符合寫法, 而且每一個單一屬性都可以使用四值法設定

  • 複合寫法: 寬度(border-width), 線的形狀, 線的顏色

  • border-style: 當這個屬性為none(或者border為none)的時候, 會隱藏邊框線

  • 單一屬性加上方向: 方向要在border後面如: border-top-color

• 外邊距margin

  • 作用: 設定盒子與盒子之間的距離

  • 特點: 不能渲染背景

1.3 盒模型擴充套件<a name="a1_3"></a>

回到頂部

• 清除預設樣式

  • 瀏覽器載入的預設樣式, 會對佈局造成一定影響

  • 大部分容器級標籤都有預設邊距

  • ul, ol清除list-style, a清除text-decoration

  • font-weight: 清除預設加粗效果, h1-h6, b, strong

  • 設定初始化的公共樣式

    • body {
        color: #333;
        font-size: 14px;
        font-family: Arial, "宋體";
      }

    • 而瀏覽器預設載入的樣式如h1的樣式會根據就近原則層疊掉body的預設樣式

• 高度height應用

  • 設定高度的情況: 盒子高度固定, 同級元素緊接著載入, 自身盒子內部內容過多溢位盒子但後不會撐開

  • 控制溢位內容的屬性: overflow

    • 屬性值	說明
      visible	預設值,可見的可視的, 溢位部分顯示的
      hidden	溢位部分直接隱藏, 隱藏超過邊框範圍的內容
      scroll	溢位的部分出現滾動條, 可以拖動滾動條看到隱藏部分, 多出盒子高度的部分不顯示, 無論有沒有溢位, 水平和垂直方向都會出現滾動條
      auto	自動的, 如果沒有溢位就正常顯示, 如果有溢位, 溢位的方向會自動出現滾動條

    • 必須設定高度情況: 父元素需要靠子元素內容自適應撐開

      • height: auto;

• 居中

  • 文字居中

    • 水平居中: text-align: center;

    • 垂直居中: 設定了高度, line-height=高度;(不能適配多行), 沒有設定高度, 設定padding-top/bottom來撐開盒子(可以單行可以多行)

  • 元素(盒子)居中

    • 水平居中: 當寬度小於父盒子的時候設定margin的left/right都為auto

    • 垂直居中, 設定padding

• 盒模型自動內減少: 子元素(不設定width)獨佔一行且不比父元素寬, 其盒子模型的width會根據其padding, margin, border自適應增加或者減少

• margin塌陷現象

  • 在垂直方向如果有兩個元素的外邊距

  • 同級margin塌陷

    • 同級緊挨著的盒子元素margin會只保留較大的margin

  • 父子margin塌陷(合併)

    • 父元素沒有設定margin-top, 貼著父元素的設定了, 會出現子元素的當作父元素的margin-top

  • 解決margin塌陷的方法

    • ① 同級: 只設定一個元素(避免)或者用觸發bfc的父盒子包裹其中一個

    • ② 父子: 儘量讓父元素設定padding值, 使父元素觸發bfc

  • 水平方向沒有margin塌陷

1.4 標準文件流<a name="a1_4"></a>

回到頂部

• 文件流: 元素排版中, 從左往右, 從上往下流式排列方式

• HTML就是一種標準文件流檔案, HTML標準文件流特點通過兩種方式實現: 微觀現象, 元素等級

• 微觀現象

  • ① 空白摺疊現象, 行內元素在html檔案中的換行符audi號會在網頁中以空白顯示

  • ② 文字類的元素如果排在一行會出現高低不齊, 底邊對齊的效果

  • ③ 自動換行, 寫滿元素的width會出現自動換行

• 元素等級:

  • 常見載入級別: 塊級元素, 行內元素, 行內塊元素

  • 塊級元素

    • a. 可以設定寬高, 在瀏覽器正常載入

      b. 塊級元素必須獨佔一行不能與其他任何標籤並排一行

      c. 塊級元素如果不設定寬度, 會自動撐滿父級的width區域, 會被內容自動撐開高度

  • 行內元素

    • a. 行內元素不能正常載入寬度和高度屬性, 其他的盒模型屬性雖然能設定, 但是容易出現載入問題(給span設定padding, 文字依然在水平線, 而padding會向上下撐開, 而不是像盒子模型那樣, margin同理)

      b. 行內元素可以與其他的行內或行內塊元素並排一行顯示

      c. 行內元素無論是否設定寬高, 寬度和高度都只能被內容自動撐開

  • 行內塊元素

    • a. 行內塊元素可以設定寬度和高度

      b. 行內塊元素可以與其他的行內或者行內塊並排一行顯示

      c. 行內塊元素如果不設定寬高, 要麼以原始尺寸載入, 要麼被內容自動撐開

      d. 行內塊依舊具有標準流的微觀特性, 比如空白摺疊現象(缺點)

• 顯示模式display

  • 標準流中元素有預設的載入模式, 但是也是可以改變的

  • display: block/inline/inline-block/none(原有位置讓出來)

• 脫離標準流方法: 浮動, 絕對定位, 固定定位

1.5 浮動<a name="a1_5"></a>

回到頂部

• 浮動的含義

  • float: left/right;

  • 作用: 讓元素脫離標準流, 同一級的浮動元素可以並排在一排顯示

• 浮動的性質

  • 浮動元素脫離了標準流的限制, 行快二相性, 可以設定寬高, 可以並排一行, 不會有空白摺疊現象, 不設定寬高, 元素會被內容自動撐開(類似於行內塊元素, 但是沒有空白摺疊現象)

  • 貼邊現象

    總會朝著float的方向貼邊, 當前浮動元素超過父元素的寬度時候, 會向下找到有足夠寬度放置該浮動元素的位置, 其中可能貼在另外一個浮動元素, 當寬度還是滿出, 則依次向下貼邊, 如果貼在父元素的邊的時候還是超出則會溢位顯示, 此過程不會向上鑽空(比如2下面的空白位置)

  • 貼邊小案例

    .table {
     list-style: none;
     background-color: #ccc;
     padding-top: 3px;
     padding-left: 3px;
     width: 412px;
     height: 99px;
    }
    .dd {
     width: 100px;
     height: 30px;
     background-color: skyblue;
     margin-bottom: 3px;
     margin-right: 3px;
     float: left;
    }

  • 浮動元素沒有margin塌陷

    • margin塌陷是標準流出現的問題

  • 壓蓋效果: 同級元素, 一個不浮動, 最好使用定位製作.

    • 因為有相容性問題, 所以最好不要在一個父元素的子元素中設有浮動還有不浮動的子元素

  • 字圍現象

    • 因為設定了float所以出發了bfc不會讓其他元素影響自身所以文字會圍著浮動元素

• 浮動的問題

  • 浮動撐不高父元素的高度

  • 浮動的元素會影響其他盒子裡面浮動的元素, 後面就涉及道清除浮動

• 清除浮動

  • ① 強制給父元素設定一個高度

    • 不能實現自適應效果

  • ② clear屬性

    • a. 外牆, 在兩個元素之間, 新增一個空div, 設定clear: both;屬性

    • b. 內牆: 在浮動元素的父元素中, 新增一個空div設定clear: both;

      • 但是這樣的做法會讓本身想讓html簡潔的css變得要用html去解決css而不太符合邏輯了

    • c. 內牆升級版

      • 即添加了一個偽類, 解決了避免解除安裝html標籤的問題

      • .clearfix:after {
          content: "";
          display: block;
          clear: both;
          height: 0;
          visibility: hidden;
        }

  • ③ overhidden(觸發bfc)

    • 可以解決並自適應高度的原因: 一個元素沒有設定高度, 同時設定了溢位隱藏, 瀏覽器在記載盒子尺寸時, 遇到溢位隱藏瀏覽器會強制性去檢索內部的子元素的高度, 不論子元素是標準流還是浮動, 都會將最高的高度作為父盒子高度載入

    • 浮動影響後面的元素, 父元素有了高度後, 可以管理住內部多的所有浮動元素, 不會延伸到後面標籤中影響貼邊

  • 如果父元素高度固定, 建議使用height

  • 如果需要自適應, 建議使用overflow: hidden;

1.6 偽類<a name="a1_6"></a>

回到頂部

• 概念

  • 偽類和類之間有一定的相似之處, 也存在明顯的區別

  • 普通的類: 需要設定class屬性, 會立即載入道瀏覽器之上

  • 偽類: 不需要加任何屬性, 語法提前規定好, 不一定立刻載入到瀏覽器之上, 只有使用者觸發了對應的行為, 才會載入

  • 偽類選擇器的權重與普通的類選擇器相同

  • 寫法: 普通選擇器:為類名

• a標籤的偽類

  • Love Hate

  • link(訪問前的狀態, 預設), visited(跳轉之後的狀態), hover(滑鼠浮動到上面的狀態), active(正在點選的狀態)

  • a的偽類有嚴格的書寫順序, 因為可以一次操作中, 會觸發2到3個狀態, 利用css的層疊行可以讓其在對應的狀態上顯示出想要的效果

  • 所以建議一般寫a標籤來覆蓋前面的元素然後再寫a:hover

    • 發現了一個問題, 在瀏覽器中, a標籤的預設樣式是新增在a的-webkit-any-link偽類上面, 但是a的css樣式可以覆蓋這一個偽類, 根據選擇器的權重(偽類相當於類)設定了-webkit-any-link(這裡的是在樣式表設定的, 非預設)之後在設定a卻不生效了

    • 問題解答: 因為樣式表的權重是, 排除就近原則的情況下, !important > 行內 > id > class, 偽類, input的type > 標籤, 偽元素 > 萬用字元 > 瀏覽器預設載入樣式, 瀏覽器預設載入樣式無論是否有偽類或者什麼都是最低權重的, 比如瀏覽器預設的a:-webkit-any-ling的權重比a要低

1.7 css常用樣式-背景<a name="a1_7"></a>

回到頂部

• background-color: 設定背景顏色

• background-image: 設定圖片作為背景, 覆蓋顏色之上, 如果設定了no-repeat則邊框範圍的圖片會隱藏, 沒有設定no-repeat則會保留

• background-repeat: no-repeat repeat(預設) repeat-x repeat-y(設定了x重複, 則y方向的border不會有圖片, x方向相反)

• background-position: (left top為預設)屬性值有三種表示方法, 分別為 單詞表示法, 畫素表示法, 百分比表示法

  • 單詞表示法: left, right, top, bottom

  • 畫素表示法: xy方向可為正可為負

  • 百分比表示法: border內部(包含padding)減去圖片的寬度的百分比, 較少使用

• background-attachment: 背景附著

  • scroll(預設屬性)

  • fixed: 相當於fixed定位一樣, 但是隻會在其設定background-image的元素滾動到背景的區域才會顯示, 超過了就會隱藏

• background綜合寫法:

  • barkground: url(imgges/bg4.jpg) no-repeat center top fixed

  • 顛倒順序不會造成其載入錯誤, 注意position的先後位置不能顛倒或者拆分

  • 注意事項:

    • ① 如果只用background設定了一個值, 其餘的屬性會根據預設值進行載入

    • ② 如果想除去層疊綜合屬性的一部分, 最好用單一屬性進行書寫, 這樣不會影響到其他屬性

• 背景的應用

  • 替換插入圖

    • 一般h1會放logo的圖片, 為了提高SEO會把插入的圖片替換成背景圖, 寫上描述文字上去, 但是描述的文字是需要隱藏的, 隱藏方法有

      • ① 把字號設為0 (IE8以上才會相容)

      • ② 首行縮排text-indent: 很多em;並且設定溢位隱藏

  • padding區域背景圖

    • 利用background-image可以在padding區域顯示的特性, 用其來在每段行首加入background就可以顯示成模仿li的符號了

• 精靈圖技術(sprites)

  • 因為每次需要用到圖片的時候都要向伺服器傳送請求, 這樣頻繁的接受和傳送請求, 這會大大降低頁面的載入速度

  • 一般把零星的小背景圖集中到一張大圖上去, 然後將大圖應用於網頁, 這樣就只用傳送一次請求, 就可以將背景圖展示出來

  • 注意事項:

    • 只放背景圖, 不放插入圖片

    • 寬度取決於最寬的那個背景圖片的標籤寬度

    • 可以橫向擺放, 也可以縱向擺放, 但是每圖片留夠足夠的空白, 保證背景圖片載入到一個標籤內部, 不出現多餘內容

    • 精靈圖地段儘量留空白, 方便以後新增其他精靈圖

  • 可以在線上網站上生成, 提高效率

• CSS3新增, 顏色半透明

  • rgba的第四個屬性可以設定透明度0~1

• CSS3新增, 背景縮放

  • background-size: 可以設定背景圖片的大小

    • 屬性值	說明
      px值	1-2個畫素值, 只設置一個, 等比例, 設定兩個, 按照值載入
      百分比	原圖片的基礎上百分比
      cover	使圖片放大, 以足夠完全覆蓋背景區, 溢位隱藏
      contain	使圖片放大, 保證圖片完整顯示

• CSS3新增, 多背景

  • 在background-imag中, 每個url載入一個圖片, 用逗號,分隔開

  • 後寫的url會蓋住前面的url

1.8 定位<a name="a1_8"></a>

回到頂部

• 概念

  • 定位屬性position

    • 屬性值	描述
      relative	相對定位
      absolute	絕對定位
      fixed	固定定位

    • 作用: 設定定位的元素, 它需要根據某個參考元素髮生位置的偏移

  • 偏移量屬性

    • 設定position只是會改變狀態, 要想移動要設定偏移量

    • 水平: left, right

    • 垂直: top, bottom

    • 常用單位px

• 相對定位

  • position: relative;

    • 相對自身偏移, 偏移必須搭配偏移量

  • 性質:

    • 並沒有脫離標準流, 以然佔有原有位置

    • 原位留坑, 形影分離

  • 注意事項

    • ① 偏移量屬性是區分正負的

    • ② 同一方向(比如left與right)不能同時設定, 如果同時設定了, 會取left或者top

    • ③ 參考元素是自身, left的正值即等於right的負值

    • 建議只用left, top

  • 實際應用

    • 子絕父相的父

    • content-box的盒子中因為border-top撐開自己用top來更正自己正確的位置

    • 模擬sup, sup的標籤

• 絕對定位

  • position: absolute;

  • 性質

    • 脫離標準流, 讓出標準流位置, 可以設定寬高, 也可以隨時定義位置, 如果不設定寬高, 會被內容撐開

    • 注意1: 參考元素不同, 位移效果不同

    • 注意2: left/right不能再互換

  • 祖先級沒有定位的時候

    • 會根據視窗的位置來進行定位, 即使body超過可視區並且可以滑動或者佔不滿可視區, 可是會根據可視區域進行定位, 所以不建議祖先級沒有定位的情況下設絕對定位

  • 參考元素/參考點選擇

    • 祖先級參考元素

      • 子絕父相, 子絕父絕, 子絕父固

    • 祖先元素參考點

      • border以內的四個頂點, 忽視padding值

• 固定定位

  • position: fixed

  • 參考元素: 瀏覽器視窗

  • 參考點: 瀏覽器視窗的四個頂點

  • 性質

    • 脫離標準流, 可以設定寬高

• 固定定位, 絕對定位都會脫離標準流並且可以設定寬高

• 定位應用

  • 壓蓋

  • 居中(left為-50%, 然後設定margin-left為負的自身寬度的一半)

    • 定位中left的百分比是佔第一個祖級定位元素的寬度的

• 壓蓋z-index

  • 定位的元素不區分定位的型別(即包括absolute和fixed), 預設壓蓋效果主要看HTML元素書寫順序

  • 自定義壓蓋

    • 設定z-index, 預設是0

    • 注意事項

      • ① z-index大的會壓蓋屬性小的

      • ② 如果相同則看書寫順序

      • ③ 只能給定位元素才會生效

      • ④ 父子盒模型中, 如果父子盒子都進行了定位, 與其他的父子級有壓蓋部分

        • 父級盒子: 如果不設定z-index, 後寫的壓住先寫的; 如果設定了z-index, 值大的壓蓋值小的

        • 子級盒子: 如果父級沒有設定z-index屬性, 子級z-index大的會壓蓋小的; 如果父級設定了z-index, 無論子級值是多少, 都是父級的值大的子級壓蓋父值小的子級, 叫做"從父效應"

1.9 靜態輪播案例<a name="a1_9"></a>

回到頂部

• 寫css的建議順序

  • ① 先寫定位position/浮動float + left等

  • ② 再根據是否能設定盒模型屬性來寫判斷寫不寫寬高

  • ③ 背景的屬性

  • ④ 文字相關的屬性

• 新增current來表示當前值

二、HTML5<a name="a2"></a>

2.1 HTML5簡介

2.2 HTML新增

回到頂部

• 標籤簡寫:

  • 屬性值和屬性名一樣, 可以簡寫

2.1 HTML5簡介<a name="a2_1"></a>

• 全球資訊網的核心語言, 標準通用標記語言下的一個應用超文字標記語言(HTML)的第五次重大修改, 用於取代HTML4與XHTML新一代標準版本, 所以叫HTML5

• HTML5

  • html5的設計目的是為了在移動裝置上支援多媒體

  • 增加了新特性: 語義特性, 本地儲存特性, 裝置相容特性, 連線特性, 網頁多媒體特性, 三維, 圖形及特效特性, 效能與繼承特性, CSS3特性

  • 廢棄屬性:

    • font, center

• XHTML可擴充套件超文字標記語言

  • XHTML是一種增強了的HTML, 它的擴充套件性和靈活性將適應未來網路應用更多的需求

• HTML優勢

  • 提高可用性和改進使用者的友好體驗

  • 更好的語義化標籤

  • 可以給站點帶來更多的多媒體元素

  • 可以很好的替代FLASH和Sliverlight

  • 當涉及到網站的抓取和索引的時候, 對於SEO很友好

  • 將被大量應用於移動應用程式和遊戲

  • 可移植性好

• HTML5劣勢

  • 該標準並未能很好的被PC端瀏覽器所支援

  • IE9以下的瀏覽器幾乎不相容

2.2 HTML新增<a name="a2_2"></a>

回到頂部

• HTML5新增語義化標籤

  • 標籤語義化

    • 以前製作網頁佈局, 我們基本用div來做, div就是一個普通的塊級標籤, 對於搜尋引擎來說, 是沒有語義的

  • 新增語義化標籤

    • <header>: 頭部標籤

    • <nav:> 導航標籤

    • <main>: 主體標籤

    • <article>: 獨立的內容標籤

    • <section>: 區段標籤

    • <aside>: 側邊欄標籤

    • <footer>: 尾部標籤

  • 注意事項

    • 這種語義化標準主要針對搜尋引擎

    • 這些新標籤頁面中可以使用多次的

    • 在IE9中, 需要把這些元素轉換為塊級元素

    • 移動端使用這些標籤更好

• HTML新增多媒體標籤

  • <audio>

    • HTML在不適用外掛的情況下也可以原生的支援音訊格式檔案的播放, 可能會不相容某些格式

    • 屬性

      • autoplay不可以在chrome中實現

    • 相容寫法

      • <audio>
          <source src="happy.mp3" type="audio/mepg" />
          <source src="happy.mp3" type="audio/ogg"/>
           你的瀏覽器版本過低, 不支援音訊播放
        </audio>

  • video

    • HTML在不使用外掛的情況下也可以原生的支援視訊格式檔案的播放, 當然支援格式是有限的

    • 自動播放

      • chrome也會阻止視訊播放, 但是不會阻止靜音的視訊自動播放設定muted

    • 屬性

      • poster:

        • 載入等待的圖片

        • 可以用來做視訊的封面

    • 相容寫法

      • <video>
            <source src="..." type="video/mp4"/>
          <source src="..." type="video/ogg"/>
           您的瀏覽器版本過低, 不支援video視訊標籤
        </video>

  • 總結

    • 音訊標籤和視訊標籤使用基本一致

    • 瀏覽器支援情況不同

    • 我們可以給視訊標籤新增muted屬性進行自動靜音播放視訊, 音訊不可以

    • 視訊標籤是重點, 我們經常設定自動播放, 迴圈和設定大小屬性, 不適用controls控制元件

• HTML5新增表單標籤

  • 分別有: email, url, date, time, montyh, week, number, range, tel, search, color

  • datalist

    • 作提示文字

    • 用法

      • <input type="text" />
        <datalist>
          <option value="提示1" />
          <option value="提示2">ts</option>
        </datalist>

  • input新屬性

三、CSS 3<a name="a3"></a>

3.1 css3 新增選擇器

3.2 CSS3盒模型

3.3 CSS3過渡效果

3.4 2D轉換

3.5 3D轉換

3.6 動畫

回到頂部

3.1 css3 新增選擇器<a name="a3_1"></a>

• 子級選擇器

  • 子級選擇器用於選取帶有特定父元素的元素

    • 不可以爺孫或其他關係

• 語法: element1 > element2

• 兄弟選擇器

  • 相鄰兄弟

    • 語法: element1 + element2

    • 特點: 只能選擇element1和緊跟隨著的element2, element2必須是下一個, 兩個必須擁有相同的父親

  • 其他兄弟

    • 語法: element1 ~ element2

    • 特點: 能選擇element1後面出現的所有element2, element2不必緊隨element1, 兩者必須擁有相同的父親

• 結構偽類選擇器

  • child類

    • 必須E跟child同時匹配

      • 不匹配情況

      • ...
        <style>
          .box p:first-child {...}
        </style>
        ...
        <!-- 這個時候不會匹配到p, 因為其不是第一個元素 -->
        <div class="box">
          <h1>...</h1>
          <p>...</p>
        </div>

      • 建議使用father :first-child這樣可以只選擇第一個而不用另外去匹配了

    • 選擇器	簡介
      E:first-child	匹配父元素中第一個子元素E
      E:last-child	匹配父元素中最後一個E元素
      E:nth-childe(n)	匹配父元素中的第n個子元素E

    • n是從0開始算的

      • 2n + 1分別匹配1, 3, 5, 7...

      • -n + 4分別匹配4, 3, 2, 1

  • type類

    • 會忽略不為同類的元素

      • 匹配情況

      • <style>
          .box p:first-of-type {...}
        </style>
        ...
        <!-- 這個時候會匹配到第一個p也就是第二個子元素, 因為其不是第一個元素 -->
        <div class="box">
          <h1>...</h1>
          <p>...</p>
          <p>...</p>
        </div>

      • 使用.box :first-of-child的話會匹配所有型別的第一個元素

    • 選擇器	簡介
      E:first-of-type	指定型別E的第一個
      E:last-of-type	指定型別E的最後一個
      E:nth-of-type(n)	指定型別的第n個

• 偽元素選擇器

  • 新增偽元素

    • 選擇器	介紹
      E::before	在E元素內部的前面插入一個元素
      E::after	在E元素內部的後面插入一個元素
      E::first-letter	選擇到了E容器內的第一個字母
      E::first-line	選擇到了E容器內的第一行文字

    • ::before與CSS2的:before的用法是一樣的, 只不過一個是CSS3的, ::則是H5的寫法

    • 單冒號與雙冒號的區別

      • 雙冒號與單冒號的用法一樣區別的點在於

      • 單冒號在CSS2就已經提了出來， 所以相容性比CSS3較好

      • 單冒號與雙冒號的寫法是為了讓偽類與偽元素區分開來

      • 在H5開發建議用雙冒號

    • 注意事項

      • ① 偽元素只能給雙標籤新增, 不能給單標籤新增

      • ② 偽元素的冒號前面不能有空格, 如E ::before這個寫法是錯誤的

      • ③ 偽元素裡面必須寫上屬性content: "";

      • ④ before和after建立一個元素, 但元素是行內元素

      • ⑤ 因為在DOM裡面看不見建立的元素, 所以稱之為偽元素

• 屬性選擇器

  • 新增屬性選擇器

    • 選擇器	簡介
      E[att]	選擇具有att屬性的E元素
      E[att = "val"]	選擇具有att屬性值等於val的E元素
      E[att ^= "val"]	匹配具有att屬性, 且值以val開頭的E元素
      E[arr $== "val"]	匹配具有att屬性, 且值以val結尾的元素
      E[att *= "val"]	匹配具有att屬性, 且值中含有val的E元素

    • 前面可以有空格, 代表選擇所有滿足條件的子元素

• 選擇器權重 **

  • 基礎選擇器: id選擇器 > 類選擇器 > 標籤選擇器 > *

  • 偽類選擇器、屬性選擇器的權重等於類選擇器

  • 偽元素選擇器的權重等於標籤選擇器

3.2 CSS3盒模型<a name="a3_2"></a>

回到頂部

• border-sezing

  • CSS3 中可以通過box-sizing來指定盒模型, 這樣我們就可以設定如何計算一個元素的總寬度和總高度

• 邊框圓角border-radius

  • 屬性值: 可以是畫素值, 或者百分比, 百分比參考的是盒子整體寬度, 高度的百分比

  • 綜合設定的時候用/分割, 則前部分跟後部分都可以用四值法

    • border-radius: 10px 20px 30px 40px / 1px

  • 單一屬性

    • border-top-left-radius...

• 盒子座標

• 文字陰影

  • 在CSS3中, text-shadow可想文字應用陰影, 通過屬性值能夠規定水平陰影, 垂直陰影, 模糊距離, 以及陰影顏色

• 屬性

  • 屬性值	簡介
    h-shwdow	必須. 水平陰影的位置, 允許負值
    v-shadow	必須. 垂直陰影的位置, 允許負值
    blur	可選, 模糊距離
    color	可選, 陰影的顏色

  • 可新增多個陰影

    • 用逗號分隔開, 後面新增的會被前面的覆蓋掉

• 盒子陰影

  • 在CSS3 中, box-shadow屬性用於對盒子邊框新增陰影

    • 屬性值	簡介
      h-shadow	必需. 水平陰影的位置, 允許負值.
      v-shadow	必需. 垂直陰影的位置, 允許負值.
      blur	可選, 模糊距離
      spread	可選, 陰影的尺寸, 意義是陰影部分向上下左右都延申長度
      color	可選, 陰影的顏色
      inset	可選, 將外部陰影改為內部陰影, 不要設定成outset, 不然語法錯誤, 如果想外部陰影不新增inset即可

  • 也可以設定多個屬性, 用逗號分隔開, 先新增的屬性覆蓋後新增的屬性

3.3 CSS3過渡效果<a name="a3_3"></a>

回到頂部

• 動畫效果

  • CSS3 出現之前, 前端一般使用Flash懂話或Javascript製作懂話

  • 幀動畫: 通過一幀一幀的畫面按照固定順序和播放速度播放, 如電影膠片

• 過度屬性

  • transition: 過渡的屬性 過渡時間 運動取消 延時曲線

  • 過渡屬性可以實現屬性變化的時候的平滑過渡效果

• 單一屬性寫法

  • 屬性	描述
    transition	簡寫屬性, 用於在一個屬性中設定四個過渡屬性
    transition-property	規定應用過渡的CSS屬性名稱
    transition-duration	定義過渡效果花費的時間, 預設是0
    transition-timing-function	規定過渡效果的時間曲線, 預設是ease
    transition-delay	規定過渡效果何時開始, 預設是0 單位是s, 一定要寫單位

• transition-property

  • none表示沒有屬性過渡

  • all表示所有屬性過渡

  • 多個屬性要過度的話用逗號分隔

• transition-timing-function時間曲線

  • 值	描述
    linear	規定以相同速度開始至結束的過渡效果
    ease	規定慢速開始, 然後變快, 然後慢速結束的過渡效果, 預設
    ease-in	規定以慢速開始的過渡效果
    ease-out	規定以慢速結束的過渡效果
    ease-in-out	規定以慢速開始和結束的過渡效果
    cubic-bezier(x1, y1, x2, y2)	在cubic-bezier函式中定義自己的值, x1, x2取是0至1之間的數值, y1, y2取值任意, 四個數值表示拉扯的點的兩個座標

  • cubic-bezier函式

    • 可以在chrome控制檯進行調整然後複製到屬性上

• 瀏覽器相容

  • IE10, Firefox, Chrome以及Opera支援transition屬性

  • Safiri需要字首-webkit-

  • 注意IE9以及更早的版本不支援transition

3.4 2D轉換<a name="a3_4"></a>

回到頂部

• 概念

  • 屬性名: transform

  • 作用: 對元素進行移動, 縮放, 轉動, 拉長, 或拉伸. 配合過渡和即將學習的動畫只是, 可以取代大量之前只能靠FLash才可以實現的效果

  • 屬性值: 多種轉換方法的屬性值, 可以實現不同的轉換效果

• 2D轉換-位移

  • translate()

    • 屬性值為translate()時, 可以實現位移效果

    • 值	說明
      translate(x, y)	x, y分別為水平和垂直方向唯一的距離, 可以為px值或百分比, 取分正負, 百分比的話是自身border以內的寬度
      translate(x)	只有一個數值, 表示水平方向的位移

• 2D轉換-縮放

  • scale()

    • 屬性值為scale()時, 可以實現元素縮放效果

    • 值	說明
      scale(x, y)	x,y分別為改變元素的寬度和高度的倍數
      scale(n)	只有一個值, 表示寬度和高度同時縮放n倍
      scaleX(n)	改變元素的寬度
      scaleY(n)	改變元素的高度

    • 進行縮放的話是以自身中心進行縮放的

    • 如果想在一個父容器中縮小並貼邊定位的話

      • .box2 {
          /* 左下角縮小 */
          position: absolute;
          left: -25%;
          bottom: -25%;
          width: 100%;
          height: 100%;
          background-color: pink;
          transform: scale(0.5);
        }

• 2D轉換-旋轉

  • rotate()

    • transform屬性值設定為rotate(), 實現元素的旋轉

    • 單位: deg

    • 正值為順時針, 負值為逆時針

    • 設定transform多個屬性值的時候, 書寫順序不同會導致轉換的效果有差異

• 2D轉換-傾斜

  • skew()

    • transform屬性值設定為skew()時, 實現元素的傾斜

    • 單位: deg

    • 可以填寫兩個屬性, 當只是一個屬性的時候, 第二個屬性預設為0

• 2D轉換-基準點

• transform-origin

  • 設定調整元素的水平和垂直方向原點的位置, 調整元素的基準點

  • 屬性值:

  • 值	說明
    x	定義X軸的遠點在何處. 可能的值: left, center, right, 畫素值, 百分比
    y	定義Y軸的遠點在何處, 可能的值: top, center, bottom, 畫素值, 百分比

3.5 3D轉換<a name="a3_5"></a>

回到頂部

• 3d轉換與2d轉換的區別

  • transform屬性不止能實現2D轉換, 也可以製作3D立體轉換效果, 比普通的x, y軸組成的平面效果多了一條z軸

• 透視perspective

  • 特點: 近小遠大

    • 並非任何情況下需要透視效果, 如果要展示z軸的變化則要設定

  • 作用: 設定在z軸的視線焦點的觀察位置, 從而實現3D檢視效果

  • 注意: 透視屬性需要設定給3D變化元素的父級

• 3D旋轉

  • 在rolate後面加上X, Y, Z

  • 為正則為該軸的順時針旋轉

• 3D位移

  • 在translate後面加上X, Y, Z

  • 如果設定了translateZ和perspective則會向人臉方向進行移動()

• 旋轉之後會導致元素的X軸Y軸也進行旋轉, 會以旋轉之後的方向作為基準, 所以設定transform誰先誰後會有區別

• 盒子案例

  • transform-style

    • 用於設定被巢狀的子元素在父元素的3D空間中顯示, 子元素會保留自己的3D轉換座標軸

    • 屬性值

      • flat: 所有元素在2D平面呈現

      • preserve-3d: 保留3D空間

    • 一般來說這個屬性給父元素

    • 正方形骰子案例

  • 相容問題

    • IE10, FF, Opera支援

    • Chrome和Safari需要-webkit-

    • IE9需要-ms-

3.6 動畫<a name="a3_6"></a>

回到頂部

• CSS3 中提供了自己的動畫製作方法, 著可以在許多網頁中取代動畫圖片, Flash動畫以及JavaScript

• 步驟: 建立動畫, 繫結動畫

• @keyframes

  • 用於建立動畫, 可以用關鍵詞或者百分比

  • ex: from to 100% 50%

• animation

  • 需要將@keyframes中建立的動畫捆綁到某個選擇器, 否則不會產生動畫效果

  • animation: 動畫名稱(必須) 過渡時間(必須) 速度曲線 動畫次數 延時時間

  • 屬性	描述
    animation-name	規定@keyframes動畫的名稱
    animation-duration	規定動畫完成一個週期所花費的秒或毫秒, 預設是0
    animation-timing-function	規定動畫的速度曲線, 預設是"ease"
    animation-delay	規定動畫何時開始, 預設是0
    animation-iteration-count	規定動畫被播放的次數, 預設是1, infinite表示無限播放