day02HTML_CSS

2026/7/28 19:24:37

掌握表单标签

<formaction="http://www.baidu.com"method="post">...</form>

了解CSS的概念
- 英文缩写 Cascading Style Sheet
- 层叠样式表
- 层叠:层层叠加
- 样式表:样式的集合(属性的集合),不是html的属性,而是CSS的属性

掌握CSS的引入方式(heml和css)

通过style标签的属性

<!--通过style属性--><divstyle="border: 1px solid red;">div一</div>

通过style标签

<head><!--通过style标签--><style>div{border:1px solid red;}</style></head>

通过link标签结合(外部引入)

<linkrel="stylesheet"href="../../css/divcss.css"/>

了解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的盒子模型,浮动.
- 设置浮动
```
<divstyle="float:left;"></div>
```

css盒子模型

margin:外边距

padding:内边距,里面的元素和边框之间的距离

<!DOCTYPE html><html><head><metacharset="UTF-8"><title></title></head><body><divstyle="height: 300px; width: 300px ;border: red solid 1px;"><divstyle="background-color: blue; height: 100px;text-decoration: underline; width: 100px; border-style: dashed; margin: 35px; padding: 20PX;">BBB 中国</div></div></body></html>