css樣式表詳解ppt課件(參考版)
2025-05-08 12:06本頁面
【正文】 下面通過實(shí)例介紹外部 CSS樣式表的創(chuàng)建及應(yīng)用的方法。具體實(shí)現(xiàn)方法是，先建立一個(gè)外部 CSS樣式表文件，在這個(gè)文件中定義文字、段落、表格、超級(jí)鏈接等網(wǎng)頁元素的樣式。這樣很麻煩，效率也很低。如果用戶想定義只在自己站點(diǎn)的一個(gè)頁面中使用的樣式，就可以使用內(nèi)部樣式。在需要同時(shí)控制多個(gè)文檔的外觀以便在多個(gè)頁面上實(shí)現(xiàn)統(tǒng)一的格式時(shí)，可以使用外部樣式表，這是保存在網(wǎng)頁文檔外部的樣式表，它被鏈接到當(dāng)前頁面。“過濾器”下拉列表中包括一些具體的選項(xiàng)，這些效果應(yīng)用到網(wǎng)頁中元素上后，可以得到一種類似于 Photoshop的濾鏡效果。“光標(biāo)”下拉列表中包括一些具體的選項(xiàng)，選擇后可以改變鼠標(biāo)指針的視覺效果。下拉列表中包括 4個(gè)選項(xiàng)：自動(dòng)、總是、左對(duì)齊和右對(duì)齊。如圖 418所示。如果指定了剪輯區(qū)域，可以通過腳本語言（如 JavaScript）訪問它，并使用“改變屬性”行為可以設(shè)置擦除效果。例如， 3mm 。還可以指定以下單位： pc（皮卡）、pt（點(diǎn)）、 in（英寸）、 mm（毫米）、 cm（厘米）、 em（全方）、（ ex）或 %（父級(jí)值的百分比）。如果內(nèi)容塊的內(nèi)容超出指定的大小，則將改寫大小值。 定位 返回本節(jié) 5．定位 指定內(nèi)容塊的位置和大小，包括上、下、左、右 4個(gè)選項(xiàng)。明確提供滾動(dòng)條可避免滾動(dòng)條在動(dòng)態(tài)環(huán)境中出現(xiàn)和消失所引起的混亂。不提供任何滾動(dòng)條。容器將向右下方擴(kuò)展?！耙绯觥毕吕斜碇邪?4個(gè)選項(xiàng)。值可以為正，也可以為負(fù)。 3． Z 軸 確定內(nèi)容的堆疊順序。 可見：將顯示內(nèi)容，而與父級(jí)的值無關(guān)?！帮@示”下拉列表中包括 3個(gè)選項(xiàng)。如果不指定“顯示”屬性，則默認(rèn)情況下內(nèi)容將繼承父級(jí)標(biāo)簽的值。 定位 返回本節(jié) 2．顯示 確定內(nèi)容的初始顯示條件。 靜態(tài)：將內(nèi)容放在其在文本流中的位置。 固定：使用“定位”文本框中輸入的坐標(biāo)（相對(duì)于瀏覽器的左上角）來放置內(nèi)容。例如，若為元素指定一個(gè)相對(duì)位置，并且其上坐標(biāo)和左坐標(biāo)均為 20px，則將元素從其在文本流中的正常位置向右和向下移動(dòng) 20px。 絕對(duì)：使用“定位”文本框中輸入的、相對(duì)于最近的絕對(duì)或相對(duì)定位上級(jí)元素的坐標(biāo)（如果不存在絕對(duì)或相對(duì)定位的上級(jí)元素，則為相對(duì)于頁面左上角的坐標(biāo)）來放置內(nèi)容。相對(duì)應(yīng)的 CSS屬性是 position?？梢园讯x看作為一個(gè) CSS定義的 AP元素。如圖 617所示。 外：列表項(xiàng)目標(biāo)記放置在文本以外。下拉列表中包括兩個(gè)選項(xiàng)。 3．位置 設(shè)置列表項(xiàng)在文本內(nèi)還是在文本外。可以在文本框中直接輸入圖像 URL地址或路徑。 列表 返回本節(jié) 2．項(xiàng)目符號(hào)圖像 設(shè)置列表項(xiàng)的圖像?？梢栽O(shè)置的樣式有： disc（實(shí)心圓）、 circle（空心圓）、 square（方塊）、 decimal（阿拉伯?dāng)?shù)字）、 lowerroman（小寫羅馬數(shù)字）、 upperroman（大寫羅馬數(shù)字）、 loweralpha（小寫英文字母）、upperalpha（大寫英文字母）、 none（無項(xiàng)目符號(hào)）。如圖 416所示。 如果勾選“全部相同”復(fù)選框，為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊框顏色屬性。相對(duì)應(yīng)的 CSS屬性分別是 bordertopcolor、 borderrightcolor、 borderbottomcolor、 borderleftcolor。 3．顏色 設(shè)置邊框的顏色。相對(duì)應(yīng)的 CSS屬性分別是 bordertop、 borderright、 borderbottom、 borderleft。 邊框 返回本節(jié) 2．寬度 設(shè)置元素邊的寬度。 專家點(diǎn)撥： dotted（點(diǎn)劃線）、dashed（虛線）必須要 MAC平臺(tái)支持，否則效果為實(shí)線?？梢栽O(shè)置為 none（無邊框）、 dotted（點(diǎn)劃線）、 dashed（虛線）、 solid（實(shí)線）、 double（雙線）、groove（槽狀）、 ridge（脊?fàn)睿?inset（凹陷）、 outset（凸出）等邊框樣式。如圖 615所示。 如果勾選“全部相同”復(fù)選框，則為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的邊界屬性?？梢苑謩e設(shè)置 top（上邊界）、 right（右邊界）、bottom（下邊界）、 left（左邊界）的值。 如果勾選“全部相同”復(fù)選框，則為應(yīng)用此屬性的元素的“上”、“右”、“下”和“左”設(shè)置相同的填充屬性?？梢苑謩e設(shè)置 top（上補(bǔ)白）、 right（右補(bǔ)白）、 bottom（下補(bǔ)白）、 left（左補(bǔ)白）的值。相對(duì)應(yīng)的 CSS屬性是 clear。 方框 返回本節(jié) 4．清除 定義不允許 AP元素的邊。下拉列表中包括左對(duì)齊、右對(duì)齊和無。 選擇“值”這個(gè)選項(xiàng)后，可以在文本框中輸入具體的數(shù)值，并且再后面的下
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1