July 20, 2009

教學 | 無名css [頂]





很多人要我教css

原本想用即時通一對一的比較方便

但好像會更複雜 = 口 =

想學css先看下面的基礎教學吧 !

我教的都是無名相關的

所以不會出現那些教學網的專業講法 ( )

都是一些比較 白話 =D

有問題到FB留言
























【 基本公式 】





區塊名稱 {
要設定的東西:內容;
要設定的東西:內容;
要設定的東西:內容;
}









☆所有的符號ˋ字體都必須為半形
 ( 例:半形→Q  全形→Q )


★每一個內容結束後ˋ都要有;  (分號)





注意: ( 07 / 20 新增 )

接下去的教學

區塊名稱都是舉例

所有的
要設定的東西:內容;

都可以套用在任何的區塊名稱

每個版面都不一樣

所以所舉例的區塊名稱可以先不用背他=D



☆ 範例

body {
background:#000;
}



★中文翻譯

部落格整體 {
背景:黑色;
}


☆當語法重覆時ˋ
 以後方語法為準






★ 範例:

body {
background:#000;
}

body {
background:#fff;
}                              ←此語法被採用


☆為防止語法因重複設定而衝擊
 設定好後 在語法後方加上!important就可以了







★範例:

body {
background:#000!important;
}       ←此語法被採用

body {
background:#fff;

}













【 工具介紹 】


 一、色碼表  




 二、捲軸產生器 

 
[ 點我 ]


 ※注意 : 


設定好後ˋ只需複製 SCROLLBAR 開頭 的語法



★範例:

html {
SCROLLBAR-FACE-COLOR: #000000;
 SCROLLBAR-HIGHLIGHT-COLOR: #000000;
 SCROLLBAR-SHADOW-COLOR: #000000;
 SCROLLBAR-3DLIGHT-COLOR: #000000;
 SCROLLBAR-ARROW-COLOR: #000000;
 SCROLLBAR-TRACK-COLOR: #000000;
 SCROLLBAR-DARKSHADOW-COLOR: #000000;
 SCROLLBAR-BASE-COLOR: #000000

}






還不太懂嗎?

沒關係

接下來實際演練一下就懂囉XD


















請大家跟這我這樣做 XD

開啟另一個視窗

到自己的 網誌 → 樣式管理 → 修改css樣式表

放在旁邊預備囉!!

















1 ) 背景修改

區塊名稱 {
background:url(背景圖片) #背景顏色色碼 重複方式 與左邊的距離px 與上方的距離px;
}







>>中間有小小空白鍵不要漏掉噢!!







>>圖片網址  


















>>重複方式:

no-repeat   << 不重複

repeat-y  << 垂直重複

repeat-x    << 水平重複












開始實際演練=)



請打開  修改css樣式表



(將語法放在最後面)



可以使用以下的範例做練習 =)



body {
background:url(http://f12.wretch.yimg.com/qqq199281/7/1231470878.jpg?Ighwy9H6zK1l.GB88MyjCoBzd9kzv9EPWMH8TnOUmVryQMBKZPtlbXpB?GeA3m2VDdhVlSvio9kb6sgN.CROM6xyg1fm7RDAz3F0yJvUIcA_Oy9qJUJCy5VTIzgw-?uzf_Z_RDdhWh9eEmZ6YjVyeaU.NJj7M.4TsER_pusqMPHRGvF1hOG_1lBq2FmNXnxig-?qqt9wQRDdhVUrT2wBYYof.KduMPBU7oM7SeTEOlwQmEvvwrQ4bV7_kxiegMJeedEYcM-?kiToWtlDdhWjBUYPqTsWt4zzrthOTzVHJCcRlOYImw6_4PEsA8qwzMtiqd.0PB4lsaY-) #ff0000 repeat-y 50px 100px;
}



(可以自己隨便修改噢!!








翻譯在這啦 XD

整體 {
背景:網址(圖片網址) 背景紅色 垂直重複 與左方距離50px 與上方距離100px;
}
















2 ) 距離與移位





區塊距離



/*與四周的距離*/

margin:數值px;





/*與左邊的距離*/

margin-left:數值px;






/*與右邊的距離*/
margin-right:數值px;







/*與上方的距離*/
margin-top:數值px;







/*與下方的距離*/
margin-bottom:數值px;







★ 範例:

body {
margin-left:50px;
}


翻譯

整體{
與左邊的距離:50px;
}








文字距離


文字距離只的是這樣



 

      區塊內的文字與邊邊的距離




/*與四周的距離*/
padding:數值px;





/*與左邊的距離*/
padding-left:數值px;






/*與右邊的距離*/
padding-right:數值px;





/*與上方的距離*/
padding-top:數值px;






/*與下方的距離*/
padding-bottom:數值px;







★ 範例:


#content {
padding-top:50px;
}




★ 翻譯:

文章區塊 {
文字與上方的距離:50px;
}



















開始實際演練=)



請打開  修改css樣式表



(將語法放在最後面)



可以使用以下的範例做練習 =)


#links{
margin-top:500px;
padding-left:500px;
}





翻譯在這啦 XD

連結列 {
區塊與上方的距離:500px;
文字與左邊的距離:500px;
}









 移位   ( 07 / 20 增 )


/*絕對位置*/
position:absolute;


絕對位置 的意思是


可以將你要的區塊移位


像現在很多樣式都有把


誰來我家移位

人氣移位
.. 等



是個很實用的語法哦 :D


他會將所 指定的區塊移到畫面的左上角


所以還要加上


top:數值px;

left:數值px
;


告訴電腦你要移到什麼地方哦 !



top:和上面的距離px;

left:和左邊的距離px
;













還不是很清楚嗎?

實際演練=)



請打開  修改css樣式表



(將語法放在最後面)



可以使用以下的範例做練習 =)


#boxWho{
position:absolute;
top:10px;
left:100px
;
}






翻譯在這啦 XD

誰來我家 {
位置:絕對;
和上方的距離:10px;
和左邊的距離:100px
;
}






/*相對位置*/
position:relative;



他指的意思是


電腦不會將區塊放到螢幕的左上角


他會 以區塊原本的位置為參考點去移動區塊 哦 !















實際演練=)



請打開  修改css樣式表



(將語法放在最後面)



可以使用以下的範例做練習 =)


#boxWho{
position:relative;
top:10px;
left:100px
;
}






翻譯在這啦 XD

誰來我家 {
位置:相對;
和上方的距離:10px;
和左邊的距離:100px
;
}




誰來我家 是不是從原本的位置移位了呢 :D ?








[  待續 ]




有不懂得盡量在下方以  顯示 留言 =)

32推薦此文章
Today's Visitors: 0 Total Visitors: 1791
Personal Category: 教學 Topic: learning / education / linguistic
Previous in This Category: 【教學】編輯   Next in This Category: 知識+常見問題|樣式修改上排消失
歷史上的今天:
[Trackback URL]
  • 本篇文章引用自此

  • css小知識 【아프잖아 사랑한 널 지켜보며 사랑한다】 at July 22, 2009 12:11 PM Trackback | prosecute

Reply
  • 31樓

    31樓

    拿+推~
    謝謝~

  • cafe777 at August 28, 2009 01:29 PM comment | prosecute
  • 33樓

    33樓

    我想問一下
    有些人可以在連結管理那打文字
    有像是網誌敘述一樣的語法嗎?
    (例如: 顏色,加粗...)

  • paggie840725 at November 7, 2009 04:44 PM comment | prosecute
  • 34樓

    34樓

    Sealed

  • Sealed at January 25, 2010 03:56 PM comment
  • 35樓

    35樓

    Sealed

  • Sealed at June 10, 2010 09:14 PM comment
  • Sealed

  • Blog Owner at June 15, 2010 02:33 PM Reply
  • 36樓

    36樓

    Sealed

  • Sealed at June 16, 2010 12:08 AM comment
  • 37樓

    37樓

    Sealed

  • Sealed at April 7, 2012 02:45 PM comment

Only members can post a comment, Login first

誰來收藏
Loading ...
unlog_NVPO 0