close
很多人要我教css
原本想用即時通一對一的比較方便
但好像會更複雜 = 口 =
想學css先看下面的基礎教學吧 !
我教的都是無名相關的
所以不會出現那些教學網的專業講法 ( 羞 )
都是一些比較 白話 的 =D
有不會的再加我即時問吧 =)
要說你是誰噢!!!
( 即時→an81390309 )
＊ ( 07 / 20 新增 )
那個是問語法的即時
平常我不是上那個 =)
【 基本公式 】
區塊名稱 {
要設定的東西:內容;
要設定的東西:內容;
要設定的東西:內容;
}
☆所有的符號ˋ字體都必須為【半形】
( 例：半形→Q 全形→Ｑ )
★每一個內容結束後ˋ都要有; (分號)
☆ 範例：
body {
background:#000;
}
★中文翻譯
部落格整體 {
背景:黑色;
}
☆當語法重覆時ˋ
以後方語法為準
注意: ( 07 / 20 新增 )
接下去的教學
區塊名稱都是舉例
所有的要設定的東西:內容;
都可以套用在任何的區塊名稱裡
每個版面都不一樣
所以所舉例的區塊名稱可以先不用背他=D
★ 範例：
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://f5.wretch.yimg.com/qqq199281/7/1231470878.jpg) #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 ?
[ 待續 ]
有不懂得盡量在下方以 顯示 留言 =)
全站熱搜
留言列表
