使用CSS樣式面板創(chuàng)建自定義樣式

1.打開CSS樣式面板
在菜單欄中選擇“Window"→“CSSStyles"命令(或單擊微型啟動(dòng)面板上的圖標(biāo))，打開css樣式面板，如圖所示。

2.使用CSS樣式面板創(chuàng)建樣式
單擊圖標(biāo)(或單擊菜單按鈕上，從彈出的菜單中選擇"NewStyle"命令)，打開"NewStyle(新建樣式)”對(duì)話框，如圖所示。

創(chuàng)建自定義樣式
為圖10.1所示的網(wǎng)頁(yè)文件 的正文設(shè)置用戶自定義的ＣＳＳ樣式 my-css-1，該樣式可以在整個(gè)HTML中被調(diào)用，操作步驟如下:
(1)將新樣式命名為my-css-1
在圖10.3所示"NewStyle"對(duì)話框中的“Name”選項(xiàng)中輸入樣式名稱.my-css-1”。在"Define"選項(xiàng)組中選擇"ThisDocumentOnly"單選項(xiàng)，單擊"OK"按鈕。
(2)定義"Type(文字)"面板
在彈出的"StyleDefinition(樣式定義)”對(duì)話框的"Category"列表框中，選擇"-Type"項(xiàng)，出現(xiàn)"Type"設(shè)置面板，設(shè)置my-css-1樣式的各種屬性，如圖10.4所示。

"Type(文字)"面板各選項(xiàng)的含義如下:
(1)Font(字體):為樣式設(shè)置字體。
②Size(字號(hào)):設(shè)置字體大小?？梢酝ㄟ^(guò)選擇數(shù)字和單位來(lái)指定字體大小，也可以選擇相對(duì)的字體大小。字體大小的單位有pixels(像素)、points(磅)、in(英寸)、cm(厘米)、%(百分比)等。
③Style(樣式):指定字體樣式，有normal(普通)、italic(斜體)和oblique(傾斜)三種，后兩種無(wú)明顯區(qū)別。
④Line(行高):設(shè)置文本的行間距。當(dāng)選擇Value時(shí)，可以輸入精確的數(shù)值，并選擇適當(dāng)?shù)膯挝弧?br/>⑤Weight(加粗):設(shè)置文本加粗的程度。默認(rèn)為oral(普通)，加粗程度為400，Bold(粗體)為700。
⑥Variant(字體變形):設(shè)置字體的變形，如小型大寫字體。但并非所有字體都有變形。(中文字體沒(méi)用)。
⑦Case(大小寫):設(shè)置文本的大小寫G適用于英文字體)。分別有:capitalize(首字母大寫)uppercase(全部大寫)、lowercase(全部小寫)
⑧Color(顏色):設(shè)置文本的顏色
⑨Decoration(文本裝飾):設(shè)置文本的修飾效果。分別有:underline(下劃線)、overline(J頂劃線)、linethrough(刪除線)、blink(閃爍爍)和none(無(wú)修飾)五種。
(3) 定義Block(文本塊)面板
在圖10.4所示對(duì)話框的"Category"列表框中，選擇"Block"項(xiàng)，出現(xiàn)"Block"設(shè)置面板，設(shè)置mycss_1樣式的屬性，如圖10.5所示，單擊“OK"按鈕。在如圖10.2所示的CSS樣式面板上將出現(xiàn)新定義的樣式my-css_1.

Block(文本塊)面板各選項(xiàng)的含義如下:
①WordSpacing(單詞間距):設(shè)置單詞之間的距離(僅限于英文)。
②LetterSpacing(字符間距):設(shè)置字母之間的距離。中文字間距用此設(shè)置
③VerticalAlignment(垂直對(duì)齊):設(shè)置文本的縱向?qū)R方式?？稍O(shè)置文本與圖像之間的對(duì)齊方式baseline:圖像的底端與當(dāng)前行文本對(duì)齊，middle:圖像的中位線與當(dāng)前行文本對(duì)齊，text-top:圖像的頂端與當(dāng)前行文本對(duì)齊。還可設(shè)置字符的上、下標(biāo)文字，sub:下標(biāo)，super:上標(biāo)。如數(shù)學(xué)表達(dá)式X²+Y=Z中的2必須設(shè)置成文字上標(biāo)的格式，此時(shí)可通過(guò)選擇"Super"項(xiàng)設(shè)置。
④TextAlign(文本對(duì)齊):設(shè)置文本對(duì)齊方式，包括left(左對(duì)齊)，right(右對(duì)齊)，center(居中對(duì)齊)、justify(自動(dòng)調(diào)整)。
⑤TextIndent(文本縮進(jìn)):設(shè)置文本首行縮進(jìn)的距離。正值創(chuàng)建縮進(jìn)，負(fù)值創(chuàng)建凸出，雖然此屬性不帶星號(hào)"*”，但有時(shí)也不在文檔窗口顯示，其顯示取決于瀏覽器。當(dāng)屬性設(shè)置為2ems時(shí)，首行正好縮進(jìn)兩個(gè)漢字。
注意
"erts'，是一個(gè)很有用的單位，其中em表示一個(gè)字符單位，所以2ems表示兩個(gè)字符單位。這對(duì)于中文文字的處理特別有用，因?yàn)橹形牡恼氖仔型ǔ？s進(jìn)兩個(gè)字符，如果以"ems'為單位，網(wǎng)站建設(shè)就不必?fù)?dān)心因改變了字體、字號(hào)等造成格式上的混亂。

當(dāng)前題目：使用CSS樣式面板創(chuàng)建自定義樣式
瀏覽地址：http://www.muchs.cn/news31/134181.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、服務(wù)器托管、網(wǎng)站策劃、靜態(tài)網(wǎng)站、ChatGPT、全網(wǎng)營(yíng)銷推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)