許久沒有寫新的教學,是真的不知道還有什麼東東是網友需要的,另外也有更大的因素是自己太忙了。最近又有一堆人在問版面相關的CSS語法問題,於是我又再繼續寫我未完成的CSS教學!這次講欄位裡面的設計。

其實以前陸續有寫過CSS相關的文章,只是應該都是零亂沒有特別組織、或是規劃,也寫過側邊欄位的背景圖樣更改教學↓
改欄位名稱裡面的背景圖片(花樣)
現在就寫一篇完整講側邊欄位裡面的CSS語法教學。

首先我們看一下Xuite CSS裡面的與各欄位定義相關的語法區塊有↓
/*左欄*/
#linksLeft{
        float: left;
        width: 210px;
        margin: 0px;
}

/*右欄*/
#linksRight{
    float: right;
    width: 210px;
 margin: 0px;

}
/*欄位名稱*/
.sidetitle{
.......
 }
/*欄位內容*/
.side{
......
}
/*文章分類*/
.categoryTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletCategory.gif);
}
.categorySide li{
 list-style-image:url(
http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.categorySide{
}

/*搜尋文章*/
.searchTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletSearch.gif);
}
.searchTitle{
}
.searchSide{
text-align:center;
}
.searchbutton{
 text-align:center;
 padding:2px;
}
/*已建立的日誌*/
.bloglistTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletBlogList.gif);
}
.bloglistTitle{
}
.bloglistSide li{
 list-style-image:url(
http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.bloglistSide{
}

/*訂閱電子報*/
.epaperTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletEpaper.gif);
}
.epaperTitle{
}
.epaperSide{
 text-align:center;
}
.epaperbutton{
 text-align:center;
 padding:2px;
}

/*自由欄位*/
.customTitle li{
/* list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletCustom.gif); */
list-style-image:url(
http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4889523/11.gif);
}
.customTitle{
}
.customSide{

}

其實還很多,不詳細列出,例如
/*日誌使用資源*/
.resourceTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletBlogResource.gif);
}
.resourceTitle{
}
.resourceSide{
 text-align:center;
}
/*留言塗鴉版*/
.paintTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletPaint.gif);
}
.paintTitle{
}
.paintSide{
 text-align:center;
}

這裡面先將它們切成兩部份談一下,一部份是比較大範圍的定義(紅色字部份),另外一部份是個別欄位的訂義(藍色字部份)↓

紅色部份
1./*左欄*/
#linksLeft{
        float: left;
        width: 210px;
        margin: 0px;}

/*右欄*/
#linksRight{
    float: right;
    width: 210px;
 margin: 0px;
}

這兩個部分主要是定義SideBar,左右欄位的CSS樣式,可以在這裡面去定義共同的一些基本屬性,例如上面只是單純的定義
a) float: left or right; 定義它是浮動的位置,在mid區塊中,一個是靠左,一個是靠右!
b) width: 210px; 定義SideBar寬度為210pixels!可以改變其數字以調整寬度。
c) margin: 0px; 定義LinksLeft, linksRight與Mid及Content間的間隙。可以修改其與其他區塊間的間隙大小。

2./*欄位名稱*/
.sidetitle{
 padding:2px;
 border:#CBE1E9 1px solid;
 background:#CBE1E9;
 font-weight:normal;
 background-image:url(http://s.blog.xuite.net/_theme/skin/windows/27/blog011_2.gif);
 color:#CC6600;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 letter-spacing:0.1em;
 font-size:15px;
 margin-top:5px;
 text-align: left;
 }
它就是定義SideBar裡面每個區塊上方的欄位名稱區塊的CSS↓

,像是有人特別問欄位名稱的字體或是字的顏色(上圖的紅色圈圈所示),就是在這一段CSS中定義,就像上面的
color:#CC6600;
 font-family:Verdana, Arial, Helvetica, sans-serif;

就是字體顏色與字形的定義語法。字體大小則是font-size:15px;
至於其背景,可以用顏色,或是圖片來定義(二擇一就可以,當然也可以都用)
a)背景顏色:用background-color:#CBE1E9;語法定義,顏色用六碼色碼代表。
b)背景圖片:用background-image:url(http://s.blog.xuite.net/_theme/skin/windows/27/blog011_2.gif);語法定義,背景圖片以其URL填入。上面的網址的圖是。可以自行更換其他背景圖片看看效果。

3. /*欄位內容*/
.side{
/* background:#ffffff;*/
 border:#CBE1E9 1px solid;
 font-size:12px;
 font-weight:normal;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 padding:4px;
       text-align: left;
}
它就是定義SideBar裡面每個區塊欄位名稱下方內的區塊(欄位內容)的CSS,下圖紅色框框內的部份↓

,欄位內容裡面的字體或是字的顏色、字的大小(上圖的紅色框框內的字),就是在這一段CSS中定義,就像上面語法中的
 font-size:12px;
 font-weight:normal;
 line-height:140%;
 font-family:Verdana, Arial, Helvetica, sans-serif;
就是字體大小、字體、行高與字形的定義語法。
至於其背景,像欄位名稱一樣可以用顏色,或是圖片來定義(二擇一就可以,當然也可以都用)
a)背景顏色:用background-color:#CBE1E9;語法定義,顏色用六碼色碼代表。
b)背景圖片:用background-image:url(http://s.blog.xuite.net/_theme/skin/windows/27/blog011_2.gif);語法定義,背景圖片以其URL填入。可以自行更換其他背景圖片看看效果。
這邊的範例是沒有背景顏色,用透明的方式呈現,背景透明的語法其實是不要背景色,就像上面的範例將背景色定義make成註解
/* background:#ffffff;*/
至於其他如padding:4px;的語法是定義區塊內的內容與左邊的留白有4個pixels。你可以自己定義調整留白的部份,當然也可以定義其與上、右、下的留白距離。如padding:4px 4px 4px 4px;

藍色部份
1/*文章分類*/
.categoryTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletCategory.gif);
}
.categorySide li{
 list-style-image:url(
http://s.blog.xuite.net/_image/blogIcon19.gif);
}
.categorySide{
}
/*搜尋文章*/
.searchTitle li{
 list-style-image:url(
http://s.blog.xuite.net/_theme/skin/list/bulletSearch.gif);
}
.searchTitle{
}
.searchSide{
text-align:center;
}
.searchbutton{
 text-align:center;
 padding:2px;
}
其他略。這部份的CSS定義的部份是有規則的,我們可以發現大概有↓
.xxxxxTitle li {}
.xxxxxTitle {}
.xxxxxSide li {}
.xxxxxSide {}
.xxxxxbutton {}
上面這些的xxxxx指的是隨著不同的欄位區塊所給予的不同名稱,例如文章分類區塊它都是.categoryTitle , .categorySide 之類的搜尋文章區塊它都是.searchTitle , .searchSide 之類的來定義其CSS設定,這裡面就很單純地將它看成兩大部份,這些定義主要是定義如下圖的區域↓

.xxxxTitle:指的是欄位區塊上方的的標題區域(如上方藍色方框所示)
可以去改它的背景色或是背景圖片,也可以改標題的字體或是顏色,類似前面教的
a)背景顏色:用background-color:#CBE1E9;語法定義,顏色用六碼色碼代表。
b)背景圖片:用background-image:url(http://s.blog.xuite.net/_theme/skin/windows/27/blog011_2.gif);語法定義,背景圖片以其URL填入。......不再重複說明。

.xxxxTitle li:多個 li 指的是標題區域裡面的項目符號(如上方紫色圓框所示)
這裡面的語法主要是用list-style-imsge去定義項目符號圖片↓
list-style-image:url(http://s.blog.xuite.net/_theme/skin/list/bulletSearch.gif);
當然也可以改用list-style-type來定義↓
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha; 還好多,請自行參考↓
http://www.w3schools.com/css/pr_list-style-type.asp

.xxxxSide:指的是欄位區塊內部的區域(上圖的紅色方框內的定義)
同樣可以定義背景、字型@#$%(省略),但是注意這裡的字若是可以點選的按鈕連結,它就會跟CSS檔中的連結定義有關↓
/*連結*/
A {
 color: #999966;
 text-decoration: none;
}
A:link {
 /*color:#545D22;*/
color:#62A8AA;
 text-decoration:none;
cursor : url(
http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/46.gif), pointer;
}
A:visited {
 /*color: #545D22;*/
color:#999966;
 text-decoration:none;
}
A:active {
 color: #6F7A2F;
 text-decoration:none;
}
A:hover {
 color: #6F7A2F;
 text-decoration:none;
 font-weight: bolder;
cursor : url(
http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4702563/46.gif), pointer;
}

.xxxxSide li :多個 li 指的是欄位區塊內部的項目(list)符號(上圖的綠色圓框內的定義)

至於.xxxbutton的部份是特別指欄位區塊內有按鈕的部份的CSS定義,像
.searchbutton{
 text-align:center;
 padding:2px;
}

text-align:center;所呈現的就是置中對齊↓,不過我怎麼改好像它也沒變就是啦 ><"

最後再跟大家分享一下CSS的精簡寫法,例如前面的許多跟 xxxxSide li有關的,將它們寫成一個↓
.customTitle li, .searchTitle li, .categoryTitle li, .articleTitle li{
list-style-image:url(http://c.blog.xuite.net/c/f/7/b/11732000/blog_698/txt/4889523/11.gif);
}
這樣一來一堆的欄位區塊的標題都項目符號都定義完了!就不會寫非常長的CSS了,除非你每個欄位都要不同的定義那當然還是要維持舊的寫法個別定義。



隨機文章


  • 歡迎來到隨意窩Xuite

    開啟選單瀏覽服務或以關鍵字搜尋。

     
  • 瀏覽更多精彩內容

    切換至格主其他頻道或直接搜尋。

     
  • 快速便利分享工具

    提供多種分享方式傳遞內容資訊。

     
  • 更多推薦APP

    隨意遊與隨食記app僅支援ios裝置。