| 網(wǎng)站建設(shè)是指使用標(biāo)識(shí)語言（markup language)，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡(jiǎn)單來說，網(wǎng)頁設(shè)計(jì)的目的就是產(chǎn)生網(wǎng)站。簡(jiǎn)單的信息如文字，圖片（GIF，JPEG，PNG）和表格，都可以通過使超文件標(biāo)示語言、可擴(kuò)展超文本標(biāo)記語言等標(biāo)示語言放置到網(wǎng)站頁面上。 您可以利用下列 3 種方式，將 CSS 指定的格調(diào)加諸于網(wǎng)頁上： 1. 在 HTML 檔案里加一個(gè)超連結(jié)，連到外在的 CSS 檔 這個(gè)方法最方便管理整個(gè)網(wǎng)站的網(wǎng)頁風(fēng)貌。它讓網(wǎng)頁的文字內(nèi)容與版面設(shè)計(jì)分開。您只要在一個(gè) CSS 檔內(nèi)（副檔名為 .CSS）定義好網(wǎng)頁的外觀風(fēng)格，所有參考連結(jié)到此 CSS 檔的網(wǎng)頁，便會(huì)依照指示，反應(yīng)出定義好的風(fēng)格。 它的寫法是： 2. 在 HTML 檔案的 ....... 標(biāo)簽間，加一段 CSS 的敘述文 這個(gè)方法適用于指定某個(gè)網(wǎng)頁，除了展現(xiàn)外在的 CSS 檔定義好的網(wǎng)頁風(fēng)格外，同時(shí)還要展現(xiàn)本身 HTML 檔內(nèi)加注的 CSS 。 如果內(nèi)在加注的 CSS 敘述與外在連結(jié)的 CSS 敘述相沖突的話，網(wǎng)頁的展現(xiàn)將以內(nèi)在加注的 CSS 敘述為主。 它的寫法是： 特別值得注意的是，為了防止不支援 CSS 的瀏覽器誤將 標(biāo)簽間的 CSS 風(fēng)格敘述當(dāng)成普通字串，而展現(xiàn)于網(wǎng)頁上，您最好將 CSS 的敘述文字插入 標(biāo)簽之間。 3. 在 HTML 檔的字里行間中，隨時(shí)有需要，隨時(shí)加一小段 CSS 的敘述指定 這個(gè)方法適用于指定網(wǎng)頁內(nèi)的某一小段文字的呈現(xiàn)風(fēng)格。 導(dǎo)覽器除了會(huì)展現(xiàn)出外在的 CSS 檔與此 HTML 檔 內(nèi)定義的 CSS 風(fēng)格（如果有的話），同時(shí)還會(huì)展現(xiàn)字里行間的 CSS 風(fēng)格。 如果字里行間的 CSS 敘述與 內(nèi)在定義的 CSS 或外在連結(jié)的 CSS 敘述相沖突的話，導(dǎo)覽器的展現(xiàn)將以字里行間的 CSS 敘述為主。 它的寫法是： 上述的 3 種 CSS，可以同時(shí)并用，也可以擇您所好，單一或成雙地使用。如果各 CSS 間的敘述相沖突，則內(nèi)在定義的 CSS 會(huì)蓋過外在連結(jié)的 CSS ，字里行間的 CSS 會(huì)蓋過 內(nèi)在定義的 CSS 。 這樣一層一層地推展、補(bǔ)充下來，使得「階層性格調(diào)控制」清楚又有效率地幫助網(wǎng)頁設(shè)計(jì)者，一方面中央統(tǒng)籌整個(gè)網(wǎng)站的網(wǎng)頁風(fēng)貌，另一方面又可以隨著各個(gè)網(wǎng)頁、各個(gè)文字段落的特別需要，而分別調(diào)配不同的格調(diào)。十分有條不紊，十分方便管理，所以稱之為「階層性」的格調(diào)控制。 CSS 語言的基本語法 CSS 的語言與網(wǎng)頁排版語言 HTML，在內(nèi)容上有一點(diǎn)點(diǎn)類似重覆，但是語法卻大不相同。它的基本語法是： H1 {font-size: 16pt; 上例中，H1表示您想要界定的標(biāo)簽元件為 H1，font-size、font-weight、color 這些擴(kuò)充屬性則表示您想指定 H1 應(yīng)該長(zhǎng)成什么模樣。在上例中，我界定我的 H1 應(yīng)該展現(xiàn)出字體大小 16 點(diǎn)，特粗黑體，紅色的模樣。 簡(jiǎn)化之 上例中，H1、H2、H3 界定的標(biāo)簽元件均長(zhǎng)得一模一樣，因此我們可以將它們簡(jiǎn)化寫成： H1, H2, H3 {font-size: 16pt; 而如果您想要讓您的 H1, H2, H3 各自擁有各自不同的風(fēng)格，那么您必須一筆一筆地條列說明清楚： H1 {font-size: 16pt; 另一種簡(jiǎn)化方法 特別值得注意的是，在上例中，H3 的字體使用 "New York" 字體， "New York" 是兩個(gè)字，所以必須將它 "括號(hào)" 起來。而 H1, H2, H3 的顏色規(guī)定，并不能一道并入 font 大項(xiàng)中，而必須另外標(biāo)清楚。 順便一提的是，CSS 與 HTML 一樣，都有「注解」的符號(hào)。HTML 使用 做「注解」；而 CSS 使用 /* 這里是注解 */。 CSS 中 Font 的擴(kuò)充屬性 2. 本系列文章只說明介紹 Navigator4 與 IE3、IE4 瀏覽器 共同支援的 CSS1 擴(kuò)充屬性。至于 W3C 詳細(xì)規(guī)定的完整 CSS1 文件，或者 網(wǎng)景 、 微軟各自支援的 CSS 擴(kuò)充屬性，請(qǐng)到其網(wǎng)站的 Style Sheet 部門觀看。 3. CSS 的寫法使用大寫或小寫均可。 此屬性用來指定字體的形體。畫底線的部分可以用各式各樣的字體來替換之。您可以同時(shí)指定好多種字體，以防 user 端沒有第一種字體時(shí)，可以繼續(xù)依照您的指示，選用第二、第三種字體。 參考范例： P {font-family: Times,"New York"} 特別值得注意的是，在上例中，字體 "New York" 、 "中黑體" 因?yàn)槭莾蓚�(gè)字(以上)，所以必須將它們 "括號(hào)" 起來。此外，第三例中的 monospace 是用來指定寫程序碼時(shí)使用的等距字體。 {font-weight: bold} 此屬性用來指定字體的粗細(xì)。畫底線的部分可以使用下列 2 組表示法來替換之： * normal, bold, bolder, lighter 此屬性的內(nèi)定值為 normal。 參考范例： H1 {font-weight: bolder} {font-size: medium} 此屬性用來指定字體的大小。畫底線的部分可以使用下列 4 組表示法來替換之： * 絕對(duì) size: xx-small, x-small, small,medium, large, x-large, xx-large * 相對(duì) size: larger, smaller（與母標(biāo)簽相對(duì)比） * 字體的點(diǎn)數(shù) (point): 12pt,16pt, 20pt.... * 百分比: 80%, 120% .... （與母標(biāo)簽相對(duì)比） 此屬性的內(nèi)定值為 medium。 參考范例： BODY {font-size: medium} {font-style: normal} 此屬性用來指定字體的正體或斜體。畫底線的部分可以使用 normal, italic, oblique (僅 IE4 支援 oblique） 來替換之。 此屬性的內(nèi)定值為 normal。 參考范例： H4 {font-style: italic} {font: 12pt/14pt} 此屬性用來指定字體的大小與每行行距的高度。上例中，12pt 指的是字體的大小，14pt 指的是行距的高度。 事實(shí)上，{font: … } 可以集結(jié)所有跟 font 有關(guān)的擴(kuò)充屬性在此標(biāo)簽內(nèi)，所以您除了在 {font: … } 內(nèi)指定字體大小與行 距高度外，還可以在此標(biāo)簽內(nèi)加入所有上述介紹過的屬性。 參考范例： P {font: italic bold 12pt/14pt} CSS 中 Color 的擴(kuò)充屬性 此屬性用來指定字體的顏色。畫底線的部分可以用各式各樣的顏色來替換之。您可以使用16 進(jìn)位顏色碼表示（如：#00ff77）或利用瀏覽器既定的英文單字表示顏色（如：gray, blue..... 詳細(xì)請(qǐng)見： Table 的擴(kuò)充屬性 ）。 如果您指定的顏色如同 #00ff77 一般，是兩位數(shù)字、兩位數(shù)字重覆組成的話 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7簡(jiǎn)化表示之。 參考范例： BLOCKQUOTE {color: navy} {background-color: red} 此屬性用來指定整個(gè)網(wǎng)頁的背景顏色，或某一段落，某一區(qū)塊的背景顏色。畫底線的部分可以用各式各樣的顏色來替換之。您可以使用16 進(jìn)位顏色碼表示（如：#00ff77）或利用瀏覽器既定的英文單字表示顏色（如：gray, blue..... 詳細(xì)請(qǐng)見： Table 的擴(kuò)充屬性 ）。 如果您指定的顏色如同 #00ff77 一般，是兩位數(shù)字、兩位數(shù)字重覆組成的話 (00, ff,77 而非 03, 8f,7e ) ，您可以直接使用 #0f7簡(jiǎn)化表示之。 參考范例： BODY {background-color: #ed4} {background-image: url (/images/xyz.gif)} 此屬性用來指定網(wǎng)頁或某一區(qū)塊的背景圖案。畫底線的部分可以使用圖檔的絕對(duì)位置或相對(duì)位置來表示之。 使用此標(biāo)簽時(shí)，最好同時(shí)也指定一個(gè)類似的顏色做背景顏色。 參考范例： BODY { 此標(biāo)簽可以集結(jié)所有跟 background 有關(guān)的擴(kuò)充屬性在此一標(biāo)簽內(nèi)，所以您可以將所有上述介紹過的 background 屬性一起加進(jìn)來。 參考范例： BODY {background: white url (/images/2T_logo.gif) repeat-y} 此屬性用來指定文字是否畫有底線或被線條杠掉（如：被線條杠掉此例）。畫底線的部分可以用 none, underline, line-through 來替換之。 此屬性的內(nèi)定值為 none。 參考范例： P { 此屬性用來指定文字是向左、向中、或向右對(duì)齊。畫底線的部分可以用 left, right, center, justify 來替換之。 參考范例： P {text-align: left} {text-indent: 2cm} 此屬性用來指定文字向右凹進(jìn)去多少公分、厘米、英寸、點(diǎn)數(shù)(point)、圖素(pixel)、或多少 % 。測(cè)量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標(biāo)簽來相對(duì)比。 參考范例： P {text-indent: 3cm} {line-height: 14pt} 此屬性用來指定每行行距的高度。line-height 常與字體大小 font-size 一起并用，寫成 12pt/14pt (12pt 指的是字體的大小，14pt 指的是行距的高度)。line-height也可以用 % 表示之。 % 是以母標(biāo)簽來相對(duì)比。 參考范例： BODY { H4 {font: 16pt/20pt bold italic} 此屬性用來指定網(wǎng)頁的上下左右邊緣，各需留白多少公分、厘米、英寸、點(diǎn)數(shù)(point)、圖素(pixel)、或多少 % 。測(cè)量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標(biāo)簽來相對(duì)比。 margin 可以用 margin-top, margin-bottom, margin-left, margin-right來替換之。 此屬性的內(nèi)定值為 0。 參考范例： BODY { {padding: 14px} 此屬性用來指定各段落或各區(qū)塊間，上下左右邊緣各需留白多少公分、厘米、英寸、點(diǎn)數(shù)(point)、圖素(pixel)、或多少 % 。測(cè)量單位可以用 cm, mm, in, pt, px, %來表示之。 % 是以母標(biāo)簽來相對(duì)比。 padding 可以用 padding-top, padding-bottom, padding-left, padding-right來替換之。 此屬性的內(nèi)定值為 0。IE3 不支援所有與 padding 相關(guān)的標(biāo)簽。 參考范例： BODY {margin: 15pt} 大多數(shù)人在上網(wǎng)的時(shí)候，都會(huì)瀏覽網(wǎng)頁提供給我們的信息。 |
溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！
本站發(fā)布的Win7純凈版系統(tǒng)、Win10純凈版和XP純凈版系統(tǒng)僅為個(gè)人學(xué)習(xí)測(cè)試使用，請(qǐng)?jiān)谙螺d后24小時(shí)內(nèi)刪除，不得用于任何商業(yè)用途，否則后果自負(fù)，請(qǐng)支持購買微軟正版軟件！
本站所有資源全部來自于網(wǎng)絡(luò)資源,如侵犯到您的權(quán)益,請(qǐng)及時(shí)通知我們(),我們會(huì)及時(shí)處理.
Copyright © 2018-2020 蘿卜系統(tǒng)下載站 手機(jī)站 關(guān)于本站
