前端htm cssl总结

系统管理员 2022-06-13 07:48 171阅读 0赞

**第1章 HTML基础  **

(一) **HTML文件的基本结构和W3C标准**

l HTML用来描述网页的一种语言，他是一种超文本标记语言（Hyoer Text Markuo Language）,HTML**不**是一种编程语言，仅是一种标记语言。HTML就是由一套标签组成，在制作网页时，HTML使用**标记标签**来描述网页。

l HTML文件基本结构

头部（head）**网页标题等**

主题（body）**网页的内容信息**

l **网页编辑工具**

ü 使用(windows)**记事本**编辑HTML文档的4个步骤：

(一) 在windows中打开记事本程序。

(二) 在记事本中输入HTML代码

(三) 将文档保存为扩展名为 \***.**html的HTML的文档

(四) 双击保存的HTML文档

ü UltraEdit是功能强大的编辑软件，它支持HTML标签的**颜色标识**、**代码缩进**、**搜索**等功能。（1~4章）

l **网页基本信息**

l 一个完整的网页除了基本结构外，还包括网页声明、<meta>标签等其它网页的基本信息。

l “**DOCTYPE**”**文档类型**的声明，它约束了HTML文档的结构，检验是否符合相关Wed标准，同时告诉浏览器，使用哪种规范来解释这个文档中的代码。【第一行】

1) Strict（严格类型）

2) Transitional（过渡类型）：也称松散（loose）声明

3) Frameset（框架类型）：Strict声明中不允许使用框架

l <meta>标签：使用该标签描述网页具体的摘要信息，它所描述的内容并不显示，目的是：方便浏览器解析或利用搜索引擎搜索，它采用“名称/值”**对**的方式描述摘要信息。

1） <meta http-equiv=“Content-Type” content=“text/html;

charset=gb2312”/>

属性“http-equiv”提供“名称”类型中的名称，“content”提供“名称

/值”中的值，HTML代码的含义如下：

Ø 名称：Content-Type(文档内容类型)

Ø 值：text/html;charset=gb2312;(文本类别的html类型，字符编码为

简体中文)，charset表示字符集编码。常用的编码类型：

u gb2312：简体中文，一般用于包含**中文和英文**的页面。

u ISO-885901：纯英文，一般用于只包含**英文**的页面。

u big-5：繁体，一般用于带有繁体的界面

u utf-8：国际性通用的字符编码，也使用于中文与英文。和gb2312

编码相比，国际通用性更好，但字符编码的压缩比较低，对网页性

能有一定影响。

**实际上，网页打开后出现**乱码的原因**，就是因为没有设置<meta>标签**

**、字符编码造成的。**

2） 搜索关键字和内容描述信息

教育集团，致力于为中国培养优秀的IT技术人才。”/>

keywords表示搜索关键字，description表示网站内容的具体描述。通

过提供**搜索关键字**和**内容描述信息**，方便搜索引擎的搜索。

**（二）网页的基本标签**

l 网页的基本标签：**⑦**

标题标签 HTML提供了6级标题<h1>~<h6>

段落和换行标签

水平线标签 <hr/>

字体样式标签 加粗 倾斜

注释和特殊符号

l HTML中常用的特殊符号及对应的**字符实体**

l 要注意标签的**嵌套 **

**（三）图像标签**

l 常见的图片格式：

1. JPG（JPEG）采用有损压缩，缺点：造成图片画面的失真，优点：压缩

后的体积很小，而且比较清晰，所以比较适合在**网页**中应用。

2. GIF（**动画**）支持透明色，使得GIF在**网页的背景**和**一些多层特效**的显

示上用的比较多

3. BMP（Bitmap位图）在**Windows操作系统**中用的多。BMP文件格式与其

它Microsoft Windows程序兼容。缺点：**它不支持文件压缩，也不适**

**用于Web页**。

4. PNG（截图）优点：兼有GIF和JPG优势，具有GIF文件格式不具备的

特性。缺点：是一种新兴的Web图像格式，还存在部分旧版本浏览器不

支持的问题。

l 图像标签的基本语法

**<img src=“图片地址”alt=“图像的替代文字”title=“鼠标悬停提示文字”**

**width=“图片宽度”height=“图片高度”/>**

l 插入图片时使用标签<img/>，要求src和alt属性必选。

**（四）链接标签**

l 超链接包含两部分内容：一是链接地址，即链接目标，对应为<a>标签的

href属性；二是链接文本或图像。

超链接的基本语法：

**<a href=“链接地址”   target=“目标窗口位置”>链接文本或图像</a>**

Ø href：示链接地址的路径。

Ø target：指定链接在哪个窗口打开，常用的取值有\_self（自身窗口）、 \_blank

（新建窗口）

l 若两个文件不在同一目录下，如何表示文件路径？

在网页中，当单击某个链接时，将指向万维网上的文档。万维网使用URL（统一资源定位

器）的方式来定义一个链接地址。

l 当超链接href链接路径为“**\#**”时，表示**空链接**，eg: <a href=“\#”>首页</a>

l 超链接的应用场合：

Ø 页面间链接：A页到B页，最常用于**网站导航**。

Ø 锚链接：A页甲的位置到A页乙的位置或 A页甲的位置到B页乙的位置。

<a name=“top”>乙</a> “name”为<a>标签的属性，“top”为标记名

<a href=“\#top”>甲</a> 然后在甲的位置链接路径href属性值为“\#”标记名

l HTML【基本】结构：页面声明、页面基本信息、页面头部和页面主体等。

l 编写HTML文档时遵守W3C标准，W3C是制定和维护统一的国际化Web开发

标准的组织。（确保多个浏览器兼容）

**W3C标准是由W3C组织制定的一个Web标准。**

l 超链接<a>标签用于建立页面间的导航链接，链接可分为：页面间链接、

锚链接、功能性链接。

* *

**第2章列表、表格与框架  2014/9/5**

l 列表是数据的一种展示形式

l 列表的分类：

<table> 
 <tbody> 
 <tr> 
 <td> 类型 </td> 
 <td> 说明 </td> 
 <td> 项目符号 </td> 
 </tr> 
 <tr> 
 <td> 无序列表 </td> 
 <td> &lt;ul&gt; &lt;li&gt;列表项 </td> 
 <td> 通过type属性设置项目符号 disc(默认)、square和circle </td> 
 </tr> 
 <tr> 
 <td> 有序列表 </td> 
 <td> &lt;ol&gt; &lt;li&gt;列表项 </td> 
 <td> 通过type属性设置项目列表 1、A、a、I、i </td> 
 </tr> 
 <tr> 
 <td> 定义列表 </td> 
 <td> &lt;dl&gt;描述 &lt;dt&gt;描述的标题 &lt;dd&gt;内容 </td> 
 <td> 无项目符号或显示序列 </td> 
 </tr> 
 </tbody> 
</table>

**技巧：**

Ø 无序列表之间【平级】。有序列表会依据**列表项的顺序**显示。

Ø 无序列表ul-li比有序列表ol-li应用的更加广泛。

Ø 定义列表dl-dt-dd一般适用于**带有标题和标题解释性内容**或者**图片**

**和文本内容混合排列的场合**。

**第3章表单 2014/9/10**

(一) **表单**

l 表单：就是一个将用户信息组装起来的容器。

l 表单的应用：

Ø 登录、注册

Ø 网上订单

Ø 调查问卷

Ø 网上搜索

l 创建表单后，就可以在表单中放置控件（<form>······</form>）以接受用户的输入。

l 表单的创建**<form>标签，**用于在网页中创建表单**区域**，属于一个**容器标签**，其它的标签需要在他的范围内才有效，eg: <input>用以设定各种输入资料的方法。

<intputtype = ＂text＂/>

l **<form>标签的属性：**

² **action**指示服务器上处理表单输出的程序**action=“URL”**

**如果 action的值为空，则默认表单提交到本页。**

² **method**告诉浏览器如何将属性发送给浏览器，它指定向服务器发送数据的方法【用get/post方法将表单提交给另一个页面进行处理

**method =＂post＂/ ＂get＂（方法）**

1. **get 浏览器将创建一个请求，请求包含URL页面一个问号和表单的值。浏览器会将该请求返回给URL中指定的**脚本**，以进行处理。**

2. **post 表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。**

u **将表单数据提交给服务器上指定的程序进行处理，两种提交方式的区别：**

(1) **post提交方式不会改变地址栏状态，表单数据不会显示。**

(2) **get提交方式，地址栏状态会发生变化，表单数据会在URL中显示。**

**post的安全性高于get**

l **表单元素：在用户注册时，会填入很多信息，而装载这些数据的控件，~。**

l **<input>元素的属性**

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> type </td> 
 <td> 用来指定表单元素的类型，可用的选项有： text、password、checkbox、radio、submit、reset、file、hidden、image、button </td> 
 </tr> 
 <tr> 
 <td> name </td> 
 <td> 此属性指定表单元素的名称。如果表单上有几个文本框，可以按名称来识别它们，text1、text2等。 </td> 
 </tr> 
 <tr> 
 <td> value </td> 
 <td> 此属性是可选属性，用来指定表单元素的初始值，但如果type为radio，则必须指定一个值。 </td> 
 </tr> 
 <tr> 
 <td> size </td> 
 <td> 指定表单元素的初始宽度，如果type为text或password，则表单元素的大小以字符为单位。对于其它输入类型，宽度以像素为单位。 </td> 
 </tr> 
 <tr> 
 <td> maxlength </td> 
 <td> 此属性用于指定可在text或password元素中输入的最大字符数。默认值为无限大。 </td> 
 </tr> 
 <tr> 
 <td> checked </td> 
 <td> &nbsp; 指定按钮是否被选中，当输入类型为radio或checkbox时，使用此属性。 </td> 
 </tr> 
 </tbody> 
</table>

n size 与 maxlength的区别：

**size属性用于指定文本框的长度，maxlength属性用于指定文本框输入的数据长度。**

**表单元素的类型及常用属性⑧**

1. **文本框**

**<form method="post" action="">**

**姓名：<input type="text" value="张">①可删除，也可在后面继续加东西。**

**</form>**

2. **密码框**

用户希望输入的数据被处理，以免被他人得到。在密码框输入字符全都以黑色的圆点来表示，从而实现了对数据的处理。

² 问题：密码框能保证输入数据的安全吗？

² 解答：不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入的数据安全。为了使数据安全，应该加强人为管理，采用**数据加密技术**等。

3. **单选按钮（checked 默认选中）**

单选按钮的属性是：radio。用于一组相互排斥的值，组中的每个单选按钮控件应具有相同的名称。

4. **复选框（checked 默认选中）**

复选框的类型是checkbox，即将表单元素的type属性设置为checkbox就可以创建一个复选框。

一般情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能同时获取。例如：**兴趣爱好**，一个人可以有多个兴趣爱好，这样复选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。否则，每个选项都需要单独进行读取，从而降低了效率。

5. **列表框（selected 默认选中）**

通过<select>标签和<option>标签来实现**，<select>标签**必须包含**至少一个<option>标签**

6. **按钮**

<table> 
 <tbody> 
 <tr> 
 <td> 中文 </td> 
 <td colspan="2"> 英文 </td> 
 <td> 作用 </td> 
 </tr> 
 <tr> 
 <td> 普通按钮 </td> 
 <td colspan="2"> button </td> 
 <td> 响应onclick，将用户点击该按钮时将会显示该按钮的value值。需要与事件关联使用。 </td> 
 </tr> 
 <tr> 
 <td> 提交按钮 </td> 
 <td colspan="2"> submit </td> 
 <td> 提交表单信息，点击它后，表单将会提交到action属性所指定的URL，并传递表单数据。 </td> 
 </tr> 
 <tr> 
 <td> 重置按钮 </td> 
 <td colspan="2"> reset </td> 
 <td> 清除表单中已填信息 </td> 
 </tr> 
 <tr> 
 <td colspan="2"> &nbsp; 浏览按钮 </td> 
 <td> &nbsp; file </td> 
 <td> &nbsp; 要知道，其属性value的值无论是什么，浏览…都不会被改变，其显示的方式，是一个文本框与按钮。 </td> 
 </tr> 
 </tbody> 
</table>

实现图片按钮的方法有很多，eg：

**<input type="image" src="1.png" />**

7. **多行文本域**（不能使用value属性来赋初始值）

**<textarea  name=“textarea”  cols=“列的宽度”  rows=“行数”>**

**文本内容**

**</textarea>**

8. **文件域**

文件域的作用：用于实现文件的选择，在应用时只需要把type属性设为“**file**”即可。

**注意：**

包含文件域的表单，由于提交的表单数据包括普通的表单数据、文件数据等多部分内容，所以必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交。

(二) **表单的高级应用**

n **设置表单的隐藏域：**

**<input type=“hidden” name=“id” value=“张晴”/>**

必须得有 name属性，最好name的属性放在value的前面

n **表单的只读（readonly）与禁用（disabled）设置：**

Ø **只读场景：**网站服务器方不希望用户修改的数据，这些数据在表单数据中显示。**eg:**注册或交易协议、商品价格。

Ø **禁用场景：**只有满足某个条件后，再能选用某项功能。eg:注册协议注册

**<**input type="submit" value="修改"** disabled="disabled"**/>

n **W3C XHTML标准中，规定属性值不能省略，要求写为属性=“属性值”的形式。**

(三) **语义化的表单③**

n **语义化的目的：**达到结构合理，代码简洁的要求**。**

n **表单元素可能有特殊的边界、效果。**

n 。

<**form style="width:400px;">**

**<fieldset>**

**<legend>说明</legend>**

**姓名：<input type =“text”/>**

**</fieldset>**

**</form>**

n 表单元素的标注【语法】<label for=“表单元素的id”>标注的文本</label>

目的：为了增强鼠标的可用性。

**<form>**

**<label for="male">男</label>**

**<input type="radio"id="male" name="1"/>**

**<label for="female">女</label>**

**<input type="radio"id="female" name="1"/>**

**</form>**

name属性与id属性都是必须的。name属性由表单负责处理，而id属性是给<label>标签和表单元素进行关联使用的。

n **语义化的作用：**

(1) **语义化的目标是使页面结构更合理。**

(2) **建议在设计和开发过程中，使用语义化标签，从而达到见名知义的效果。**

(3) **语义化的结构更加符合Web标准，更利于当今搜索引擎的抓取（SEO的优化）和开发的维护。**

** **

**第4章初识CSS  2014/9/11**

一、 **使用CSS的意义**

n CSS全称：层叠样式表 / 风格样式表，用来进行网页风格设计的。

n ①可以统一的控制HTML中各标签的显示属性

②可以精确地定位网页元素的位置，美化网页外观。

n 使用css的优势：

(1) 内容与表现分离，eg: 在HTML文件中引入css样式

(2) 可以使网页的表现分离，并且容易修改。

(3) 丰富的样式，使页面布局更加合理

(4) 减少网页的代码量。

(5) 运用独立于页面的css，利于搜索引擎的搜索。

二、 **CSS的基本语法**

css规则由选择器与声明构成。

选择器**属性值**

h1\{

**font – size : 12px ;**

**color : \#F00 ;**

\} 声明

n <style>标签为HTML文档定义**样式信息**

n 在css中最基本的3种选择器：**标签选择器、类选择器和ID选择器**。

1. 标签选择器

css标签选择器用来声明 HTML中那些标签的。

2. 类选择器【可以在页面中使用很多次】

**.**类名称\{ \} <标签名 class = “类名称”>标签内容</标签名>

3. ID选择器【使页面代码具有非常高的可读性】

①它只适用于HTML页面中，因此它的针对性很强。

②同一个ID选择器在同一个页面中只能使用一次。

三、 **在HTML中引入CSS样式**

1. **行内样式【单行情况下推荐使用】**

使用style属性设置css样式仅对当前的HTML标签起作用，并且写在HTML标签中，这种形式不能使内容与表现分离。

2. **内部表样式【单一网页推荐使用】**

把css代码写在<head>的<style>的标签中，与HTML内容位于同一个HTML文件中。优点：方便在同页面中修改样式。缺点：但不利于在多页面间共享复用代码，对内容与样式的分离不够彻底。

3. ***外部样式表***【就近原则】【推荐使用】

1. 链接外部样式表

(1) 把css代码单独保存在扩展名为 .css的样式表文件下。在css文件中**不需要<style>标签**，**直接编写样式**即可。

(2) 在HTML中直接使用<link/>标签引用扩展名为.css样式表文件

2. 导入外部样式表

在HTML网页中的<head>标签中的**<style>**标签中导入外部样式列表。

<!--

@import url (“\_\_\_.css”) ;

\-->

链接式与导入式：

<table> 
 <tbody> 
 <tr> 
 <td> &nbsp; </td> 
 <td> 链接式 </td> 
 <td> 导入式 </td> 
 </tr> 
 <tr> 
 <td> 相同点 </td> 
 <td colspan="2"> 本质都是将一个独立的css样式表引用到HTML页面中 </td> 
 </tr> 
 <tr> 
 <td> 不同点 </td> 
 <td> &lt;link/&gt;标签属于XHTML范畴 </td> 
 <td> <a href="mailto:而@import是css2.1" rel="nofollow">而@import是css2.1</a>中特有的【不支持】 </td> 
 </tr> 
 <tr> 
 <td> 在网速慢的效果下也会一点点显示出来 </td> 
 <td> 网速慢不好使，黑白 </td> 
 </tr> 
 </tbody> 
</table>

n 样式优先级：

Ø 行内样式>内部样式表>外部样式表【就近原则】

n 选择器优先级：

Ø ID选择器>类选择器>标签选择器

(四) **CSS的高级应用**

n **css复合选择器**

1. **后代选择器（常用）**

写法：把最外层的标签写在前面，内层的标签写在后面，用空格分开。当标签发生**嵌套**时，内层的标签就为外层标签的**后代**。

**在HTML标签嵌套时：**

(1) 按标签的嵌套关系，直接按标签的嵌套关系编写。

(2) 按选择器的嵌套关系，eg:  .a  .b 或 .a  \#b（直接按样式的嵌套关系编写）

(3) \#a .b 或 \#a b

2. **交集选择器（不常用）**

第一个必须是标签选择器，第二个必须是**类选择器**或者**ID选择器**，两个选择器之间**不能有空格**，必须**连续书写**。这种方式的选择器，将选中同时满足后两者定义的元素，也就是前者所定义的标签类型，并且制定了后者的类型或者id的元素，故~~~。

p空格.txt\{color:red ;\} 后代选择器

p.txt\{color:blue ; line-height:28px ;\} 交集选择器

3. **并集选择器**

它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器（3个）都可以作为并集选择器的一部分。

n **css继承特性**

将HTML标签看作一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式，也称包含与被包含的标签为父子标签，即**子标签会继承父标签的风格样式**。

** **

**第5章 CSS美化网页元素 2014/9/13**

(一) 使用css美化网页文本的意义：

Ø 有效地传递页面信息

Ø 使页面更漂亮、美观，吸引用户

Ø 可以更好地突出页面主题内容

Ø 具有良好的用户体验

n ****是一个重要的编辑文本的标签，用来被组合HTML文档中的行内元素，它没有固定的格式表示。

n 使用css为标签添加样式，可以使用那3种选择器。

n **使用CSS设置字体样式**

<table> 
 <tbody> 
 <tr> 
 <td> 属性名 </td> 
 <td> 含义 </td> 
 </tr> 
 <tr> 
 <td> font-family </td> 
 <td> 类型 </td> 
 </tr> 
 <tr> 
 <td> font-size </td> 
 <td> 大小 </td> 
 </tr> 
 <tr> 
 <td> font-style </td> 
 <td> 风格 </td> 
 </tr> 
 <tr> 
 <td> font-weight </td> 
 <td> 粗细 </td> 
 </tr> 
 <tr> 
 <td> &nbsp; font </td> 
 <td> 在一个声明中，设置所有字体属性，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font : italic bold 36px “宋体”; </td> 
 </tr> 
 </tbody> 
</table>

1. 字体类型font-family （英文/中文）

² a \{font-family:Verdana,”楷体”;\}

² b \{ font-family: Times, "Times New Roman", "楷体"\}

² 英文字体放在中文字体前

2. 字体大小font-size【px】

其它的单位：in、cm、mm、pt、pc

3. 字体风格font-style

font-style属性有三个值：normal（默认）、italic（斜体可以理解成Italic是**使用文字的斜体**，）和oblique（是让**没有斜体属性**的文字倾斜）

4. 字体的粗细font-weight 属性的值

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> normal </td> 
 <td> 默认值，定义标志的字体400 </td> 
 </tr> 
 <tr> 
 <td> bold </td> 
 <td> 粗体字体700 </td> 
 </tr> 
 <tr> 
 <td> bolder </td> 
 <td> 更粗的字体 </td> 
 </tr> 
 <tr> 
 <td> lighter </td> 
 <td> 更细的字体 </td> 
 </tr> 
 </tbody> 
</table>

5. 字体属性

顺序：字体风格 字体粗细 字体大小 字体类型

<table> 
 <tbody> 
 <tr> 
 <td> 中文 </td> 
 <td> 英文 </td> 
 </tr> 
 <tr> 
 <td> 楷体 </td> 
 <td> regular script </td> 
 </tr> 
 <tr> 
 <td> 宋体 </td> 
 <td> Song typeface </td> 
 </tr> 
 <tr> 
 <td> 隶书 </td> 
 <td> the Han Dynasty </td> 
 </tr> 
 <tr> 
 <td> 黑体 </td> 
 <td> black body </td> 
 </tr> 
 </tbody> 
</table>

n **使用CSS排版网页文本**

**文本属性**

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 含义 </td> 
 </tr> 
 <tr> 
 <td> color </td> 
 <td> 颜色 </td> 
 </tr> 
 <tr> 
 <td> text-align </td> 
 <td> 设置元素水平对齐方式 </td> 
 </tr> 
 <tr> 
 <td> text-indent </td> 
 <td> 首行文本的缩进 </td> 
 </tr> 
 <tr> 
 <td> line-height </td> 
 <td> 文本的行高 </td> 
 </tr> 
 <tr> 
 <td> text-decoration </td> 
 <td> 文本的装饰 </td> 
 </tr> 
 </tbody> 
</table>

1. **文本颜色**（在font属性里面，颜色不能使用简写方式）

2. **水平对齐方式（**text-align**）**

**left(默认值) right**（把文本排到右边） **center（中间） justify**（实现两端对其的效果）

3. **首行缩进与行高**

p \{ text-indent:2em \}

first para... 
second long paragraph .

行高换算为像素：**字体的大小**（12px）\***行高**（line-height : 1.5 ;）=**像素**（18px）

4.  **文本装饰**

**text-decoration的常用值**

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> none【常用】 </td> 
 <td> 默认值，定义的标准文本 </td> 
 </tr> 
 <tr> 
 <td> underline【常用】 </td> 
 <td> 下划线 </td> 
 </tr> 
 <tr> 
 <td> overline </td> 
 <td> 上划线 </td> 
 </tr> 
 <tr> 
 <td> line-through </td> 
 <td> 删除线 </td> 
 </tr> 
 <tr> 
 <td> blink </td> 
 <td> 设置文本闪烁，只在火狐有效，IE无效 </td> 
 </tr> 
 </tbody> 
</table>

5. **垂直对齐方式【**经常用来图片与文字居中**】（top、bottom）**

**p img \{vertical – align : middle ; \}**

**<img src =“图片”/>文字**

(二) **使用CSS设置超链接**

n **超链接伪类**

n 超链接单机前和单机后的不同颜色，其实是超链接的伪类样式。所谓伪类，就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式。

n **基本语法“标签名：伪类名\{ 声明；\}”**

**a : hover \{ color ：\# 61E461 ;\}**

n **为了防止图片加上超链接后出现**边框**：通常会CSS文件开头加入“img \{ border : 0px ; \}”**

n **常用的超链接伪类【顺序】**

<table> 
 <tbody> 
 <tr> 
 <td> 伪类名称 </td> 
 <td> 含义 </td> 
 </tr> 
 <tr> 
 <td> a : link </td> 
 <td> 未单击访问时超链接样式 </td> 
 </tr> 
 <tr> 
 <td> a : visited </td> 
 <td> 单击访问后超链接样式 </td> 
 </tr> 
 <tr> 
 <td> a : hover </td> 
 <td> 鼠标悬浮其上超链接样式 </td> 
 </tr> 
 <tr> 
 <td> a : active </td> 
 <td> 鼠标单击未释放的超链接样式 </td> 
 </tr> 
 </tbody> 
</table>

在实际页面开发中，仅设置两种超链接样式，一种是超链接a标签选择器样式（超链接无下划线 text-decoration:none;），另一种是鼠标悬浮在超链接上（显示下划线）的样式。

n **使用CSS设置鼠标形状（浏览器之间有差异）**

**cursor属性常用值**

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> default </td> 
 <td> 默认光标 </td> 
 </tr> 
 <tr> 
 <td> pointer </td> 
 <td> 超链接的指针span{ cursor：pointer ; } </td> 
 </tr> 
 <tr> 
 <td> wait </td> 
 <td> 指示程序正在忙 </td> 
 </tr> 
 <tr> 
 <td> help </td> 
 <td> 指示可用的帮助 </td> 
 </tr> 
 <tr> 
 <td> text </td> 
 <td> 指示文本 </td> 
 </tr> 
 <tr> 
 <td> crosshair </td> 
 <td> 鼠标呈现十字状 </td> 
 </tr> 
 </tbody> 
</table>

(三) **背景样式**

² **< div >标签可以把HTML文档分割成独立的、不同的部分。**

² **设置页面中id名称为 header的<div>的宽和高，（控制网页元素宽、高的两个属性） \#header \{**

**width : 200px;**

**height : 280px;**

**\}**

** **

n **背景属性在CSS中**背景包括**背景颜色**和**背景图像**两种方式。

1. **背景颜色**

在CSS中，使用background-color属性设置字体、<div>、列表等**网页元素**的背景颜色，它有一个特殊的值：**transparent**透明【默认值】

在CSS中的注释符号是  /\*\`\`\`\`\`\`\*/

2. **背景图像 (background-image属性)**

1） **background-image : url(图片路径)**相对路径

**background-image：none  （不显示背景图像）少用**

2） **背景重复方式**

**background-repeat属性的4个值：（不平铺）**

Ø **repeat：沿水平与垂直两个方向平铺**

Ø **no-repeat：不平铺**

Ø **repeat-x：只沿水平方向平铺**（导航背景，标题背景）

Ø **repeat-y：只沿垂直方向平铺**（不常用）

3） **背景定位**

**background-position**用来设定**图像**在背景中的位置，其属性对应的取值：

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 含义 </td> 
 <td> 示例 </td> 
 </tr> 
 <tr> 
 <td> Xpos &nbsp;Ypos </td> 
 <td> 水平垂直（像素） </td> 
 <td> 0px 0px（默认）无偏移&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30px &nbsp;40px（正向偏移，图像向下向右移动） </td> 
 </tr> 
 <tr> 
 <td> X% &nbsp;&nbsp;&nbsp;Y% </td> 
 <td> 用%表示背景的位置 </td> 
 <td> 30% &nbsp;50%（垂直方向居中，水平方向偏移30%） </td> 
 </tr> 
 <tr> 
 <td> &nbsp; X、Y方向关键词 </td> 
 <td> &nbsp; left、center、right &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top &nbsp;&nbsp;、&nbsp;&nbsp;&nbsp;center 、&nbsp;bottom </td> 
 <td> 使用水平和垂直方向的关键词进行自由组合，如省略，则默认值为center，eg： left &nbsp;top（左上角） top （上方水平居中位置出现） </td> 
 </tr> 
 </tbody> 
</table>

3. **背景**

**背景样式的CSS属性也可以简写**

. a \{

background : \#C00  url(图片路径)  205px  10px  no-repeat ;

优点：可以减少代码量，在后期的CSS代码维护中非常方便。

n **设置超链接背景**

**超链接是网页中最基本的元素，任何页面的跳转、提交都会用到超链接。**

(四) **列表样式**

1. **list-style-type**属性设置**列表项标记**的类型

list-style-type ：none ;

list-style-type ：disc ;【实心】

list-style-type ：circle ;【空心】

list-style-type ：square ;【方块】

list-style-type ：decimal ; /'desɪm(ə)l/

2. **list-style-image属性使用图像来替换列表项的标记**

li\{

list-style-image : url（图片路径）;

list-style-type：circle ;（防止图片在浏览器中不能使用）

3. **list-style-position设置在何处放置列表项的标记【不常用】**

用来设置在**何处**放置列表项标记，有两个值，即 inside和outside。

Ø inside表示项目标记放置在文本以内，且环绕文本根据标记对其；

Ø outside是默认值，它保持标记位于文本的左侧，列表项标记放置在文本以外，且环绕文本不根据标记对齐。

Li\{

list-style-image : url（图片路径）;

list-style-type：circle ;（防止图片在浏览器中不能使用）

list-style-position：outside;设置项目标记在文本左侧

4. **list-style**

**简写属性表示在一个声明中设置所有列表的属性。**

**顺序：类型\---列表项标记（的位置）\---图片路径**

li\{

list-style:circle  outside  url (图片路径) ;

使用list-style设置列表样式时，可以不设置其中某个值，未设置的属性会使用默认值。

Eg: list-style：circle  outside ;  （默认没有图像标记）

l **在实际的制作网页中，通常使用“list-style”或“list-style-type”设置项目无标记符号。**

l **认识<div>标签**

**<div>标签可以把HTML文档分割成独立的、不同的部分，因此<div>**

** **

**第6章盒子模型 2014/9/16**

(一) **盒子模型【盒子套盒子】**

l CSS将网页中的所有元素都看成一个盒子。

l 盒子模型属性：有边框、内边距和外边距。（还包括“**元素内容本身**”）

1) 对应包装盒的纸壳，它一般具有一定的厚度

2) 内边距：位于边框内部，是内容与边框的距离，既对应包装盒的填充部分，所以也称为**填充**。外边距：代表盒子与其它盒子间的距离。

3) 外边距：位于边框外部，边框外面周围的间隙，所以也称为**边界**。 内边距**外边距**边框

l 因为盒子是矩形结构，所以边框、内边距、外边距这些属性都分别对应上(top)、下(bottom)、左(left)、右(right)四条边，这四条边的**设置**可以不同。

l 盒子除了平面结构图外，还包括三维的立体结构图，从上往下看，它表示的层次关系：

1) 首先是盒子的主要标识：边框(border)，位于盒子的第一层。

2) 其次是元素内容(content)、内边距(padding)，两者位于第二层。

3) 再次是前面着重讲解的背景图(background-image)，位于第三层。

4) 背景色(background-color)，位于第四层。

5) 最后是整个盒子的外边距。

l **边框**

l **边框有3个属性：color（颜色）  width（粗细）  style（样式）**

1. **border-color**

由于盒子模型分为上下左右四个边框，border-color属性的设置方式：

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> border-top-color </td> 
 <td> 上边框 </td> 
 </tr> 
 <tr> 
 <td> border-bottom-color </td> 
 <td> 下边框 </td> 
 </tr> 
 <tr> 
 <td> border-left-color </td> 
 <td> 左边框 </td> 
 </tr> 
 <tr> 
 <td> border-right-color </td> 
 <td> 右边框 </td> 
 </tr> 
 <tr> 
 <td> border-color </td> 
 <td> 设置四边框的颜色，（上、右、下、左）空格 </td> 
 </tr> 
 </tbody> 
</table>

2. **border-width**

border-width用来指定border的粗细程度，它的值：

Ø thin：设置细的边框

Ø medium：默认值，设置中等的边框（2px）

Ø thick：设置粗的边框

Ø 像素值：表示具体的数值，自定义设置边框的宽度**（常用）**

**border-top-widthborder-top-widthborder-top-widthborder-top-width  **

**border-width(按顺序，上、右、下、左) 像素值px**

3. **border-style** （上、右、下、左）

**用来设定border的样式，它的值有：\[ none \]、dotted、dashed、\[ solid \]、hidden、double、groove、ridge、outset**

4. **border简写属性**

**顺序：粗细、颜色、样式（没有限制，也可颠倒）**

l **外边距**

一般情况下，页面内容，是不会紧贴浏览器的，而是与浏览器有一定的距离，因为body本身也是一个盒子，也有一个外边距，这也是由于body的外边距产生的。

margin – top / right / bottom / left（设置上/右/下/左外边距）

为了使页面，在不同的浏览器之间显示的效果一样，通常在CSS中通过**并集选择器**，统一设置这些标签的外边距为0px，这样页面中不会因为外边距而产生不必要的空隙，各浏览器的效果也会一样。

使用margin就可以设置页面居中显示 eg:  margin:0px auto ;

l **内边距//会改变整个元素的大小**

**用于控制内容与边框之间的距离。**

**padding-top/bottom/left/right（设置上/右/下/左内边距为？px）**

现在使用padding属性，设置列表内边距为0px，设置页面内容居中显示，同时对于页面中能够产生外边距的元素统一使用并集选择器设置其外边距为0px。

内边距的值，不允许为负。

l **盒子模型的尺寸**

l **导致页面元素折行显示，或撑开页面的原因，主要还是由于盒子尺寸问题。**

l width和height指的是内容区域的宽度和高度。增加了边框、内边距和外边距后**不会影响内容区域的尺寸，但是会增加盒子模型的总尺寸。**

l **盒子模型总尺寸=border-width \+ padding + margin + 内容宽度**

(二) **标准文档流**

**简称“文档流”，**是指在不使用其它的排版和定位相关的特殊CSS规则时，**各种元素的排列规则**，即CSS规定的网页元素默认的排列方式。

l **标准文档流组成**

1. 块级元素

从前面学过的列表中可以知道，每个<li>都占据着一个矩形的区域，并且和相邻的<li>依次竖直排列，不会排在同一行。<ul>与<li>一样，也具有同样的性质，故！（block level）。它们总是以一个块集形式表现出来，并且跟同级的兄弟依次**竖直**排列，**左右撑满**，eg: 标题标签、段落标签、<div>标签。

2. 内联元素

**对于文字这类元素，各个字母之间横向排列，到最右端自动折行，故！eg： <a><img/>**

**区别**：块集元素独占一行，拥有自己的区域，而内联元素则没有自己的区域。eg : 标签可以包含于<div>标签中，成为它的子元素，反过来则不成立。

l **display属性**

Ø **标准文档流有两种元素，一种是以<div>为代表的块级元素，还有一种是以为代表的内联元素。**

Ø **对于以上那些标签，另外还有一个专门的属性来控制元素的显示方式，是像<div>那样块状显示，还是像那样行内显示，这就是display属性。**

Ø **在CSS中，display属性用于指定HTML标签的显示方式，它的值有许多，常用的就只有3个：**

Ø **display属性常用值：**

<table> 
 <tbody> 
 <tr> 
 <td> 值 </td> 
 <td> 块集元素的默认值，元素会被显示为 </td> 
 </tr> 
 <tr> 
 <td> block </td> 
 <td> 块集元素的默认值，元素会被显示为块集元素，该元素前后会带有换行符 </td> 
 </tr> 
 <tr> 
 <td> inline </td> 
 <td> 内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符 </td> 
 </tr> 
 <tr> 
 <td> none </td> 
 <td> 该元素不会被显示 </td> 
 </tr> 
 </tbody> 
</table>

l 在**DIV+CSS**制作网页的过程中，无时无刻不在应用着【盒子模型】。

** **

**第7章浮动 2014/9/17**

一、 **网页布局**

网站基本上都包括：**网站**导航、**网页**主体内容、**网站**版权部分这三个部分

l 网页布局类型有：**“国”字型**、拐角型、标题正文型、左右框架性、上下框架型、综合框架型、封面型、Flash型、变化型。

Ø “国”字型 / 1—3--1型，**最上面**是网站导航。**中间主体部分**为左、中、右部分；其中左、右分为两小条内容；中间是主要部分；与左右一起罗列到底。**最下面**是网站版权。

Ø 拐角型 / 1—2--1与“国”字型，只是形式上的区别。上方：网站导航。中间：左，左侧链接；右，右侧内容。下方：网站版权。

二、 **浮动**

在标准文档流中，一个块集元素**在水平方向会自动伸展**，**直到**包含它的元素的边界。

要实现浮动，需要在CSS中设置float属性，**默认值为none**，也就是标准文档流块集元素通常显示的情况。如果将float属性的值设为left或right，元素就会像其父元素的左侧或右侧浮动，同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容和宽度来确定，这样就能实现网页中的 1—2—1 / 1—3—1 布局类型。

l float属性的作用

从**全局**来布局网页；对网页中的导航菜单、栏目标题、商品列表**等**内容进行排版。

l float属性

float属性值

<table> 
 <tbody> 
 <tr> 
 <td> float属性值 </td> 
 <td> &nbsp; </td> 
 </tr> 
 <tr> 
 <td> left </td> 
 <td> 元素向左浮动 </td> 
 </tr> 
 <tr> 
 <td> right </td> 
 <td> 元素向右浮动 </td> 
 </tr> 
 <tr> 
 <td> none </td> 
 <td> 默认值。元素不浮动，并会显示在其文本中出现的位置 </td> 
 </tr> 
 </tbody> 
</table>

三、 **清除浮动**

l 清除浮动影响

<table> 
 <tbody> 
 <tr> 
 <td> clear属性值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> left </td> 
 <td> 在左侧不允许浮动元素 </td> 
 </tr> 
 <tr> 
 <td> right </td> 
 <td> 在右侧不允许浮动元素 </td> 
 </tr> 
 <tr> 
 <td> both </td> 
 <td> 在左、右两侧不允许浮动元素 </td> 
 </tr> 
 <tr> 
 <td> none </td> 
 <td> 默认值，允许元素出现在两侧 </td> 
 </tr> 
 </tbody> 
</table>

l 将<img>标签两侧的浮动元素清除：

**img \{**

**clear :both ;**

**\}**

l ** clear** 属性**常用于清除浮动带来的影响**和**扩展盒子模型的高度**。

l 扩展盒子高度

l 浮动的元素脱离了标准的文档流；一个<div>的范围是由它里面的标准文档流的内容决定的，与里面浮动的内容无关。

四、 **溢出处理**

l 在网页的制作过程中，有时需要将内容放在一个宽度和高度固定的盒子中，**超出的部分隐藏**起来，或者**以带滚动条的窗口显示**等。

l overflow属性

<table> 
 <tbody> 
 <tr> 
 <td> overflow属性值 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> visible </td> 
 <td> 默认值，内容不会被修剪，会呈现在盒子之外 </td> 
 </tr> 
 <tr> 
 <td> hidden </td> 
 <td> 内容会被修剪，并且其余内容是不可见的 </td> 
 </tr> 
 <tr> 
 <td> scroll </td> 
 <td> 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容 </td> 
 </tr> 
 <tr> 
 <td> auto </td> 
 <td> 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 </td> 
 </tr> 
 </tbody> 
</table>

l overflow属性的妙用

在CSS中 overflow属性除了可以对盒子内容溢出进行处理外，还可以与盒子宽度配合使用，清除浮动来扩展盒子的高度。由于这种方法不会产生冗余标签，仅需要设置外层盒子的宽度和overflow属性值即可。因此这种方法常用来设置外层盒子包含内层浮动元素的效果。

**第8章定位网页元素 2014/9/20**

**一、定位在网页中的应用**

l 在CSS中，有三种基本的定位机制：标准流、浮动和绝对定位。

l 无论是弹出的选择窗口框，还是下拉菜单、浮动图片，他们都有一个共同的特点，即脱离了原来的界面，浮动在了网页之上，对于这样网页元素的定位，使用position属性或position属性与z-index属性的结合来实现。

**二、position属性**

l **position**与float一样，都是CSS排版中，非常重要的概念。字面意思：指定盒子的位置，指**它**相对于**其父级的位置**和**相对它自身**应该在的**位置**。

<table> 
 <tbody> 
 <tr> 
 <td> position属性的三个值 </td> 
 <td> 分别代表着不同的定位类型 </td> 
 </tr> 
 <tr> 
 <td> static </td> 
 <td> 默认值，没有定位。元素按照标准流进行布局 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(182,221,232)"> relative </td> 
 <td style="background:rgb(182,221,232)"> 相对定位，使用相对定位的盒子位置常以标准流的排版方式为布局，然后使盒子相对于它在原本的标准位置偏移指定的距离。 </td> 
 </tr> 
 <tr> 
 <td style="background:rgb(182,221,232)"> absolute </td> 
 <td style="background:rgb(182,221,232)"> 决对定位，盒子的位置以包含它的盒子为基础进行偏移。 </td> 
 </tr> 
 <tr> 
 <td> fixed </td> 
 <td> 固定定位，和绝对定位类似，只是以浏览器的窗口为基准进行定位，也就是当拖动窗口滚动条时，依然保持对象位置不变。（有的浏览器不支持） </td> 
 </tr> 
 </tbody> 
</table>

l static

**为默认值，表示盒子保持在原本应该在的位置上，没有任何移动效果。**

l relative

l relative属性值设置元素的**相对定位**，还需要指定一定的**偏移量**。（top、right、bottom、left）

l 相对定位元素的规律：

1) 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置。

2) 设置相对定位的盒子仍在标准流中，他的父级盒子和相邻的盒子都没有任何影响。

l 以上都是针对**标准流方式**进行的。实际上，**对浮动的盒子使用相对定位也是一样的**。

l absolute

l 决对定位的结论：

1) 使用了绝对定位的元素，以它最近的一个“**已经定位**”的“**祖先**”元素为基准进行偏移。如果没有已经定位的祖先元素，那么就会以浏览器窗口为基准进行定位。

2) 绝对定位的元素从标准文档流中脱离，这就意味着它们对其它元素的定位不会造成影响。

Ø “已经定位”元素：position属性被设置，并且设置为除static之外的任意一种方式。

Ø “祖先”元素：就是从文档流的**任意节点开始**，走到根节点，经过的**所有节点**都是它的祖先，其中**直接上级节点**是他的父节点，以此类推。

l **如果设置了绝对定位，而没有设置偏移量，那么将保持在原来的位置**。

**三、z-index属性**

l **z-index属性的应用**

l **z-index的默认值为”auto”.**

l **在CSS中，z-index属性用于调整元素定位时重叠层的上下位置。**

l **z-index属性在立体空间中表示垂直于页面方向的Z轴。z-index属性的值为整数，可以是正数，也可以是负数。**

l **设置层的透明度：（在 CSS  中有两种方式\---）**

<table> 
 <tbody> 
 <tr> 
 <td> 属性 </td> 
 <td> 说明 </td> 
 <td> 举例 </td> 
 </tr> 
 <tr> 
 <td> opacity </td> 
 <td> X值为&nbsp;0~1 ，值越小越透明 </td> 
 <td> opacity：0.4； </td> 
 </tr> 
 <tr> 
 <td> filter：alpha(opacity=x) </td> 
 <td> x值为0~100，值越小越透明 </td> 
 <td> filter：alpha(opacity=40) </td> 
 </tr> 
 </tbody> 
</table>

l **现在开始编写CSS排版、美化页面，需要设置如下几个方面的样式。**

1) 设置外层concent的边框样式、宽度、定位方式。

2) 由于文本层和半透明层在图片的上方，所以需要设置它们的定位方式，以及透明层的透明度。

l 网页中的元素都含有两个堆叠层级：

Ø 一个是未设置绝对定位时所处的环境，这时所有层的z-index属性值总是0，如同页面中的图片层、下方文本层；

Ø 另一个是设置绝对定位时所处的环境，这个环境所处的位置由z-index属性来指定，如同页面中的透明层和其上方的文本层，z-index值**大**的层**覆盖**值**小**的层。

Ø 如果设置了绝对定位的层在没有设置绝对定位的层下方，只需要设置绝对定位的层的属性 z-index 值为**负值**即可。