[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 標籤可以細項調整

創作者介紹
創作者 咪咪醬 的頭像
咪咪醬

咪咪醬‧阿財肥貓俱樂部

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