甜甜圈小舖 CSS火星文

CSS火星文

優格這個天殺的記性,怕很快忘記CSS所以趕緊發這篇文
不為別的至少我自己忘光了有文可以看

優格特別註明此版型的CSS [anise-janise] 是chil設計的喔,並不是優格本人,裡面優格稍加修改

還有每個CSS裡多少有些不一樣,優格不保證每個CSS一樣不過大同小異,大家一起來學這CSS火星文吧!(衝勁十足)

如果裡面有底圖網址那些請不要盜連

body{
text-align: center;　＞＞＞文章置中
background-color: #ffffff;　＞＞＞文章底色
padding-bottom: 0px;
font-size: 12px;　＞＞＞字體大小
font-family: "MS ゴシック",Osaka,;　＞＞＞字型
scrollbar-face-color: white;　＞＞＞捲軸顏色
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-3dlight-color: #444444;
scrollbar-arrow-color: skyblue;　＞＞＞捲軸箭頭顏色
scrollbar-track-color: #fff;
scrollbar-darkshadow-color: #444444;
cursor: url(．．．你的網路空間);　＞＞＞滑鼠指標}

br {
letter-spacing : normal;} 　＞＞＞文字間隔

#content {
width: 750px;
font-size: 12px;

}

#header {
width : 100%;
margin-top: 0px;
padding-top: 0px;
text-align: left;
}

#menu {　＞＞＞優格改這沒啥變化
font-size: 10px;
float : left;
margin: 30px 0px 0px 5px;
padding: 0px;
color: #888888;
text-align: left;
}

#main {　＞＞＞優格改這沒啥變化
float : left;
margin: 20px 5px 0px 5px;
padding: 0px;
text-align: left;
color: gray;
}

#footer {
clear : both;
width: 100%;
color: gray;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}

/*タイトル部分
------------------------------------------------------------*/

/*サイトタイトル*/

.site_title {　＞＞＞標準列標題
text-align: left;
font-size: 22px;　＞＞＞字體大小
font-family: Verdana,Osaka ;　＞＞＞字型
font-weight: bolder;
color: #ff6699;　
padding-top: 5px;
padding-left: 14px;
margin: 0px;
}

.site_title a{　＞＞＞超連結
color: #003366;
text-decoration:none;
}

.site_title a:hover {　＞＞＞滑鼠在連結上方
color: #003366;
text-decoration : underline;　＞＞＞底線
}

/*サイト説明文*/

.site_intro {　＞＞＞本站介紹＝description(banner下一行)
text-align: left;
margin-top: 15px;
font-size: 12px;
font-weight: normal;
color: #003366;
padding-right: 390px;
padding-left: 80px;
line-height : 150%;
letter-spacing: 3px;
}

/*カレンダー部分
------------------------------------------------------------*/

#calender {　＞＞＞月曆
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background-color: #ffffff;
}

#calender ul {
font-family: Arial, Geneva, Helvetica, sans-serif;　＞＞＞月曆字型
font-size: 12px;
list-style-position : inside;
}

#calender li {　＞＞＞尚未連結過的超連結
display : inline;
list-style-type : none;
color: #66ccff;
}

#calender li a{　＞＞＞拜訪過的連結
color: #444444;
text-decoration:none;
}

#calender li a:hover {　＞＞＞滑鼠在連結上方
background: #ff99cc;
text-decoration : underline;
}

li.day {
padding: 0px 3px 0px 2px;
}

.prev-month-calendar {　＞＞＞上個月份月曆
margin-right : 2px;
}

.next-month-calendar {　＞＞＞下個月份月曆
margin-left : 9px;
}

/*Table設定　＞＞＞表格設定-------------------------------------------------------------*/
.ruku{
vertical-align: center;　＞＞＞表格對齊
background-image:url("你要的背景底圖");　
background-attachment:fixed;　＞＞＞底圖固定
background-position:0% 65%;　＞＞＞底圖位置
background-repeat:no-repeat;　＞＞＞底圖不重覆
}

/*文字設定
------------------------------------------------------------*/

h2 { ＞＞＞連結標題
font-size: 14px;
color: #006699;
text-align: left;
text-decoration: none;
}

/* 自己紹介部分の画像
--------------------------------------------------*/

.pay img {　＞＞＞自介圖像
(基本上不用改這請去ｆｃ２環境設定裡的プロフィールの編集修改）
padding-left: 10px;
margin: 0px;

}

/* リスト設定（サイドメニュー）　　＞＞＞標準列------------------------------------------------------------*/

ul {
font-size: 12px;
text-align:center;
margin: 0px;
padding-left: 20px;
text-decoration: none;
list-style-type: circle;
}

li {　＞＞＞優格標準列的小圈圈
font-size: 12px;
text-align: left;
font-size: 12px;

line-height: 150%;　＞＞＞每行高度
padding: 0px 5px 5px 0px;
text-decoration: none;
}

li a {　＞＞＞正按下的連結font-size: 12px;
text-decoration: none;
color: #003366;
}

li a:hover {　＞＞＞滑鼠在連結上方
color: #003366;
text-decoration : underline;
}

/* 自己紹介用イメージ
------------------------------------------------------------*/

.pay {
text-align: center;
}

.pay img{
background: #fff;
border: 0px solid #666;
margin: 0px 0px 0px 0px;
padding: 0px;
}

/*エントリー
--------------------------------------------------*/

/*エントリーテーブル（1ブロック）*/

.entry_table{
width: 500px;
margin: 0px 10px 50px 0px;
}

/*エントリー：ナビゲーション*/　＞＞＞分頁標題文字ex：ｈｏｍｅ

.entry_navi{　
font-size: 12px;
text-align:center;
}

.entry_navi a {　
font-size: 12px;
color: #6699cc;
text-decoration:none;
}

.entry_navi a:hover {
color: #6699cc;
text-decoration : underline;
}

/*エントリー：見出し*/　　＞＞＞文章標題.回應.引用欄標題

.entry_title{
height: 20px;
valign: center;　
font-size: 15px;
font-weight: nomal;　＞＞＞自體粗細
color: #006699;　＞＞＞自體顏色
text-align: left;　＞＞＞往左對齊
margin: 2px 0px 0px 15px;
padding-top: 0px;
padding-left: 3px;
padding-bottom: 0px;　＞＞＞文章底線
border-bottom: dashed 1px #6699cc;　＞＞＞文章邊緣的底線[dashed虛線．solid實線． dotted點．double雙實線]
}

/*エントリー：テキスト*/

.entry_text {　
font-size: 12px;
color: #003366;　＞＞＞文章內容字體顏色
margin: 10px 20px 15px 20px;
line-height : 180%;
letter-spacing: 2px;
}

.entry_text a {　　＞＞＞進入文章（ｅｘ：繼續閱讀）
font-size: 12px;
color: #003366;　
text-decoration:none;
}

.entry_text a:hover {　　＞＞＞滑鼠在連結上
color: #003366;
text-decoration : underline;
}

/*エントリー：ステータス（日付等）*/

.entry_state {　＞＞＞文章日期
font-size: 11px;
color: #003366;
text-align: right;
}

.entry_state a {　＞＞＞文章最下方回應．引用的
font-size: 11px;
color: #003366;
text-decoration:none;
}

.entry_state a:hover {　＞＞＞文章最下方回應．引用滑鼠在連結上
color: #003366;
text-decoration : underline;
}

#pagetop { margin: 0px 0px 0px 0px;}

/*テキスト内の画像*/

.entry_text img {
background: #fff;
border: 1px solid #444;
margin: 0px 0px 0px 0px;
padding: 0px;
}

/*フッター　＞＞＞網頁最下方（ｅｘ：copyright © 2005 甜甜圈小舖）---------------------------------------------------------*/

#footer a {　＞＞＞超連結
color:#6699cc;
text-decoration:none;
}

#footer a:hover {　＞＞＞滑鼠在連結上方color:#003366
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝另加（小倩教的）
＞＞＞這是優格有裝MyblogList,你會發現不一定跟你版面文字顏色一致這時就麻煩自己去修改顏色
*優格發現這的顏色修改連回應.引用欄的標題顏色都會跟著改變喔

a{
test-decoration:none;
color:#6699CC;
cursor: url(網頁空間);　＞＞＞優格的滑鼠指標
}

a:hover{
color:#6699cc;
test-decoration:underline;
cursor: url(網頁空間);　＞＞＞優格的滑鼠指標

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝另加（Ｅｌｉａ教的）
＞＞＞想要在回應框框裡加入圖片要放入下列語法

TEXTAREA {BORDER-RIGHT: #FF6699 1px solid; BACKGROUND-POSITION: right 50%; BORDER-TOP: #FF6699 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #FF6699 1px solid; COLOR: #000000; BORDER-BOTTOM: #FF6699 1px solid;}

TEXTAREA {border:1px dashed #FF6699; FONT-SIZE: 10pt; BACKGROUND-IMAGE: url(你的圖片); BACKGROUND-REPEAT: no-repeat;}

寫的蠻亂的,是照優格的意思翻出來的
如果有錯或看不懂麻煩提出來

雖然不是啥了不起的教學文,但還是希望有人派的上用場
請勿抄襲

【2005/10/01 15:37】雜貨小櫃 | TB(0) | CM(8) |

<<晚餐 | Home | 色狼&變態的定義??>>

本文相關回應

噗～
有妳的稱ｃｓｓ為火星文
謝謝優格提供教學　　明天我也來研究一下
　

【2005/10/02 00:15】 URL | 兔小Ｑ #-[ 編集]

＞＞＞有妳的稱ｃｓｓ為火星文

哈哈...那是因為之前都看不懂CSS的語法,對我來說它就像火星文一樣難懂
不過研究它以後並沒有我想像中那麼難

【2005/10/02 12:19】 URL | 優格 #-[ 編集]

我來踢館了XDDD
沒有啦,裡面有一點點地方幫你註解了^^;

---------------------------------
body{
text-align: center;　＞＞＞文章置中
＊字置中,但如果底下還有其他文字對齊設定的話,這個其實只能説拿來當CSS整頁對齊用的語法。

background-color: #ffffff;　＞＞＞文章底色
＊是整個blog的背景喔,通常這一塊在整個文章還有選單的最底層。
到底是哪一層咧？拿你現在用的版型來説,把它改成#999999,你會發現你現在有圖片跟文字的這個大圓角框框外面整片都是灰的,這樣能懂嗎？

padding-bottom: 0px;
＊padding-內框
＊algin-外框

選軸顏色的話可以直接交給捲軸產生器來調整~:)
http://dob.tnc.edu.tw/themes/old/showPage.php?s=289&t=2&at=
(來自網站建置百寶箱的好東西)
}

br {
letter-spacing : normal;} 　＞＞＞文字間隔
＊這邊或許也可以說是段落之間的間隔

/*主要內容(menu+文章部份)*/
#content {
width: 750px;
＊寬度

font-size: 12px;
}

/*blog的名字跟介紹文那一塊(通常叫做banner)*/
#header {
width : 100%;
margin-top: 0px;
padding-top: 0px;
text-align: left;
}

/*menu選單那整塊*/
#menu {　＞＞＞優格改這沒啥變化

float : left;
＊浮動靠左,所以會變成選單在左。

margin: 30px 0px 0px 5px;
＊外框的寬度。

padding: 0px;
＊沒有內框

color: #888888;
＊字體的顏色

text-align: left;
＊文章或圖片靠左對齊。
}

/*文章那整塊*/
#main {　＞＞＞優格改這沒啥變化
float : left;
margin: 20px 5px 0px 5px;
padding: 0px;
text-align: left;
color: gray;
}

/*在文章跟menu的最下面那一塊,通常拿來放著作權之類的宣告文字*/
#footer {
clear : both;
width: 100%;
color: gray;
font-size: 11px;
letter-spacing: 1px;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 10px;
}

/*タイトル部分(最上面的blog名&介紹部份那一塊,也就是banner)
------------------------------------------------------------*/

/*サイトタイトル*/
.site_title {　＞＞＞標準列標題
＊blog名的相關設定。

text-align: left;
font-size: 22px;　＞＞＞字體大小
font-family: Verdana,Osaka ;　＞＞＞字型
font-weight: bolder;
＊粗體字

color: #ff6699;　
padding-top: 5px;
padding-left: 14px;
margin: 0px;
}

/*blog名的超連結設定*/
.site_title a{　＞＞＞超連結
＊普通的超連結狀態(沒用滑鼠碰)
color: #003366;
text-decoration:none;
}

.site_title a:hover {　＞＞＞滑鼠在連結上方
＊把滑鼠移到連結上的變化

color: #003366;
text-decoration : underline;　＞＞＞底線
}

/*サイト説明文*/

.site_intro {　＞＞＞本站介紹＝description(banner下一行)
text-align: left;
margin-top: 15px;
font-size: 12px;
font-weight: normal;
color: #003366;
padding-right: 390px;
padding-left: 80px;
line-height : 150%;
letter-spacing: 3px;
}

/*カレンダー部分
------------------------------------------------------------*/
#calender {　＞＞＞月曆
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
background-color: #ffffff;
}

#calender ul {
font-family: Arial, Geneva, Helvetica, sans-serif;　＞＞＞月曆字型
font-size: 12px;
list-style-position : inside;
}

#calender li {　＞＞＞尚未連結過的超連結
display : inline;
list-style-type : none;
color: #66ccff;
}

#calender li a{　＞＞＞拜訪過的連結
color: #444444;
text-decoration:none;
}

#calender li a:hover {　＞＞＞滑鼠在連結上方
background: #ff99cc;
text-decoration : underline;
}

li.day {
padding: 0px 3px 0px 2px;
}

.prev-month-calendar {　＞＞＞上個月份月曆
margin-right : 2px;
}

.next-month-calendar {　＞＞＞下個月份月曆
margin-left : 9px;
}

/*Table設定　＞＞＞表格設定-------------------------------------------------------------*/
.ruku{
vertical-align: center;　＞＞＞表格對齊
background-image:url("你要的背景底圖");　
background-attachment:fixed;　＞＞＞底圖固定
background-position:0% 65%;　＞＞＞底圖位置
background-repeat:no-repeat;　＞＞＞底圖不重覆
}

/*文字設定
------------------------------------------------------------*/

h2 { ＞＞＞連結標題
＊menu每個項目的title,例如:"ENTRY","ARCHIVE"這類...

font-size: 14px;
color: #006699;
text-align: left;
text-decoration: none;
}

/* 自己紹介部分の画像
--------------------------------------------------*/

.pay img {　＞＞＞自介圖像
(基本上不用改這請去ｆｃ２環境設定裡的プロフィールの編集修改）
＊有的可能會幫你加框之類,如果不想要可以取消掉"border"這段

padding-left: 10px;
margin: 0px;

}

/* リスト設定（サイドメニュー）　　＞＞＞標準列------------------------------------------------------------*/
＊menu裡面每段項目的設定,
例如說:
最新的文章
"★我今天的行程(10/03)"
"★明天...(10/02)"
"★哈哈哈(10/01)"
這種一列一列的文字。

ul {
＊一整段的設計。參考上面,從『★我今天的行程...～...哈哈哈(10/01)』這裡叫做一個段落。

font-size: 12px;
text-align:center;
margin: 0px;
padding-left: 20px;
text-decoration: none;
list-style-type: circle;
＊每一項前面會出現一個圈圈。(square是方塊)
}

li {　＞＞＞優格標準列的小圈圈
＊整段裡面每一排字的設計。參考上面,『★我今天的行程(10/03)』這叫做一排。

font-size: 12px;
text-align: left;
line-height: 150%;　＞＞＞每行高度
padding: 0px 5px 5px 0px;
text-decoration: none;
}

/*每一排字的超連結設計*/
li a {　＞＞＞正按下的連結
font-size: 12px;
text-decoration: none;
color: #003366;
}

li a:hover {　＞＞＞滑鼠在連結上方
color: #003366;
text-decoration : underline;
}

/* 自己紹介用イメージ
(怪了,上面不是寫過了嗎@@",如果兩邊設計不一樣會衝突到喔)------------------------------------------------------------*/

.pay {
text-align: center;
}

.pay img{
background: #fff;
border: 0px solid #666;
margin: 0px 0px 0px 0px;
padding: 0px;
}

/*エントリー
/*文章設計*/--------------------------------------------------*/

/*エントリーテーブル（1ブロック）*/
/*一篇文章的框架*/

.entry_table{
width: 500px;
margin: 0px 10px 50px 0px;
}

/*エントリー：ナビゲーション*/　＞＞＞分頁標題文字ex：ｈｏｍｅ
.entry_navi{　
font-size: 12px;
text-align:center;
}

.entry_navi a {　
font-size: 12px;
color: #6699cc;
text-decoration:none;
}

.entry_navi a:hover {
color: #6699cc;
text-decoration : underline;
}

/*エントリー：見出し*/　　＞＞＞文章標題.回應.引用欄標題

＊這裡只有設定了文章標題而已喔！

.entry_title{
height: 20px;
valign: center;　
font-size: 15px;
font-weight: nomal;　＞＞＞字體粗細
color: #006699;　＞＞＞字體顏色
text-align: left;　＞＞＞往左對齊
margin: 2px 0px 0px 15px;
＊外框

padding-top: 0px;
padding-left: 3px;
padding-bottom: 0px;　＞＞＞文章底線
＊內框的底部,0就是緊貼者底部。

border-bottom: dashed 1px #6699cc;　＞＞＞文章邊緣的底線[dashed虛線．solid實線． dotted點．double雙實線]
＊文章title的底線。}

/*エントリー：テキスト*/
/*文章內文*/

.entry_text {　
font-size: 12px;
color: #003366;　＞＞＞文章內容字體顏色
margin: 10px 20px 15px 20px;
line-height : 180%;
letter-spacing: 2px;
}

.entry_text a {　　＞＞＞進入文章（ｅｘ：繼續閱讀）
＊文章內所有超連結,包含繼續閱讀的超連結。

font-size: 12px;
color: #003366;　
text-decoration:none;
}

.entry_text a:hover {　　＞＞＞滑鼠在連結上
color: #003366;
text-decoration : underline;
}

/*エントリー：ステータス（日付等）*/

.entry_state {　＞＞＞文章日期
＊文章日期,引用,回應...等等那一排。

font-size: 11px;
color: #003366;
text-align: right;
}

.entry_state a {　＞＞＞文章最下方回應．引用的
＊文章日期,引用,回應...那排的超連結。

font-size: 11px;
color: #003366;
text-decoration:none;
}

.entry_state a:hover {　＞＞＞文章最下方回應．引用滑鼠在連結上
color: #003366;
text-decoration : underline;
}

/*回頁首(pagetop,跳到頁面最上方)那塊文字的設計*/
#pagetop { margin: 0px 0px 0px 0px;}

/*テキスト内の画像*/
/*文章內的任何圖片*/

.entry_text img {
background: #fff;
border: 1px solid #444;
＊border:加框,background:底色為白色。

margin: 0px 0px 0px 0px;
padding: 0px;
＊以上兩個設定會使圖片緊貼著文章的字。

}

/*フッター　＞＞＞網頁最下方（ｅｘ：copyright © 2005 甜甜圈小舖）---------------------------------------------------------*/

#footer a {　＞＞＞超連結
color:#6699cc;
text-decoration:none;
}

#footer a:hover {　＞＞＞滑鼠在連結上方color:#003366
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝另加（小倩教的）
＞＞＞這是優格有裝MyblogList,你會發現不一定跟你版面文字顏色一致這時就麻煩自己去修改顏色
*優格發現這的顏色修改連回應.引用欄的標題顏色都會跟著改變喔
＊底下這些是整個頁面所有的超連結設計,如果上面沒有特別設定到的,都會套用以下的設計。

a{
test-decoration:none;
color:#6699CC;
cursor: url(網頁空間);　＞＞＞優格的滑鼠指標
}

a:hover{
color:#6699cc;
test-decoration:underline;
cursor: url(網頁空間);　＞＞＞優格的滑鼠指標

}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝另加（Ｅｌｉａ教的）
＞＞＞想要在回應框框裡加入圖片要放入下列語法
＊其實只要加以下幾個進去就好了

TEXTAREA {
BACKGROUND-POSITION: 90% 90%;
/*圖片位置,如果夠大這段就不用,不夠大想放個位置就用百分比的,90% 90%是右下角*/

BACKGROUND-IMAGE: url(你的圖片);
BACKGROUND-REPEAT: no-repeat;
/*不夠大不想重複,想重複就用repeat*/
}

加油啦~^_^
我的舊站那裡有幾個介紹CSS基本語法的網頁可以去看看囉:)

【2005/10/03 20:24】 URL | yuu #iPZstahc[ 編集]

謝謝優格的教學文，還有謝謝樓上yuu大大的說明，受益良多^^

【2005/10/03 23:59】 URL | 甜 #-[ 編集]

謝謝yuu喔
果然薑是老的辣,yuu真是厲害幫我補充了很多我沒注意的地方
我還有很多地方要多跟yuu學呢!還希望到時你不要覺得我煩才是