CSS 權威指南 CSS實戰手冊 第四版（閱讀筆記）

標籤：紅色   縮放   電腦   put   red   制度   儲存格   連結   置中   

前言：

　　對於程式員,學習是無止境的,知識淘換非常快,能夠快速穩固掌握一門新技術,是一個程式員應該具備的素質.這裡將分析本人一點點不成熟的心得.

　　瞭解一門語言,瞭解它的概念非常重要,但是一些優秀的設計思想需要細心和大量實踐才能慢慢參悟,在這之前需要做的是能夠運用它來開發,那麼瞭解一些基礎特性非常有必要,通常這些特性是需要經驗積累,從各種坑中累計出來,但是還有一種看似很笨卻很有效學習方法.那就是將別人的經驗記錄下來,有事沒事都拿出來看看,集合開發中的經驗,這會非常有效.

 

流式布局 http://blog.html.it/layoutgala/index.html更多模板http://templated.co布局工具http://www.pagecolumn.com重設樣式http://Nicolas.github.io/normalize.css | https://github.com/necolas/normalize.css/  編寫HTML時兼顧CSS    簡單的HTML對搜尋引擎友好。不能在HTML中直接控制網頁的外觀，只能吧HTML當作結構化內容的工具，內容的外觀由CSS負責。    IE8不支援H5    不要使用table布局網頁，CSS能實現相同的效果，並簡單許多    不要濫用BR進行段落換行，瀏覽器會插入間隔，有時並不需要這種行為    HTML遵守一定的規則，例如使用字型

• font-family: Arial, Helvetica, sans-serif Web瀏覽器首先會檢查電腦有沒有安裝Arial字型，如果沒有堅持Helvetica以此類推
• 襯線字型適合顯式大段文本，大多數人覺得襯線（字形筆畫末端的裝飾細節）能有效把一個字母引向後一個字母，利於閱讀
• • 常見的：Times、Times New Roman、Georgia
• 無襯線字型通常顯式標題與中文，外觀簡潔明了
• • 常見的：Arial、Helvetica、Verdana

使用Web字型

• @font-face指令，告訴瀏覽器字型的名稱和
• • @font-face{
  • • font-family:"League Gothic";
    • src:url(‘fonts/League)Gothic-web font.woff‘);
  • }
• font-family屬性，指定Web字型的方式與指定電腦中已安裝字型的方式一樣

修改字型大小

• 常用字型大小單位px、關鍵字、em、rem、%
• 使用像素 px
• • 這種值與瀏覽器設定完全無關，在不同電腦與瀏覽器顯式的文字大小一致，最為常用
• 使用關鍵字、百分比、em
• • 這三種設定字型大小的方式，其工作原理是在瀏覽器預設字型大小的基礎上增大或減少，也就是說，如果樣式表中沒有設定字型大小，Web瀏覽器會使用預設的字型大小，大多數瀏覽器非標題裡的文本字型大小是16像素，這是基準字型大小
• 關鍵字 CSS提供了七個字型大小關鍵字，這些關鍵字在基準字型大小的基礎上調整字型大小大小
• • xx-small、x-small、small、medium、large、x-large、xx-large
• 百分比 百分數與關鍵字一樣，根據瀏覽器基準字型大小調整文字大小，不過精確度更高，如果基號是16px那麼100%就是16px
• em 與百分比原理相同，em一詞源於紙張印刷業 1em等價於100% 0.5em 等於 50%
• rem root em簡稱，字型大小的大小基於根項目而定（html）大多數情況基於基準字型大小而定，

 選取器*選取器分組     多個元素以逗號分隔可以同時應用這些樣式。*連結選取器     選取器並排中間無空格和逗號，那麼該樣式僅應用於同時存在該選取器的元素比如(#div.div)*屬性選取器（XML文檔中特別有用）     簡單屬性選取器div[class](表示擁有class屬性的div)，指定屬性值選取器     div[class="div"](表示class屬性等於div的元素) 具體屬性選取器，必須與值完全符合，此處考慮到前後有空格時，就無法匹配     img[alt] 這個特例更適用於測試，而不是設計     img[alt][id][class]屬性選取器連結資料表示時，選擇滿足所以規則的元素     div[class~=value]部分匹配選取器，僅滿足部分條件就可選擇該元素，可應用於所有屬性*子串匹配屬性選取器（最低至IE7提供對該系列屬性支援）類型                                        描述[foo^="bar"]                          選擇foo屬性值以“bar”開頭的所有元素[foo$="bar"]                           選擇foo屬性值以“bar”結尾的所有元素[foo*="bar"]                           選擇foo屬性值中包含字串“bar”的所有元素 *特定屬性選取器*[lang|="en"]{color:white;}     該選取器匹配以en開頭或者等於en的所有元素，這種熟悉選取器最常見的用途是匹配語言值。 *兄弟選取器h1 + p{margin-top:0;}           該選取器匹配h1標籤後面所有段落元素 *偽類別選取器a:link                                     所有未訪問過的錨a:visited                                 所有已訪問過的錨:first-child                              選擇元素的第一個子項目:lang()                                   lang類似熟悉選取器的|=選取器。偽類比屬性選取器稍微健壯一些，在需要語言特定的樣式時，大多數情況下偽類是更好的選擇。  *動態偽類偽類名                                    描述:focus                                    指示當前擁有的輸入焦點的元素:hover                                    指示滑鼠指標停留在那個元素上:active                                    指示被使用者輸入啟用的元素     偽類動態元素順序很重要link-visited-focus-hover-active *結合偽類                              a:link:hover{color:red;}                                 滑鼠未點擊的錨連結，當滑鼠移至上方時，該元素將應用紅色字型    a:visited:hover:lang(de){color:maroon;}         滑鼠點擊過的錨連結，當滑鼠移動上去，該元素是以 *虛擬元素選取器p:first-letter{color:red;}             這個規則會影響元素中第一個字母。p:first-line                                這個規則會影響元素中第一個文本行。所有偽類元素都必須放在出現該虛擬元素的選取器的最後面。比如p:first-line em就是不合法的。 總結：     通過根據文檔的語言來使用選取器，可以建立豐富的CSS規則。我們可以構建只應用少數元素的簡單規則，對大量類似元素應用樣式也同樣簡單。由於可以對選取器和規則分組，這使樣式表相當簡潔，而且分成靈活，相應縮小檔案的大小，縮短下載時間。 二：結構和層疊*特殊性     可以使用多種不同的方法選擇元素。開發中可能同一個元素可以用多個規則來選擇，每個規則都有自己的選取器。這種情況特殊性高者勝出。     加0，1，0，0。選取器給定的ID屬性值。     加0，0，1，0。選取器給定的類屬性值/屬性選擇或偽類。     加0，0，0，1。選取器給定的元素和偽類元素。     加1，0，0，0。內聯樣式。     加0，0，0，0。通配選取器。     *重要性     p.dark{color:#333 !important; background: white !important;}     !important 總是放在聲明的最後，即分號之前，並且每個屬性只能單獨設定。     !important 沒有特殊性的特殊性值，與非重要聲明分開考慮。如果重要聲明與非重要聲明衝突，勝出的總是重要聲明。 *繼承     某元素被聲明某值，這個值會沿樹向下傳播到後代元素，並一直繼續，知道再沒有後代元素繼承這個值為止。值絕對不會向上傳播。     HTML中，對於向上傳播有一特例：應用到BODY元素的背景樣式可以傳遞到HTML元素（html是文檔的根項目），相應地可以定義其畫圖。     一般來說，影響元素頁面中所在的位置的屬性，以及元素內邊距、外邊距、背景、邊框都不會被繼承     繼承的值沒有特殊性，甚至連0特殊性都沒有     Web瀏覽器渲染標籤時會繼承各自內部樣式     通常不使用瀏覽器內部樣式，這樣網站在不同瀏覽器會有不同表現     *層疊     如果特殊性相等的兩個規則同時應用到同一個元素，最終樣式應用取決於靠後的樣式，越靠後權重越大。     衝突中的聲明通過這個層疊過程排序，並由此確定最終的文檔表示。這個過程的核心是選取器及相關聲明的特殊性，以及繼承機制。     忽略特指度 !important     有選擇的覆蓋重疊樣式，可選擇行內樣式或者在某檔案之後連結覆蓋樣式      避免使用ID選取器，因為特製度過高不易覆蓋 三：文字屬性*文本縮排     p{text-indent:3em;} 這個規則會使所有段落的首行縮排3EM。*字型間隔     p{letter-spacing:1}這個規則會使所有段落文本左右對齊*行高     line-height     line-height:1em屬性繼承自父類時，屬性值是根據父類計算，導致子類不能正常顯示，通常解決方案是指定一個數，由它設定縮放因子(line-height:1)。*垂直對齊     vertical-align:sub;下標對齊     vertical-align:super:上標對齊     vartical-aling:middle;元素置中對齊*字型間距     word-spacing:0.5em;片語間隔會以空格為分割線增加文本間空格距離*文本轉換      text-transform*文本裝飾      text-decoration *定位     relative:元素框位移某個距離。元素仍保持未定位前的形狀，它原本所佔的空間仍然保留。     absolute:元素框從文檔流完全刪除。     fixed:元素框表現類似於將position設定為absolute，不過包含塊是視窗本身。   透明度filter:alpha(opacity=50);
 -moz-opacity:0.5;
 -khtml-opacity: 0.5; opacity: 0.5;  第七章  基本視覺格式化  基本框     CSS假設每個元素都有一個或多個矩形框，各個元素框中心有個內容區，這個內容區周圍有可選的內邊距、邊框、外邊距，為什麼是可選，因為它們的高度可以設定為0     內容區的背景（某種顏色或平鋪映像）也會應用到內邊距     外邊距通常是透明的，因此可以看到父元素的背景     內邊距不能是負值，但是外邊距可以     邊框的顏色如果沒有設定，那麼將取元素內容區的前景色彩（如果一個段落的文本是白色，那麼該段落的所有邊框都是白色，除非顯式聲明了另一種邊框色）     邊框與內容和內邊距有相同的背景     邊框的寬度絕對不能為負     不同類型的元素（區塊層級元素、行內元素、浮動元素、定位元素）格式化時存在著差別，分別有各自不同的表現 包含塊     每個元素都相對於其包含塊擺放，包含塊就是元素的"布局上下文" 正常流     傳統HTML文檔中的文本布局就是從上到下從左向右顯式 非替換元素     如果元素的內容包含在文檔中，則稱之為非替換元素 替換元素     指用作為其他內容預留位置的一個元素（IMG標籤、INPUT標籤等）     改變替換元素的寬度：元素的高度會隨之增加，如果一個替換元素的width不同於其固有寬度，那麼height值也會隨之比例變化，除非height顯式設定特定值，反之height也一樣 區塊層級元素     段落、標題DIV之類的元素，這些元素在正常流中，會在其框之前和之後產生“換行”     行內元素     span之類的元素，不會在之前或之後產生“行分隔字元” 根項目     為文檔樹頂端的元素，HTML文檔中，就是元素html 水平格式化——區塊層級元素      CSS中元素的寬度是從左內邊距到右內邊距的距離     正常流中區塊層級元素框的水平部分總和就等於父元素的width 水平屬性——區塊層級元素     水平格式化的“7大屬性”margin-left border-left padding-left width padding-right border-right margin-right這些屬性與塊級框的水平布局有關     水平格式化的“7大屬性”只有三個屬性可以設定auto值（margin-left、margin-right、width），其餘都必須設定特定的值     如果設定width、margin-left、margin-right中的某個值為auto，餘下兩個屬性指定特定的值，那麼設定auto的屬性會確定所需要的長度來等於父類元素寬度     如果3個屬性都設定特定的值，即沒有任何一個屬性設定為auto那麼，使用者代理程式將把右外邊距重設為auto值“填補”所需的距離     如果設定margin-left與margin-right的值為auto並且顯式設定 width 那麼元素會設定為相等的長度，因此元素在父元素中置中     如果margin-left或者margin-right與width同時存在auto值，那麼外邊距取值會被減為0     通過指定負外邊距得到更寬的子項目，因為外邊距可以為負數，並且“7大屬性”相加總和一定是父元素的width     如果為了滿足內容元素總和比父類元素還寬，並且設定固定的margin-right值，由於元素水平屬性過分受限時有一個規則，要求重設右外邊距，這也會得到一個負右外邊距 垂直格式化——區塊層級元素     一個元素的預設高度由其內容決定     高度還會受到內容寬度的影響，段落越窄，相應就會越高，以便容納其中所有的內聯內容     CSS中，可以對任何區塊層級元素設定顯式高度     如果假設高度大於顯示內容所需高度，多餘高度會產生一個視覺效果，好像有額外的內邊距一樣     如果架設高度小於顯式內容所需高度，瀏覽器會提供某種方法來查看所有內容，而不是增加元素框的高度，也許是加一個捲軸     垂直屬性——區塊層級元素     垂直格式化的“7大屬性”margin-top border-top padding-top height padding-bottom border-bottom margin-bottom這些屬性與塊級框的垂直布局有關     垂直格式化的“7大屬性”只有三個屬性可以設定auto值（margin-top、margin-bottom、height），其餘都必須設定特定的值     垂直格式化的“7大屬性”的值等於元素包含塊的 height ，這往往是區塊層級元素父元素的 height 值（因為區塊層級元素的父元素幾乎都是區塊層級元素）     如果 正常流中一個區塊層級元素的margin-top或margin-bottom設定為auto，它會自動計算為0，因此它沒有外邊距，同時也不能垂直置中     height 必須設定為 auto 或者是某種類型的非負值     如果一個塊級正常流元素的 height 設定為一個百分數，這個值則是包含塊的 height 的一個百分數垂直屬性——區塊層級元素—— auto 高度     如果塊級正常流元素設定 height: auto 顯示時其高度將恰好足以包含其內聯內容的行盒，會在段落設定一個邊框，並認為沒有內邊距，下邊框在文本最後一行下面，上邊框在文本第一行的上面     如果塊級正常流元素的高度設定為 auto ，而且只有塊級子項目，其預設高度將是 從最高塊級子項目的外邊框邊界到最低區塊層級元素外邊框邊界之間的距離，因此子項目的外邊距會“超出”包含這些子項目的元素（這種行為在下面進行解釋）。不過，如果區塊層級元素有上內邊距或下內邊距，或者有上邊框或者下邊框，其高度則是從最高子項目上外邊距邊界到最低子項目的下外邊距邊界之間的距離     在上例中， 將邊框改為內邊距，對DIV高度的作用還是一樣：同樣把段落的外邊距包含在內 合并垂直外邊距     垂直格式化的另一個重要方面是垂直相鄰外邊距的合并，這種合并行為只應用於外邊距。     兩個外邊距中較小的一個會被較大的一個合并 基本的術語和概念     匿名文本 是指所有未包含在行內元素中的字串，空格也是匿名文本的一部分，因為空白格與其他字元一樣都是正常的字元     EM框   em框在字型中定義，也稱為字元框。實際的字形可能比EM框更高或更矮，font-size 的值確定了各個EM框的高度     內容區 內容區可以是元素中各字元的em 框串在一起構成的框，也可以是由元素中字元字形描述的框。 在替換元素中，內容區就是元素的固有高度再加上可能有的外邊距、邊框或內邊距     行間距 行間距是 font-size 值和 line-height 值之差。這個差實際上要分為兩半，分別應用到內容區的頂部和底部。行間距只應用於非替換元素     行內框 這個框通過向內容區增加行間距來描述。對於非替換元素，元素行內框的高度剛好等於 line-height 的值。對於替換元素，元素行內框的高度則恰好等於內容區的高度，因為行間距不應用到替換元素     行框     這是包含該行中出現的行內框的最高點和最低點的最小框。換句話說行框的上邊界要位於最高行框的上邊界，而行框的底邊要放在最低行內框的下邊界 

• 內容區類似於一個區塊層級元素的內容框
• 行內元素的背景應用於內容區及所有內邊距
• 行內元素的邊框要包圍內容區及所有內邊距和邊框
• 非替換元素的內邊距、邊框和外邊距對行內元素或其產生的框沒有垂直效果，也就是說，它們不會影響元素行內框的高度（也不會影響包含該元素的行框的高度）
• 替換元素的外邊距和邊框確實會影響該元素行內框的高度，相應的，也可能影響包含該元素的行框的高度

 行內元素     行內框在行中根據其vertical-align 屬性值垂直對齊  行內格式化      行的高度（或行框的高度）由其組成元素和其它內容（如文本）的高度確定      line-height實際上隻影響行內元素和其它行內內容，而不影響區塊層級元素      只需為區塊層級元素建立 line- height 規則，不必顯式的為其所有行內元素宣告 line- height      區塊層級元素上聲明 line-height 會為該區塊層級元素的內容設定一個最小行框高度      行內元素的邊框邊界由font-size而不是line-height控制      內邊距、外邊距和邊框都可以應用於行內非替換元素，這些方面不會影響行框的高度      可以為行內元素指定內邊距，這會把邊框從文本本身拉開      外邊距不會應用到行內非替換元素的頂端和底端，它們不影響行框的高度，不過，行內元素的兩端則是另一回事      替換元素沒有自己的基準      為行內替換元素增加內邊距、邊框和外邊距會增大其行內框      負外邊距是使行內替換元素擠入其他行的唯一辦法   Vertical-align

• top將元素行內框的頂端與包含該元素的行框的頂端對齊
• bottom將元素行內框的底端與包含該元素的行框的底端對齊
• text-top將元素行內框的頂端與父元素內容區的頂端對齊
• text-bottom將元素行內框的底端與父元素內容區的底端對齊
• middle將元素行內框的垂直中心與父元素基準上0.5ex處的一點對齊
• super將元素的內容區和行內框上移。上移的距離未指定，可能因使用者代理程式的不同而不同
• sub與super相同，只不過元素會下移而不是上移

 管理line-height     通過為元素設定一個 line-height，就提高了行框的總高度，line-height 使用值 1em ，元素的 line-height 將設定為與font-size大小相等 縮允許存取高     設定 line-height的最好辦法是使用一個原始數字值。因為這個數會成為縮放因子，而該因子是一個繼承值而非計算值     如果上述方法不希望產生太多行間距，可以為他另外指定 line-height值為1.0獲得與font-size完全相等 行內塊元素 inline-block

• 是一個混合產物，區塊層級元素和行內元素的混合
• 行內塊元素作為一個行內框與其他元素和內容相關
• 它就像映像一樣放在一個問本行中
• 行內塊元素會作為替換元素放在行中
• 行內塊元素的底端預設地位於文本行的基準上，而且內部沒有行分隔字元
• 行內塊元素內部會像區塊層級元素一樣設定內容的格式
• 如果增加height屬性，比周圍內容高，這些屬性會使行高增加

 第八章 內邊距、邊框和外邊距height

• 應用於區塊層級元素和替換元素
• 無繼承性
• 百分數相對於包含塊的 height 計算

margin

• 應用於所有元素
• 無繼承性
• 百分數相對於包含塊的 width 計算

 第十章 浮動與定位float

• 無繼承性
• 應用於所有元素
• 會以某種方式將浮動元素從文檔的正常流中刪除，不過它還是會影響布局
• 一個元素浮動時，其他內容會“環繞”該元素
• 浮動元素周圍的外邊距不會合并，如果其它元素與此映像相鄰（這表示水平相鄰和垂直相鄰），而且這些元素也有外邊距，那麼這些外邊距不會與浮動映像的外邊距合并
• 元素比作有塑料邊的紙片，映像周圍的塑料邊（外邊距）絕對不會與其他浮動元素周圍的塑料邊重疊
• 浮動一個非替換元素（包括區塊層級元素），則必須為該元素宣告一個width，否則瀏覽器可能使用最小值（也許CSS新規範有新的規定）
• 要得到正常的非浮動行為，必須有 none 雖然預設值就是不浮動
• 浮動元素會產生一個塊級框，不論這個元素本身是什麼（也許是行內元素）
• 浮動元素的左（或右）外邊界不能超出其包含塊的左（或右）內邊界
• 兩個或者多個浮動元素向一個方向浮動時，並不會覆蓋，依次擺放
• 左浮動元素的右邊界不會在其右邊右浮動元素的左外邊界的右邊
• 一個浮動元素的頂端不能比其父元素的內頂端更高
• 浮動元素的頂端也不可能比之前出現的浮動元素的頂端更高
• 如果浮動元素周圍有其它元素，那個元素的背景色和邊框會延伸到浮動元素的後面

 position

• relative 元素框位移某個距離，元素仍保持其未定位前的形狀，他原本所佔的空間仍保留
• absolute 元素框從文檔流完全刪除，並相對於其包含塊定位，元素原先正常文檔流所佔空間會關閉，元素定位後產生一個塊級框
• static 元素框正常產生，區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中
• fixed 元素框的表現類將position設定為absolute，不過包含塊是視窗本身
• “根項目”的包含塊由使用者代理程式建立，根項目就是html有些瀏覽器會使用body作根項目，多數瀏覽器初始包含塊是一個視窗大小矩形
• 非根項目，如果其position是relative或static，包含塊則由最近的塊級框、表儲存格或行內塊祖先框的內容邊界構成
• position值是absolute,包含塊設定為最近的position值不是static的祖先元素（可以是任何類型）
• • 如果這個祖先是區塊層級元素，包含塊則設定為該元素的內邊距邊界，就是由邊框界定的地區
  • 如果這個祖先是行內元素，包含塊則設定為該祖先元素的內容邊界
  • 如果沒有祖先，元素的包含塊定義為初始包含塊
• 元素可以定位到其包含塊的外面，也就是說明“包含塊”一詞實際上應該是“定位上下文”
• top 描述了定位元素上外邊距邊界離其包含塊的頂端多遠。如果 top 為正值，會把定位元素的上外邊距邊界下移，若為負值，則會把定位元素的上外邊距移到其包含塊的頂端之上
• 位移定位元素的外邊距邊界時，帶來的影響是元素的所有一切（包括外邊距、邊框、內邊距和內容）都會在定位的過程中移動
• 可以為定位元素設定外邊距、邊框、內邊距和內容，兵包含在位移屬性定義的地區內
• 位移屬性定義了距離包含塊相應邊的位移
• 如果使用top、right、bottom、left來描述元素4個邊的置放位置，那麼元素的高度和寬度將由這些位移隱含確定
• 如果使用top、right、bottom、left來描述元素4個邊的置放位置，那麼元素的高度和寬度對布局沒有任何作用，除非向元素增加了外邊距、邊框、內邊距
• 定位元素的 width 和 height 的預設值是 auto

 流式布局和固定寬度布局

• 浮動三欄布局，設定其寬度為百分數
• 設定max-width控制最大寬度
• CSS樣式命名以及屬性以用途為主，比如相同樣式的多組標籤可以用群組選取器，同意控制方便管理

 影響式布局

• 相關書籍 responsive web design

 響應式布局基礎

•      行動瀏覽器不會顯示100%大的頁面。如果這麼做，大多數高於螢幕的像素將放不下，一次只能看到頁面的一部分。其實手機瀏覽器會縮小網頁，以便在螢幕中能放得下，但是響應式網頁就是為了改善網頁在手機中的外觀，所以不希望被縮小，導致文本太小而難以閱讀
• 簡單方法就能覆蓋瀏覽器的這種行為 <meta name="viewport" content=" width=device-width" > viewport指代瀏覽器的顯示地區，device把瀏覽器設為手機寬度
• 圖片響應布局 img { max-width:100% } 這個樣式把映像的最大寬度設為容器寬度的100%（這裡max-width與width有何區別？）解釋：max-width權重大於width 當遇到width幹擾時不會受影響
• 去掉浮動導覽列轉化行內區塊層級元素是置中顯示這些按鈕的唯一方式

使用Skeleton柵格系統

• Skeleton提供基礎的柵格樣式外還有額外的CSS，用於裝飾按鈕、表單和表格
• 未完待續...

  

CSS 權威指南 CSS實戰手冊 第四版（閱讀筆記）