星際文明的黑科技

想要修改CSS，首先，你得先找到ＣＳＳ的檔案位置

因為各種類網站用的系統不太一樣，所以ＣＳＳ檔案存放的地方也不同，這裡拿痞客邦來示範

不過ＣＳＳ語法都是一樣的，這篇教學也適用於大部分的網站

～～～賣萌的分割線醬(ﾉ>ω<)ﾉ～～～

１．看懂網頁原始碼

第一步就是要看懂網頁原始碼，其實網頁的原始碼不難懂，這裡教大家一個簡單的小工具

首先打開一個網頁，按下Ｆ１２可以看網頁原始碼，左上角有一個小箭頭

點下去之後在移到左邊的網頁上，經過的區域會自動幫你把那些區域的範圍標示出來，左鍵點一下右邊的原始碼就會自動跳到你指的那個區域的原始碼囉

是不是很方便！

滑鼠移到某個區塊位置，那個位置就會自動變藍，再點一下滑鼠左鍵可以跳到對應區塊的程式碼

２．尋找要修改的地方

想要修改css，要先找到ｃｓｓ對應的位置，用上面的方法可以很直觀的觀察網頁原始碼

假如我們想要修改這個區塊的樣式

那透過上面的方法可以找到對應的原始碼

裡面第一行的＜ｄｉｖ．．．開頭的ｄｉｖ代表是這是一個區塊，可以看到最後一行也有一個＜／ｄｉｖ＞，這兩個東西將這個區塊包起來，包在裡面的內容就是屬於這個區塊的，基本上每個區塊開頭都一定會這樣寫

這裡只有一個例外，開頭可能是＜ｈ１＞這種ｈ接數字１－６的是代表標題區塊，通常是整個網頁的站名或副標題，是顯示在搜尋引擎上面的部份

ｄｉｖ後面可以看到ｃｌａｓｓ＝，等於後面代表的是這個區塊的代號，如果要用程式碼或ｃｓｓ呼叫改變這個區塊的屬性的話就要用這個代號，不然也不知道是在叫誰是吧～

ｄｉｖ後面接的有時候不一定是ｃｌａｓｓ，也有接ｉｄ的，不過大致上都是代表這個區塊的代號

如果要在ｃｓｓ上面改這個區塊的設定會需要加一些ｃｓｓ規定的前輟

像是這個區塊寫成ｃｓｓ的話就是．ｂｏｘ－ｔｅｘｔ｛．．．．．｝這樣，點點點是ｃｓｓ的設定內容，要調整區塊設定都是在大括號內調整的

另外痞客邦的特殊結構只看前面ｂｏｘ－ｔｅｘｔ，空格後面的ｅｎｔｒｙ－ｃｏｎｔｅｎｔ對想要改ｃｓｓ的不用去管它

這裡大家可以參考看看痞客邦的整個網頁ｃｓｓ架構＞＞點

有時候會出現這種情況的時候可以以空格間距來一個個試

另外要注意的是，假如前面是

<div ｉｄ＝ｂｏｘ－ｔｅｘｔ＞．．．＜／ｄｉｖ＞前面是ｉｄ的話，在ｃｓｓ上面是寫成＃ｂｏｘ－ｔｅｘｔ｛．．．．．｝

<div ｃｌａｓｓ＝ｂｏｘ－ｔｅｘｔ＞．．．＜／ｄｉｖ＞而前面是ｃｌａｓｓ才是寫成．ｂｏｘ－ｔｅｘｔ｛．．．．．｝

不過以上只適用於大部分的情況，在小部分情況上面的規則不一定有效，這時候該怎麼辦？全部試一遍就是了，反正變化也就那麼幾種而已

然後網頁原始碼的下半部分是這個網頁的ｃｓｓ格式，大家想參考別人的樣式可以從這裡看看

題外話一下，雖然案ｆ１２可以直接抄別人的樣式，還是建議有心想學網頁的人去好好理解ｈｔｍｌ（舊式上面的網頁原始碼），ｃｓｓ的語法才能更靈活地改網頁

雖然網頁樣式的抄襲與否現在確實很難界定就是惹ＸＤ