CSS3秘笈第三版涵盖HTML5学习笔记6~8章
生活随笔
收集整理的這篇文章主要介紹了
CSS3秘笈第三版涵盖HTML5学习笔记6~8章
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
第二部分----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和fixedbackground-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)題。
- 上一篇: (笔记)Linux内核学习(五)之中断推
- 下一篇: hdu1010 dfs+路径剪枝