簡單的無名CSS教學（給初學者）
滿詳盡的囉
一、先介紹一個顏色碼的網站(十六進位)
需要『顏色碼查詢』請點!!!
可以測試背景色及文字色
二、修改背景
body {
background: #000000 ; /*這邊可以修改背景顏色*/
color:#FF6600;
}
假如背景要一張圖片or照片
background-image: url(你照片的網址);
通常這時需要固定背景較佳。
所以在下面還需要加上
background-attachment : fixed;
這樣的固定背景比較好，
也可以選擇不要加上。
補充：
background-repeat : repeat /*重複排列-網頁預設*/
background-repeat : no-repeat /*不重複排列*/
background-repeat : repeat-x /*在x軸重複排列*/
background-repeat : repeat-y /*在y軸重複排列*/
background-position : 90% 90% /*背景圖片x與y軸的位置*/
三、滾軸顏色
SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/
SCROLLBAR-SHADOW-COLOR: #336699; /*捲軸右與下內邊框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF; /*捲軸右與下外邊框*/
SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/
上面這七行跟背景一樣，都貼在
body {OOXX}
裡面。
顏色的話就自己選
最後面我會再整理一次。
四、文字
A{color:#336699; text-decoration: none;} /*所有超連結*/
A:link{color:#336699; text-decoration: none;} /*超連結文字格式*/
A:visited{color:#336699; text-decoration: none;} /*瀏覽過的連結文字格式*/
A:active{color:#336699;} /*按下連結的格式*/
A:hover{color:#336699;} /*滑鼠移至連結*/
這個我覺得改a:hover這欄就好了，其他欄就只改顏色。
hover可以加大字型或改變字型
font-family:標楷體;/*或你爽用其他字體*/
font-size:14pt;/*游標移到超連結時候字體的大小，自己改*/
font-color:#999999;/*游標移上去時的顏色*/
position:relative;top:1px;left:1px;/*超連結稍微位移，方向跟距離自己改吧!*/
接下來是游標移到超連結上的可做的形狀改變(微軟預設值)
cursor:crosshair 十字型 cursor:s-resize 箭頭朝下
cursor:move 十字箭頭 cursor:e-resize 箭頭朝右
cursor:help 加一問號 cursor:w-resize 箭頭朝左
cursor:n-resize 箭頭朝上 cursor:ne-resize 箭頭朝右上
scursor:nw-resize 箭頭朝左上 cursor:text 文字I型
cursor:se-resize 箭頭斜右下 cursor:sw-resize 箭頭斜左下
cursor:wait 漏斗 cursor:nono? 預設
使用游標圖案(IE6) cursor:url("圖檔名.cur")
.cur的圖檔自己做
檔案不要弄太大
要不然載入的時間會很長
很機車喔~免費的網頁會不支援用.cur檔的
像yahoo, pchome等等都不支援
試試看其他的空間吧！
【註】：.cur檔?靜態游標
.ani檔?動態游標?
補充：
font-style:itelic /*文字斜體*/
font-variant:small-caps/*小字體*/
letter-spacing : 1pt/*字間距離*/
line-height : 200% /*設定行高*/
font-weight:bold /*文字粗體*/
vertical-align:sub /*下標字*/
vertical-align:super/*上標字*/
text-decoration:line-through/*加刪除線*/
text-decoration:overline /*加頂線*/
text-decoration:underline /*加底線*/
text-decoration:none /*刪除連結底線*/
text-transform : capitalize /*首字大寫*/
text-transform : uppercase /*英文大寫*/
text-transform : lowercase /*英文小寫*/
text-align:right /*文字靠右對齊*/
text-align:left /*文字靠左對齊*/
text-align:center /*文字置中對齊*/
五、標題
#banner {/*我覺得這邊不太用改ㄟ*/
font-family:verdana, arial, sans-serif;
color: #66ff00; /*改字的顏色*/
font-size:xxx-large;
font-weight:bold;
background: #000000;/*就是更改一下背景顏色*/
padding-left:15px;
}
改一下背景
改字的顏色
六、描述
我個人覺得都不太需要改他
反正無名小站，站長弄得這麼好
只要把顏色改調
讓相本看起來有個人特色就好
description {
font-family:verdana, arial, sans-serif;
color: #ff6600;/*修改顏色*/
font-size:small;
font-weight:bold;
background: #000000;/*修改背景顏色*/
text-transform:none;
letter-spacing: none;
}?
修改字的顏色
修改背景顏色
七、side
side {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:x-small;
font-weight:normal;
background: #ff6633; /*框框內部的顏色*/
border-top:1px solid #FF9900; /*上面邊框，粗細=1，實心，可改顏色*/
border-bottom:1px solid #FF9900; /*下面邊框，粗細=1，實心，可改顏色*/
border-left:1px solid #FF9900; /*左面邊框，粗細=1，實心，可改顏色*/
border-right:1px solid #FF9900; /*上面邊框，粗細=1，實心，可改顏色*/
line-height:140%;
}
上面最主要是改框框的東西，
改背景色
接下來是邊框了
其中solid是實線的意思
假如把solid改成dashe，邊框就會變成虛線了
另外粗細可隨便調。
【NOTE】有人喜歡把邊框改一改
弄得比較有立體敢，也是可以的。
只要把四個框保留其中兩個然後把把線加粗
就會有陰影的效果
background: #ff6633;
border-bottom:2px solid #FF9900;
border-right:2px solid #FF9900;
只要這三個顏色配合的好就可以了
我顏色感覺不是很好
所以沒有範例。
所以我都用其他方法：
border : 1px solid/*實線框*/
border : 3px double/*雙線框*/
border : 3px groove/*立體內凸框*/
border : 3px ridge/*立體浮凸框*/
border : 3px inset/*凹框*/
border : 3px outset/*凸框*/
我用這其中選擇一種來用就ok了
少了配色的煩惱
但是這種事情見仁見智啦~~~~
給一個凸框的範例圖片
sidetitle跟剛剛那個差不多，祇是地方的不一樣而已
沒什麼好改的
sidetitle {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:x-small;
font-weight:bold;
background: #000000;/*改變一下顏色*/
line-height:140%;
padding:2px;
margin-top:10px;
border-top:1px solid #FF9900;/*跟上面講的一樣!*/
border-bottom:1px solid #FF9900;/*跟上面講的一樣!*/
border-left:1px solid #FF9900;/*跟上面講的一樣!*/
border-right:1px solid #FF9900;/*跟上面講的一樣!*/
letter-spacing: .2em;
}?
做個範例，這樣好知道地點
八、powered
這個就是下方無名小站logo的東西
我是不想改他
powered {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:xx-small;
font-weight:bold;
border-top:1px solid #666;/*上面那條線的顏色*/
border-bottom:1px solid #666; /*下面那條線的顏色*/
line-height:140%;
padding:2px;
margin-top:10px;
text-align:center;
letter-spacing: .2em
}
九、類似的表單
很多人下拉式表單都可變色
這個是語法
input,select,textarea
{
color : #FF8C00;/*文字顏色*/
font-size : 10pt ;
background-color : #000000; /*背景顏色*/
/*下面是上線左右的東西，懶的打了，跟上面差不多*/
border-top : 1px double #7CFC00;
border-bottom : 1px double #7CFC00 ;
border-left : 1px double #7CFC00 ;
border-right : 1px double #7CFC00 ;
}
用一個範例：
十、整理一下
看了這麼多，不懂就踹踹看好了.......
就複製下面的貼到css就好
原因上面都有解釋
我是覺得只要改我下面有註解的就好了
假如想多改一點的話也可以自己玩玩看啦
body {
SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*捲軸右與下內邊框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*捲軸右與下外邊框*/
SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/
background: #000000 ; /*背景顏色*/
color:#FF6600; /*字的顏色*/
}
A { color: #336699; text-decoration: none; }/*所有超連結*/
A:link { color: #336699; text-decoration: none; }/*超連結文字格式*/
A:visited { color: #336699; text-decoration: none; }/*瀏覽過的連結文字格式*/
A:active { color: #336699; }/*按下連結的格式*/
A:hover { color: #999999; position:relative;top:1px;left:1px;font-size:14pt;}/*滑鼠移至連 結*/
#banner {
font-family:verdana, arial, sans-serif;
color: #66ff00;
font-size:xxx-large;
font-weight:bold;
background: #000000;/*標題背景顏色*/
padding-left:15px;
}
#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family:verdana, arial, sans-serif;
font-size: x-large;
color: #66ff00;/*標題字的顏色*/
text-decoration: none;
}
.description {
font-family:verdana, arial, sans-serif;
color: #ff6600;/*敘述字的顏色*/
font-size:small;
font-weight:bold;
background: #000000; /*敘述字的背景*/
text-transform:none;
letter-spacing: none;
}
.side {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:x-small;
font-weight:normal;
background: #ff6633; /*框框的背景顏色*/
border-top:1px solid #FF9900;/*上框的粗細、實線、顏色*/
border-bottom:2px solid #FF9900;/*下框的粗細、實線、顏色*/
border-left:1px solid #FF9900;/*左邊框的粗細、實線、顏色*/
border-right:2px solid #FF9900;/*右邊框的粗細、實線、顏色*/
border : 3px outset/*凸框*/
line-height:140%;
}
.sidetitle {
font-family:verdana, arial, sans-serif;
color:#336699;/*字的顏色*/
font-size:x-small;
font-weight:bold;
background: #000000;/*背景顏色*/
line-height:140%;
padding:2px;
margin-top:10px;
border-top:1px solid #FF9900;/*上框的粗細、實線、顏色*/
border-bottom:1px solid #FF9900;/*下框的粗細、實線、顏色*/
border-left:1px solid #FF9900;/*左邊框的粗細、實線、顏色*/
border-right:1px solid #FF9900;/*右邊框的粗細、實線、顏色*/
letter-spacing: .2em;
}
.powered {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:xx-small;
font-weight:bold;
border-top:1px solid #666;
border-bottom:1px solid #666;
line-height:140%;
padding:2px;
margin-top:10px;
text-align:center;
letter-spacing: .2em
}
input,select,textarea
{
color : #FF8C00;/*文字顏色*/
font-size : 10pt ; /*文字大小*/
background-color : #000000; /*背景顏色*/
border-top : 1px double #7CFC00;/*邊框顏色*/
border-bottom : 1px double #7CFC00 ; /*邊框顏色*/
border-left : 1px double #7CFC00 ; /*邊框顏色*/
border-right : 1px double #7CFC00 ; /*邊框顏色*/
}
?
十一、最後一個啦~~~
假如有些人是用圖片當背景
而不是用顏色的話
那些小框框都沒有刪掉
所以我就用/*OOXX*/的符號把他弄起起來了
也是一樣直接複製，然後修改我有註解的地方就好了
其他要改什麼就自己加
body {
SCROLLBAR-FACE-COLOR: #FFFFFF; /*捲軸顏色*/
SCROLLBAR-HIGHLIGHT-COLOR: #336699; /*捲軸左與上內邊框*/
SCROLLBAR-SHADOW-COLOR: #336699;/*捲軸右與下內邊框*/
SCROLLBAR-3DLIGHT-COLOR: #FFFFFF; /*捲軸左與上外邊框*/
SCROLLBAR-DARKSHADOW-COLOR: #FFFFFF;/*捲軸右與下外邊框*/
SCROLLBAR-ARROW-COLOR: #336699; /*捲軸箭頭*/
SCROLLBAR-TRACK-COLOR: #FFFFFF; /*捲軸底色*/
background-image: url(你要的圖片啦~~~~~~~~~);/*就自己加啊!*/
background-attachment : fixed;
color:#FF6600; /*字的顏色*/
}
A { color: #336699; text-decoration: none; }/*所有超連結*/
A:link { color: #336699; text-decoration: none; }/*超連結文字格式*/
A:visited { color: #336699; text-decoration: none; }/*瀏覽過的連結文字格式*/
A:active { color: #336699; }/*按下連結的格式*/
A:hover { color: #999999; position:relative;top:1px;left:1px;font-size:14pt;}/*滑鼠移至連 結*/
#banner {
font-family:verdana, arial, sans-serif;
color: #66ff00;
font-size:xxx-large;
font-weight:bold;
/*background: #000000;*//*標題背景顏色*/
padding-left:15px;
}
#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family:verdana, arial, sans-serif;
font-size: x-large;
color: #66ff00;/*標題字的顏色*/
text-decoration: none;
}
.description {
font-family:verdana, arial, sans-serif;
color: #ff6600;/*敘述字的顏色*/
font-size:small;
font-weight:bold;
/*background: #000000;*//*敘述字的背景*/
text-transform:none;
letter-spacing: none;
}
.side {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:x-small;
font-weight:normal;
/*background: #ff6633;*//*框框的背景顏色*/
/*border-top:1px solid #FF9900;*//*上框的粗細、實線、顏色*/
/*border-bottom:2px solid #FF9900;*//*下框的粗細、實線、顏色*/
/*border-left:1px solid #FF9900;*//*左邊框的粗細、實線、顏色*/
/*border-right:2px solid #FF9900;*//*右邊框的粗細、實線、顏色*/
/*border : 3px outset*//*凸框*/
/*line-height:140%;*/
}
.sidetitle {
font-family:verdana, arial, sans-serif;
color:#336699;/*字的顏色*/
font-size:x-small;
font-weight:bold;
/*background: #000000;*//*背景顏色*/
/*line-height:140%;*/
padding:2px;
margin-top:10px;
/*border-top:1px solid #FF9900;*//*上框的粗細、實線、顏色*/
/*border-bottom:1px solid #FF9900;*//*下框的粗細、實線、顏色*/
/*border-left:1px solid #FF9900;*//*左邊框的粗細、實線、顏色*/
/*border-right:1px solid #FF9900;*//*右邊框的粗細、實線、顏色*/
letter-spacing: .2em;
}
.powered {
font-family:verdana, arial, sans-serif;
color:#336699;
font-size:xx-small;
font-weight:bold;
/*border-top:1px solid #666;*/
/*border-bottom:1px solid #666; */
line-height:140%;
padding:2px;
margin-top:10px;
text-align:center;
letter-spacing: .2em
}
input,select,textarea
{
color : #FF8C00;/*文字顏色*/
font-size : 10pt ; /*文字大小*/
background-color : #000000; /*背景顏色*/
border-top : 1px double #7CFC00;/*邊框顏色*/
border-bottom : 1px double #7CFC00 ; /*邊框顏色*/
border-left : 1px double #7CFC00 ; /*邊框顏色*/
border-right : 1px double #7CFC00 ; /*邊框顏色*/
}
?
留言列表
兩人世界 (5)
