第二部分----CSS實用技術

第6章，文本格式化

指定備用字體： font-family:Arial,Helvetica,sans-serif; 當訪問者沒有安裝第一種字體時，瀏覽器會在列表中繼續往下搜尋，直到找到備用字體。 若字體名稱中包含多個單詞，則必須用雙引號將它們括起來 font-family:"Times New Roman",Times,serif;

sans-serif字體

sans-serif字體看起來干凈而簡潔，所以常被用于標題。sans-serif字體包括Arial、Helvetica、Verdana 注：自己的審美觀才是好的指導。

monospaced字體

monospaced（等寬）字體經常用于顯示計算機代碼。

其他字體

Arial Black、Arial Narrow、Impact字體，特別注意：Arial Black、Impact字體只有一種形式，沒有斜體，在使用這些字體時一定要將font-weight和font-style設為normal，不然瀏覽器會絞盡腦汁去想這些文字應該是啥樣的。

使用Web字體

指令較多，后續補充 Web字體的CSS部分十分簡單，只需要兩個命令：
1、@font-face指令負責告訴瀏覽器字體名稱以及到哪里下載 2、@font-family定義Web字體的方式，與使用已安裝字體是一樣的 Font Squirrel提供了一個非常好用的在線工具，可以生成所需的字體格式，www.fontsquirrel.com/fontface/generator，不僅可以生成適當的字體，還能提供一個范例HTML文件，以及一個基礎的CSS樣式表 語法： @font-face{font-family:"League Gothic";src:url('fonts/League_Gothic-webfont.ttf'); } 用CSS設定文本尺寸的3種方法：keyword、percentage、em CSS提供了7種keyword：xx-small（9px）、x-small（10px）、small（13px）、medium、large（18px）、x-large（24px）、xx-large（32px），在沒有調整過瀏覽器基準字號時，關鍵字基本等于括號中的字號

格式化詞語和字母

斜體粗體

font-style:italic; ? ? 斜體 font-style:normal; ? ? 非斜體 font-style:oblique; ? ? 斜體 font-weight:bole; ? ? 粗體 font-weight:normal; ? ? 非粗體

大寫化

text-transform:uppercase; ? ? 將所有字母大寫 text-transform:lowercase; ? ? 將所有字母小寫 text-transform:capitalize; ? ? 每個單詞首字母大寫 text-transform:none; ? ? ? ? ?不改變文本大小寫

小型大寫字母

font-variant:small-caps; ? ? 將字母設置為大寫，但大小與小寫字母一樣

文本修飾

text-decoration --> underline、overline、line-through、blink、none

字母間距和字詞間距

letter-spacing：字母間距，正數增加，負數減少 word-spacing：字詞間距，正數增加，負數減少

文本陰影

text-shadow ?--> ?水平偏移量（離文本左側或右側距離）、垂直偏移量（離文本上方或下方距離）、陰影模糊度、陰影顏色 text-shadow: -4px 4px 3px #999; 第一個-4px表示將陰影放在文本左側4px處（正數表示放右邊），第二個4px表示將陰影放在文本下方4px處（負值表示上方），第三個3px定義陰影模糊度，0px完全不模糊，產生一個清晰的陰影，值越大越模糊，第四個值表示顏色 可以定義多個陰影，用逗號(,)分開 text-shadow:-4px 4px 3px #999,1px -1px 2px #888;

格式化段落

行間距

line-height，可以使用pixel、em、percentage表示，還可以使用數字表示行間距 使用百分比的行高，百分比不會被繼承，計算出的值才會被繼承。假設網頁字號設為10px，行高為150%，則所有標簽將繼承15px行高，而不是150%，如果更改字號，則會使文本出現混亂。使用數字則會使所有標簽都使用同一個基本比例式高。

對齊文本

text-align ? --> ? left、right、justify、center

首行縮進并去除邊距

text-indent（文本縮進），margin（邊距） text-indent也可以使用百分比，不過不是根據字號，而是根據包含該段落的元素的寬度相關。 margin控制段落之間的距離，也可以使用百分比，不過與text-indent使用百分比結果一樣

格式化段落首字母或首行

使用偽元素:first-letter（首字母）和:first-line（首行），從技術上講，這些都不是CSS屬性，而是決定CSS屬性要用于段落哪一部分的一種選擇器。

列表樣式

列表類型，參看：HTML5與CSS3基礎教程第八版學習筆記11-15章，第十五章 （1）disc（實心圓點） （2）circle（空心圓圈） （3）square（實心方塊） （4）decimal（數字1、2、。。。） （5）decimal-leading-zero（數字01、02、03。。。有前導0，比HTML5與CSS3基礎教程第八版學習筆記11-15章新增） （6）upper-alhpa（大寫字母A、B、。。。） （7）lower-alpha（小寫字母a、b、。。。） （8）upper-roman（大寫羅馬數字I、II、III。。。） （9）lower-roman（小寫羅馬數字i、ii、iii。。。） 可以使用list-style-type控制。

給項目符號和項目序號定位

使用list-style-position控制項目符號的位置。可以讓它顯示在文本之外（list-style-position:outside;），或顯示在文本內（list-style-position:inside;） 利用padding-left屬性可以調整項目符號與其文本之間的距離，使用該屬性時，要創建一個應用于<li>標簽的樣式，這種方法只有list-style-position設為outside才有效 網絡上免費的圖標和項目符號：www.cssjuice.com/38-free-icon-checkpoints/ .testClass{list-style-image:url(image/bullet.gif); /* 不需要使用引號將路徑包含 */ }

第7章，margin、padding和border

對瀏覽器而言，任何標簽都是里面裝有東西的盒子

盒模型

參看：HTML5與CSS3基礎教程第八版學習筆記11-15章，第十一章 padding指內容與其邊框線之間的空間 border指盒子周邊的直線 background-color用來填充邊框內部空間的，包括padding區域 margin指一個標簽和另一個標簽之間的間隔 margin、padding在使用percentage時，瀏覽器是以外圍元素的寬度為基礎計算空間量的。

邊距沖突

當元素的bottom margin碰到另一個元素的top margin時，瀏覽器會應用他們之間較大的一個值，而不是將兩個值相加。 例：一個無序列表的bottom margin為20px，與列表相連的段落top margin為30px，最終瀏覽器使用30px來分隔，而不是50px

行內盒子、塊級盒子及其他顯示設置

對于行內盒子，瀏覽器不能對其進行top/bottom margin、top/bottom padding的設置 使用display屬性改變元素盒子 display:inline; ? ? 使塊級元素像行內元素 display:block; ? ? 使行內元素像塊級元素 display有無數種可能選項，大部分在所有瀏覽器都不起作用，inline-block值在當前瀏覽器中有效

添加邊框

border通過三個屬性進行控制：color（顏色）、width（寬度）、style（樣式） 可以統一設置所有方向的邊框，也可以單獨設置單方向上的邊框，使用border-top、border-bottom、border-right、border-left 還可以單獨設置單方向上的單個屬性，例：border-top-color、border-top-width、border-top-style，其三個方向也有類似屬性 還能夠設置多方向的單屬性，例：border-color:green yellow red blue，其他兩個屬性也有類似用法

設置背景色

.testClass{background-color:rgb(109,218,63); }

創建圓角

使用border-radius屬性 CSS3允許你給任何元素都設計圓角，一定要確保該元素有背景色或者邊框，否則將看不到任何圓角 border-radius:0 30px 10px 5px; ? ? 第一個值左上角，第二個值右上角，第三個值右下角，第四個值左下角 border-radius也可以接受一個值，兩個值，三個值，接受的值將會作為半徑，在元素對應角畫圓。 還可以創建橢圓角：border-radius:20px/40px; ? ? 第一個是從軌跡中心點到左邊或右邊的半徑，第二個是從軌跡中心點到上邊或下邊的距離 還可以混合使用圓角和橢圓角 還可以單獨設置：border-top-left-redius:10px; 注：IE8及更早不支持border-radius屬性，iOS的Safari3.2和Android Browser2.1需要提供廠商前綴-webkit- 供應商前綴 1、-webkit-：用于Chrome、Safari以及其他基于WebKit的瀏覽器 2、-moz-：用于Mozilla Firefox 3、-o-：用于Opera 4、-ms-：用于IE

添加陰影

box-shadow任何現代瀏覽器都支持，包括IE9，只是畫出的陰影比其他瀏覽器細，IE8及更早版本會完全忽略 box-shadow:-4px 6px 8px #999; 第一個值表示水平偏移量，正值陰影移右邊，負值陰影移左邊，第二個表示垂直偏移量，正值陰影在下方，負值在上方，第三個是陰影半徑，決定陰影的模糊度和寬度，值為0完全不模糊，值越大越模糊且更寬，第四個是顏色值，grba值看起來更好。 box-shadow包括兩個可選值，inset關鍵字和陰影尺寸（spead）。inset告訴瀏覽器陰影畫在方框內。還可以添加陰影尺寸作為第4個值（在陰影半徑和陰影顏色之間） box-shadow與text-shadow一樣可以設置多個陰影，方法與text-shadow類似

確定高度和寬度

使用百分比值都是以樣式外圍元素為基準 利用box-sizing屬性調整盒子的寬度 box-sizing屬性提供了以下3個選項： 1、content-box是瀏覽器定義元素的屏幕寬度和高度的一種方法。這是默認行為，不需要為content-box定義任何值 2、padding-box告訴瀏覽器當在一個樣式中設置了width或height時，應該包含padding作為該值的一部分。例：假設一個元素的left/right padding為20px，width為100px，實際上內容區域的寬度將只有60px 3、border-box值包含了padding厚度和border厚度 注：IE8及更新版本支持box-sizing，IE7不支持

用overflow屬性控制溢出

visible，瀏覽器通常的做法 scroll，添加滾動條，無論是否需要都會添加 auto，與scroll一樣，不過，只會在需要的時候出現 hidden，隱藏任何超出的內容

高度和寬度的最大化和最小化

max-height，最大高度 max-width，最大寬度 min-width，最小寬度 min-height，最小高度

用浮動元素包圍內容

使用float屬性可以把元素移到左邊或右邊，元素下方的內容會上移，包圍浮動元素。 3種選項：left、right、none background-color、border不能像其他網頁元素一樣浮動。假設讓一個元素附到右邊，側邊欄下方的內容通常應該上移將它包圍起來。但若內容設置了背景或邊框，背景或邊框就會出現在浮動側邊欄的下方。可以對浮動元素下方的背景或邊框添加overflow:hidden規則。

停止浮動

使用clear屬性可以指示元素不要包圍浮動項目。 接受以下選項： left、樣式將落至左浮動元素下方，但扔將環繞右浮動對象 right、樣式將落至右浮動元素下方，但仍將環繞左浮動元素 both、樣式將落至浮動樣式下方 none、關閉清除，讓項目包圍左右浮動元素

第8章，給網頁添加圖片

添加背景圖片

background-image屬性是使網站看起來美觀的關鍵 以下三種格式都是可以的： .testClass{background-image:url(image/example.gif);background-image:url("image/example.gif");background-image:url('image/example.gif'); } 可以使用相對路徑，相對路徑是相對于樣式表的路徑，而不是相對于要設置的HTML頁面的路徑

控制重復

使用background-repeat屬性指定圖片如何平鋪 1、repeat是默認設置，將背景圖從左到右、從上到下平鋪，直到填滿整個空間 2、no-repeat只顯示圖片一次 3、repeat-x是沿著X軸水平重復某一張圖 4、repeat-y是沿著Y軸垂直地重復某一張圖

定位背景圖片

background-position屬性，可使用多種方式來精確控制圖片位置。可通過3種不同方法來設定，keyword、精確值、percentage

關鍵字

left、fight、center控制水平 top、center、bottom控制垂直

精確值

可以用pixel或em值來定位背景圖片。使用兩個值：一個值指明圖片左側和容器左側之間的距離，另一個指明圖片頂邊和樣式頂邊之間的距離（第一個控制水平方向，第二個控制垂直方向）

percentage百分比值

以百分比時要講究技巧，如果能夠使用關鍵字或精確值達到效果，建議不要使用百分比 使用百分比一樣要提供兩個值：一個值指明水平方向的定位，一個指明垂直方向的定位。 百分比值是被格式化的元素百分比 可以與精確值混用 background-position: 5px 50%;

固定圖片

background-attachment屬性有兩個選項：scroll和fixed

background-origin和background-clip屬性

background-origin屬性可以調整圖片起點。有三個選項： 1、border-box將圖片放在border的左上角 2、padding-box將圖片放在padding區域的左上角 3、content-box將圖片放在內容區域的左上角 通常來說，背景圖片會鋪滿某個元素的整個區域，包括border和padding區域的背面，但是，利用background-clip來定義圖片顯示位置，有以下選項： 1、border-box讓圖片顯示在內容區域的后面，包括border區域的背后 2、padding-box所有背景圖片都只能顯示到元素的padding區域和內容區域 3、content-box限制背景圖片只顯示在內容區域

縮放背景圖片

CSS3還可以調整背景圖片尺寸，background-size屬性，可以利用值或關鍵字來設置這個尺寸： 1、用一個高度值和寬度值來設置圖片尺寸 .testClass{background-size:100px 200px;background-size:100px auto;background-size:100% 100%; /* 使用百分比值，讓圖片縮放完全適應背景 */ } 2、關鍵字contain會迫使圖片進行尺寸調整，以保持圖片的長寬比 background-size:contain 3、關鍵字cover會迫使圖片的寬度或高度進行調整，以便適應元素的寬度或高度 background-size是修改背景圖片尺寸的唯一方法。IE8不支持 background快捷方式可以使用較新的CSS background屬性，但由于IE8不支持一些新屬性，如果都用一個background設置，會導致其他有效屬性也變得無效，而且目前尚未有瀏覽器能夠在一個聲明中同時處理background-position和background-size值，為此，最好用正常的、可接受的快捷屬性創建一個聲明，再在快捷聲明之后單獨添加CSS3新屬性聲明 免費圖片網站 www.morguefile.com、www.sxc.hu、http://openphoto.net、http://search.creativecommons.org、www.flickr.com/creativecommons、http://picasaweb.google.com 項目符號或導航欄增色圖標 Some Random Dude網站免費提供了一套圖標：www.somerandomdude.com/work/sanscons/ 趣味的平鋪圖案 ColourLovers.com網站（www.colourlovers.com/patterns）、Pattern4u網站（www.kollermedia.at/pattern4u）、Squidfingers網站（http://squidfingers.com/patterns） 圖案生成器 BgPatterns網站（http://bgpatterns.com）、StripeGenerator2.0網站（www.stripegenerator.com）、PatternCooler網站（www.patterncooler.com）

使用多張背景圖片

使用 .testClass{background-image:url(scrollTop.jpg),url(scrollBottom.jpg),url(scrollMiddle.jpg); } 可以放一行，不過格式最好有 由于背景一般會平鋪，為此還需要包含一個background-repeat屬性： .testClass{background-repeat:no-repeat,no-repeat,repeat-y; } 值都是一一對應的，不過，太麻煩，容易混亂，為此使用快捷方法： .testClass{background:url(scrollTop.jpg) center top no-repeat,url(scrollBottom.jpg) center bottom no-repeat,url(scrollMiddle.jpg) center top repeat-y; } 在IE8中可以使用:before和:after偽類來實現上述功能

使用漸變色背景

線性漸變

使用關鍵字： .testClass{background-image:linear-gradient(left,black,white);/* 從元素左邊以黑色開始，漸變到元素右邊以白色結束 */background-image:linear-gradient(top left,black,white);/* 從元素左上角開始到元素右下角，黑色開始白色結束 */ } 還可以使用程度值：0~360

使用方法： .testClass{background-image:linear-gradient(45deg,rgb(0,0,0),rgb(204,204,204)); }

顏色站

漸變使用的顏色不只是兩種，可以為其添加多種顏色： .testClass{background-image:linear-gradient(45deg,black,white,black);background-image:linear-gradient(left,#900,#FC0 10%,#FC0 90%,#900); } 10%應用到第二種顏色，告訴瀏覽器，需要讓顏色到達元素寬度10%位置處，同樣地，90%告訴瀏覽器需要一直保持橘黃色到元素寬度90%處然后在轉變。 注：許多瀏覽器需要提供供應商前綴才能使用CSS新屬性，IE9及更早版本還不支持漸變 不只可以使用百分比，還可以使用pixel和em，不過百分比更靈活

重復線性漸變

在這里，pixel更有用。 用指定顏色站定義一種漸變，然后重復模式，將它平鋪到背景中。 .testClass{background-image:repeating-linear-gradient(bottom left,#900 20px,#FC0 30px,#900 40px); } 效果：

非常棒哦。。。。

徑向漸變

最簡單語法： .testClass{background-image:radial-gradient(red,blue);/* 創建了一個適合顏色高度和寬度的橢圓形，漸變中心處于元素中心 */ } 添加關鍵字"circle"還可以創建圓形漸變： .testClass{background-image:radial-gradient(circle,red,blue); } 瀏覽器一般是從元素中心點開始繪制徑向漸變的中心，但可以利用與background-position屬性相同的關鍵字和值來定位漸變中心點。 .testClass{background-image:radial-gradient(20% 40%,circle,red,blue);/* 從元素左邊20%處以及元素上方40%處開始 */ } 為了指明漸變尺寸，可以使用以下4個關鍵字之一： 1、closest-side告訴瀏覽器，漸變從中心點一直延伸到離中心點最近的那一邊。 .testClass{background-image:radial-gradient(20% 40%,circle closest-side,red,blue); } 2、closest-corner用于測量漸變寬度，指的是從它中心點到最近元素角的距離 .testClass{background-image:radial-gradient(20% 40%,circle closest-corner,red,blue); } 3、farthest-side用于測量圓形半徑，即從它中間點到元素最遠那一邊的距離 .testClass{background-image:radial-gradient(20% 40%,circle farthest-side,red,blue); } 4、farthest-corner用于測量圓形半徑，即從它中間點到元素最遠角的距離 .testClass{background-image:radial-gradient(20% 40%,circle farthest-corner,red,blue); } 與線性漸變一樣，可以使用顏色站，一樣需要供應商前綴

重復徑向漸變

.testClass{background-image:repeating-radial-gradient(circle,red 20px,orange 30px,yellow 40px,red 50px); } 注：為了創建看起來比較自然的漸變，終止色應該與起始色相同。

用Colorzilla輕松創建漸變

使用CSS漸變生成器（www.colorzilla.com/gradient-editor/）幫助輕松創建出大多數類型的漸變（重復漸變除外）

轉載于:https://www.cnblogs.com/TwinklingZ/p/5317514.html

總結

以上是生活随笔為你收集整理的CSS3秘笈第三版涵盖HTML5学习笔记6~8章的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。