第二部分----CSS實(shí)用技術(shù)

第6章，文本格式化

指定備用字體： font-family:Arial,Helvetica,sans-serif; 當(dāng)訪問(wèn)者沒(méi)有安裝第一種字體時(shí)，瀏覽器會(huì)在列表中繼續(xù)往下搜尋，直到找到備用字體。 若字體名稱中包含多個(gè)單詞，則必須用雙引號(hào)將它們括起來(lái) font-family:"Times New Roman",Times,serif;

sans-serif字體

sans-serif字體看起來(lái)干凈而簡(jiǎn)潔，所以常被用于標(biāo)題。sans-serif字體包括Arial、Helvetica、Verdana 注：自己的審美觀才是好的指導(dǎo)。

monospaced字體

monospaced（等寬）字體經(jīng)常用于顯示計(jì)算機(jī)代碼。

其他字體

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

使用Web字體

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

格式化詞語(yǔ)和字母

斜體粗體

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

大寫(xiě)化

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

小型大寫(xiě)字母

font-variant:small-caps; ? ? 將字母設(shè)置為大寫(xiě)，但大小與小寫(xiě)字母一樣

文本修飾

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

字母間距和字詞間距

letter-spacing：字母間距，正數(shù)增加，負(fù)數(shù)減少 word-spacing：字詞間距，正數(shù)增加，負(fù)數(shù)減少

文本陰影

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

格式化段落

行間距

line-height，可以使用pixel、em、percentage表示，還可以使用數(shù)字表示行間距 使用百分比的行高，百分比不會(huì)被繼承，計(jì)算出的值才會(huì)被繼承。假設(shè)網(wǎng)頁(yè)字號(hào)設(shè)為10px，行高為150%，則所有標(biāo)簽將繼承15px行高，而不是150%，如果更改字號(hào)，則會(huì)使文本出現(xiàn)混亂。使用數(shù)字則會(huì)使所有標(biāo)簽都使用同一個(gè)基本比例式高。

對(duì)齊文本

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

首行縮進(jìn)并去除邊距

text-indent（文本縮進(jìn)），margin（邊距） text-indent也可以使用百分比，不過(guò)不是根據(jù)字號(hào)，而是根據(jù)包含該段落的元素的寬度相關(guān)。 margin控制段落之間的距離，也可以使用百分比，不過(guò)與text-indent使用百分比結(jié)果一樣

格式化段落首字母或首行

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

列表樣式

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

給項(xiàng)目符號(hào)和項(xiàng)目序號(hào)定位

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

第7章，margin、padding和border

對(duì)瀏覽器而言，任何標(biāo)簽都是里面裝有東西的盒子

盒模型

參看：HTML5與CSS3基礎(chǔ)教程第八版學(xué)習(xí)筆記11-15章，第十一章 padding指內(nèi)容與其邊框線之間的空間 border指盒子周邊的直線 background-color用來(lái)填充邊框內(nèi)部空間的，包括padding區(qū)域 margin指一個(gè)標(biāo)簽和另一個(gè)標(biāo)簽之間的間隔 margin、padding在使用percentage時(shí)，瀏覽器是以外圍元素的寬度為基礎(chǔ)計(jì)算空間量的。

邊距沖突

當(dāng)元素的bottom margin碰到另一個(gè)元素的top margin時(shí)，瀏覽器會(huì)應(yīng)用他們之間較大的一個(gè)值，而不是將兩個(gè)值相加。 例：一個(gè)無(wú)序列表的bottom margin為20px，與列表相連的段落top margin為30px，最終瀏覽器使用30px來(lái)分隔，而不是50px

行內(nèi)盒子、塊級(jí)盒子及其他顯示設(shè)置

對(duì)于行內(nèi)盒子，瀏覽器不能對(duì)其進(jìn)行top/bottom margin、top/bottom padding的設(shè)置 使用display屬性改變?cè)睾凶?display:inline; ? ? 使塊級(jí)元素像行內(nèi)元素 display:block; ? ? 使行內(nèi)元素像塊級(jí)元素 display有無(wú)數(shù)種可能選項(xiàng)，大部分在所有瀏覽器都不起作用，inline-block值在當(dāng)前瀏覽器中有效

添加邊框

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

設(shè)置背景色

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

創(chuàng)建圓角

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

添加陰影

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

確定高度和寬度

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

用overflow屬性控制溢出

visible，瀏覽器通常的做法 scroll，添加滾動(dòng)條，無(wú)論是否需要都會(huì)添加 auto，與scroll一樣，不過(guò)，只會(huì)在需要的時(shí)候出現(xiàn) hidden，隱藏任何超出的內(nèi)容

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

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

用浮動(dòng)元素包圍內(nèi)容

使用float屬性可以把元素移到左邊或右邊，元素下方的內(nèi)容會(huì)上移，包圍浮動(dòng)元素。 3種選項(xiàng)：left、right、none background-color、border不能像其他網(wǎng)頁(yè)元素一樣浮動(dòng)。假設(shè)讓一個(gè)元素附到右邊，側(cè)邊欄下方的內(nèi)容通常應(yīng)該上移將它包圍起來(lái)。但若內(nèi)容設(shè)置了背景或邊框，背景或邊框就會(huì)出現(xiàn)在浮動(dòng)側(cè)邊欄的下方。可以對(duì)浮動(dòng)元素下方的背景或邊框添加overflow:hidden規(guī)則。

停止浮動(dòng)

使用clear屬性可以指示元素不要包圍浮動(dòng)項(xiàng)目。 接受以下選項(xiàng)： left、樣式將落至左浮動(dòng)元素下方，但扔將環(huán)繞右浮動(dòng)對(duì)象 right、樣式將落至右浮動(dòng)元素下方，但仍將環(huán)繞左浮動(dòng)元素 both、樣式將落至浮動(dòng)樣式下方 none、關(guān)閉清除，讓項(xiàng)目包圍左右浮動(dòng)元素

第8章，給網(wǎng)頁(yè)添加圖片

添加背景圖片

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

控制重復(fù)

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

定位背景圖片

background-position屬性，可使用多種方式來(lái)精確控制圖片位置。可通過(guò)3種不同方法來(lái)設(shè)定，keyword、精確值、percentage

關(guān)鍵字

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

精確值

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

percentage百分比值

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

固定圖片

background-attachment屬性有兩個(gè)選項(xiàng)：scroll和fixed

background-origin和background-clip屬性

background-origin屬性可以調(diào)整圖片起點(diǎn)。有三個(gè)選項(xiàng)： 1、border-box將圖片放在border的左上角 2、padding-box將圖片放在padding區(qū)域的左上角 3、content-box將圖片放在內(nèi)容區(qū)域的左上角 通常來(lái)說(shuō)，背景圖片會(huì)鋪滿某個(gè)元素的整個(gè)區(qū)域，包括border和padding區(qū)域的背面，但是，利用background-clip來(lái)定義圖片顯示位置，有以下選項(xiàng)： 1、border-box讓圖片顯示在內(nèi)容區(qū)域的后面，包括border區(qū)域的背后 2、padding-box所有背景圖片都只能顯示到元素的padding區(qū)域和內(nèi)容區(qū)域 3、content-box限制背景圖片只顯示在內(nèi)容區(qū)域

縮放背景圖片

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

使用多張背景圖片

使用 .testClass{background-image:url(scrollTop.jpg),url(scrollBottom.jpg),url(scrollMiddle.jpg); } 可以放一行，不過(guò)格式最好有 由于背景一般會(huì)平鋪，為此還需要包含一個(gè)background-repeat屬性： .testClass{background-repeat:no-repeat,no-repeat,repeat-y; } 值都是一一對(duì)應(yīng)的，不過(guò)，太麻煩，容易混亂，為此使用快捷方法： .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偽類來(lái)實(shí)現(xiàn)上述功能

使用漸變色背景

線性漸變

使用關(guān)鍵字： .testClass{background-image:linear-gradient(left,black,white);/* 從元素左邊以黑色開(kāi)始，漸變到元素右邊以白色結(jié)束 */background-image:linear-gradient(top left,black,white);/* 從元素左上角開(kāi)始到元素右下角，黑色開(kāi)始白色結(jié)束 */ } 還可以使用程度值：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%應(yīng)用到第二種顏色，告訴瀏覽器，需要讓顏色到達(dá)元素寬度10%位置處，同樣地，90%告訴瀏覽器需要一直保持橘黃色到元素寬度90%處然后在轉(zhuǎn)變。 注：許多瀏覽器需要提供供應(yīng)商前綴才能使用CSS新屬性，IE9及更早版本還不支持漸變 不只可以使用百分比，還可以使用pixel和em，不過(guò)百分比更靈活

重復(fù)線性漸變

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

非常棒哦。。。。

徑向漸變

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

重復(fù)徑向漸變

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

用Colorzilla輕松創(chuàng)建漸變

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

轉(zhuǎn)載于:https://www.cnblogs.com/TwinklingZ/p/5317514.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。