CSS實(shí)用教程（二）_0

2020-03-24 18:41:24

字體：大中小

供稿：網(wǎng)友

1．文字大小寫(xiě) 文字大小寫(xiě)使網(wǎng)頁(yè)的設(shè)計(jì)者不用在輸入文字時(shí)就完成文字的大小寫(xiě)，而可以在輸入完畢后，再根據(jù)需要對(duì)局部的文字設(shè)置大小寫(xiě)。基本格式如下： text-transform: 參數(shù) 參數(shù)取值范圍： ?uppercase：所有文字大寫(xiě)顯示 ?lowercase：所有文字小寫(xiě)顯示 ?capitalize：每個(gè)單詞的頭字母大寫(xiě)顯示 ?none：不繼承母體的文字變形參數(shù) 注意：繼承是指HTML的標(biāo)識(shí)符對(duì)于包含自己的標(biāo)識(shí)符的參數(shù)會(huì)繼承下來(lái)。 2．文字修飾文字修飾的主要用途是改變瀏覽器顯示文字鏈接時(shí)的下劃線(xiàn)。基本格式如下： text-decoration: 參數(shù) 參數(shù)取值范圍： ?underline：為文字加下劃線(xiàn) ?overline：為文字加上劃線(xiàn) ?line-through：為文字加刪除線(xiàn) ?blink：使文字閃爍 ?none：不顯示上述任何效果八．控制文本的樣式控制文本的樣式包括單詞距離、字母距離、文本行距、文本水平對(duì)齊、文本垂直對(duì)齊文本縮進(jìn)六個(gè)部分。 1．單詞間距單詞間距指的是英文每個(gè)單詞之間的距離，不包括中文文字。基本格式如下： word-spacing: 間隔距離間隔距離的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 2．字母間距字母間距是指英文字母之間的距離，功能、用法，以及參數(shù)的設(shè)置和單詞間距很相似。基本格式如下： letter-spacing: 字母間距 3．行距行距是指上下兩行基準(zhǔn)線(xiàn)之間的垂直距離。一般地說(shuō)，英文五線(xiàn)格練習(xí)本，從上往下數(shù)的第三條橫線(xiàn)就是計(jì)算機(jī)所認(rèn)為的該行的基準(zhǔn)線(xiàn)。基本格式如下：line-height: 行間距離行間距離取值：?不帶單位的數(shù)字：以1為基數(shù)，相當(dāng)于比例關(guān)系的100%?帶長(zhǎng)度單位的數(shù)字：以具體的單位為準(zhǔn)?比例關(guān)系注意：如果文字字體很大，而行距相對(duì)較小的話(huà)，可能會(huì)發(fā)生上下兩行文字互相重疊的現(xiàn)象。4．文本水平對(duì)齊文本水平對(duì)齊可以控制文本的水平對(duì)齊，而且并不僅僅指文字內(nèi)容，也包括設(shè)置圖片、影像資料的對(duì)齊方式。基本格式如下：text-align: 參數(shù)參數(shù)的取值：?left：左對(duì)齊?right：右對(duì)齊?center：居中對(duì)齊?justify：相對(duì)左右對(duì)齊但需要注意的是，text-alight是塊級(jí)屬性，只能用于 p 、 blockquqte 、 ul 、 h1 ~ h6 等標(biāo)識(shí)符里。5．文本垂直對(duì)齊文本的垂直對(duì)齊應(yīng)當(dāng)是相對(duì)于文本母體的位置而言的，不是指文本在網(wǎng)頁(yè)里垂直對(duì)齊。比如說(shuō)，表格的單元格里有一段文本，那么對(duì)這段文本設(shè)置垂直居中就是針對(duì)單元格來(lái)衡量的，也就是說(shuō)，文本將在單元格的正中顯示，而不是整個(gè)網(wǎng)頁(yè)的正中。基本格式如下：vertical-align: 參數(shù)參數(shù)取值：?top：頂對(duì)齊?bottom：底對(duì)齊?text-top：相對(duì)文本頂對(duì)齊?text-bottom：相對(duì)文本底對(duì)齊?baseline：基準(zhǔn)線(xiàn)對(duì)齊?middle：中心對(duì)齊?sub：以下標(biāo)的形式顯示?super：以上標(biāo)的形式顯示6．文本縮進(jìn)文本縮進(jìn)可以使文本在相對(duì)默認(rèn)值較窄的區(qū)域里顯示，主要用于中文板式的首行縮進(jìn)，或是為大段的引用文本和備注做成縮進(jìn)的格式。基本格式如下：text-indent: 縮進(jìn)距離縮進(jìn)距離取值：?帶長(zhǎng)度單位的數(shù)字?比例關(guān)系但是需要注意的是，在使用比例關(guān)系的時(shí)候，有人會(huì)認(rèn)為瀏覽器默認(rèn)的比例是相對(duì)段落的寬度而言的，其實(shí)事實(shí)并非如此，整個(gè)瀏覽器的窗口才是瀏覽器所默認(rèn)的參照物。另外，text-indent是塊級(jí)屬性，只能用于 p 、 blockquqte 、 ul 、 h1 ~ h6 等標(biāo)識(shí)符里。
九．控制顏色和背景的樣式控制顏色和背景的樣式包括顏色屬性、背景顏色、背景圖片、背景圖片重復(fù)、背景圖片固定、背景定位六個(gè)部分。 1．顏色屬性基本格式如下： color: 參數(shù) 顏色參數(shù)取值范圍： ?以RGB值表示 ?以16進(jìn)制（hex）的色彩值表示 ?以默認(rèn)顏色的英文名稱(chēng)表示以默認(rèn)顏色的英文名稱(chēng)表示無(wú)疑是最為方便的，但由于預(yù)定義的顏色種類(lèi)太少，所以更多的網(wǎng)頁(yè)設(shè)計(jì)者喜歡用RGB的方式。RGB方式的好處很多，不但可以用數(shù)字的形式精確地表示顏色，而且也是很多圖像制作軟件（如Photoshop）里默認(rèn)使用的規(guī)范，這樣一來(lái)就為圖片和網(wǎng)頁(yè)更好地結(jié)合打下了堅(jiān)實(shí)的基礎(chǔ)。 2．背景顏色在HTML當(dāng)中，要為某個(gè)對(duì)象加上背景色只有一種辦法，那就是先做一個(gè)表格，在表格中設(shè)置完背景色，再把對(duì)象放進(jìn)單元格。這樣做比較麻煩，不但代碼較多，還要為表格的大小和定位傷些腦筋。現(xiàn)在用CSS就可以輕松地直接搞定了，而且對(duì)象的范圍很廣，可以是一段文字，也可以只是一個(gè)單詞或一個(gè)字母。基本格式如下： background-color: 參數(shù) 參數(shù)取值和顏色屬性一樣。 3．背景圖片基本格式如下： background-image: url(URL) URL就是背景圖片的存放路徑。如果用“none”來(lái)代替背景圖片的存放路徑，將什么也不顯示。4．背景圖片重復(fù) 背景圖片重復(fù)控制的是背景圖片平鋪與否，也就是說(shuō)，結(jié)合背景定位的控制可以在網(wǎng)頁(yè)上的某處單獨(dú)顯示一幅背景圖片。基本格式如下： background-repeat: 參數(shù) 參數(shù)取值范圍： ?no-repeat：不重復(fù)平鋪背景圖片 ?repeat-x：使圖片只在水平方向上平鋪 ?repeat-y：使圖片只在垂直方向上平鋪如果不指定背景圖片重復(fù)屬性，瀏覽器默認(rèn)的是背景圖片向水平、垂直兩個(gè)方向上平鋪。 5．背景圖片固定背景圖片固定控制背景圖片是否隨網(wǎng)頁(yè)的滾動(dòng)而滾動(dòng)。如果不設(shè)置背景圖片固定屬性，瀏覽器默認(rèn)背景圖片隨網(wǎng)頁(yè)的滾動(dòng)而滾動(dòng)。為了避免過(guò)于花哨的背景圖片在滾動(dòng)時(shí)傷害瀏覽者的視力，所以可以解除背景圖片和文字內(nèi)容的捆綁，該為和瀏覽器窗口捆綁。基本格式如下： background-attachment: 參數(shù) 參數(shù)取值范圍： ?fixed：網(wǎng)頁(yè)滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，固定不動(dòng) ?scroll：網(wǎng)頁(yè)滾動(dòng)時(shí)，背景圖片相對(duì)于瀏覽器的窗口而言，一起滾動(dòng) 6．背景定位背景定位用于控制背景圖片在網(wǎng)頁(yè)中顯示的位置。基本格式如下： background-position: 參數(shù)表參數(shù)取值范圍： ?帶長(zhǎng)度單位的數(shù)字參數(shù) ?top：相對(duì)前景對(duì)象頂對(duì)齊 ?bottom：相對(duì)前景對(duì)象底對(duì)齊 ?left：相對(duì)前景對(duì)象左對(duì)齊 ?right：相對(duì)前景對(duì)象右對(duì)齊 ?center：相對(duì)前景對(duì)象中心對(duì)齊 ?比例關(guān)系參數(shù)中的center如果用于另外一個(gè)參數(shù)的前面，表示水平居中；如果用于另外一個(gè)參數(shù)的后面，表示垂直居中。十．控制列表的樣式列表是HTML里一種很有用的顯示方式，可以把相關(guān)的并列內(nèi)容整齊地垂直排列，使網(wǎng)頁(yè)顯得整潔專(zhuān)業(yè)，并讓瀏覽者有一目了然的感覺(jué)。樣式表為列表增加了一些功能，控制列表的樣式包括列表樣式、圖形符號(hào)、列表位置三個(gè)部分。 1．列表符號(hào) 列表符號(hào)是指顯示于每一個(gè)列表項(xiàng)目前的符號(hào)標(biāo)識(shí)。基本格式如下： list-style-type：參數(shù) 參數(shù)取值范圍： ?disc：圓形 ?circle：空心圓 ?square：方塊 ?decimal：十進(jìn)制數(shù)字 ?lower-roman：小寫(xiě)羅馬數(shù)字 ?upper-roman：大寫(xiě)羅馬數(shù)字 ?lower-alpha：小寫(xiě)希臘字母 ?upper-alpha：大寫(xiě)希臘字母 ?none：無(wú)符號(hào)顯示參數(shù)中的disc是默認(rèn)選項(xiàng)。 2．圖形符號(hào) 圖形符號(hào)指原來(lái)列表的項(xiàng)目符號(hào)將可以使用圖形來(lái)代替。基本格式如下： list-style-image：URL URL是用來(lái)代替項(xiàng)目符號(hào)的圖形文件的地址，可以使用相對(duì)地址或絕對(duì)地址。 3．列表位置列表位置描述列表在何處顯示。基本格式如下： list-style-position：參數(shù) 參數(shù)取值范圍： ?inside：在BOX模型內(nèi)部顯示 ?outside：在BOX模型外部顯示這里又出現(xiàn)了一個(gè)新的概念：BOX模型。BOX是指一種容器，包含了應(yīng)用樣式規(guī)則的對(duì)象，具體介紹將在后文中給出。十一．控制用戶(hù)界面的樣式在網(wǎng)頁(yè)上，鼠標(biāo)平時(shí)呈箭頭形，指向鏈接時(shí)成為手形，等待網(wǎng)頁(yè)下載時(shí)成為沙漏形……這似乎是約定俗成的。雖然這樣的設(shè)計(jì)能使我們知道瀏覽器現(xiàn)在的狀態(tài)或是可以做什么，但這些好像還不能完全地滿(mǎn)足我們的需要。就拿鏈接來(lái)說(shuō)，可以是指向一個(gè)幫助文件，也可以是向前進(jìn)一頁(yè)或是向后退一頁(yè)，針對(duì)如此多的功能光靠千篇一律的手形鼠標(biāo)是不能說(shuō)明問(wèn)題的。值得慶幸的是，CSS提供了多達(dá)13種的鼠標(biāo)形狀，供我們選擇。基本格式如下： cursor：鼠標(biāo)形狀參數(shù) CSS鼠標(biāo)形狀參數(shù)表： CSS代碼鼠標(biāo)形狀手形十字形文本形沙漏形十字箭頭形問(wèn)號(hào)形右箭頭形上箭頭形左上箭頭形左箭頭形下箭頭形右下箭頭形左下箭頭形本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS3實(shí)現(xiàn)對(duì)話(huà)氣泡效果

下一篇：CSS濾鏡-alpha屬性