HTML 5新元素和CSS
Html5 新元素
多媒體元素
video/audio:
格式例子:
屬性:
canvas元素
Canvas標簽定義圖形,用於圖形的繪制,使用 js來繪圖
拖放drag和drop
拖放是一種常見的特性,即抓取對象以後拖到另一個位置。
在 HTML5 中,拖放是標準的一部分,任何元素都能夠拖放。
語義元素:
一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。
無語義 元素實例: <div> 和 <span> - 無需考慮內容.
語義元素實例: <form>, <table>, and <img> -
Html5中新的語義元素
<footer> 定義section或document的頁腳
<header> 定義了文檔的頭部區域
<nav> 定義了導航鏈接的部分
<section> 定義文檔中的節(section,區段)
css: 層疊樣式表 美化頁面 修改標簽的樣式
寫法分類:
1、內聯:寫在標簽裏面 以屬性的形式表現 屬性名style
格式例如:<span style=" "> </span>
<p style="font-size:20pt;color:red;text-align:center">排版樣式</p>
排版專用標記:<div>與<span>
這兩個標簽都是用來設置涵蓋一個區塊為主.區塊就是表示一行 以上的數據.如果沒有一樣,則<span> 與</span>該數據顯示前後都不會跳行.
2、內嵌:寫在head標簽裏面 以標簽的形式表現 標簽名style
內嵌式排版中所有的樣式定義都必須在<style>..</style>之間,而<style>..</style>又必須在<head>..</head>之間.
選擇器:找元素 通過各種方式 例如:標簽名 id屬性值
選擇器格式
選擇器{
樣式屬性:樣式值;
樣式屬性:樣式值;
}
選擇器類型
1.通用選擇器: *{} 選擇器選擇所有元素
例子:選擇器選擇所有元素
*{ padding: 0px; margin:0px; }
選擇器也可以選擇另一個元素內的所有元素:
例如:
div *{ background-color:yellow; }
2.標簽選擇器:標簽名{} 通過標簽名找標簽
3.id選擇器: #id屬性值{} 通過id屬性值找元素 關鍵符號
<!DOCTYPE html> <html> <head> <style type=”text/css”> #firstname{ background-color:yellow; } </style> </head> <body> <div > <p id="firstname">My name is Donald.</p> </div> </body> </html>
結果為:
4.class選擇器 : .class屬性值{} 通過class屬性值找元素 關鍵符號
例子:
<!DOCTYPE html> <html> <head> <style type="text/css"> .intro{ background-color:yellow; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div class="intro"> <p>My name is Donald.</p> <p>I live in Duckburg.</p> </div> <p>My best friend is Mickey.</p> </body> </html>
結果為:
5.後代選擇器 選擇器1 選擇器2{}
例子:
#div div{ width: 50px; height: 50px; background: red; }
6.子類選擇器 選擇器1 > 選擇器2{}
例如:
#div > div{ width: 50px; height: 50px; background: red; }
7.並列 選擇器1 , 選擇器2.. {}
例如:
#dd , #ddd{ background: red; }
8.偽類選擇器 選擇器:偽類 hover
例如:
#d:hover a{ background: red; }
9.其他選擇器:
對比選擇器:
例子:
選擇所有帶有target屬性的 <a>元素
a[target]{ background-color:yellow; }
:last-child
例子:指定父元素中最後一個p元素的背景色:
p:last-child{ background:#ff0000 }
"行內"和"內嵌式"排版定義的優先級:
CSS 規定,範圍越小,優先級越高.
優先級由小到大排列:
- 行內
- class和id定義型
- 標記定義行
id 的優先級高於class級
權值:
行內:權值1000!
id:權值100!
class:權值10!
標簽:權值1!
*:權值0!
權值是可疊加,例如:
#div .class 優先級大於 .class
3、外部引用:引入外部文件
寫在head標簽裏面 以標簽的形式標簽 標簽名 link
格式:
<head> <link rel="stylesheet" type="text/css" href=URL /> </head>
外部引用優點:
更好的書寫css樣式;
避免相同元素在不同頁面需要重復定義樣式問題
HTML 5新元素和CSS