陳小菁

或許很多人都會改css 有點小基礎
不過這些人當中或許有部分的人不曉得如何抓css標籤 必須仰賴其他網友的協助
但是往往可能在網路上搜尋很久 就是找不到
可能是搜尋方向錯誤 也可能是找到的標籤不是自己要的
偏偏自己又不知道某區塊的標籤是什麼而苦惱
所以小菁現在要交友緣人如何抓取css標籤
以下擷取的畫面皆為火狐畫面 但是ie也是大同小異啦!
只不過原始碼畫面不太一樣就是了

下面這三張圖都是告訴你怎麼找原始碼頁面的方式
不過第三張圖我不確定是火狐都有還是因為我灌了火狐外掛的原因 總之我能確定的是...ie沒有此功能
 

接下來你將會看到落落長的原址碼內容
以下這張只是部分的內容

嗯? 還是一頭霧水嗎?
沒關係解說如下

粉空框>>圖片中的div 就是一個區域範圍
在<div>跟</div>之間的區域全都是包含在內的
所以當你發現可能某個標籤同時出現在兩個區域範圍時 你就可以利用div空格後面的主屬性去改變該區域的附屬性

深綠底線>>id 當你看到id="xxx"的時候
代表該屬性標籤應為#xxx
像圖片中出現的 id="banner" 以及 id="blog-category" 就表示著banner跟blog-category必須加上 # 所以當你在改css時標籤應該訂為 #banner{} 跟 #blog-category{}

亮綠底線>>圖片中紫色部分(ie7顯示的是咖啡色) 例如 p 跟 a 他前面並沒有 id 或是 class 就表示著 前面你什麼都可以不用加

黃色底線>>>class="ooo" 當你發現這樣的屬性時 表示標籤應該為 .ooo
像圖片中出現的class="skiplink"就代表著在編寫css時標籤應該是.skiplink

若你好奇id跟class有什麼不同的話
其一 id在每個頁面中 只能出現一次  而class則是可以出現好幾次
其二 class對於大小寫比較敏感 所以當你在編寫css時請務必注意標籤的大小寫是否相同

 

 
當你抓編輯好標籤 想知道標籤範圍的話你可以利用框線語法來檢視範圍大小
示範如下

我利用不同顏色的框線來做為每個標籤的區隔分辨
然後明白區域位置之後在後面加上附註

倘若你不想大費周章的在那麼大一片原始碼當中找你想要的某區塊
可以利用 ctrl+f 搜尋
例如我想要找 跳到主文 這個區塊的原始碼
就在原始碼當中使用ctrl+f 搜尋 跳到主文
然後再往前找對應的標籤

 

大致上應該就是這樣
如果想補充或有疑問再跟我說吧