歡迎來到漳州若夢網絡科技有限公司

新聞動态News information

您的位置:首頁>新聞動态

新聞動态

News information
使用CSS樣式面闆創建自定義樣式
發表于2018/2/5

1.打開(kāi)CSS樣式面闆

在菜單欄中(zhōng)選擇“Window"→“CSS Styles"命令(或單擊微型啓動面闆上的圖标),打開(kāi)css樣式面闆,如圖所示。 


2.使用CSS樣式面闆創建樣式

單擊圖标(或單擊菜單按鈕上,從彈出的菜單中(zhōng)選擇"New Style"命令),打開(kāi)"New Style (新建樣式)”對話(huà)框,如圖所示。 

創建自定義樣式

爲圖10.1所示的網頁文件 的正文設置用戶自定義的CSS樣式 my-css-1,該樣式可以在整個HTML中(zhōng)被調用,操作步驟如下(xià):
(1) 将新樣式命名爲my-css-1

在圖10.3所示"New Style" 對話(huà)框中(zhōng)的“Name”選項中(zhōng)輸入樣式名稱.my-css-1”。在"Define"選項組中(zhōng)選擇 "This Document Only" 單選項,單擊"OK"按鈕。
 
(2) 定義"Type(文字)"面闆

在彈出的"Style Definition(樣式定義)”對話(huà)框的"Category" 列表框中(zhōng),選擇"-Type"項,出現"Type"設置面闆,設置my-css-1樣式的各種屬性,如圖10.4所示。 


"Type (文字)"面闆各選項的含義如下(xià):
(1)Font(字體(tǐ)):爲樣式設置字體(tǐ)。

②Size(字号):設置字體(tǐ)大(dà)小(xiǎo)。可以通過選擇數字和單位來指定字體(tǐ)大(dà)小(xiǎo),也可以選擇相對的字體(tǐ)大(dà)小(xiǎo)。字體(tǐ)大(dà)小(xiǎo)的單位有pixels(像素)、points(磅)、in(英寸)、cm(厘米)、%(百分(fēn)比)等。
 
③Style(樣式):指定字體(tǐ)樣式,有normal(普通)、italic(斜體(tǐ))和oblique(傾斜)三種,後兩種無明顯區别。
 
④Line(行高):設置文本的行間距。當選擇 Value時,可以輸入精确的數值,并選擇适當的單位。
 
⑤Weight(加粗):設置文本加粗的程度。默認爲oral(普通),加粗程度爲400,Bold(粗體(tǐ))爲700。

⑥Variant(字體(tǐ)變形):設置字體(tǐ)的變形,如小(xiǎo)型大(dà)寫字體(tǐ)。但并非所有字體(tǐ)都有變形。(中(zhōng)文字體(tǐ)沒用)。

⑦Case(大(dà)小(xiǎo)寫):設置文本的大(dà)小(xiǎo)寫G适用于英文字體(tǐ))。分(fēn)别有:capitalize(首字母大(dà)寫)uppercase(全部大(dà)寫)、lowercase(全部小(xiǎo)寫)
 
⑧Color(顔色):設置文本的顔色

⑨Decoration(文本裝飾):設置文本的修飾效果。分(fēn)别有:under line(下(xià)劃線)、overline(J頂劃線)、line through(删除線)、blink(閃爍爍)和none(無修飾)五種。
 
(3) 定義Block(文本塊)面闆

在圖10.4所示對話(huà)框的"Category"列表框中(zhōng),選擇"Block" 項,出現"Block"設置面闆,設置mycss_1樣式的屬性,如圖10.5所示,單擊“OK" 按鈕。在如圖10.2所示的CSS樣式面闆上将出現新定義的樣式my-css_1. 


Block(文本塊)面闆各選項的含義如下(xià):

① Word Spacing(單詞間距):設置單詞之間的距離(lí)(僅限于英文)。

② Letter Spacing(字符間距):設置字母之間的距離(lí)。中(zhōng)文字間距用此設置

③ Vertical Alignment(垂直對齊):設置文本的縱向對齊方式。可設置文本與 圖像之間的對齊方式 baseline:圖像的底端與 當前行文本對齊,middle:圖像的中(zhōng)位線與當前行文本對齊,text-top:圖像的頂端與當前行文本對齊。還可設置字符的上、下(xià)标文字,sub:下(xià)标,super: 上标。如數學表達式X2+Y=Z中(zhōng)的2必須設置成文字上标的格式,此時可通過選擇"Super"項設置。

④ Text Align(文本對齊):設置文本對齊方式,包括left(左對齊),right(右對齊),center(居中(zhōng)對齊)、justify(自動調整)。

⑤ Text Indent(文本縮進):設置文本首行縮進的距離(lí)。正值創建縮進,負值創建凸出,雖然此屬性不帶星号"*”,但有時也不在文檔窗口顯示,其顯示取決于浏覽器。當屬性設置爲2ems時,首行正好縮進兩個漢字。
 
注意

"erts',是一(yī)個很有用的單位,其中(zhōng)em表示一(yī)個字符單位,所以2ems 表示兩個字符單位。這對于中(zhōng)文文字的處理特别有用,因爲中(zhōng)文的正文首行通常縮進兩個字符,如果以"ems'爲單位,網站建設就不必擔心因改變了字體(tǐ)、字号等造成格式上的混亂。 

QQ在線客服
電(diàn)話(huà)咨詢
0596-2916087