DW-CS5.5-525(AM)

CSS (Cascading Style Sheet 串接樣式表) 測試

1. open new file , 輸入文字,當程式碼亂糟糟時,請用左側icon中的"套用原始碼格式"整理

2. 點選"段落1"文字,新增CSS規則/標籤/P  確定     背景/background-color: #FC9;     區塊/text-align: center;     方框/width: 100px; margin-right: auto;margin-left: auto;

3-1. 點選其中一個文字,例如:"段落1"文字,做類別的設定 ; 新增CSS規則/類別/.color         (類別的語法須在開頭加一個句號)

3-2. 確定

4. 在 .color的CSS規則定義中設定, 字型/font-weight: bolder;color: #F06,記得     結束對話框之後,到"類別"選擇

5-1. 點選"段落2"針對它做單一的定義,做 ID 的設定 ; 新增CSS規則/ID/#P2        (ID的語法須在開頭加一個#)

5-2. 確定

6. 屬性框中的 ID 為必選項,類別為非選項,看一下程式碼內容(請自行變化...@_@)

隨記:類別與ID,就如同家族與個人........................................休息一下吧!!!!!!

. . . . . 休息時間來點輕鬆的吧!    n_n

範例練習:CSS語法

1. CSS Comments 註解

2. The class Selector 類別

3. CSS Border 邊框

4. HTML <div> Tag

. . . . . 繼續吧!!!  @_@

div 組塊元素

1. 輸入下圖程式碼 (Levela&Levelb請改為小寫)

2.  先點設計視窗的"第三層文字",再點 新增CSS規則/複合/#Levela #Levelb .levelc      按確定

3. 進入 "#levela #levelb .levelc 的CSS規則定義"對話框,確定 (暫時沒有任何設定     變化)

4. 點設計視窗的"第二層文字"(其中一個), 新增CSS規則/複合/.levelc (選擇類別亦可)     按確定

5. 進入 ".levelc 的CSS規則定義"對話框,設定 邊框 border: medium groove #F69;

6. 改變"第三層文字"的類別

7.點設計視窗的"第三層文字", 新增CSS規則/複合/#levelb.levelc ,    進入 "#levelb.levelc的CSS規則定義"對話框,設定 背景:background-color:    #FC6;按確定

8.複製上一階段的文字,接著繼續.....................................@_@

第六層文字並不會改變顏色,因為"第四層文字"與"第五層文字"並未對應到我所新增    的CSS,所以他呢.....聞風不動 @_@ (注意程式碼裡的leveld&levele喔!)

Q1. 接下來,熟悉一下動一下腦,如何解下列圖所示

. . . . . 下課吃飯啦!

. . . . . .