VB.net 2010 視頻教程 VB.net 2010 視頻教程 VB.net 2010 視頻教程
SQL Server 2008 視頻教程 c#入門經典教程 Visual Basic從門到精通視頻教程
當前位置:
魔兽世界wow > 網站開發 > css >
  • div+css視頻教程之CSS樣式面板

  • 2015-08-03 20:43 來源:未知

CSS樣式面板

【CSS樣式定義】對話框中共有8個子面板,在這8個子面板中,有些內容并不常用,有些內容會在后面的章節用到。這里將介紹一些常用的設置并通過簡單的實例讓讀者了解實際制作中樣式的應用。

1.類型設置

【類型】子面板如圖6-4所示,雖然軟件將這個子面板翻譯成類型,但從各個設置項目看,都是關于文字的。

圖6-4  樣式定義【類型】子面板
類型子面板中的各項參數含義如下:
l 【字體】:可以在下拉菜單中選擇相應的字體。如果系統安裝了某種字體,但在下拉菜單中找不到,可以選擇菜單上的“編輯字體列表”添加字體。具體方法請參考第3章的第一節。
l 【大小】:實際就是字號??梢災苯猶钚詞?,然后選擇單位。有很多單位供選擇。“點數”是計算機字體的標準單位,這個單位的好處是設置的字號會隨著顯示器分辨率的變化而自動調整大小,可以防止不同分辨率顯示器中字體大小的不一致?;褂釁淥牡ノ?,如像素、英寸、厘米、毫米等。目前網頁上最流行的字體大小是12像素(px)。
l 【樣式】:設置文字的外觀,包括正常、斜體、偏斜體。
l 【行高】:這項設置在實際制作中很常用。設置行高,可以選擇“正常”,讓計算機自動調整行高。也可以使用數值和單位結合的形式。需要注意的是,單位應該和文字的單位一致。行高的數值是包括字號數值在內的。例如,文字設置為12px高,如果要創建一倍行距,則行高應該為24px。
l 【修飾】:幾個復選項目介紹如下:
【下劃線】:為文字添加下劃線;
【上劃線】:為文字添加上劃線;
【刪除線】:為文字添加刪除線;
【閃爍】:為文字添加閃爍效果,只有在Netscape瀏覽器下能顯示出這一效果;
【無】:沒有任何修飾。如果想去掉鏈接默認的下劃線,就選擇此項。
l 【粗細】:可以選擇相對粗細,也可以選擇具體的數值。在實際中不常用。
l 【變量】:在英文中,大寫字母的字號一般比較大,采用下拉選項中的【小型大寫字母】設置,可以縮小大寫字母。
l 【大小寫】:下拉選項中的【首字母大寫】可以將每句話的第一個字母大寫,【大寫】或【小寫】可以將全部字母變化為大寫或小寫。IE瀏覽器不支持這一效果。
l 【顏色】:設置文字的顏色。

2.背景設置

在HTML語言中,背景只能使用單一的色彩或利用圖像水平垂直方向平鋪。使用CSS之后,可以進行更加靈活的設置,如圖6-5所示。
       
     圖6-5  有無“背景”樣式對照圖
【背景】子面板,如圖6-6所示,它是對頁面背景進行設置,其中的參數含義如下:

圖6-6  樣式定義【背景】子面板
l 【背景顏色】:選擇固定顏色作為背景。
l 【背景圖像】:直接填寫背景圖像的文件路徑,或者單擊【瀏覽】按鈕選擇背景圖像文件。
l 【重復】:在使用圖像作為背景時,可以使用此項設置背景圖像的重復方式。包括【不重復】、【重復】、【橫向重復】、【縱向重復】。
l 【附件】:可以設置圖像是否跟隨網頁一起滾動。下拉列表中的選項包括【滾動】與【固定】。Netscape瀏覽器不支持固定的背景圖片。
l 【水平位置】:設置圖像在水平方向上的位置??梢允恰咀蠖云搿?、【右對齊】、【居中】,還可以使用數值與單位結合標示位置的方式,這時比較常用的單位是像素。
l 【垂直位置】:設定圖像在垂直方向上的位置,可以選擇【頂部】、【底部】、【居中】。同水平位置相同,也可以設置數值與單位結合標示位置的方式。

3.區塊設置

【區塊】面板,主要是對文字整體的設置。圖6-7所示的是在文本上添加樣式前后的對照圖。
        
圖6-7  添加區塊樣式設置前后對照圖
選擇分類中的【區塊】選項切換到如圖6-8所示的【區塊】子面板,該面板的各參數含義如下:

圖6-8  樣式定義【區塊】子面板
子面板各項參數的含義如下:
l 【單詞間距】:設置英文單詞之間的間距??梢允褂媚系納柚謾菊!?,也可以使用數值和單位結合的形式。使用正值為增加單詞間距,使用負值為減小單詞間距。
l 【字母間距】:設置英文字母間距。使用正值為增加字母間距,使用負值為減小字母間距。
l 【垂直對齊】:設置對象垂直對齊方式,包括:【基線】、【下標】、【上標】、【頂部】、【文本底對齊】、【中線對齊】、【底部】、【文本底對齊】、【自定義】的數值和單位結合形式。
l 【文本對齊】:設置文本的水平對齊方式,包括【左對齊】、【右對齊】、【居中】、【兩端對齊】。
l 【文字縮進】:這是文字整體屬性面板上最重要的選項,中文文字的首行縮進就是由它來實現。首先填入具體的數值,然后選擇單位。文字縮進和字號設置要保持統一。如字號為9pt,想創建兩個中文的縮進效果,文字縮進就應該為18pt。
l 【空格】:對源代碼文字空格的控制。選擇【正?!亢雎栽創脛淶乃鋅嶄?。選擇【保留】將保留源代碼中所有的空格形式,包括有空格鍵、<Tab>鍵、<Enter>鍵創建的空格。如果寫了一首詩,使用普通的方法很難保留詩的結構,這時可以使用【保留】,保留所有的空格形式。
l 【顯示】:設置是否及如何顯示元素。常用的選項有:
【無】:關閉元素的顯示。
【內嵌】:元素會被顯示為內聯元素,元素前后沒有換行符。
【塊】:元素將顯示為塊級元素,此元素前后會帶有換行符。

4.方框設置

在前面講到圖像的設置時,應用到的一些內容,如設置圖像的大小,設置圖像水平和垂直方向上的空白區域,設置圖像是否有文字環繞等。利用【方框】設置能進一步完善、豐富這些設置。
選擇分類中的【方框】選項切換到如圖6-9所示的【方框】子面板,該面板的各參數含義如下:

圖6-9  樣式定義【方框】子面板
l 【寬】:使用數值和單位設置對象的寬度。
l 【高】:使用數值和單位設置對象的高度。
l 【浮動】:實際就是對象的環繞效果。選擇【右對齊】,對象居右,其他內容從另一側環繞對象;選擇【左對齊】,對象居左;【無】取消環繞效果。IE和Netscape瀏覽器都支持浮動效果
l 【清除】:規定對象的一側不許有其他對象??梢匝≡瘛咀蠖云搿炕頡居葉云搿?,選擇不允許出現其他對象的一側?!玖秸摺渴侵缸笥葉疾輝市沓魷制淥韻??!疚蕖渴遣幌拗破淥韻蟮某魷?。IE和Netscape瀏覽器都支持【清除】設置。
l 【填充】和【邊界】:如果對象設置了邊框,【填充】指的是邊框和其中內容之間的空白區域?!頸囈紜恐傅氖潛嚦蟯獠嗟目瞻濁???梢栽諳旅娑雜ι?、下、左右各項中設置具體的數值和單位。

5.邊框設置

使用邊框設置可以給對象添加邊框,設置邊框的顏色、粗細、樣式。圖6-10所示的是在表格上添加樣式前后的對照圖。
    
圖6-10  添加【邊框】樣式設置前后對照圖
在分類中單擊【邊框】選項,切換到【邊框】子面板,如圖6-11所示,其中各參數含義如下:

圖6-11  樣式定義【邊框】子面板
l 【樣式】:設置邊框的樣式,包括【無】、【虛線】、【點劃線】、【實線】、【雙線】、【槽狀】、【脊狀】、【凹陷】、【突出】。如果選擇【全部相同】復選框,則只需要設置【上】的樣式,其他方向樣式與【上】的相同。
l 【寬度】:設置4個方向邊框的寬度??梢匝≡襝嘍災擔骸鞠浮?、【粗】、【中】。也可以設置邊框的寬度值和單位。
l 【顏色】:設置對應邊框的顏色。
6.列表設置
CSS中有關列表的設置豐富了列表的外觀。在介紹CSS樣式之前我們對項目的符號設置是通過【屬性】面板,從中只能選擇有限的、簡單的符號,如圖6-12(a)所示。使用CSS之后,可以使用任意的圖像文件作為項目符號,如圖6-12(b)所示。
         
(a)                                                                                       (b)
圖6-12  添加【列表】樣式設置前后對照圖
【列表】子面板如圖6-13所示,各項參數意義如下:

圖6-13  樣式定義【列表】子面板
l 【類型】:設置列表項目的符號類型??梢匝≡瘛駒駁恪?、【圓圈】、【方塊】、【數字】、【小寫羅馬數字】、【大寫羅馬數字】、【小寫字母】、【大寫字母】、【無】列表符號等。
l 【項目符號圖像】:可以選擇圖像作為項目的引導符號,單擊右側的【瀏覽】按鈕,找到圖像文件即可。
l 【位置】:決定列表項目所縮進的程度。選擇【外】,列表貼近左側邊框。選擇【內】,列表縮進。這項設置效果不明顯。
相關教程