【freecodecamp】HTML5和CSS知識點
一、CSS選擇器
<style>
選擇器 {屬性名稱: 屬性值;}
</style>
1、元素選擇器
元素名{屬性名稱: 屬性值;}
2、類選擇器
.類名{屬性名稱: 屬性值;}
在HTML元素中聲明class="類名"。
3、id選擇器
#id名{屬性名稱: 屬性值;}
在HTML元素中聲明id="id名"。
二、CSS字體
1、字號font-size ，用px表示
2、字體font-family
3、字體顏色可用color或在HTML中設置屬性style="color: 顏色"。
三、CSS邊框
1、顏色 border-color
2、寬度 border-width
3、樣式 border-style
4、圓角 border-radius，圓形設置爲50%
四、超鏈接
1、死鏈接href=”#”
五、邊距和邊框
1、元素的 padding 控制元素內容 content和元素邊框 border 之間的距離。
2、元素的外邊距 margin 控制元素邊框 border 和元素實際所佔空間的距離。如果你將一個元素的 margin 設置爲負值，元素將會變大。
3、除了分別指定元素的 padding-top、padding-right、padding-bottom 和 padding-left 屬性外，你還可以集中起來指定它們，
舉例如下：padding: 10px 20px 10px 20px;這四個值以順時針方式排列：頂部、右側、底部、左側，簡稱：上右下左。
六、CSS樣式的覆蓋
聲明在下面的類選擇器覆蓋前面的，元素選擇器覆蓋類選擇器，內聯style覆蓋其他的。
七、CSS顏色表示
1、六位數的十六進制：#ffffff 紅、綠、藍
2、RGB表示：rgb(0,0,0) 紅、綠、藍
八、響應式框架Bootstrap
1、添加代碼
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
2、把所有的HTML內容放在class爲container-fluid的div下。
3、圖片適應寬度：class爲img-responsive
4、居中文字：class爲text-center
5、bootstrap風格按鈕：class爲btn
通常情況下，你的 button 元素僅與它所包含的文本一樣寬。通過使其成爲塊級元素，你的按鈕將會伸展並填滿頁面整個水平空間，任何在它之下的元素都會跟着浮動至該區塊的下一行。class爲btn-block。
深藍色按鈕:btn-primary 淺藍色：btn-info 紅色：btn-danger
6、響應式網格佈局
子元素放進<div class="row"> 元素裏，每一個子元素都各自被一個 <div class="col-xs或者md-數字"> 元素包裹。
7、通過使用 span 元素，你可以把幾個元素放在一起。你甚至可以用此爲一個元素的不同部分指定樣式。例如：<p>Top 3 things cats <span class = "text-danger">hate:</span></p>
九、Font Awesome圖標庫
Font Awesome 是一個非常方便的圖標庫。這些圖片都是矢量圖，以 .svg 文件格式保存。這些圖標用起來就像字體一樣。你可以使用像素單位來指定他們的大小，它們會繼承父級HTML元素的字體大小。
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
i 元素起初一般是讓其它元素有斜體(italic)的功能，不過現在一般用來指代圖標。你可以將 Font Awesome 中的 class 屬性添加到 i 元素中，把它變成一個圖標，比如：
<i class="fa fa-info-circle"></i>
使用 Font Awesome 分別爲你的 like 按鈕中增加一個 fa-thumbs-up 圖標， info 按鈕添加 fa-info-circle 圖標，爲你的 delete 按鈕添加 fa-trash 圖標，爲button 提交按鈕上添加fa-paper-plane 。