[CSS語法]DIV 區塊標籤

DIV可以看作是一個區塊,你可以針對這個區塊進行相關設定,例如字形大小,顏色,以及這個區塊在版面的位置

在之前我們在學html時,最早是用表格來規定內容的相關設定,但表格的呈現常常會有問題

目前DIV設定已經被所有瀏覽器所認同,雖然說剛開始有些不習慣,但是對於邏輯會清楚很多~~

DIV 可以呼叫外部CSS 針對本區塊進行設定
例如
<div id="content">這裡是網頁區塊內容</div>
或直接寫 style 進去，像這樣 <div style="font-size:15px;">這裡是網頁區塊內容</div>。


透過 CSS +DIV 排板的網頁架構範例

<body>
　<h1>這裡是網頁標題</h1>
　<div>這裡是網頁第一個區塊的內容</div>
　<div>這裡是網頁第二個區塊的內容</div>
</doby>


DIV 標籤在瀏覽器中是一個獨立的區塊，會獨自佔用一行，如果你使用了兩個 div 區塊，類似上方範例這樣，則兩個 div 區塊會呈現為由上往
下排列，與 span 標籤可以由左而右排列不同，這個原因是瀏覽器自動為每個 div 結尾後面加上換行的動作。

要讓 DIV 由左至右排列，可以使用 float（浮動）語法來達成。

 

[CSS語法]CSS套用在網頁的方式 

[CSS語法]SPAN標籤

Span 跟 Div 類似的地方是，這兩個標籤的目的都是將內容分為不同的區域。不同的是，Span 可以涵蓋更細層的元素。所以，我們甚至可以用 <span> 來調整單一文字的樣式。另外，在 </span> 之後並不會換行。

 

舉例來說，如果我們有以下的 CSS 樣式：

 

.largefont { 
  color: #0066FF; 
  font-family:arial; 
  font-size: 6px; 
}

 

Span 標籤<span class="largefont">可以細項調整</span>.

 

就會顯現為，

Span 標籤可以細項調整
arrow
arrow
    全站熱搜

    咪咪醬 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄