css原始碼.jpg

接著上一集繼續講。你好不容易挑了一個簡潔的版型,但還是覺得不順眼,為何?版型太窄(兩邊很空),文字太小(看不清楚),行距太近(感覺很擠),你想要調整,聽說就是到後台調整CSS原始碼,你去了一看,哇,這是什麼東西?一大堆英文及數字,實在看不懂。怎麼辦?

你現在有兩條路,第一條路:自學CSS (我保證這個真的不難),
第二條路:花錢請人設計版型(大概5千~1萬左右)。


我先講自學CSS

自學CSS,如果只是在「原本的版型」中更改文字大小、顏色、行距、字距、內距、邊框、底圖,這個我覺得不難,說穿了就是找到關鍵字,然後改一下數值即可。

但如果您是要「自行設計版型」,坦白說這就有點難度了,像歐飛先生目前這個版型原本是二欄式,我改成三欄式,坦白說這樣就有點難度,一般人真的會搞不懂,例如您必需要搞懂什麼叫絕對位置、相對位置,還要有浮動位置的概念。

好,本文的目標是讓你在原本的版型中來更改,這樣比較簡單,你也可以現學現賣。

您必需先要有以下基礎
1、HTML 語法  (你可以理解成:網頁的原始碼)
2、CSS  語法    (你可以理解成:版型的原始碼)

HTML.jpg
▲我用一張圖跟你說明一下HTML的語法架構。
html的語法都是一對一對的,會有起點跟終點。例如標記一段文字的起點是<p>,那麼終點就是</p> (結尾多了一個斜線)。

在所有的html語法中,你一定要看的懂兩個語法,一個就個<p>這是分段的意思;另一個就是<a>這是超連結的意思。

你一開始記不住這些語法都沒有關係,你只要先知道有這個東西,以後需要用時,請直接google一下「html 語法」這樣就好了。

CSS架構.jpg
▲我用一張圖跟你說明一下CSS的語法架構。

CSS樣式表的名稱一定是#號開頭或是.號開頭。
有二點要特別注意:一定要有大括號{}包起來,這個道理跟HTML語法成對出現是一樣的,再來就是每一個CSS語法最後要用分號;代表結束。

我先提醒你,如果您明明更改了CSS原始碼卻發現網頁沒改變,通常有二個可能,一是您的語法寫錯了,二是您忘了在最後打上分號。

說穿了,部落格版型CSS的修改,其實就是找到你要修改的樣式名稱,然後更改CSS內容即可。

這時您肯定會問了:我怎麼知道,我要改的樣式名稱是什麼啊?

CSS查找.jpg
1) 在chrome瀏覽器中按F12叫出原始碼視窗
2) 點箭頭
3) 再指向要查找的地方(例如部落格名稱)
4) 下方會出現對應的原始碼。

這樣您就可以找到部落格中任何一個您想要更改的CSS樣式名稱了。

CSS查找2.jpg
假設我要改部落格名稱文字的顏色。透過剛剛的方法,我就可以找到部落格名稱的CSS叫什麼,如上所示在banner→h1→a

CSS查找3.jpg
我就可以回到後台的CSS原始碼中,用ctrl+F捜尋「banner 」這樣就可以找到了。

這一行#banner h1 a:hover{ color:#fff;}   就是部落格標題的CSS,目前只有一行color:#fff,也就是文字是白色的意思,您可以自行加上去其他的css語法,這樣就能透過更改CSS原始碼,讓前台的網頁改變。


講到這裡,你可能會問:為什麼有些css樣式名稱是#號開頭,有些是.號開頭,有什麼差別?

答:其實都可以,在使用上其實是一樣的。通常大框架會用<div id="XXX">,一般細部設定會用<div class="XXX">,這個XXX就是自訂的CSS樣式名稱。

如果前台是id 對應的後台css樣式名稱就會以#號開頭
如果前台是class 對應的後台css樣式名稱就會以.號開頭。

因為部落格的前台架構及後台的樣式名稱都已經設計好了,所以目前設定的名稱是什麼,您就是跟著用使用即可。

就像剛剛講的部落格名稱,你查到是<div id="banner">,那麼你去後台找,就一定是#banner,而不可能是.banner。

 

好,本集先講到這裡,下一集會再講部落格版型CSS的修改。

關於部落格版型的修改,說穿了就是修改CSS,而要修改CSS,您還必須要有一點點HTML語法的基礎,也就是說你必需要能大概看得懂網頁原始碼的語法。

這時你一定會問:我只是想寫部落格,有需要學習HTML及CSS嗎?
答:如果可以,請花一點點時間學習一下,這個不難就是一種語法,剛剛上面已經有跟您說明了。

如果您願意看書自學,接下來我報二張明牌給你:
HTML好書推薦:HTML&CSS:網站設計建置優化之道

CSS推薦:活用XHTML/HTML+CSS並不難:幫你搞定所有的網頁

如果您不想看書也沒關係,請直接google 「痞客邦版型設計」或「痞客邦 CSS教學」會有很多教學資源,您就是邊學邊改即可。

如果您不想花時間弄CSS,最簡單的方法就是花錢請人幫你量身訂做一個版型,請google「痞客邦 版型客製化」。

 

最後我要多囉嗦一下,我能教你的只是提示重點,簡單講就是:師傅引進門,修行在個人。

如果您真的想學,還是要靠您自己看書或google,我沒辦法靠1~2篇文章就讓你變成CSS設計達人,這一點希望您能理解。

 

文章標籤
創作者介紹
創作者 歐飛 的頭像
歐飛

歐飛先生

歐飛 發表在 痞客邦 留言(2) 人氣()

留言列表 (2)

發表留言
  • david37219
  • 你好, 有個問題請教一下,我在閱讀各個臉書時,有時候想要 copy 一些網友的討論和教學,
    用 copy 和 「保持原有格式設定」,複製到 word 裡面,但是都沒有辦法保持原有的排版。如下圖,
    請問有沒有辦法可以 copy 到 word之後,還可以維持原有的「階層式」排列方式 ? 謝謝。
    https://i.imgur.com/9E2EIAA.jpg
    https://i.imgur.com/TeDc4eN.jpg
  • 悄悄話

您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

請輸入暱稱 ( 最多顯示 6 個中文字元 )

請輸入標題 ( 最多顯示 9 個中文字元 )

請輸入內容 ( 最多 140 個中文字元 )

請輸入左方認證碼:

看不懂,換張圖

請輸入驗證碼