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