【邊框語法】 .side img {border: 6px double #------;}
【直立式連結列】 .sidetitle {
padding:0px; background:none; POSITION: absolute; TOP:0px; LEFT:0px; WIDTH: 140px; COLOR: #fff; TEXT-ALIGN: left;
}
.sidetitle a {color:#ff6699;
display:block!important;/*讓連結分別跳下一行*/
LETTER-SPACING:none;/*文字與文字之間沒有間距*/
margin-top:-15px;/*連結與連結之間上下的距離*/}
【隱藏容量】
b font.small-c {visibility: hidden;}
b font.small-c a {visibility: visible;}
【 00張相片字體顏色】 TD FONT.small-c {
FONT-WEIGHT: normal; COLOR: #--------
}
font-weight (字體份量): normal(正常體) 、bold(粗體)
【相簿版面置右】 body {margin-left: **px;}
【隱藏照片張數】
td b font.small-c {visibility: hidden;}
td b font.small-c a {visibility: visible;}
【隱藏人氣】
font.small-c {visibility:hidden}
font.small-c a{visibility:visible}
【把[ ]隱藏】
.sidetitle font.small-c{visibility:hidden;}
【消除連結列的底線】
a:hover{text-decoration:none;}
【照片名稱的顏色】
.small-e {color:#------;}
【好友名單靠左】
.sidetitle font.small-c a{margin-top:-10px;}
【連結列往左移】
.text-align:left
【照片名稱顏色】
.side font.small-c {color:#------}
【隱藏好友連結框框】
select {position: absolute; left: **px; top: **px; clip: rect(2px 60px 17px 2px);}
left: **px; top: **px; 中 ** 是數字 看你要把它放到哪就放哪
2px 60px 17px 2px 這四個數字是切邊 切不滿意請自行微調
【移動相簿分類】
#category {posiiton: absolute; top: **px; left: **px;}
【相本邊框】
.side a img{border:5px double #--------- ;}
【連結列和好友名單並列】
.sidetitle font.small-c {display:block}
【累積人氣換位置】
font.small-c {display:block ; text-align:center}
【相簿描述加框】
.description {border: **px solid #------; letter-spacing: **px;}
【相簿描述顏色】
.description {color:#------;}
【照片主題不要粗體字】
font.normal-c b {font-weight:normal}
【好友名單底色】
select {background-color:#-------}
【好友名單字體】
span.small-c select {font-family:Comic Sans Ms}
【立體浮凸框】
a:hover img { border: 2px #fff outset; background: #-----;}
【框框[ ]顏色】
.sidetitle font.small-c {color:#------}
【隱藏ＲＳＳ＂的連結】
.syndicate{display:none}
【隱藏 密碼鎖 】
font.small-c img {display: none;}
【更換密碼鎖的圖片】
font.small-c img {background:url(圖片網址);}
【移動連結列】
.sidetitle {width:auto;position:absolute;left:0px;top:100px}
(紅色部分可自改)
【去除所有粗體字】
任何的 FONT-WEIGHT: bold; 刪除
【隱藏 好友的相簿 下拉選單】
select{display:none}
【寬度縮小】
table {width: **px;}
【字體底色】
A {background-color: #------}
【描述字體大小】
.small-e {font-size: **px;}
【連結列改圖示】
.sidetitle {color: #------; font-size: 0px; background: url(底圖網址) ~~~;}
.sidetitle a {color: #------; font-size: 0px; height: **px; width: **px;}
【密碼提示字色】
center {color: #-------;}
【滑鼠移到所有的連結 連結會動一下】
a:hover { position:relative;top:1px;left:1px;}
【滑鼠移到相片連結會動一下】
.side a:hover { position:relative;top:1px;left:1px;}
【相本描述改底色】
.description { BACKGROUND: #000; }
要變透明將紅色的地方換成none
【相簿分類 地點 類別 改顏色】
td.sidetitle div.small-c {color: #------}
【XX的相簿XX改顏色 】
#banner font.normal-a {color:#------;}
【連結列的大小】
.sidetitle {width:**px;height:**px}
【連結列變圖片選單】
.sidetitle {color: #------; font-size: 0px; background: url(底圖網址) ~~~;}
.sidetitle a {color: #-----; font-size: 0px; height: **px; width: **px;}
【相簿整體的外圍加邊框】
body {border: 20px solid #------;}
【滑鼠移到文字時的底色】
A:hover {
BACKGROUND-COLOR: #------;
}
【相簿和字距高度】
.sidetitle {padding-bottom: **px;}
【改變連結列顏色ex:XX相本】
.sidetitle {color: #-----;}
【相簿的名稱改顏色】
b font.small-c a {color: #------;}
【改xxxxx 的相簿>xxxxx 顏色】
.normal-a {color: #------ !important; font-size: ~~;}
【相簿點進去呈現另一種背景】
#body_show {background: url(圖片網址) ~~;}
【消除無名小站/會員登入/免費註冊】
#logo{display:none !important;}
.powered{display: none !important;}
【連結列往右邊移】
.sidetitle {
position:absolute;
top:10px;
right:500px;
}
.sidetitle a {
display:block !important;
}
【連結字體變小】
.sidetitle a {font-size: 10pt;}
【字體變細改字型】
b font.small-c{
font-weight:normal ;
font-family:"字型名稱" ;
}_________________
【隱藏連結列ex:xx相簿.xx..】
.sidetitle {display: none;}
【封面相片下方對齊 】
.side {vertical-align: bottom;}
【相簿主題不要有底線】
a{TEXT-DECORATION: none;}
【好友的相簿欄變窄】
.sidetitle select {width: **px;} (**填上數字)
【滑鼠碰到標題大小會變】
原連結字體大小
#banner A {FONT-SIZE: **px;}
滑鼠滑過後字體大小
#banner A:hover {FONT-SIZE: **px;} (**填上數字)
請在banner這的連結做變動即可。
【連結列前加上小圖】
.sidetitle a:hover {background: url(圖片網址) left center no-repeat; padding-left: **px;}
【消除RSS的橘色小框框】
.syndicate {display:none;}
【相片框框的寬度 】
table {width: 500px;}
【拉近相簿框跟相簿名稱的距離】
td.side {position: relative; top: **px;} (**填上數字)
留言版常用語法
【顯示好友名單】
刪掉:select{display:none;}
此語法也會顯示搜尋列
【輸入留言的那一區域的顏色】
form.side{color:#------;}
【悄悄話的黃色鎖拿掉】
.side img {display: none;}
.side a img {display: inline;}
【留言筆數隱藏】
span.description{display: none;}
【留言輸入區塊輸入字體的顏色 】
form textarea {color: #------;}
【把[ ]拿掉(改成底色)】
#menu span{color:#------}
【將「我要留言」變色 】
#postmsg a{color:#------}
【改留言者的留言顏色 】
.side{color:#------;font-size:**px;}
【改版主回復的留言顏色和大小】
.replyside{color:#------;font-size:**px;}
【改輸入留言區的背景】
form textarea{background:url(圖片網址) no reapeat top left}
【改「我要留言」內的留言版標題顏色和大小】
.big-e{color:#------;font-size:**px;}
【拿掉VIP的圖案】
.vip_icon{display:none;}
【把「留言板開放中」隱藏起來】
div{color:#------;}
【把登入區的圖案拿掉】
#logo img{display:none;}
【把「登入」的字樣拿掉】
div #logo{display: none!important;}
【將嵌入的音樂讓他「隱身」 】
embed{display:none;}
【RSS隱藏掉】
.syndicate {display: none;
這是所有都通用(相簿/網誌/留言版)
【留言框框怎麼縮小】
table {width: 355px;}
【留言版描述如何置左】
.description {text-align: left;}
【好友名單的背景顏色】
SELECT {
BORDER-RIGHT: #CC66CC 1px solid; BORDER-TOP: #CC66CC 1px solid; FONT-SIZE: 11px; BACKGROUND: #CC66CC; BORDER-LEFT: #CC66CC 1px solid; COLOR: #-----; BORDER-BOTTOM: #------ 1px solid; FONT-FAMILY: verdana, arial,sans-serif
}
第一個#-----是背景顏色
第二個#-----是字的顏色
【留言內容"框框 改大小和透明度】
form textarea{width:**px;height:**px;filter:alpha(opacity=**);}
【留言內容置中】
.side,.replyside {text-align:center}
【連結列直放】
#menu span a {display:block !important}
【留言自動斷行】
td,div {word-break:break-all}
【我要留言點進去後回覆欄位加寬】
form textarea{width:**px;overflow:auto;height:**px;overflow-x:hidden;}
這樣設的話，寬度可增加/減少
捲軸卻不會出現，高度也可增加/減少
捲軸會出現，最多可以留言1000字
網誌常用語法
【移到連結旁會出現小圖】
a:hover{background:url(圖片網址);}
【側篇欄位全細體字】
#links{font-weight:normal;}
【回應文章區加入捲軸】
#boxNewComment .boxNewComment1 {margin-bottom: 20px;
height: 160px;
overflow: auto;
SCROLLBAR-FACE-COLOR: #E0F3FF;
SCROLLBAR-HIGHLIGHT-COLOR: #E0F3FF;
SCROLLBAR-SHADOW-COLOR: #E0F3FF;
SCROLLBAR-3DLIGHT-COLOR: #D6EFFF;
SCROLLBAR-ARROW-COLOR: #FFF;
SCROLLBAR-DARKSHADOW-COLOR: #D6EFFF;
SCROLLBAR-TRACK-COLOR:#D6EFFF;
}
【資料夾加入捲軸】
#boxFolder .boxFolder1
{margin-bottom: 20px; height: 160px;
overflow: auto; SCROLLBAR-FACE-COLOR: #E0F3FF; SCROLLBAR-HIGHLIGHT-COLOR: #E0F3FF;
SCROLLBAR-SHADOW-COLOR: #E0F3FF; SCROLLBAR-3DLIGHT-COLOR: #D6EFFF; SCROLLBAR-ARROW-COLOR: #FFF; SCROLLBAR-DARKSHADOW-COLOR: #D6EFFF;
SCROLLBAR-TRACK-COLOR:#D6EFFF;
}
【網誌最新文章部分加捲軸】
.boxNewArticle1 {
height: 220px; overflow: auto; /*設定高度 */
scrollbar-arrow-color: #-----; /*箭頭的顏色*/
scrollbar-face-color: #-----; /*軸面顏色*/
scrollbar-track-color: #-----; /*軸軌的顏色*/
scrollbar-3dlight-color: #-----; /*左立體邊顏色 */
scrollbar-highlight-color: #-----; /*軸面三角左邊顏色 */
scrollbar-shadow-color: #-----; /*軸面三角右邊顏色 */
scrollbar-darkshadow-Color: #-----;} /*右立體面顏色 */
【網誌最新引用部分加捲軸】
.boxNewTrackback1{
height: 220px; overflow: auto; /*設定高度 */
scrollbar-arrow-color: #-----; /*箭頭的顏色*/
scrollbar-face-color: #-----; /*軸面顏色*/
scrollbar-track-color:#-----; /*軸軌的顏色*/
scrollbar-3dlight-color: #-----; /*左立體邊顏色 */
scrollbar-highlight-color: #-----; /*軸面三角左邊顏色 */
scrollbar-shadow-color: #-----; /*軸面三角右邊顏色 */
scrollbar-darkshadow-Color: #-----;} /*右立體面顏色 */
【網誌訪客回應區擺圖片】
.comments-body {
BORDER-RIGHT: #726352
1px solid; BORDER-TOP: #726352
15px solid; FONT-SIZE: 10px;
BACKGROUND: url(http://pic2.pic.wretch.cc/photos/10/
b/blue73623/4/1932444342.jpg) no-repeat 5% 50%; MARGIN: 0px 20px 20px 30px; BORDER-LEFT: #726352 1px solid; WIDTH: 400px; BORDER-BOTTOM: #726352 1px solid
}
【網誌的個人照片移掉】
.boxMySpaceImg{display: none;}
【讓網誌的"搜尋網路這個文章"不見】
#boxSearch {display: none;}
【讓"酷比"(搜尋)消失 】
#scupioSearch,
.scupioSearch0,
.scupioSearch1 {display:none}
【把"相簿播放"移掉】
#boxSlideShow{display:none;}
【把無名的LOGO拿掉】
.powerlogo{display:none;}
【 整個登入區塊都拿掉】
.powered{display: none;}
【最新的文章"字體顏色】
.boxNewArticle1 a {color: #------;}
【改連結列顏色】
#boxMySpace .boxMySpace1 .side #service ul a{color: #------; }
【改by ~~ 那些字的顏色 】
.boxNewComment1 .side {color: #------;}
【改 RE: ~~~ 那些字的顏色】
boxNewComment1 .side a {color: #------;}
【把我的訂閱移掉】
#boxRssList{display:none;}
【 刪除"行事曆"】
div.calendar a {display: none;}
【隱藏參觀人氣】
#boxCounter {display: none;}
【加入好友"移掉】
li.boxAddFriendLink a{display:none;}
【將"給禮物"移掉】
li.boxGiftLink a{display:none;}
前面的點用li.boxGiftLink{display:none;}可消掉
【給個回應插入圖片當背景】
.blogbody textarea{ background:url('圖片網址') ; }
【最新文章的鎖拿掉】
.boxNewArticle1 img {display: none;}
【最新回應的鎖拿掉】
.boxNewComment1 img{display:none;}
【文章上的鎖拿掉】
.title img {display: none;}
【消除連結底線】
a:hover{text-decoration:none;}
【隱藏好友】
#boxProfile select {display:none}
【文章內容字色】
.innertext {font-family:"字體名稱";color:#-----}
【回應內容改背景圖片】
.blogbody textarea{ background:url('圖片網址') ; }
【連結無底線 】
a{text-decoration:none ; }
【網誌分類"更改顏色】
#boxProfile .side {COLOR: #ffffff }
【月曆上面數字的顏色】
.calendar a {color:#------;} "行事曆"
.calendarhead a {color:#------;} 月&年
.calendar tr th .calendar{color:#------;} 星期幾
.calendar span {color:#------;} 日
.calendar td a {color:#------;} 連結 (有寫網誌的那幾天)
.calendar td a:hover {color:#------;} 滑鼠移過去時的連結
【好友連結寬度】
SELECT {WIDTH: **px}
【給個回應"換底色】
.blogbody textarea{ background:#----; }
【給個回應內容改字色】
#text{color:#-----;}
【文章標題的字改小】
.title {
FONT-SIZE: **px! important;
}
【累積人氣移位置】
#boxCounter .boxCounter1 .side {position:absolute;top:20px;}
(紅色部分可自改)
【修改繼續閱讀字體大小】
.blogbody .extended a{font-size:11px !important ;}
(紅色部分可自改)
【點繼續閱讀後文章名稱修改位置】
position:relative
【最新文章改成圖案】
#boxNewArticle {
BACKGROUND: url('圖片網址') no-repeat 30% 0%; PADDING-TOP: 25px; HEIGHT: 160px;PADDING-LEFT: 5px}
【最新回應改成圖案】
#boxNewComment {
BACKGROUND: url('圖片網址') no-repeat 30% 0%;PADDING-TOP: 25px; HEIGHT: 50px; PADDING-LEFT: 5px}
【文章分類改成圖案】
#boxCategory {
BACKGROUND: url('圖片網址') no-repeat 30% 0%; PADDING-TOP: 25px; HEIGHT: 110px; PADDING-LEFT: 5px}
h2 .description{
position:absolute ;
top:0px ;
left:0px;
}
這將會以banner的左上角為起始點開始計算距離
【回應區隱藏後面的by:....】
#boxNewComment .side {visibility:hidden}
#boxNewComment .side a{visibility:visible}
【月曆連結的字色】
span.calendar {color: #------;}
【改變人氣統計的顏色】
#boxCounter .boxCounter1 .side {color: #------;}
【改變分類人氣統計的顏色】
#boxCategory .boxCategory1 .side {color: #------;}
【指定文章內連結顏色】
.innertext a{color:#------}
【連結列消失】
#boxProfile {DISPLAY: none}
【改按鈕顏色】
input{background:#------;}
【回應欄變色】
.extended{color:#123456 ;}
.extended a{color:#123456 !important;}
.comments-body form{color:#123456 ;}
【文章內容標籤】
.articletext .innertext {
【繼續閱讀】
.extended a, .extended a:visited {color: #000;}
【改首頁密碼提示的顏色】
.innertext form {color:#------}
【整個網誌往下移】
.blog {margin-top:200px}
【播放中的相簿:XXXXX"
刪除??】
#boxSlideShow{display:none;}
【網誌連結字變大置】
#links a {font-size:14px}
【網誌當日人次和累積人次可以改放在上面嗎?】
#boxCounter{position:absolute;left:**px;top:**px;}
【網誌全部細體字】
.innertext {font-weight:normal;}
.innertext strong{font-weight:normal;}
.innertext a{font-weight:normal;}
【測邊連結有底色】
#menu a{display:block;background:#------;color:#------;}
#menu a:hover{background:#fff;color:#------;}
【移到連結會出現一個圖案 】
a:hover{background:url(圖片網址) no-repeat fixed left top;}
【側編回應區字體變細】
#links{font-weight:normal;}
【側編回應區字體變粗】
#links{font-weight:bold;}
【無名LOGO改圖】
.powered .powerlogo {
DISPLAY: block; BACKGROUND: url(圖片網址); WIDTH: **px; HEIGHT: **px
}
【測邊欄位移到連結出現圖案】
#links A:hover {
PADDING-LEFT: 12px; BACKGROUND: url(圖片網址) fixed no-repeat left center; COLOR: #----}
【訪客回應部分加入圖片】
.comments-body {
BORDER-RIGHT: #cc0000 0px solid; BORDER-TOP: #ffb9c3 5px solid; FONT-SIZE: 10px; BACKGROUND: url(圖片網址) no-repeat left top; BORDER-LEFT: #ce0031 0px solid; WIDTH: 400px; BORDER-BOTTOM: #ffb9c3 15px solid
}
【訪客回應部分字靠左靠右】
.comments-body P {
PADDING-LEFT: **px (**填數字,,)
}
【改回應區內容圖案】
.blogbody TEXTAREA {
BACKGROUND: url(圖片網址)
}
語法貼在哪裡？
網誌：【樣式管理】→【修改css樣式表】→將複製的語法貼在最下面→【存檔】
相本：【樣式管理】→【修改css樣式表】→將複製的語法貼在最下面→【存檔】
留言板：【樣式管理】→【修改css樣式表】→將複製的語法貼在最下面→【存檔】
目前分類：【blog】CSS教學 (4)
- Jun 01 Fri 2007 15:59
CSS語法大重整
- May 17 Thu 2007 19:56
＊CSS＊背景控制語法
背景語法
/* 語法開始 */
body{ /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
background-image:url(圖片位址); /* 圖片連結位置 */
background-attachment:fixed; /* 圖片位置是否要固定 */
background-repeat:no-repeat; /* 圖片是否要重複顯示 */
background-position:right; /* 圖片對齊格式 */
width:400px; /* 文字區塊的寬度 */ }
-
textarea(文字區塊)：這個部分稱作CSS樣式定義類別，一般來說可以自己定義名稱，但是由於這裡我們是要定義HTML語法的標籤，所以是不能更改的！必須使用textarea。當然如果要定義
，就改為h1！
(★注意： 不用"") -
background-image(背景影像)：看你的圖片位址在何處就怎麼寫！只要填在url()的()裡面即可！
-
background-attachment（背景附著）：在這裡你可以決定背景圖片的位置。
屬性有：scroll：隨著捲軸捲動 inherit：繼承之前的設定 fixed：固定不動 -
background-repeat(背景重複)：看看背景圖片是不是要重複顯示。
屬性有：repeat：重複顯示 no-repeat：不重複顯示 repeat-x：只在X軸重複顯示 repeat-y：只在Y軸重複顯示 -
background-position(背景位置)：決定背景要置中、靠左、靠右的設定。
屬性有：left：靠左對齊 center：置中對齊 right：靠右對齊 top：向上對齊 bottom：向下對齊 inherit：傳統繼承(預設) -
width(寬)：文字區塊的寬度 (可以不設定，系統會自動設定大小)
-
height(高)：文字區塊的高度 (可以不設定，系統會自動設定大小)
- May 17 Thu 2007 19:46
＊CSS＊游標圖案 × 外框設置
游標語法
/* 游標設計開始 */
body{cursor:url("http://ashine0118.myweb.hinet.net/kaapu2.ani")}
a:hover {cursor:url("http://ashine0118.myweb.hinet.net/kaapu2.ani")}
/* 游標設計結束 */
框框語法
/* 框框 語法開始：寫法一 -- 分門別類，無微不至 */
/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4x3)行 */
body { /* body 是可以依照需要作改變的，下面的內容才是重要的！ */
border-top-width: 20px; /* 邊框寬度.改數字即可 */
border-top-style: solid; /* 邊框樣式 */
border-top-color: #FFB3CC ; /* 邊框顏色 */
border-bottom-width: 50px; /* 邊框寬度 */
border-bottom-style: solid; /* 邊框樣式 */
border-bottom-color: #FFB3CC ; /* 邊框顏色 */
border-left-width: 40px; /* 邊框寬度 */
border-left-style: solid; /* 邊框樣式 */
border-left-color: #FFB3CC ; /* 邊框顏色 */
border-right-width: 30px; /* 邊框寬度 */
border-right-style: solid; /* 邊框樣式 */
border-right-color: #FFB3CC ; /* 邊框顏色 */
1. 屬性有：top：上方 bottom：下方 left：左邊 right：右邊
2. Width(寬)：邊框寬度。屬性有：N px：像素 N pt：點 N in：英吋 N %：百分比 (N為大小，必須為正整數)
3. Style（樣式）：邊框樣式。屬性有：dotted：點狀線 dashed：虛線 solid：實線 double：雙實線 groove：溝道狀 ridge：山脊狀inset：凹陷狀 outset凸起狀
4. Color(顏色)：邊框顏色。屬性為：#XXXXXX (XXXXXX為顏色代碼)
- May 17 Thu 2007 11:21
＊CSS＊擋廣告× 捲軸顏色
大家都想要有個不同的部落格吧!!
先教大家一些簡單的語法吧!!
擋廣告語法
P.S 開頭和結尾的 /*.......*/ 是補充說明.是幫助自己看的更清楚.所以貼在CSS上不會顯示出來
這語法適用於〝留言板〞，若要至於網誌，請將上半部刪除，只留下半部之語法。
/* 擋廣告開始 */
img { display: none !important; }
.pass img { display: block !important; }
#logo, #logo img { position: absolute; left: -100px; !important; }
#floatLayer {display:none !important;}
div table .small-c tr td{ display:none; }
#ad_top, object, embed { display: none !important; }
div table tr td { width:auto !important;height:auto !important; }
table tr td { width:auto !important;height:auto !important; }
center img{diobject{display:none}
#ad_flash { DISPLAYsplay:none}
center div : none}
#ad_banner a {position : absolute;clip: rect(0px 0px 0px 0px);}
FILTER: alpha(opacity=0);}}
table tr td iframe {display: none; width: 0px; height: 0px}
/* 擋廣告結束 */
捲軸語法
P.S 顏色是在〝#〞後六位數字的修改(此範例是粉紅色)
/*捲軸顏色*/
body {
scrollbar-arrow-color: #CC99FF;
scrollbar-face-color: #FFB3CC ;
scrollbar-track-color: #FFCBDC ;
scrollbar-3dlight-color: #FFDCE8 ;
scrollbar-highlight-color: #FF8BB2 ;
scrollbar-shadow-color: #FFCFDF ;
scrollbar-darkshadow-Color: #FF8BB2 ;}
/*捲軸顏色end*/
