甜甜圈小舖
生命就該浪費在美好的事務上             

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
【--/--/-- --:--】 スポンサー広告 | TB(-) | CM(-) |

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 { >>>自介圖像
(基本上不用改這請去fc2環境設定裡的プロフィールの編集修改 )

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:home

.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 {  >>>進入文章(ex:繼續閱讀)
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;
}



/*フッター >>>網頁最下方(ex: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(網頁空間); >>>優格的滑鼠指標

}

======================另加(Elia教的)
>>>想要在回應框框裡加入圖片要放入下列語法

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(6) |
<<晚餐 | Home | 色狼&變態的定義??>>

本文相關回應

噗~
有妳的稱css為火星文
謝謝優格提供教學  明天我也來研究一下
 
【2005/10/02 00:15】 URL | 兔小Q #-[ 編集]
>>>有妳的稱css為火星文

哈哈...那是因為之前都看不懂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 { >>>自介圖像
(基本上不用改這請去fc2環境設定裡的プロフィールの編集修改 )
*有的可能會幫你加框之類,如果不想要可以取消掉"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:home
.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 {  >>>進入文章(ex:繼續閱讀)
*文章內所有超連結,包含繼續閱讀的超連結。

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;
*以上兩個設定會使圖片緊貼著文章的字。

}



/*フッター >>>網頁最下方(ex: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(網頁空間); >>>優格的滑鼠指標

}

======================另加(Elia教的)
>>>想要在回應框框裡加入圖片要放入下列語法
*其實只要加以下幾個進去就好了

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學呢!還希望到時你不要覺得我煩才是i-230
【2005/10/04 09:56】 URL | 優格 #-[ 編集]
我還很多地方沒學的專精,說什麼教學文充其量只是給自己看而已(汗)
yuu很害人也很熱心喔!甜我們一起來學習吧v-425
【2005/10/04 09:58】 URL | 優格 #-[ 編集]

寫回應











(有先預設才能再修改喔!!)

只想給優格看請打勾

trackback

MOMO報時

INFOMATION

  優格

  • 優格
  • B型獅子座
    喜歡看電影.日劇.韓劇
    很怕一個人看恐怖片
    每天一定要吃宵夜才能入睡
    很愛可樂卻又怕胖 囧|||

  • 管理者入口
  • 留言板
  • RSS
  • ENTRIES

  • 不要再吃了(03/24)
  • 總是(03/21)
  • 此K非K(03/13)
  • 決戰異世界 (03/13)
  • 2006.03.12燒肉形(03/13)
  • 2006.03.10(03/11)
  • 傲慢與偏見(03/11)
  • COMMENTS

  • Janet Watson:小小改。(06/23)
  • Kirby Mckenzie:小小改。(06/18)
  • Shana Norton:小小改。(06/16)
  • Kayla Larsen:小小改。(06/14)
  • Vaughn Kidd:小小改。(06/09)
  • Angeline Boone:小小改。(06/08)
  • Dean Manning:小小改。(06/05)
  • Frances Gilbert:小小改。(06/02)
  • Jeannette Hensley:小小改。(06/01)
  • 李松霖油畫家:缺血了=_=+。(02/27)
  • 李松霖油畫家:缺血了=_=+。(02/27)
  • Oppers:No.517。(12/12)
  • Bassor:No.517。(12/12)
  • Bush:No.517。(12/12)
  • Gleb:No.517。(11/09)
  • ARCHIVES

  • 2006年03月 (10)
  • 2006年02月 (17)
  • 2006年01月 (29)
  • 2005年12月 (20)
  • 2005年11月 (27)
  • 2005年10月 (29)
  • 2005年09月 (42)
  • 2005年08月 (43)
  • 2005年07月 (26)
  • CATEGORY

  • 私の心情日記 (84)
  • 私の吃喝玩樂 (14)
  • 私の愛亂搞 (10)
  • 私のmero寶貝 (25)
  • about時事 (10)
  • about電視或電影 (22)
  • about音樂♬° (9)
  • 興趣book (5)
  • 新鮮事 (16)
  • 聊區 (16)
  • 公告 (11)
  • 分享小櫃 (9)
  • 星座小櫃 (10)
  • 雜貨小櫃 (2)
  • 未分類 (0)
  • MY LIST



    OTHER


    瘋狂笑花
    持續點蓮蓬頭澆花

    LINKS

    歡迎跟優格交換連結
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。