Web前端开发技术 第7-12章

教材：

Web前端开发技术——HTML5、CSS3、JavaScript（第3版） 储久良 编著

这是个人的期末复习笔记，纯手动输入，如果有哪里写错了，恳请指点。

第7章 CSS 基础

7.1 CSS 概念

• CSS 的基本概念
  CSS也称为级联样式表，用来进行网页风格设计。采用CSS技术，可以有效地对网页的布局、字体、颜色、背景等进行更精确的控制。只要对相应的代码做一些简单的修改，既可以改变同一页面的不同部分效果，又可以改变同一个网站中不同网页的外观和格式。
• 传统 HTML 的缺点
  维护困难、标记不足、网页臃肿、定位困难
• CSS 的特点
  CSS通过定义标记或标记属性的外在表现，对页面结构风格进行控制，分离文档的内容和表现，克服了传统HTML的缺点。将CSS嵌入在页面中，通过浏览器解释执行，而且CSS文件是文本文件，只要理解了HTML就可以掌握它。
• CSS 的优势
  表现和内容分离
  增强了网页的表现力
  将整个网站显示风格趋于统一
• CSS 的编辑方法
  1. 写在HTML文件里面的CSS规则。又可以分为两种形式：一种是写在标记里的style属性中；另一种是写在head里的style标记中。
  2. CSS规则写在单独的文件里。

7.2 使用 CSS 控制 Web 页面

selector { property1:value;property2:value;... }

1. CSS 基本语法

• 由两个主要部分组成：选择器 selector 和声明 declaration。
• 选择器通常是需要改变样式的HTML元素，可以是HTML标记名称或属性值，也可以是自定义的标识符。
• 声明由一个或多个属性与属性值对组成。在CSS中，若属性名由两个或两个以上的单词构成，则单词之间用“-”连接，如background-color、font-size等。
• 复合属性：在CSS中，有些属性可以表示多个属性的值。常用的复合属性有font、border、margin、padding等。在使用font声明所有字体属性时，应按照font-style、font-variant、font-weight、font-size/line-height、font-family的顺序。
• CSS注释：单行或多行 /* 注释内容 */

2. CSS 选择器类型（主要五个）

• 标记（元素）选择器
• 类选择器 class（.）
• id选择器 （#）
• 伪类选择器
  标记 : 伪类名{ /* css规则 */ }
• 属性选择器
  具体内容请点击跳转

表：常用伪类

伪类名	说明
link	a标记在未访问前的样式
hover	a标记在鼠标悬停时的样式
active	a标记在鼠标点击与释放之间的样式
visited	a标记在访问后的样式
first-letter	块的第一个字符的样式
first-line	块的第一行的样式
first-child	第一个子标记的样式
lang	具有lang属性的标记的样式

伪类设置的顺序：
a:link → a:visited → a:hover → a:active

3. CSS 选择器声明

• 集体声明：多个选择器之间用逗号分隔
• 全局声明：*
• 派生（上下文）选择器：如列表项< li >中的< strong >或< span >标记

4. CSS 定义与引用

• 内联样式表（行内样式表）
  写在首标记的style属性里
• 内部样式表
  写在head标记的style标记里
• 外部样式表
  写有CSS规则的CSS文件

/*--方式1：链接外部样式表--*/
<link type="text/css" rel="stylesheet" href="out.css">



/*--方式2：导入外部样式表--*/
<style type="text/css">
  @import url("外部样式表名称");
style>

7.3 CSS 继承与层叠

• CSS 继承
  子标记继承父标记的所有样式，子标记的样式不影响父标记的样式。但有的属性不会继承父标记的属性值，如：border是非继承的。
• CSS层叠
  同一内容设置了多个不同类型样式产生冲突时的处理方式，CSS规定了优先级：
  行内样式 > id样式 > class样式 > 标记样式

第8章 DIV 与 SPAN

8.1 DIV 图层

• 定义
  块级标记，可定义文档中的分区或节。

表：div 标记的style属性中的属性

属性	值	说明
position	static absolute relative fixed	默认值，静态定位 绝对定位，与位置属性配合使用 相对定位，图层不可层叠 位置固定，不滚动
border	粗细 线型 颜色	边框
background-color	rgb函数 十六进制数 颜色英文名	背景颜色
left	px、%	左边距
top	px、%	上边距
width	px、%	宽度<