因為補修的議題設定在CSS上,所以就必須花點時間來探討一些關於CSS的問題。
其中我會鎖定在探討版型設計問題上,畢竟很多剛接觸CSS的人通常會在這裡陣亡。

這裡我先解答今天一個學弟問的問題
Q:可不可以在一個DIV內作不同段落的文字顏色等屬性的設定?
A:答案當然是可以。
不過這其中有一些限制,當瀏覽器開始百家爭鳴的時候,微軟大哥好像沒有放在眼裡,而崛起的火狐總是在第一時間就針對W3C公佈
的CSS規範做很多測試和讓瀏覽器可以支援。包含正在制定的CSS3。
其中一個功能是CSS2提供的選擇器。

例如底下的HTML
在DIV #header裡面有四個段落的文字。

<div  id="header">
  <p >段落一</p>
  <p >段落二</p>
  <p >段落三</p>
  <p >段落四</p>
</div>

若在CSS檔如下作法。
#header > p + p{
    color:#FF0000;
    font-size: 12px;
}
#header > p + p + p{
color:#00CC00;
}
#header > p + p + p + p{
color:#0000CC;
}

就可以分別為四個段落設定不同的效果。

不過IE沒有支援這樣的用法。比較下面兩個瀏覽器的畫面。
這是CSS至今最恐怖的問題,就是在設計上還是很難所有瀏覽器看到相同的效果。
也是大部分設計師在設計版型時要考慮的問題。




創作者介紹
創作者 andyyu0920 的頭像
andyyu0920

ANdyYoU_蹤雁_數位記錄本

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