《CSS權威指南》讀書筆記


《CSS權威指南》讀書筆記

第一章 CSS和文檔

元素

  • 替換元素與非替換元素
    替換元素是指元素內容的部分並非由文檔內容直接表示,比如img的內容取決於src屬性,input取決於其type的類型;
    非替換元素的內容則由用戶代理在元素本身生成的框中顯示。
  • 塊級元素和行內元素
    塊級元素生成一個元素框,默認他會填充其父元素的內容區旁邊不能有其他元素,即在元素框之前和之后生成了分隔符。
    行內元素在一個文本行內生成元素框,而不會打斷這行文本,不會在他本身之前或之后生成分隔符。
  • display:inline/block
    display屬性的block和inline值即對應塊級元素和行內元素的顯示,還有一種inline-block,即在行內但是擁有塊級元素的特點

結合CSS和XHTML

  • link標記
    必須放在head元素中,有一個midea屬性值表示表現媒體,默認為all,大部分媒體類型在當前瀏覽器中不支持。將rel屬性設置為alternatestylesheet,就可以定義候選樣式表,用title屬性指定樣式表的名稱。
  • @import指令
    出現在style容器中,必須放在其他CSS規則之前,無法指定候選樣式表,每一個都會被加載並使用,可以限制導入的樣式表應用與一種或多種媒體。
@import url(sheet.css) all;

第二章 選擇器

  • 把兩個類選擇器鏈接在一起,僅可以選擇同時包含這些類名的元素。
  • 在一個html文檔中,ID選擇器會使用一次且僅一次。
  • 屬性(匹配)屬性選擇器:
[foo~="bar"] //匹配部分
css2以后:
[foo^="bar"] //匹配開頭
[foo$="bar"] //匹配結尾
[foo*="bar"] //匹配包含
  • 特定屬性選擇類型,形如[att|="val"],可以用於任何屬性及其值。
[lang|="en"]
[src|="figure"]
  • 偽類和偽元素選擇器:參考其他筆記

第三章 結構和層疊

選擇器的特殊性(優先級)

參考其他筆記

繼承

基於繼承機制樣式不僅應用到指定的元素,還會應用到它的后代元素;border不會繼承;繼承的值根本沒有特殊性;

層疊規則

  1. 找出與給定元素有關的所有規則;
  2. 按照來源對應用到給定元素的所有聲明排序,一般來說:創作人員>讀者>用戶代理(瀏覽器),但讀者的重要聲明——!important權重最高
  3. 按照特殊性對應用到該元素的所有聲明排序
  4. 按照出現順序對聲明排序,越后出現,權重越大。

第四章 值和單位

  • 大多數瀏覽器都能識別多達140個元素。參考CSS顏色名
  • 在css中,相對url要相對於樣式表本身,而不是相對於使用該樣式表的html。

相對長度單位

  • em:一個“em”定義為一種給定字體的font-size。
  • ex:ex是指所用字體中小寫x的高度,不同字體中x的高度可能不同,一般取ex等於0.5em.

一些其他單位(大多用於語音瀏覽器)

  • 角度值:度deg,梯度grad,弧度rad
  • 時間值:毫秒ms,秒s
  • 頻率值:赫茲Hz,兆赫MHz

第五章 字體

  • 一個字體通常有多種變形的組合,稱為一個字體系列,每一個變形都是一個具體的字體風格。

  • 為字體指定了九級加粗度,100對應最細的字體變形,900對應最粗的字體變形,400等價於normal,700對應於bold…

  • font-size的作用是為給定字體的em框提供一個大小,而不能保證實際顯示的字符就是這種大小。
  • 百分數值總是根據從父元素繼承來的大小來計算
    font-size可以繼承,不過繼承的是計算值而不是百分數,用戶代理可能對像素大小進行取整,之后再由子元素正常繼承
  • 字體傾斜(oblique,只是正常豎直文本的一個傾斜版本)與斜體(italic,單獨的風格字體,對每個字母的結構有一些小改動)是兩種情況
  • font-variant的small-caps使用小型大寫字母。
  • font屬性中,font-size和font-family必須要以此順序作為聲明中的最后兩個值,而且必須存在。

第六章 文本屬性

  • 文本是內容,而字體用於顯示這個內容。

縮進和水平對齊

  • 使用text-indent屬性,所有元素的第一行都可以縮進一個給定長度,該長度可以是負值,建議針對負縮進再設置一個外邊距或者一些內邊距防止超出邊界。
    這個屬性可以繼承。

水平對齊

  • text-align屬性的值left,right,和center會導致元素中的文本分別左對齊右對齊和居中。

  • 不會控制元素的對齊,而只影響其內部內容。

  • justify值會使文本行的左右兩端都放在父元素的內邊界上,然后調整單詞和字母間隔使各行長度恰好相等。但如果letter-spacing屬性指定為一個長度值,則不能進一步增加或減少字符間的空間。

垂直對齊

  • line-gheight屬性指文本行基線之間的距離,而不是字體的大小,它確定了將各個元素框的高度增加或減少多少。line-height值和字體大小之差就是行間距。應用到塊級元素時,它定義一個最小距離而不是一個絕對的具體數值。

  • line-height值是文本行的行框高,這個數值減去fontsize大小再除以二的值,分別添加到內容區的上下,就是內容區到行框的距離。

  • line-height屬性會繼承,可能會導致行框高小於字體大小的問題,更好的解決辦法是指定該屬性值為一個縮放因子,根據元素的font-size值來計算line-height。

垂直對齊文本

  • vertical-align屬性只應用於行內元素和替換元素,不能繼承。

  • base-line值要求一個元素的基線與其父元素基線對齊。

  • sub會使一個元素變成下標,super則相反。

  • bottom值將元素行內框的底端與行框的底端對齊,text-bottom值則是行內文本的底端。top和text-top則相反。

  • middle值會把行內元素框的中點與父元素基線上方0.5ex處的一個點對齊。

  • 如果為vertical-align設置一個百分數,##第六章 文本屬性會把元素的基線相對於父元素的基線升高過降低指定的量。指定一個長度,會把元素升高或降低指定的距離。

字間隔和字母間隔

  • word-spacing用於修改字間間隔,提供一個長度值,字之間間隔會增加或減少相應距離。

  • letter-spacing類似於前者,不過應用於字母之間。上面提到,如果指定了該值,text-align的justify屬性則不會起作用。

文本轉換

  • text-transform屬性的uppercase和lowercase將文本轉換為全大寫或小寫字符,capitalize只對每個單詞的首字母大寫。

文本裝飾

  • text-decoration的underline值會對元素加下划線,overline值是上划線,line-through值則在文本中間畫一個貫穿線,blink會讓文本閃爍。

  • 該屬性不能繼承,可能會導致一些奇怪的現象。

文本陰影

  • text-shadow屬性,前兩個長度值確定了陰影與文本的偏移距離,第三個值可選,定義了陰影的“模糊半徑”。

處理空白符

  • white-space屬性的pre值使空白符不會被忽略,而nowrap則會防止元素中的文本換行,除非使用了一個br元素,prewrap會使文本保留空白符序列但會正常換行,而preline則相反

文本方向

  • direction屬性可以影響塊級元素中的文本書寫方向,表中列布局的方向,內容水平填充其元素框的方向,以及兩端對齊元素中最后一行的位置。

  • 其默認值根據語言種類被瀏覽器設置為ltr或rtl。

第七章 基本視覺格式化

基本框

  • 外邊距通常是透明的,從中可以看到父元素的背景。內邊距不能是負值,但是外邊距可以。
  • 包含塊即一個元素的布局上下文,由最近的塊級祖先框,表單元格,或行內塊祖先框的內容邊界構成。

塊級元素

  • 垂直方向上只有3個屬性可以設置為auto:元素內容的width,以及左,右外邊距,其余屬性必須設置為特定的值或者默認寬度為0。水平方向同理。
  • 可以用auto彌補實際值與所需總和的差距。
  • 如果這三個屬性都設置為非auto,則這些格式化屬性過分受限,此時總會把margin-right強制為auto。(和語言閱讀方向有關)
  • 將兩個外邊距設置為相等長度是將元素居中的一種正確方法。
  • 只使用百分數將無法創建完全靈活的元素布局,因為邊框的寬度只能是長度。
  • 如果width是auto,元素的寬度則是內容的固有寬度。
  • 如果一個替換元素的width不同於其固有寬度,那么height也會成比例變化,除非height自己顯式設置為一個特定值。
  • 水平方向上,如果正常流中一個塊級元素的margin-top或margin-bottom設置為auto,它會自動計算為0,使元素沒有外邊距。
  • 將元素垂直居中的一個辦法是把上下外邊距都設置為25%。
  • 相鄰外邊距會沿着豎軸合並,兩個外邊距中較小的一個會被較大的一個合並。
  • 行間距是line-height值和font-size值的差,分成兩半加在內容區的頂部和底部。
  • 如果一個元素生成run-in框,而且該框后面是一個塊級框,那么該run-in元素將成為塊級框開始處的一個行內框。

第八章 內邊距,邊框和外邊距

基本元素框

  • 寬度和高度不能應用到行內非替換元素。
  • margin的默認值是0,如果沒有聲明,就不會出現外邊距。但實際情況中,瀏覽器對許多元素已經提供了預定的樣式。
  • 設定四邊的值是從上開始圍着元素順時針旋轉的,即上右下左。
  • 百分數是相對於父元素的width計算的。

外邊距

  • 行內非替換元素的外邊距不會改變一個元素的行高。左外邊距應用到這個元素的開始處,右外邊距應用到該元素的末尾,因為元素可能換行。應用負外邊距時,元素的左右兩端可能與其他內容重疊。
  • 替換元素又有所不同,為其設置的外邊距確實會影響行高,可能會使行高增加或減少,這取決於上下外邊距的值。

邊框

  • transparent值使邊框就像額外的內邊距一樣,元素的背景會延伸到邊框區。
  • 為行內元素的邊框指定怎樣的寬度,元素的行高都不會改變。左右邊則是另一回事,邊框可見,並且文本會在其旁邊顯示。

內邊距

  • 內邊距不會合並。
  • 對於有背景色和內邊距的行內非替換元素,背景可以向元素上面和下面延伸。

第九章 顏色和背景

  • 設置類名時最好描述其中包含的信息類型,而不是想要達到什么視覺效果。
  • 前景是元素的文本,不過前景還包括元素周圍的邊框。
  • 對於有alpha通道的圖像格式,如png,可能會部分或完全透明,這會導致圖像與背景色結合。
  • background-position指定圖像放置的位置,可以設置關鍵詞如top,left,也可以使用百分數值或者長度值。
  • 通過使用屬性background-attachment,可以聲明原圖像相對於可視區是固定的,因此不會受滾動的影響。其次,原圖像的放置位置由可視區的大小確定,而不是由包含該圖像的元素的大小確定,如果該值為scroll,會導致背景隨其余文檔滾動,而且當窗口大小調整時,不一定改變原圖像的位置。
  • 在background的簡寫屬性中,如果background-position有兩個值它們必須一起出現,而且這兩個值是長度或百分數,則必須按照水平值在前,垂直值在后的順序。

第十章 浮動和定位

  • 一個元素浮動時,其他內容會環繞該元素。浮動元素的外邊距不會合並,即使有其他元素與之相鄰。
  • 浮動元素會生成一個塊級框,而不論這個元素本身是什么。

浮動規則

  • 浮動元素的左右外邊界不能超出其包含塊的左右內邊界。
  • 浮動元素的左右外邊界必須是源文檔中之前出現的左浮動或右浮動元素的左右外邊界,除非后出現浮動元素的頂端出現在先浮動元素的底端下面。浮動元素不會彼此覆蓋,所有浮動內容都是可見的。
  • 左浮動元素的右外邊界不會在其右浮動元素的左外邊界的右邊,右浮動元素同理。
  • 一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合並外邊距之間,放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。
  • 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。
  • 如果源文檔中一個浮動元素之前出現另一個元素,浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。不允許元素浮動到該浮動元素之前內容的行的頂端之上。
  • 左或右浮動元素的左邊或右邊有另一個浮動元素,前者的右外邊界不能在其包含塊的右(左)邊界的右邊(左邊)。
  • 浮動元素必須盡可能高地放置。
  • 左浮動元素必須向左盡可能遠,右浮動元素則必須向右盡可能遠。

  • 有意思的是,負外邊距可能導致浮動元素移到其父元素的外面。

重疊規則

  • 行內框與一個浮動元素重疊時,其邊框,背景和內容都在還浮動元素之上顯示。
  • 塊框與一個浮動元素重疊時,其邊框和背景在該浮動元素之下顯示,而內容在浮動元素之上顯示。

清除浮動

  • 如果第一個元素可能放在一個浮動元素旁邊,則會向下推,直到出現在浮動元素的下面,而且所有后續內容都在其后面出現。

定位

  • 包含塊規則:
  • 如果設置overflow為scroll,元素的內容會在元素框的邊界處裁剪,出現一個滾動條。如果被設置為hidden,將不會提供滾動條。
  • 如果一個絕對定位元素的內容溢出其內容框,而且overflow設置為要求裁剪該內容,通過clip屬性可以改變裁剪區域的形狀。語法為rect(top,right,bottom,left),四個計算長度表示剪裁矩形區域的四個邊,否則,根據指定確定,這個值不是偏移,而是距元素左上角的距離,不允許有百分數。
  • 元素絕對定位時,會從文檔流中完全刪除,然后相對於其他包含塊定位。

元素可見性

  • 設置visibility使元素處於不可見狀態時,元素還是會影響文檔的布局,就好像它還可見一樣。而設置display:none時,元素直接從文檔中刪除,對文檔布局沒有任何影響。
  • 必須顯式聲明后代元素為visible,因為visibility屬性可以繼承。

第十一章 表布局

  • 表模型以行為主,會顯式聲明行,而列是從單元格行的布局推導出來的。
  • 為了完成表的顯式,CSS定義了6個不同的層,表,列組,列,行組,行,單元格。可以分別放表的不同方面。
  • 對應表各個方面的樣式都在其各自的層上繪制。列樣式在行樣式的下面,所以行背景會覆蓋列背景。
  • css中表有兩種不同的邊框模型,如果單元格之間相互是分隔的,就是分隔邊框模型在起作用,另一種是合並邊框模型,單元格之間沒有可見的間隔,邊框會相互合並。這個屬性由border-collapse的collapse值和separate值確定。
  • border-spacing屬性可以使單元格邊框分隔,它只能應用於表本身,而不是單個單元格。
  • 對於空單元格,empty-cells屬性的show和hide值可以決定其是顯示邊框和背景還是什么都不顯示。
  • 如果單元格的邊框相鄰,就會相互合並,使得實際上只畫出其中一個合並邊框。
  • 有兩種不同的方法可以得出表的寬度,使用table-layout決定采用哪種方法計算表的寬度。
  • 其中,固定布局(fixed),根據表以及表中列和單元格的width值決定。width屬性值不是auto的所有列元素會根據width值設置該列的寬度,如果一個列寬度為auto但表首行中位於該列的單元格width不是auto,則根據該單元格寬度設置此列的寬度,如果這個單元格跨多列,則寬度在這些列上平均分配。之后如果列的寬度仍為auto,則會自動確定其大小,使其寬度盡可能相等。后面這些行的單元格不會改變列寬,意味着為這些單元格指定的width值都會被忽略。
  • 自動布局(auto)中,表布局完全取決於單元格的內容。具體步驟見書上p367。

第十二章 列表與生成內容

列表

  • 可以對列表標志使用一個圖像,利用list-style-image屬性做到。
  • 列表標志的位置可以用list-style-position設定inside或outside值。

生成內容

  • 如果希望生成內容中有一個換行,不能直接使用br,而要使用串”\A”(由unicode換行符得來),這是css表示換行的方法。
  • 在偽元素的content部分,可以直接使用一個元素的屬性值attr(name)

第十三章 用戶界面樣式

  • 輪廓不像邊框那樣參與到文檔流中,一般認為輪廓是用戶界面樣式的一部分,這是因為它們最常用於指示當前焦點。
  • outline-color的invert屬性是反色輪廓,意味着要對輪廓所在的像素完成反色轉換,這個過程可以確保不論輪廓后面是什么都將可見。

第十四章 非屏幕媒體

  • media屬性可以接受一個媒體值或者媒體值表。
  • 在樣式表本身,還可以在@import規則上限制媒體。
  • @media塊的語法,允許在同一個樣式表中為多個媒體定義樣式。

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com