a. CSS style 的優先順序：標籤 > ID > 類別
b. <h1> 可以讓搜尋引擎找到，提高網站的曝光率。
進階使用方法：
1. 利用 CSS 來定義 "<h1>標籤"，使得 <h1> 不再那麼呆版，如此既可美化，又可被搜尋到。
2. 在 <h1>中夾圖片，然後在 < img > 中放 alt 以及 title，讓搜尋引擎找到，因為圖片中的訊息 alt 以及 title 都包含在 <h1>中。
例如：<h1><img src="123.jpg" title="123" alt="123"></h1>
a. CSS style priority: Tags > ID > Category
b. <h1> can be found by search engines to increase the exposure of the site.
Advanced use:
1. Use CSS to define "<h1> tags" so that <h1> is no longer so slick, so it can be both beautified and searched.
2. Clip the image in <h1>, then put alt and title in < img > for the search engine to find, because the messages alt and title in the image are included in <h1>.
For example: <h1><img src="123.jpg" title="123" alt="123"></h1>
測試CSS style 的優先順序
Test the priority of CSS style
1.建立三個一樣的 table
2. 建立三個 CSS 樣式
1. Create three identical tables
2. Create three CSS styles
( table color: #F00 (紅色)、.ABC color: #FF0 (黃色)、#A color: #00F (藍色))
<style type="text/css">
table {
color: #F00;
}
.ABC {
color: #FF0;
}
#A {
color: #00F;
}
</style>
3. 表格程式碼
說明：
1.所有 table 都會套用 table 標籤CSS 樣式 (紅色)
2.table 2 加上 class="ABC" (黃色)，結果 table 2 是呈現黃色
3.table 3 除了 class="ABC" (黃色)，再加上 ID="A"(藍色)，結果 table 3 是呈現藍色
結論：複合 > ID > 類別 > 標籤
3. Table code
Description:
1. All tables will apply table tag CSS style (red)
2.table 2 plus class="ABC" (yellow), the result table 2 is rendered yellow
3.table 3 except class="ABC" (yellow), plus ID="A" (blue), the result table 3 is blue
Conclusion: Composite > ID > Category > Tags
<body>
<table border="1" >
<caption>table 1</caption>
<tr>
<th width="50" scope="col"><p>12</p></th>
<th width="50" scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
</tr>
</table> <br/>
<table border="1" class="ABC">
<caption>table 2</caption>
<tr>
<th width="50" scope="col">123</th>
<th width="50" scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
</tr>
</table> <br/>
<table border="1" class="ABC" id="A">
<caption>table 3</caption>
<tr>
<th width="50" scope="col"><p>12</p></th>
<th width="50" scope="col"> </th>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
</tr>
</table> <br/>
</body>
2. div
a. 先設一個版面 "wrapper"
b. 再設定 header 在 wrapper 裡面
c. 接著都是在上一個之後，
header --> content--> sidebar --> footer
a. First set a layout "wrapper"
b. Reset the header in the wrapper
c. Then after the last one,
Header --> content--> sidebar --> footer
Code:
<body>
<div id="wrapper">
<div id="header"> id "header" 的內容放在這裡</div>
<div id="navigation"> id "navigation" 的內容放在這裡</div>
<div id="content"> id "content" 的內容放在這裡</div>
<div id="sidebar"> id "sidebar" 的內容放在這裡</div>
<div id="footer"> id "footer" 的內容放在這裡</div>
</div>
</body>
No comments:
Post a Comment