ife2018 零基礎學院 day 3

ife2018 零基礎學院 第三天：讓簡歷有點色彩

什麼是CSS，CSS是如何工做的!

摘自CSS如何工做

什麼是CSS

CSS是一種用於向用戶指定文檔如何呈現的語言 — 它們如何被指定樣式、佈局等。
文檔一般是用標記語言結構化的文本文件 — HTML 是最經常使用的標記語言, 但你依然能夠碰見一些其餘的標記語言，好比 SVG 或者 XML。

CSS如何工做

當瀏覽器顯示文檔時，它必須將文檔的內容與其樣式信息結合。它分兩個階段處理文檔：

1. 瀏覽器將 HTML 和 CSS 轉化成 DOM （文檔對象模型）。DOM在計算機內存中表示文檔。它把文檔內容和其樣式結合在一塊兒。
2. 瀏覽器顯示 DOM 的內容。
   

CSS的基本語法是怎樣的

摘自CSS 語法

屬性和值組成一個聲明，多個聲明構成聲明塊，聲明塊和選擇器構成完整的CSS規則

從最基本的層次來看，CSS是由兩塊內容組合而成的：

• 屬性（Propertie）：一些人類可理解的標識符，這些標識符指出你想修改哪一些樣式，例如：字體，寬度，背景顏色等。
• 屬性值（Value）：每一個指定的屬性都須要給定一個值，這個值表示你想把那些樣式特徵修改爲什麼樣，例如，你想把字體，寬度或背景顏色改爲什麼。
  與值配對的屬性被稱爲CSS聲明。CSS聲明會被放置在一個CSS聲明塊中。最後，CSS聲明塊與選擇器相結合造成一個CSS規則集（或CSS規則）。

CSS聲明

屬性和屬性值之間，用英文半角冒號 (:) 隔離，以下圖所示。

CSS聲明塊

聲明按塊分組，每一組聲明都用一對大括號包裹，用 ({) 開始，用 (}) 結束。
聲明塊裏的每個聲明必須用半角分號（;）分隔，不然代碼會不生效（至少不會按預期結果生效）。聲明塊裏的最後一個聲明結束的地方，不須要加分號，可是最後加分號是個好習慣，由於能夠防止在後續增長聲明時忘記加分號。

CSS 選擇器和規則

咱們的拼圖還少了一塊——咱們須要討論一下如何告知咱們的聲明塊：哪些元素是它們須要應用的。經過在每一個聲明塊前加上選擇器（selector）來>完成這一動做，選擇器是一種模式，它能在頁面上匹配一些元素。這將使相關的聲明僅被應用到被選擇的元素上。選擇器加上聲明塊被稱爲規則集>（ruleset），一般簡稱規則（rule）。

CSS選擇器是什麼概念，簡單選擇器和屬性選擇器是什麼

CSS選擇器是什麼概念

摘自CSS 選擇器參考手冊

在 CSS 中，選擇器是一種模式，用於選擇須要添加樣式的元素。

摘自CSS 語法 - CSS 選擇器和規則

選擇器是一種模式，它能在頁面上匹配一些元素。選擇器加上聲明塊被稱爲規則集（ruleset），一般簡稱規則（rule）。

簡單選擇器是什麼

摘自簡單選擇器

簡單選擇器（Simple selectors）：經過元素類型、class 或 id 匹配一個或多個元素。

屬性選擇器是什麼

摘自屬性選擇器

屬性選擇器（Attribute selectors）：經過 屬性 / 屬性值 匹配一個或多個元素。

文本樣式都有哪些相關屬性，對應哪些值

參考自基本文本和字體樣式

用於樣式文本的 CSS 屬性一般能夠分爲兩類。

• 字體樣式: 做用於字體的屬性，會直接應用到文本中，好比使用哪一種字體，字體的大小是怎樣的，字體是粗體仍是斜體，等等。
• 文本佈局風格: 做用於文本的間距以及其餘佈局功能的屬性，好比，容許操縱行與字之間的空間，以及在內容框中，文本如何對齊。

字體

顏色

參考
CSS的值和單位 - 顏色
<color>
HTML 顏色

color 屬性設置選中元素的前景內容的顏色

描述color值的方式有顏色名（色彩關鍵字）、Color HEX（RBG十六進制數，例如#000000對應黑色）、Color RGB(rgb(0,0,0))

色彩關鍵字

色彩關鍵字是不區分大小寫的標識符，它表示一個具體的顏色，例如 red, blue, brown, lightseagreen 。

rgb()

顏色可使用紅-綠-藍（red-green-blue (RGB)）模式的兩種方式被定義：
十六進制符號 #RRGGBB 和 #RGB

• "#" 後跟6位十六進制字符（0-9, A-F）
• "#" 後跟3位十六進制字符（0-9, A-F）。
  三位數的 RGB 符號（#RGB）和六位數的形式（#RRGGBB）是相等的。
  例如， #f03 和 #ff0033 表明一樣的顏色。
  函數符 rgb(R,G,B)
  "rgb" 後跟3個<integer> 或3個 <percentage>值。
  整數 255 至關於 100%，和十六進制符號裏的 F 或 FF 。

/* These examples all specify the same RGB color: */
#f03
#F03
#ff0033
#FF0033
rgb(255,0,51)
rgb(255, 0, 51)
rgb(255, 0, 51.2) /* ERROR! Don't use fractions, use integers */ 
rgb(100%,0%,20%)
rgb(100%, 0%, 20%)
rgb(100%, 0, 20%) /* ERROR! Don't mix up integer and percentage notation */

hsl()

顏色也可使用 hsl() 函數符被定義爲色相-飽和度-明度（Hue-saturation-lightness）模式。HSL 相比 RGB 的優勢是更加直觀：你能夠估算你想要
的顏色，而後微調。它也更易於建立相稱的顏色集合。（經過保持相同的色相併改變明度/暗度和飽和度）。

色相（Hue）表示色環（即表明彩虹的一個圓環）的一個角度。這個角度做爲一個無單位的 <number> 被給出。定義 red=0=360，其它顏色分散於圓環，因此 green=120, blue=240，以此類推。做爲一個角度，它隱含像 -120=240 和 480=120 這樣的迴環。

飽和度和明度由百分數來表示。
100% 是滿飽和度，而 0% 是一種灰度。
100%明度是白色，0% 明度是黑色，而 50% 明度是「通常的」。

hsl(0,  100%,50%)    /* red */   
hsl(30, 100%,50%)                 
hsl(60, 100%,50%)                
hsl(90, 100%,50%)                
hsl(120,100%,50%)    /* green */ 
hsl(150,100%,50%)                
hsl(180,100%,50%)                
hsl(210,100%,50%)                
hsl(240,100%,50%)    /* blue */  
hsl(270,100%,50%)                
hsl(300,100%,50%)                
hsl(330,100%,50%)                
hsl(360,100%,50%)    /* red */   

hsl(120,100%,25%)    /* dark green */  
hsl(120,100%,50%)    /* green */       
hsl(120,100%,75%)    /* light green */ 

hsl(120,100%,50%)    /* green */  
hsl(120, 67%,50%)                 
hsl(120, 33%,50%)                 
hsl(120,  0%,50%)                 

hsl(120, 60%,70%)    /* pastel green */

rgba()

顏色可使用 rgba() 函數符在紅-綠-藍-阿爾法（RGBa）模式下被定義。RGBa 擴展了 RGB 顏色模式，它包含了阿爾法通道，容許設定一個顏色的透明度。
** a **表示透明度：0=透明；1=不透明；

rgba(255,0,0,0.1)    /* 10% opaque red */  
rgba(255,0,0,0.4)    /* 40% opaque red */  
rgba(255,0,0,0.7)    /* 70% opaque red */  
rgba(255,0,0,  1)    /* full opaque red */

hsla()

顏色可使用 hsla() 函數符在色相-飽和度-明度-阿爾法（HSLa）模式下被定義。HSLa 擴展自 HSL 顏色模式，包含了阿爾法通道，能夠規定一個顏色的透明度。
a 表示透明度：0=透明；1=不透明；

hsla(240,100%,50%,0.05)   /* 5% opaque blue */   
hsla(240,100%,50%, 0.4)   /* 40% opaque blue */  
hsla(240,100%,50%, 0.7)   /* 70% opaque blue */  
hsla(240,100%,50%,   1)   /* full opaque blue */

字體種類

要在你的文本上設置一個不一樣的字體，你可使用 font-family 屬性，這個容許你爲瀏覽器指定一個字體 (或者一個字體的列表)，而後瀏覽器能夠將這種字體應用到選中的元素上。

p {
  font-family: arial;
}

字體棧 : 因爲你沒法保證你想在你的網頁上使用的字體的可用性 (甚至一個網絡字體可能因爲某些緣由而出錯), 你能夠提供一個字體棧 (font stack)，這樣的話，瀏覽器就有多種字體能夠選擇了。

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

字體大小

• px (像素): 將像素的值賦予給你的文本。這是一個絕對單位， 它致使了在任何狀況下，頁面上的文本所計算出來的像素值都是同樣的。
• em : 1em 等於咱們設計的當前元素的父元素上設置的字體大小
• rem : 這個單位的效果和 em 差很少，除了 1rem 等於 HTML 中的根元素的字體大小， (i.e. <html>) ，而不是父元素。

字體樣式，字體粗細，文本轉換和文本裝飾

CSS 提供了 4 種經常使用的屬性來改變文本的樣子：

• font-style: 用來打開和關閉文本 italic (斜體)。
• normal: 將文本設置爲普通字體 (將存在的斜體關閉)
• italic: 若是當前字體的斜體版本可用，那麼文本設置爲斜體版本；若是不可用，那麼會利用 oblique 狀態來模擬 italics。
• oblique: 將文本設置爲斜體字體的模擬版本，也就是將普通文本傾斜的樣式應用到文本中。
• font-weight: 設置文字的粗體大小。
• normal, bold: 普通或者加粗的字體粗細
• lighter, bolder: 將當前元素的粗體設置爲比其父元素粗體更細或更粗一步。100–900: 數值粗體值，若是須要，可提供比上述關鍵字更精細的粒度控制。
• text-transform: 容許你設置要轉換的字體。值包括：
• none: 防止任何轉型。
• uppercase: 將全部文本轉爲大寫。
• lowercase: 將全部文本轉爲小寫。
• capitalize: 轉換全部單詞讓其首字母大寫。
• full-width: 將全部字形轉換成固定寬度的正方形，相似於等寬字體，容許對齊。拉丁字符以及亞洲語言字形（如中文，日文，韓文）
• text-decoration: 設置/取消字體上的文本裝飾 (你將主要使用此方法在設置連接時取消設置連接上的默認下劃線。) 可用值爲：
• none: 取消已經存在的任何文本裝飾。
• underline: 文本下劃線.
• overline: 文本上劃線
• line-through: 穿過文本的線

文字陰影

你能夠爲你的文本應用陰影，使用 text-shadow 屬性。這最多須要 4 個值，以下例所示：

text-shadow: 4px 4px 5px red;

4 個屬性以下:

1. 陰影與原始文本的水平偏移，可使用大多數的 CSS 單位 length and size units, 可是 px 是比較合適的。這個值必須指定。
2. 陰影與原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移動陰影，而不是左/右。這個值必須指定。
3. 模糊半徑 - 更高的值意味着陰影分散得更普遍。若是不包含此值，則默認爲0，這意味着沒有模糊。可使用大多數的 CSS 單位 length and size units
4. 陰影的基礎顏色，可使用大多數的 CSS 顏色單位 CSS color unit. 若是沒有指定，默認爲 black.

文本佈局

文本對齊

text-align 屬性用來控制文本如何和它所在的內容盒子對齊。

• left: 左對齊文本。
• right: 右對齊文本。
• center: 居中文字
• justify: 使文本展開，改變單詞之間的差距，使全部文本行的寬度相同。

行高

line-height 屬性設置文本每行之間的高，能夠接受大多數單位 length and size units，不過也能夠設置一個無單位的值，做爲乘數，一般這種是比較好的作法。無單位的值乘以 font-size 來得到 line-height。當行與行之間拉開空間，正文文本一般看起來更好更容易閱讀。推薦的行高大約是 1.5–2 (雙倍間距。) 因此要把咱們的文本行高設置爲字體高度的1.5倍，你可使用這個:
line-height: 1.5;

字母和字間距

letter-spacing 和 word-spacing 屬性容許你設置你的文本中的字母與字母之間的間距、或是字與字之間的間距。
它們能夠接受大多數單位length and size units

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}