第一章 概述
1.1 CSS世界的“世界觀”
1.2 世界都是創造出來的
1.3 CSS完勝SVG的武器——流
1.3.1
什麼是“流”：實際上是css世界中的一種基本的定位和佈局機制。
css世界構建的基石是HTML，而HTML最具有代表的2個基石<div>和<span>正好是css世界中塊級元素和內聯級元素的代表
1.3.2
流是如何影響整個css世界
1.3.3
什麼是流式佈局？
利用元素“流”的特性實現的各類佈局效果。“流”本身具有自適應特性。
流體佈局不等於自適應佈局
表格佈局也可以設置爲100%自適應，但是表格和“流”不是一路的，並不屬於“流體佈局”
div+css佈局：實際上就是這裏的“流式佈局”
1.4 CSS世界的開啓從IE8開始
1.5 table自己的世界
1.6 CSS新世界——CSS3
css3：
佈局更爲豐富：
- 移動端
- 彈性盒子佈局flexible box layout
- 柵格佈局grid layout
視覺表現長足進步 - 圓角，陰影和漸變讓元素更爲質感
- transform變換讓元素有更多可能
- filter濾鏡和混合模式讓web輕鬆變成Photoshop
- animation讓動畫更簡單
第二章 需提前瞭解的 術語和概念
2.1務必瞭解css世界的專業術語
- 屬性
- 值：常見類型：整數型，數值，百分比，長度值，顏色值，還有字符串值，位置值等類型。在css3中還有角度值頻率值時間值等類型
- 關鍵字 如：transparent，solid，inherit（作爲泛關鍵字也就是所有css屬性都可以擁有的關鍵字）
- 變量 css中變量有限，css3中currentColor就是
這裏簡單介紹一下，詳細請轉入
currentColor顧名思意就是“當前顏色”，準確講應該是“當前的文字顏色”，例如：
.xxx { border: 1px solid currentColor; }
雖然改變的是文字顏色，但是圖標顏色也一起變化了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.icon {
display: inline-block;
width: 6px; height: 10px;
background-image: url("images/tick.png");
background-color: currentColor; /* 該顏色控制圖標的顏色 */
}
.link:hover { color: #333; }/* 雖然改變的是文字顏色，但是圖標顏色也一起變化了 */
</style>
</head>
<body>
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
</body>
</html>
鼠標放到上面
可以看到效果在
- 長度單位 （2%後面的%不是長度單位） 關係：
<number> +長度單位 =<length>
- 功能符 是值以函數的形式指定，主要用來表示顏色（rgb（），rgba（）），背景圖片地址url（），元素屬性值，計算calc（），過渡效果等。
- 屬性值 是由 值+關鍵字+功能符 組成
- 聲明 是屬性名+屬性值
- 聲明塊 是花括號{}包裹的一系列聲明
- 規則或規則集
- 選擇器 類選擇器，ID選擇器，屬性選擇器，屬性選擇器，僞類選擇器，僞元素選擇器
- 關係選擇器 常見符號 空格， > ,~,+
有後代選擇器（空格），相鄰後代選擇器（>），兄弟選擇器（~），相鄰兄弟選擇器（+） - @規則 是指以@開頭的一些規則，如@media，@font-face，@page,@support