使用<div>标记逻辑区

10. `<div>`与`<span>` - 图1

  • 区分标记逻辑区
  • 继承唯一id的属性
  • 增加网页结构（结构的结构）

样式居中

text-align: center

  • 对于任何内联元素对齐
  • 只能在块元素中使用
  • 不能在内联元素中使用（例：）

设置选择器CSS

10. `<div>`与`<span>` - 图2

CSS 简写

内边距

10. `<div>`与`<span>` - 图3
如果值都相同可以设为padding: 20px

外边距

10. `<div>`与`<span>` - 图4

背景

10. `<div>`与`<span>` - 图5

边框

10. `<div>`与`<span>` - 图6

字体

10. `<div>`与`<span>` - 图7

<span>创建内联字符和元素的逻辑分组

解决块元素的换行问题

10. `<div>`与`<span>` - 图8
修改CSS样式

  1. .cd {font-style:italic;}
  3. .artist {font-weight:bold;}

链接样式

10. `<div>`与`<span>` - 图9
利用伪类修改不同块里的CSS：
10. `<div>`与`<span>` - 图10