CSS是樣式屬性標籤,可以將頁面中的各個部份的字體、圖片做個人化喜好的調整。很方便:)也很有趣。 所有的標籤語法都是以兩個大括號『 {} 』包起來的,括號內的各小屬性以『 ; 』分號隔開。 將CSS部落格的語法中,各屬性標籤各代表什麼的部份歸類。 此篇以wretch版型為主。

html{ ;}  /*設定頁面的HTML語法部分*/ /*整個頁面*/

body {  ;}  /*在此設定整個頁面內的字體大小顏色、滑鼠指標等等。*/

td { }

img{ border: none;}  /*img是圖片的意思。設定了此語法,會讓頁面中的圖片外面才沒有框框。*/

br {letter-spacing: 0px;}  /*br是換行指令,可設定每行中間的間隔。px代表像素。不要太擠才不會看不清楚。依字型的樣式做設定。*/

a {color: #色碼; text-decoration/*字體裝飾*/ ;}  /*連結的字體顏色、大小效果。*/ a:hover {color: #色碼; cursor: url(“滑鼠網址”);}  /*當滑鼠滑過連結時的效果。*/

input,select { }

#container1 { ;}  /*為整個頁框的範圍和擺設做設定,本文部份都包括在這裡*/

h3 { }

/*———-banner———-*/

/*整個表頭範圍,包括部落格名稱和敘述*/

#banner { ;} / *設定banner部分的位移、寬高、字體顏色、背景等各效果。*/

/*部落格名稱與動態*/ #pageheader h1 { ;}

/*部落格名稱*/ #pageheader h1 a { ;}  /*部落格的原本顯示顏色*/ #pageheader h1 a:hover { ;}  /*當滑鼠滑過部落格名稱時顯示的字體效果*/

/*部落格描述*/ .description { ;}  /*設定敘述部分的位移、寬高、字體顏色、背景等各效果。*/

/*———-main———-*/

/*包括content跟link*/

#main2 { ;}  /*本文和旁邊連結的部份的大頁面部份,不包括部落格名稱敘述部份。*/

/*內容區塊*/

/*本文部份的字體效果、卷軸顏色和顯示,等等。*/ #content {     SCROLLBAR-FACE-COLOR: #色碼;     SCROLLBAR-HIGHLIGHT-COLOR: #色碼;     SCROLLBAR-SHADOW-COLOR: #色碼;     SCROLLBAR-3DLIGHT-COLOR: #色碼;     SCROLLBAR-TRACK-COLOR: #色碼;     SCROLLBAR-ARROW-COLOR: #色碼;     SCROLLBAR-DARKSHADOW-COLOR: #色碼;     overflow: auto;} /*–產生捲軸–*/

/*單篇文章,包括文章的內容與下方的回應*/ .blogbody { ;}

/*日期區塊*/ .date { ;} /*就是每篇文章上方的日期部份*/

/*文章標題*/ .title { ;} /*每篇文章標題部份的設定*/

/*文章內文*/ .innertext { ;} /*設定位置,每行大小間距、字體效果等等。*/

/*文章分類*/ .extended { ;}

/*more圖示*/ a.more { ;} /* “繼續閱讀” 的效果設定,可把文字換成圖片。*/

/*作者資訊,回應,引用,轉寄*/ .posted { ;} .posted a { ;} .posted a:hover { ;} .posted img { ;} input#trackback_url { ;}

/*———-comment———-*/

/*迴響的按鈕*/ .commentTitle { ;} /*”迴響”的效果設定,也可把文字換成圖片。*/

/*迴響(迴響文中的內容可分別設定)*/ .comments-body { ;} .comments-body br { ;} .comments-post { ;} .comments-post img { ;} .comments-head { ;}

/*———-links———-*/ #links {   overflow: auto; /*看要不要顯示捲軸*/     SCROLLBAR-FACE-COLOR: #色碼;     SCROLLBAR-HIGHLIGHT-COLOR: #色碼;     SCROLLBAR-SHADOW-COLOR: #色碼;     SCROLLBAR-3DLIGHT-COLOR: #色碼;     SCROLLBAR-TRACK-COLOR: #色碼;     SCROLLBAR-ARROW-COLOR: #色碼;     SCROLLBAR-DARKSHADOW-COLOR: #色碼;} #links br { ;} #links img { ;}

.side { ;} /*連結部份都叫做side*/ .sidetitle { ;} /*sidetitle顧名思義就是每個side的標題*/ .sidetitle a { ;}

/*—side裡面的字體顏色,修改顏色值。 .Sidebody a:link{color : #色碼 ;text-decoration : none;} /*連結樣式*/ .Sidebody a:hover{color : #色碼 ;text-decoration : none;font-weight:bold;} /*當滑鼠滑過連結時的效果*/ .Sidebody a:visited{color : #色碼 ;text-decoration : none;} /*訪問過的連結*/ .Sidebody a:active{color : #色碼 ;text-decoration : none;} /*當滑鼠正點在連結上面時的效果*/ —*/

/*這部份還在研究XD*/ .boxNewComment1 .side { ;} .boxNewComment1 .side a { ;} .boxNewComment1 img { ;} .boxCounter1 .side { ;}

/*日曆*/ span.calendar a { ;}  /*我是這樣設定的,可設定日曆中有寫日記那天的日期所顯現的字體顏色、大小、粗細等等。*/

span.calendar a:hover { ;}  /*滑鼠滑過有日記的日期的效果,還可改變數字後的背景圖:)*/

/*登入*/ .powered {padding: 10px 0px 0px 10px;} .powered img {display: none;}

分享的寶寶都會很好運 ◉‿◉
讀取更多相關文章
  • [設計] 談網頁設計與平面印刷完稿的解析度

    從黑米發現的,在我整理自己的經驗前,先分享給大家吧~   解析度 解析度是交付印刷的一個重要的條件, … …
  • scrollbar 捲軸CSS語法分享

    這個語法很多人在設計部落格或網頁時,都會用到的。 可是Firefox不會顯示喔,IE為基本的瀏覽器就可以了。捲 … …
讀取更多 CSS

1則留言

  1. 訪客

    2011 3 月 3日 於 9:38 上午

    謝謝你提供的字型

    回覆

發佈回覆給「訪客」的留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

再多看看

[職場甘苦談] 想要為客戶打造獨一無二的網站,網頁設計師該堅持理念還是順著客戶的想法?

在職場中,感覺就像是『人感觀察』,看到各種個性與對事情不同的作法與看法,雖然有時讓人頭大,其實是還滿有趣的! … …