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?5V8U06f6zK3o.lnOCGFvHhGxh5f4tSte_0Ho6gljXhHqZMOJ3R0CGeGj?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
1 2 Next
  • 1樓

    1樓搶頭香

    我在書上有看到說css裡面會用到html的id
    這裡怎麼是用區塊名稱?

  • linroex at March 26, 2009 05:44 PM comment | prosecute
  • 那樣講會太複雜 =)
    無名的css比較簡單
    跟書上的不一樣

  • Blog Owner at March 26, 2009 05:57 PM Reply
  • 2樓

    2樓頸推

    連結損毀了也~

  • z890008 at March 29, 2009 06:13 PM comment | prosecute
  • 更新囉!
    感謝通知 : ]

  • Blog Owner at April 5, 2009 02:36 PM Reply
  • 3樓

    3樓坐沙發

    ㄏㄏ
    看不懂-///-

  • w33221 at April 2, 2009 05:00 PM comment | email Homepage | prosecute
  • 哪邊不懂可以問壓 ^ ^

  • Blog Owner at April 6, 2009 10:30 PM Reply
  • 4樓

    福樓

    那請問一下前面是一個點的是怎樣?
    例如:
    .blogbody textarea {
    還有換行的時候要加入;符號

  • linroex at April 5, 2009 03:59 PM comment | prosecute
  • 那個要講到 原始檔 比較複雜
    其實提供區塊名稱的地方都會告訴你是#還是.
    不需要特別去找 =)

  • Blog Owner at April 6, 2009 10:29 PM Reply
  • 摁 =) ?

  • Blog Owner at April 6, 2009 10:30 PM Reply
  • 6樓

    6樓

    很不錯的一個教程

    我推了

    =)

  • dious at April 7, 2009 05:04 PM comment | email | prosecute
  • 謝謝 ^ ^

  • Blog Owner at April 7, 2009 10:50 PM Reply
  • 7樓

    7樓

    Sealed

  • Sealed at April 8, 2009 02:14 PM comment
  • Sealed

  • Blog Owner at April 8, 2009 10:17 PM Reply
  • 8樓

    8樓

    Sealed

  • Sealed at April 8, 2009 05:32 PM comment
  • Sealed

  • Blog Owner at April 8, 2009 10:17 PM Reply
  • 9樓

    9樓

    很清楚壓
    挺不錯的

    但是以我這個電腦白痴

    唉...要我跟著操作是要我的命
    XD....

  • c810562000 at April 8, 2009 07:05 PM comment | prosecute
  • 撲..
    動作好快 真的來幫我看了耶XD


    謝謝你噢 =)

  • Blog Owner at April 8, 2009 10:17 PM Reply
  • 10樓

    10樓

    幫你做補充:尋找標籤名稱的方法
    在css裡的標籤名稱有兩種
    都可以從網頁的原始檔中找到
    一種是ID
    需要用#來做宣告
    例如:我要把標籤名稱123的背景改成#FFFFFF
    則語法為#123{background:#FFFFFF}
    這種標籤搜尋方法是在先開起網頁原始檔
    然後搜尋你想要的區域附近的文字
    例如我要找"linroex的地盤"的ID
    則利用搜尋功能找"linroex的地盤"
    然後再它上面應該會有一個ID="boxMySpace"
    boxMySpace即為他的id

    另外一種是class
    必須用.來做宣告
    例如我要把123這個區域背景用成#FFFFFF
    則輸入.123{background:#FFFFFF}
    class的搜尋方式則是開啟原始檔
    然後搜尋你想要找的區塊附近的文字
    找到以後附近應該會有一個<div class="....">
    的標籤
    class裡的東西就是class標籤名稱

  • linroex at April 18, 2009 06:46 PM comment | prosecute
  • 11樓

    11樓

    Sealed

  • Sealed at April 23, 2009 09:14 PM comment
  • Sealed

  • Blog Owner at May 27, 2009 10:44 PM Reply
  • 12樓

    12樓

    哇...
    原本想自己改CCS的...
    沒想到好複雜=ˇ=
    眼花了XD

    推!

  • sweetsi at May 9, 2009 07:53 AM comment | prosecute


  • 不會的可以問我ㄚ :)

  • Blog Owner at May 27, 2009 10:45 PM Reply
  • 13樓

    13樓

    謝謝你的分享:D
    我找了好久都看不懂 ..
    幸虧有大大的教學讓我懂了一些 ,
    希望可以繼續發 -ˇ +

  • ii40921 at May 29, 2009 11:18 AM comment | prosecute
  • 摁摁 我會繼續寫下去的

    謝謝你 ^ ^

  • Blog Owner at May 29, 2009 03:05 PM Reply
  • 14樓

    14樓

    請問請問
    如果背景要隨著捲軸移動
    語法是??
    =D

  • s51422003 at May 30, 2009 06:57 PM comment | prosecute
  • 是哪個區塊的圖片呢?

    語法是這個噢!


    區塊名稱{
    background-attachment: no-fixed;
    }

  • Blog Owner at June 8, 2009 12:53 PM Reply
  • 15樓

    15樓

    我好希望學起來歐
    可以加妳即時通ㄇ??
    可以馬上回0.0
    有回我在加
    深表尊重(^(OO)^)

  • ms0489584 at June 7, 2009 07:56 PM comment | prosecute
  • 摁摁 可以加阿 有不懂的再問我吧 :D

  • Blog Owner at June 8, 2009 12:54 PM Reply
  • 16樓

    16樓

    Sealed

  • Sealed at June 26, 2009 04:34 PM comment
  • 17樓

    17樓

    囉哈!!
    請問一下
    我想要把我留言板
    的留言內容阿底色改成透明
    要如何改呢?

  • alice79316 at July 1, 2009 09:04 PM comment | prosecute
  • .msg_word{
    background:none;
    }

  • Blog Owner at July 17, 2009 11:10 PM Reply
  • 18樓

    18樓

    教學很詳細..

    我爬文爬好幾天都不懂ˇ

    一看你的就懂叻
    推^^

    不過我有一个問題

    css語法全都要貼在body {}大括號裡面嗎?

  • lollipopwoo3 at July 17, 2009 07:53 PM comment | prosecute
  • 那只是我舉例哦!
    body只是設定部落格整體
    例:
    body{
    background:#000;
    }

    只有設定到整個網頁背景圖是黑色
    但如果要設定文章背景
    #content{
    background:#fff;
    }

    就要另外設定囉 :D

  • Blog Owner at July 17, 2009 11:09 PM Reply
  • 19樓

    19樓

    Sealed

  • Sealed at July 17, 2009 08:05 PM comment
  • Sealed

  • Blog Owner at July 21, 2009 12:23 AM Reply
  • 20樓

    20樓

    Sealed

  • Sealed at July 18, 2009 02:57 PM comment
  • Sealed

  • Blog Owner at July 18, 2009 10:40 PM Reply
  • 21樓

    21樓

    Sealed

  • Sealed at July 18, 2009 11:01 PM comment
  • Sealed

  • Blog Owner at July 18, 2009 11:41 PM Reply
  • 22樓

    22樓

    Sealed

  • Sealed at July 19, 2009 12:28 PM comment
  • 23樓

    23樓

    Sealed

  • Sealed at July 22, 2009 12:12 PM comment
  • Sealed

  • Blog Owner at July 23, 2009 09:56 PM Reply
  • 24樓

    24樓

    Sealed

  • Sealed at July 22, 2009 06:49 PM comment
  • Sealed

  • Blog Owner at July 23, 2009 09:57 PM Reply
  • 25樓

    25樓

    Sealed

  • Sealed at July 23, 2009 10:27 PM comment
  • 26樓

    26樓

    哈囉妳好
    妳真厲害
    請妳看看我的網誌。。。
    我該怎麼改成↓
    http://www.wretch.cc/album/show
    .php?
    i=QQQ199281&b=13&f=160017
    1663&p=33
    (遺忘時光)這樣呢?
    不想擋到圖
    還有 圖本身能不能縮小一些呢?

  • s790131 at July 24, 2009 04:52 AM comment | prosecute
  • 27樓

    27樓

    Sealed

  • Sealed at July 26, 2009 06:24 PM comment
  • 28樓

    28樓

    Sealed

  • Sealed at August 10, 2009 12:49 AM comment
  • 29樓

    29樓

    是右邊是右邊

    不是左邊

    打錯了 Sorry

  • zxc2568738 at August 10, 2009 12:51 AM comment | prosecute
  • 30樓

    30樓

    我需要 ...
    搜尋這個網誌的文章&文章彙集
    的隱藏語法=口=

  • towo8685493 at August 26, 2009 01:07 PM comment | prosecute
  • /*搜尋*/
    #boxSearch{
    display:none;
    }
    /*彙集*/
    #boxDate {
    display:none;
    }

  • Blog Owner at August 28, 2009 02:57 PM Reply
1 2 Next

Only members can post a comment, Login first

誰來收藏
Loading ...
unlog_NVPO 0