掌握表單標簽 掌握表單標簽 瞭解CSS的概念 英文縮寫 Cascading Style Sheet 層疊樣式表 層疊:層層疊加 樣式表:樣式的集合(屬性的集合),不是html的屬性,而是CSS的屬性 瞭解CSS的概念 英文縮寫 Cascading Style Sheet 層疊樣式表 層疊:層層疊加 ...
<form action="http://www.baidu.com" method="post"> ... </form>
-
瞭解CSS的概念
- 英文縮寫 Cascading Style Sheet
- 層疊樣式表
- 層疊:層層疊加
- 樣式表:樣式的集合(屬性的集合),不是html的屬性,而是CSS的屬性
-
掌握CSS的引入方式(heml和css)
- 通過style標簽的屬性
<!--通過style屬性--> <div style="border: 1px solid red;">div一</div>
- 通過style標簽
<head> <!--通過style標簽--> <style> div { border: 1px solid red; } </style> </head>
- 通過link標簽結合(外部引入)
<link rel="stylesheet" href="../../css/divcss.css" />
- 通過style標簽的屬性
-
瞭解CSS的基本語法和常用的選擇器
- 語法規範
{
屬性:屬性值 屬性值
屬性:屬性值 屬性值
}
-
- 常用選擇器
- 標簽選擇器; 語法: 標簽名{css代碼}
<style> /*標簽選擇器*/ div{ border: 1px solid red; } </style>
- 類選擇器語法: .類名{css代碼}
<style> /*類選擇器*/ .divClass{ border: 1px solid red; } </style>
- id選擇器;語法: #id名{css代碼}
<style> /*id選擇器*/ #divId{ border: 1px red solid; } </style>
- 組合選擇器 語法:選擇器,選擇器{css代碼}
/*組合選擇器*/ div,span{ border: 1px solid red; } - 後代選擇器 語法:選擇器1 選擇器2 {css 代碼}
- 子代選擇器 語法:選擇器1>選擇器2 {css 代碼}:
- 標簽選擇器; 語法: 標簽名{css代碼}
- 常用選擇器
-
瞭解CSS的盒子模型,浮動.
- 設置浮動
<div style="float:left;"></div>
- 設置浮動
- css盒子模型
- margin:外邊距
- padding:內邊距,裡面的元素和邊框之間的距離
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="height: 300px; width: 300px ;border: red solid 1px;"> <div style="background-color: blue; height: 100px;text-decoration: underline; width: 100px; border-style: dashed; margin: 35px; padding: 20PX;"> BBB 中國 </div> </div> </body> </html>
