痞客邦CSS語法教學文章整理|Pixnet CSS Tutorial

把之前痞客很辛苦的CSS教學文搬過來,可能都不適用了,還是提供給大家~

 

本篇文章之教學為2015年,因此許多方法可能已不適用,不再回答任何語法問題(我也沒再用痞客邦了)。

 

目錄

#1 ★【教程】CSS:適用網頁的反白換色語法
#2 ★【教程】CSS:緩慢放大語法
#3 ★【教程】CSS:導覽列背景顏色更改語法
#4 ★【教程】CSS:參觀人氣單行語法
#5 ★【教程】CSS:熱門文章人氣變更樣式語法
#6 ★【教程】CSS:個人資訊區塊隱藏語法 NEW
#7 ★【教程】CSS:側邊欄標題滑鼠移過更換樣
#8 ★【教程】CSS:側邊欄標題前面有小圖

要快速尋找文章請直接Ctrl+F輸入標題。

※因為之前Blog搬家所以CSS範例圖片都刪了,請見諒!

 

 

#1 【教程】CSS:適用網頁的反白換色語法 發表於2015/03/01

 

▼▼▼ 背景粉紅色(#d25ca9) 字體白色(#FFF) ▼▼▼

::selection {background:#d25ca9;color:#FFF;}
::-moz-selection {background:#d25ca9;color:#FFF;}

▼▼▼ 背景黑色(#000) 字體白色(#FFF) ▼▼▼

::selection {background:#000;color:#FFF;}
::-moz-selection {background:#000;color:#FFF;}

▼▼▼ 背景紅色(#FF0000) 字體白色(#FFF) ▼▼▼

::selection {background:#FF0000;color:#FFF;}
::-moz-selection {background:#FF0000;color:#FFF;}

依此類推,有想更改的背景顏色就更改background:#XXX

而如果想改變字體顏色,就更改color:#FFF

 


 

#2 【教程】CSS:緩慢放大語法 發表於2015/03/14

 

▼▼▼ 放置於 .author 標籤語法中 ▼▼▼

.author {

Font-size:8px;

opacity:0;
filter:alpha(opacity=0);

-moz-animation-name: fadeIn;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 0.7s;
-webkit-animation-name: fadeIn;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 0.7s;
-o-animation-name: fadeIn;
-o-animation-iteration-count: 1;
-o-animation-duration: 0.7s;
animation-name: fadeIn;
animation-iteration-count: 1;
animation-duration: 0.7s;
transition: all 0.7s ease;
-webkit-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
-khtml-transition: all 0.7 ease;
transition: all 0.7 ease;

}

▼▼▼ 放置於 .author:hover 標籤語法中 ▼▼▼

.author:hover {

Font-size:11px;

opacity:1.0;
filter:alpha(opacity=100);

}

Font-size 字型大小:數字越大代表字型的大小越大,在這裡因為要產生一種放大的效果,原本8px的字大小移過去後會變成11px。

❏ opacity & filter:alpha 透明度:opacity數值為0到1,filter:alpha數值為0到100,數字越小代表顏色越淡、透明程度越多。

animation 淡入過場:0.7s代表速度,數字越小代表越快速,語法來自金羽銀華#36

 


 

#3 【教程】CSS:導覽列背景顏色更改語法 發表於2015/03/20

 

▼▼▼ 背景淺粉紅色(#FFECF5) ▼▼▼

.topbar {background-color:#FFECF5;}

 


 

#4 【教程】CSS:參觀人氣單行語法 發表於2015/04/14

 

▼▼▼ 雙行變單行 ▼▼▼

#counter .box-text li {display: inline;}

▼▼▼ 雙行變單行及本日人氣與累積人氣之間的間隔增加 ▼▼▼

#counter .box-text li {display: inline; padding-right:20px;}

 


 

#5 【教程】CSS:熱門文章人氣變更樣式語法 發表於2015/06/07

 

▼▼▼ 熱門文章人氣變更樣式語法 ▼▼▼

#hot-article span {background:#000;color:#FFF;padding:3px;margin-right:3px;border-radius:10px;}

background:#000;

背景顏色,修改#000(黑色)

color:#FFF;

文字顏色,建議跟背景顏色做搭配。

(另外徵求括號的語法m(__)m)

padding:3px;

邊界距離,可調大調小(建議數值:1px~5px)

margin-right:3px;

距離右邊的距離,避免跟文章標題靠太近,可調大調小(建議數值:1px~5px)

border-radius:10px;

圓角,越大代表角度越大,但這裡調到10px以後就只能維持這個圓角度。

 


 

#6 【教程】CSS:個人資訊區塊隱藏語法 NEW 發表於2015/06/13

 

▼▼▼ 個人資訊整個隱藏 ▼▼▼

#user-info{display: none;}

▼▼▼ 個人資訊標題隱藏 ▼▼▼

隱藏後標題就會不見。

#user-info .box-title{display: none;}

▼▼▼ 個人資訊區塊隱藏 ▼▼▼

隱藏後包括文字跟圖片都會不見,只會留下標題。

#user-info .box-text{display: none;}

▼▼▼ 個人資訊個人頭像隱藏 ▼▼▼

隱藏後個人頭像就會隱藏掉,只剩下文字。

#user-info .box-text img{display: none;}

▼▼▼ 個人資訊按鈕隱藏 ▼▼▼

登入後看自己Blog是不會有按鈕,如果加上下面語法上方圖中的兩個按鈕將會隱藏(來訪客也看不到)

#user-info .user-action{display: none;}

▼▼▼ 個人資訊文字隱藏 ▼▼▼

簡單明瞭隱藏文字只留下個人頭像。

#user-info dl{display: none;}

隱藏文字後如果有跑掉請加入下列語法~

#user-info .box-text{height:90px;}

▼▼▼ 個人資訊區塊隱藏文字笨方法(已不適用) ▼▼▼

#user-info .box-text {font-size:0px;height:90px;}

*本篇語法隱藏按鈕&圖片感謝小吳提供*

 


 

#7 【教程】CSS:側邊欄標題滑鼠移過更換樣貌 發表於2015/09/05

 

▼▼▼ 側邊欄標題移過去更換樣貌語法 ▼▼▼

.box-title{text-align:center;padding:5px;}

.box-title:hover{color:#74BA56;border-left:80px solid #74BA56;border-right:80px solid #74BA56;}

.box-title

側邊欄標題,未變化前。

text-align:center;

文字置中對齊,左left 中center 右right。

padding:5px;

 邊界距離,意思是文字周圍在圍出5px的空間(不會太擠有空間感)

.box-title:hover

側邊欄標題,變化後,hover是指滑鼠移過去後。

color:#74BA56;

文字顏色,建議跟變化顏色做搭配。

border-left:80px solid #74BA56;

border-right:80px solid #74BA56;

左邊left,80px的大小,顏色建議跟上方做搭配。

右邊right,80px的大小,顏色建議跟上方做搭配。

 


 

#8 【教程】CSS:側邊欄標題前面有小圖 發表於2015/09/29

 

▼▼▼ 側邊欄標題前面有小圖語法 ▼▼▼

.box-title{text-align:left;padding: 5px 5px 5px 30px;
background:url(“http://pic.pimg.tw/iammq/1437xxoo-28ooxx.gif“) 0% 0% no-repeat;}

.box-title

側邊欄標題。

text-align:left;

文字置左對齊,左left 中center 右right。

padding:5px 5px 5px 30px;

 邊界距離,意思是文字周圍在圍出5px的空間(不會太擠有空間感)

而在左方延伸出30px,依小圖大小加5為範圍。

例如寒絳使用的小圖是25×25,於是變成25+5=30px

假設你們使用的小圖是10×10,那就盡量大於10,以10+5=15為最適當的空間。

background:url(“http://pic.pimg.tw/iammq/1437xxoo-28ooxx.gif“) 0% 0% no-repeat;}

粗體字http://到.gif是圖片網址,可以上傳到痞客相簿複製網址使用或其他圖片空間。

0% 0%為X軸與Y軸,X軸為左右,-1為往左邊,1為往右邊,Y軸為上下,-1為往下,1為往上,這部分建議不改變。

no-repeat照字面上為不重複,意思是圖片不重複。

 

▼▼▼ 文章標題前面有小圖語法 ▼▼▼

.title{text-align:left;padding: 5px 5px 5px 30px;
background:url(“http://pic.pimg.tw/iammq/1437xxoo-28ooxx.gif“) 0% 0% no-repeat;}

與上面的語法類似,唯一不同是最前面的標籤改成.title,意思為每篇文章的標題。

 

 

延伸影片(非教學):

 

 

 🔽 追蹤寒絳 Follow HanJiang 🔽



Copyright © Dwarf HanJiang 寒絳 2017 All Rights Reserved
請勿任意轉載、複製內容到其他網站,歡迎分享文章連結出去。
有任何問題 Or 試用合作邀稿:dearmiqi@gmail.com

 

小夥伴們,留個言吧 ⸜(* ॑꒳ ॑* )⸝