拉森火山國家公園
拉森火山國家公園是位于。。。
氣候
因為拉森火山國家公園。。。
第二章：CSS基礎（css基礎知識筆記）
第二章：CSS 基礎
2.1 CSS簡介
Cascading Style Sheets
用來定義頁面元素的樣式
設置字體和顏色
設置位置和大小
添加動畫效果
h1{ color:white; font-size:14px; }
選擇器（Selector） { 屬性（Property）：屬性值（Value） }
選擇器：選中要給那些元素定義樣式
eg：選擇器是h1，說明要給h1標簽定義樣式
屬性：給元素設置某個屬性
eg：color是顏色屬性
屬性值
eg：while：白色
聲明（Declaration）
聲明=屬性+屬性值
聲明塊=花括號+多條聲明
規則=選擇器+聲明塊
在頁面中使用CSS
外鏈：把CSS寫在一個單獨的文件里邊，然后使用link標簽把它引入頁面中
推薦使用第一種方法，更利于代碼的維護
嵌入：直接把樣式寫在一個style標簽里
內聯：直接把一個元素的樣式寫在這個元素的style屬性里
Example Content
一個完整的頁面
這個代碼包含一個h1標簽和一個p標簽
Web框架的架構模式探討
在寫干貨之前，我想先探討兩個問題，模式的局限性？模式有什么用？
代碼風格：編程風格
每條聲明寫一行 兩條規則之間空一行
調試CSS：開發者工具
2.2基礎選擇器
CSS：Cascading Style Sheets
用來定義頁面元素的樣式
選擇器Selector
找出頁面中的元素，以便給他們設置樣式
使用多種方式選擇元素
按照標簽名、類名或id
按照屬性
按照DOM樹中的位置
通配選擇器“ * ”（是一個星號）：可以匹配頁面中所有元素
This is heading
this is some paragraph.
標簽選擇器：通過標簽名選中一個元素。
h1：一級標題；
p：段落
This is heading
this is some paragraph.
id選擇器：通過id屬性選擇元素
！注意：id的值在整個頁面中必須是唯一的
HTML5 文檔
類選擇器：通過Class屬性來選擇元素
eg：li的class=done，所以可以通過.done選中這個元素
id不同，class的值在頁面中可以出現多次，把有相同樣式的標簽起相同class值，然后通過類選擇器定義樣式
Todo List
- Learn HTML
- Learn CSS
- Learn JavaScript
屬性選擇器：選擇元素
eg：input的一個屬性是disabled，可以通過input[disabled]擁有disabled這個屬性的input。
根據屬性值選中元素
input[type=“password”]：type的值是password的input元素
偽類（pseudo-classes）
不基于標簽和屬性定位元素，通過狀態或所屬的DOM結構來選擇元素
幾種偽類
動態偽類：根據元素所處的狀態來選擇元素的。eg：鏈接；
a: link:正常鏈接
a: visited: 訪問過的鏈接；
a: hover :鼠標放上去之后的鏈接；
a: active: 鼠標按下這個鏈接之后的狀態；
點擊文本輸入框，變成focus狀態。通過 : focus 設置這種樣式下的狀態。
結構性偽類：通過在DOM樹中所處位置來選擇元素
"li:first-child"選中第一個元素
"li:last-child"選中最后一個元素
電影票房排行
- 阿凡達
- 泰坦尼克號
- 星球大戰：原力覺醒
- 復仇者聯盟3
組合器(Combinators)
第一種：選擇器相加
最少3個字符
其他種類：
選擇器組：多個相同規則的選擇器，可合為一組
用逗號分隔開，就可以形成一個選擇器組
body, h1, h2, h3, h4, h5, h6, ul, ol, li { margin: 0; padding: 0; } [type="checkbox"],[type="radio"] { box-sizing:border-box; padding: 0; }
2.3設置字體
字體font-family：通過font-family屬性可以設置字體，這個屬性值是一個字體列表。用逗號隔開。
!注意：用戶的設備上可能沒有那么多字體，所以可以多設置幾種字體，瀏覽器會選擇設備上有的字體展示
serif：字體族，某一類字體，瀏覽器可以從設備已有的字體中選擇一個屬于該類的字體進行展示。
CSS中用5種通用字體
襯線體：筆畫末端有裝飾
無襯線體：線條簡單無裝飾
手寫體：線條模仿手寫體
fantasy：設計感強，較夸張
等寬字體：每個字符的寬度都一樣，所有的中文都是等寬字體
卡爾斯巴德洞窟
卡爾斯巴德洞窟。。。
font-family使用建議\
字體列表最后寫上通用字體族，確保實際展示出來的風格是想要的
若需要顯示中文和英文使用不同的字體，需要把英文字體放在中文字體前面。
中文字體一般包含英文字體字符;
中文字體放前面的話，所有字體都是以中文字體展示；
英文字體放前面，顯示中文時，英文字體無這個中文字符，就會按照中文字體字符顯示。
使用Web Fonts：使用一些特殊的字體，用戶設備上沒有，可以使用Web字體
用@font-face聲明web字體
* 通過font-family指定字體名字 * src指定字體的url和格式
使用web字體時，只需要指定它的名字即可。瀏覽器會通過URL下載字體并展示。
！注意：中文的字體文件較大，需使用字體處理工具。把頁面上使用到的字符提取成小的字體文件，再使用。
Web fonts are awesome!
Web fonts are a CSS feature...
font-size：設置文字的字號
關鍵字
small、medium、large
長度
px、em
百分數
相對于父元素字體大小進行計算
2em是父級字符大小的兩倍
.note，80%：20*80%=16px
Notes:Web fonts ... With this in mind, let's build ...A web font example
font-style：設置文字是否為斜體
它的默認值是normal
斜體：將normal設置為italic即可
Normal Text
Italic Text
font-weight：文字粗細，支持100到900九種字重。
* 數字表示 * normal和bold表示
！注意：大部分字體可能只支持normal和bold兩種字重
當字體不支持字重時，會以能支持的最接近的字重來顯示。
- 錦瑟無端五十弦（100）
- 錦瑟無端五十弦（200）
- 錦瑟無端五十弦（300）
- 錦瑟無端五十弦（400-normal）
- 錦瑟無端五十弦（500）
- 錦瑟無端五十弦（600）
- 錦瑟無端五十弦（700-bold）
- 錦瑟無端五十弦（800）
- 錦瑟無端五十弦（900）
line-height：可設置行間距，表示兩行文字基準線之間的距離
當使用沒有單位的數字來表示行高時，實際行高是這個數字*字體大小。
As we looked at in ...Font families recap
font：把字體的屬性一起設置
font順序：style weight size/height family
除了字號和字體，其他屬性也可不指定
font：style weight size/height family h1 { font: bold 14px/1.7 Helvetica, sans-serif; } p { font: 14px serif; }
2.4設置文字樣式
text-align
設置文字在文本里的對齊方式
left：左對齊
center：居中對齊
right：右對齊
justify：分散對齊：
分散對齊：兩端文字完全對齊，分散對齊會調整兩端的空格間距使文字兩端對齊
！注意：下面這些的
spacing
letter-spacing：字母間距（默認是0）單位是px
word-spacing：單詞間距（默認是0）單位是px
text-indent：設置首行文字的縮進（默認是0）單位是px
text-decoration：文字修飾（默認是none）
underline：下劃線
line-through：刪除線
overline：上劃線
white-space：控制換行和空格的行為
normal：空格和換行會被合并
nowrap：這行文字永遠不會換行
pre：保留文本中的空格和換行不做任何合并
pre-wrap：和pre類似，當一行內顯示不下時會自動折行。
pre-line：合并空格，保留換行。
text-shadow：設置陰影
text-shadow：color offset-x offset-y blur-radius
顏色 在x方向上的偏移 在y方向上的偏移 陰影的模糊程度
2.5盒模型基礎:css布局
content：盒子里內容的大小
padding：內容和邊框的間距
border：邊框
margin：此盒和其他盒的距離
width
指定content box（內容區域）的寬度
取值為長度、百分數、auto
auto由瀏覽器根據內容和其它屬性確定
百分數相對于容器的content box寬度
Height
指定content box高度
取值為長度、百分數、auto
auto由子元素的高度加起來得到的
百分數相對于容器的content box高度計算
！注意：當父容器也設置了明確的高度時，百分數才生效；
當父容器的高度是auto，子元素設置百分比的高度是無用的。
padding
指定元素四個方向的內邊框
padding-top
padding-right
padding-left
padding-bottom
默認值都是0
可分別設置，也可通過padding一起設置四個方向上的內邊距\
padding只有一個值時，四個方向都是這個值。
兩個值：eg:10px 20px：上下是10px，左右是20px
四個值：上 右 下 左
百分數的padding相對父容器寬度
When one value is ...
When two value is ...
When three value is ...
When four value is ...
margin collapse
只會垂直方向上發生
負margin
當margin是負值時，兩個元素會重疊起來。
box-sizing:border-box
寬度好高度是設置的內容區域的尺寸。
This is the ...
Length and ...
p：塊級
style：行級
塊級
行級
Block Level Box
Inline Level Box
不和其他盒子并列擺放
和其他行級盒子一起放在一行或拆開成多行
適用所有的盒模型屬性
盒模型中的width、height不適用
塊級元素
行級元素
生成塊級盒子
生成行級盒子；內容分散在多個行盒（line box）中
body、article、div、main、section、h1- 6、p、ul、li等
span、em、strong、cite、code等
display：block
display：inline
display
block
塊級盒子
inline
行級盒子
inline-block
本身是行級，可以放在行盒中；可以設置寬高；作為一個整體不會被拆散成多行
none
排版時完全被忽略
inline—block
An inline-block box is something... it won't be broken ... it won't break across two lines.
2.7盒子的效果
圓角 border-radius：圓角的半徑
無法復制加載中的內容
20px：ABCD都是20px
20px 50px：A：20px B：50px C：50px D：20px
20px 30px 40px 50px：A：20px B：30px C：40px D：50px（順時針轉一圈）
20px / 50px：（x和y兩個方向上的半徑）
水平方向：20px
垂直方向：50px
30%（百分數）
水平方向：寬度的30%
垂直方向：高度的30%
給每個角的水平和垂直方向設置不同的值
background：設置盒子的背景
默認值
background-color：背景顏色
透明色
background-image：背景圖片
url(/cat.png)
background-repeat：背景圖是否重復
no-repeat；repeat（默認值）；repeat-x（水平方向重復）；repeat-y（垂直方向重復）；
background-position：背景圖位置
默認值是0 0
background-size：背景圖大小
可通過寬度和高度來制定
background-position
background-position：top 垂直方向是頂部；水平方向居中
background-position：left 垂直方向是居中；水平方向居左
background-position：center 垂直方向是居中；水平方向居中
background-position：bottom right 圖片在右下角
background-position：20px 20px
Background-position：50% 50%
background-position：bottom 20px right 20px 圖片距離右邊緣和下邊緣分別是20像素、20像素
CSS Sprites
- Cat
- Dog
- Lion
- Bird
- Fox
- Pig