目录

1、字体属性

2、文本

3、定位

8、溢出

10、浮动

1.1 Web系统体系结构

1、C/S（即Client/Server）结构

2、B/S（即Broswer/Server）结构

1.3  Web相关概念

2.1 网页文档结构

2.2  标签基础

2、表格

3.6  盒模型

2、多盒子边距合并问题

3.1.2 CSS使用方式

CSS基础概念

6、元素类型

7、文档流

2、选择器优先级

---

1、字体属性

通过设置文本的字体、字号、风格、行间距可以增强网页内容的可读性、突出重点内容。

（1）设置字号（font-size）

下图分别使用px、%、em做为单位设置字号，用%、em为单位时以父元素的字号作参考，例如父元素字号为16px，则62.5%当于10px、1em相当于16px。

例如：

注：所有浏览器默认字号为16px。

（2）设置粗体（font-weight）

通过font-weight属性来设置文本的粗细。下面详细介绍其取值情况。

font-weight取值为normal，定义标准字符，不加粗，normal是默认值。

font-weight取值为bold，设置文本为粗体。还可以取值bolder，设置更粗的字体；取值lighter，设置更细的字体；取值inherit，规定继承父元素字体的粗细。

font-weight取值700，以数值设置文字为粗体，可取100~900之间的值，以100为增量。400相当于normal，700等价于bold。

举例如下：

（3）设置风格（font-style）

font-style取值normal（默认值），显示一个标准的字体样式。

font-style取值italic，会显示一个斜体的字体样式。

font-style取值oblique，也会显示一个倾斜的字体样式，它与italic的效果区别不明显。

font-style取值inherit，规定从父元素继承字体样式。

例如：

（4）设置字体（font-family）

可以同时给元素指定多个字体，不同字体之间使用逗号分隔，如果字体名称为汉字或由多个单词组成，则必须使用引号包裹该字体名称。

使用font-family属性设置的字体，浏览器会读取用户设备上系统安装的字体。当指定了多个字体后，浏览器会按照从前往后的序查找并设置字体，如下图所示，如果用户电脑未安装“微软雅黑”字体，则会查找并使用arial字体，依次类推，直到找到可用字体。如果所设置的字体无一可用，则使用浏览器默认字体。

字体设置举例如下：

（5）设置行间距（line-height）

将line-height（行间距或行高）与font-size的差值分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框，line-height属性的设置会影响行框的布局。

例如：

2、文本

文本是网页的核心内容之一，通常涉及到文本对齐、修饰等问题，突出布局的美观性。

（1）文本对齐

设置文本对齐使用text-align属性，可以设置文本左对齐、右对齐、居中对齐、两端对齐等。例如：

（2）文本修饰

修饰文本使用text-decoration属性进行设置，该属性允许对文本设置某种修饰效果，如加下划线、删除线等。若后代元素没有自己的修饰，则继承祖先元素的设置。

例如：

3、定位

通过定位坐标来设置元素相对于某一元素的位置。CSS中有4种定位方式，分别是静态定位、相对定位、绝对定位和固定定位。CSS使用position属性设置定位方式。而元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

（1）静态定位（static），所有元素默认的定位方式，处于正常文档流中。注意，在静态定位方式下，设置元素位置坐标无意义。

例如：

（2）相对定位（relative），相对于元素自已在网页中原来的位置进行定位，不会脱离文档流。

例如：

（3）绝对定位（absolute），生成绝对定位的元素，相对于静态定位以外的第一个父元素进行定位，会脱离文档流（指设置绝对定位后其原来空间不再属于当前元素）。

例如：

（4）固定定位（fixed），也生成绝对定位的元素，相对于浏览器窗口进行定位，也会脱离文档流。

例如：

4、链接（伪类）

在使用超链接时，会发现这些链接上的文本与普通文本在表现方式上有许多不同，如链接上的文字会出现下划线，颜色与鼠标形状也会改变等。

超链接（<a>）是Web系统中一个很常用的重要标签，它有4种状态：未访问、已访问、悬停时以及点击时，可根据链接处于不同的状态设置不同的样式。

通过如下方式获取链接所处的状态：

        a:link 未被访问

        a:visited 已被访问

        a:hover 悬停时

        a:active 点击时

如果同时定义4种状态的样式，其书写顺序需要按：

   link--visited--hover--active

（即LoVeHAte原则）进行设置，否则可能会失效。

例如：

5、列表

设置列表属性主要用于控制列表显示的样式，可以通过list-style的几个子属性从列表项标记的类型、位置、图片等几个方面进行设置。

（1）设置列表标志类型，使用list-style-type属性进行设置，该属性可取值none(无标记)、disc(默认，实心圆)、circle(空心圆)、square(空心方块)等。

例如：

（2）设置标志类型为图片，使用list-style-image属性进行设置，用用户指定图像来做列表项的标记。

例如：

（3）设置标志位置，使用list-style-position属性进行设置，该属性可取值inside、outside(默认)，区别在于标记与列表项文本内容左边的间距不一样。

例如：

（4）list-style是一个复合列表属性，涵盖了所有其他列表样式属性。可以将上述3个子属性按顺序用一个list-style复合属性来书写。

如下例所示：

6、背景

可以使用不同颜色、图片等作为元素的背景，在使用图片作背景时，还涉及到平铺、位置、滚动等方面的设置。

（1）设置背景色使用background-color属性，该属性的取值可以是表示颜色的关键字、16进制颜色值或者RGB颜色值。

例如：

（2）设置背景图片使用background-image属性，该属性的取值可以通过url(图片文件位置)的方式给出。

例如：

（3）设置背景图片位置使用background-position属性，该属性的值由两个参数组成，第1个参数表示水平，第2个参数表示垂直。

例如：

（4）设置背景平铺使用background-repeat属性，该属性的可能取值有no-repeat、repeat-x、repeat-y等。

例如：

（5）背景图是否随内容滚动使用background-attachment属性进行设置，该属性的可能取值有scroll、fixed等。

例如：

7、透明度

元素透明度在元素层叠时体现得特别明显，即表示从上层元素可以隐约看到背景的清晰程度。设置元素透明度使用opacity（不透明度）属性，该属性取值范围为0~1之间的值，0表示完全透明，值越大越不透明。透明度的设置可以使元素产生一定程度的立体感。

例如：

8、溢出

元素的嵌套产生了父子关系，外层的元素称为父盒子，内层的元素称为子盒子，当子盒子大小或纯文本内容大于父盒子时便会产生溢出。

通过overflow属性可以对溢出进行处理，该属性取值hidden时，元素内容被修剪，溢出部分不可见；该属性取值scroll时，元素内容被修剪，浏览器显示滚动条供用户来浏览溢出部分；该属性取值auto时，如果元素内容被修剪，浏览器显示滚动条以便查看其余内容。

例如：

9、层级

当多个元素设置了互相重叠的定位坐标时可能会发生相互覆盖的情况，通过设置z-index可以调整其层级顺序。以浏览器所在平面为参考平面（即z-index=0），z轴垂直向外指向浏览者方向的值为正值，反之为负值。通过设置层级也可以生成一定程度的立体效果。

例如：

10、浮动

通过浮动可以使元素脱离文档流，改变元素默认的排布方式，进而可以灵活的控制网页的布局。通过float属性设置元素的浮动。

（1）float取值为left时，设置元素左浮动，即元素向左靠。

例如：

（2）float取值为right时，设置元素右浮动，即元素向右靠。

例如：

    float:right;

11、清除浮动

清除浮动就是消除因浮动带来的影响。使用clear属性定义元素的哪边不允许出现浮动元素。当元素的clear属性取值left时，则在该元素左侧不允许浮动元素；当元素的clear属性取值right时，则在该元素右侧不允许浮动元素；当元素的clear属性取值both时，则在该元素左右两侧都不允许浮动元素；当元素的clear属性取值none时（默认值），则在该元素两侧允许浮动元素。

例如：

1.1 Web系统体系结构

了解结构是我们学习很多课程非常重要的方法。

Web应用项目本身是一种软件系统，它也是具有自身结构的，即系统体系结构。有一门课程《软件体系结构》会专门研究这个问题。

系统体系结构是一个综合各种观点的模型，用来完整描述整个系统，通过系统体系结构就能够了解一个软件系统的基本架构。常见的系统体系结构有C/S结构和B/S结构。

1、C/S（即Client/Server）结构

首先，了解一下C/S的工作流程，Server端存储了各种资源，我们在Client端通过网络发送资源请求，接收并显示Server端响应的内容。如下图所示：

浏览Web内容是Internet提供的主要服务，它以HTTP协议(HyperText Transfer Protocol)在网上传送以HTML(Hyper Text Markup Language)语言编写的网页内容，从而进行信息交流。

它的具体工作步骤如下：

☆ 通过客户端浏览器输入URL向WEB服务器发出服务请求；

☆ 服务器解析浏览器请求的URL，找到相应的网页文件；

☆ 网页中包含JavaScript等脚本，它将随HTML文档一起下载到客户端；若网页中嵌套有ASP等程序，服务器将执行这些程序并将运行结果以HTML标记形式发送给客户端；

☆ 浏览器解释HTML文档，并显示结果。

超文本传输协议(HTTP)是WEB浏览器与WEB服务器应用层之间的通信协议。HTTP会话过程包括4个步骤：

☆建立链接(connection)；

☆发送请求(request)；

☆响应请求(response)；

☆关闭链接(close)。

在C/S结构下，不同的服务需要安装不同的客户端软件，进而占用非常多的系统资源。除此之外它还有其它一些弊端，比如A需要在B电脑上处理文件，但B电脑并未安装类似的软件，这样得先去下载，非常不方便，并且软件升级后也需要重新下载。因此，需要有新的方法来解决该问题，于是就有了新的B/S结构。

2、B/S（即Broswer/Server）结构

B/S结构就是浏览器/服务器结构，它解决了C/S结构所带来的不便，能够将所有的服务（如QQ、邮件等）都通过浏览器来完成。由于操作系统通常都安装了某款浏览器，这样可以更多的节省系统资源。同时，各种服务软件功能的升级也无需重新下载，只要刷新网页即可。但B/S也存在一些不足，比如操作的稳定性、流畅度等方面相对较弱，并严重依赖网络的状况。

在讲解了C/S架构和B/S架构之后，为了让大家更加清楚它们各自的特点，下面对它们做对比说明，如表所示。

请思考：C/S和B/S的关系是怎样的呢？B/S的工作流程又是怎样的呢？

提示：二者的工作流程基本一致，B/S首先是C/S。

1.3  Web相关概念

1、URL(Uniform Resource Locator )

URL即统一资源定位器，也就是各个网页在Internet上的地址。通俗地讲，URL就是网址，指定Internet资源的位置。

URL的结构由三部分组成：http://网站地址/目录路径/文件名称。

其中，“http://”为网络访问的协议部分；“网站地址”就是网络服务器的地址，可以是域名或者IP地址；“/目录路径/文件名称”表示资源存放在服务器上的实际位置。

例子：http://www.cqvip.com/qk/83461A/200901/index.shtml

访问怀化学院学报网站的qk/83461A/200901目录路径中的index.shtml。

2、超链接

超链接是实现超文本的主要技术。它指向WWW的资源，如不同站点的网页、同一站点的其它网页、网页的其它段落。

超链接的作用就是，在浏览网页时，如果用鼠标单击超链接，就会跳转到超链接所指向的资源，可以从WEB上下载信息。

超链接的判断方法很简单，当用鼠标把光标箭头移动到超链接上时，光标会改变成手的形状。

3、网站

网站是一个存放在网络服务器上的完整信息的集合体。

网站内通常包含一个或多个网页，这些网页以一定的形式链接在一起，成为一个整体。

4、网页

网页是网站的重要组成部分，它是一张页面，可以看成是一个单一体，是网站的一个元素。网页里可以有文本、图片、声音、视频、动画等元素。

其中，文本是构成网页的主体。对文本元素的设计包括字体、字型、颜色、段落设置以及定位等。而图片是实现网页图文并茂的主要手段。常用的图形文件格式有GIF、JPEG、PNG、矢量格式。在使用图片时，应掌握的基本原则是，图形文件小、数量少，图像质量高，合理使用动画。

5、主页

主页也称之为首页。它是一个殊性的网页，是整个网站的起始点和汇总点。

主页也是浏览者浏览一个网站的入口。

6、静态网页

静态网页是指这个网页不论在何时从何地浏览，都将显示相同的画面和内容，且用户仅能浏览，无法提供信息给网站，让网站作出响应。

静态网页的编程语言有HTML、CSS等。 HTML(超文本标记语言)是网页设计的基础，也是表示网页的一种规范，通过标记符（或标签）来定义网页内容的显示格式；CSS(层叠样式表)技术是HTML功能的扩展，使用它能设计出更具表现力的网页。

注意：在网页中添加相关的动画，并不代表它不是静态网页。

7、动态网页

动态网页是指网页能够按照用户的需求做出动态响应。常见的动态网页有留言板、论坛等。

常用的网页动态/特效脚本语言有JavaScript和VBScript。其中，JavaScript是一种基于对象的、动态的、跨平台的、具有简单性与安全性的脚本语言。JavaScript简单而功能强大，主要表现在：

(1)制作网页特效；

(2)实现表单数据的客户端校验；

(3)实现窗口动态操作。

8、网页设计原则

网页设计应掌握以下原则：

(1)页面力求精简：页面简洁醒目，颜色不宜过深，图片不宜过大过多；

(2)巧妙安排图形图像：利用图片的视觉效果使页面生动，吸引浏览者；

(3)善于借鉴信息：参考、应用Internet上现成的信息，可使网页制作收到事半功倍的效果。

(4)内容通俗易懂：内容丰富，容易查找，易读易懂。

(5)页面以小为好，恰到好处：满足信息量和速度的需求。

9、网页设计技术

从静态网页与动态网页的概念部分的学习，我们知道，网页都具有自己的结构、样式和行为。其中，网页结构由HTML语言来编写，网页样式由CSS定义和设计，网页的行为由JavaScript来编写。因此，网页设计的3大技术分别是HTML、CSS和JavaScript，在后面章节会对它们进行详细介绍。

2.1 网页文档结构

1、文档基本结构

一个HTML文件最基本的文档结构，是由文档里的<html>、<head>、<title>、<body>等标签按照特定的顺序构成的。如：

<html>

    <head>

        <title>网页都应有标题</title>

    </head>

    <body>

        网页的主体内容写在这里，将会在浏览器中显示。

    </body>

</html>

2、语法规范

HTML自首次发布至今，经历过几次修改，在这个过程当中产生了两个具有代表性的版本，它们分别是HTML4.01和XHTML1.0。这两个版本的语法规范是不一样的，为了保证浏览器能够使用正确的语法规范解析HTML文档，需要在HTML文档中通过<!DOCTYPE>指明当前文档所采用的版本规范，如下图所示。

以上的写法不需要记忆，可借助开发工具实现，我们只要能明白其不同的写法所表达的含义就行。

综合上述两点，一个完整的HTML结构如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>HTML网页基本结构</title>

    </head>

    <body>

        这是包含<!DOCTYPE >定义的完整HTML网页基本结构。

    </body>

</html>

3、DOM模型

DOM模型即文档对象模型（Document Object Model）。它就是将一个HTML文档看成一棵由标签组成的如下图所示的树形结构。图中的每个结点都可以看作一个对象，它们的层次关系表示标签在网页中的嵌套关系，同一层结点的左右次序表示这些标签对象出现的先后顺序。

该模型在我们访问网页当中的标签元素时十分有用。

 

2.2  标签基础

2.2.1  标签语法

HTML提供了一套标签来描述网页内容，如head表示网页头部、body表示网页主体等。

HTML标签由一个独立单词或单词缩写构成，并且这些单词或单词缩写被要求放在"<>"中，比如<head>、<p>等，同时标签分为双标签和单标签。

1、双标签

双标签要有一个开始标签和一个结束标签，两个标签之间是要显示到浏览器中的内容，并且开始标签和结束标签要成对使用，标签里加"/"表示结束。

例如：

<p>

   双标签表示一个段落，是<strong>paragragh</strong>缩写。

</p>

2、单标签

单标签没有结束标签，在标签结束位置中添加"/"表示自闭合。如果不规范的话，也可以不加"/"，但建议规范使用。

例如：<br/>（换行标签）、<hr/>（绘制横线的标签）、<img src="" alt=""/>（显示图片标签）、<input type="" />（输入标签，根据不同的type属性值，会得到不同的输入元素。比如，文本输入框、按钮等。）等。

3、属性

属性是标签的重要组成部分。通过属性可以对标签进行一些特殊的设置或对标签进行一些额外的补充，属性分为有值属性和无值属性，有值属性的属性值使用双引号包裹。

例如：

<img src="mypic.png" width="200px" height="200px" alt="我是图片">

<input type="text" disabled/>

写在标签内的部分都是属性，其中，src、width、height、alt、type等都是有值属性，disable是无值属性。

2.2.2  基本标签

1、元数据

元数据是指页面的相关信息，比如作者、关键字、描述等，通过<meta>标签进行设置。元数据不会显示在客户端，但是会被浏览器解析。<meta>标签只能位于文档头部（<head></head>之间），元数据总是以“名称/值”对的形式出现。例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
     <meta name="keywords" content="html,css,javascript,php">
     <title>大鸟教程</title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
    </head>
    <body>
       学习元数据的使用
    </body>
</html>

其中，<meta>标签的name属性记录的"名称/值"中的"名称"，如name="keywrods"，用户可以自定义描述网页信息的名称。

content属性记录"名称/值"中的"值"，如content="html,css,javascript"。定义与http-equiv或name属性相关的元信息。

http-equiv属性也是记录的"名称/值"中的"名称"，把content属性关联到HTTP头部。

2、表格

建立表格主要用到四个标签：<table>，<tr>，<th>，<td>。

<table>和</table>是表格标签，用来定义一个表格元素；

<tr>和</tr>为行标签，用来定义表格的一行；

<th>和</th>为单元格标签，用来定义表格的首行单元格，其中的文字以黑体显示，该行是可选的；

<td>和</td>为单元格标签，用于定义表格的单元格。它们必须放在<tr>和</tr>标签内。一行中有多少个单元格就有多少对<td>和</td>标签。

创建表格的语法格式为：

<table>

      <tr>

           <td>(<th>)首行首列单元格内容</td>>(/<th>)

               ……

           <td>(<th>)首行第n列单元格内容</td>>(</th>)

      </tr>

        ……

      <tr>

           <td>第m行首列单元格内容</td>

               ……

           <td>第m行第n列单元格内容</td>

      </tr>

</table>

参考案例如下：

css

HTML标签都具有各自的属性，用于控制元素的显示效

3.6  盒模型

1、盒模型的基本概念

在CSS中，为了方便设置元素的CSS属性和实现相应的布局，浏览器首要任务就是判定元素大小。

CSS中的一个基本概念就是盒模型，所谓盒模型就是把HTML页面中的元素看作是一个矩形区域，即元素的盒子。

如下图所示，一个元素盒子是由margin（外边距）、border（边框）、padding（内边距）、content（内容区域）四部分组成。

与这四部分对应的CSS属性分别是：

（1）内容区域，即真正包含元素内容的区域，它通过width和height属性进行设置。

（2）内边距，即内容与边框间的空白区域，它通过padding属性进行设置，可分别设置4个方向的内边距。

（3）边框，就是指元素边框，它通过border属性进行设置，可分别设置4个方向的边框。

（4）外边距，即相邻盒子间的空白区域，它通过margin属性进行设置，也可分别设置4个方向的外边距。

在标准盒模型下（即box-sizing取值为border-content），盒子实际大小的计算公式如下：

    盒子实际大小 = content + padding + border + margin

在CSS3中，如果box-sizing取值为border-box时，整个盒子实际大小就是所设置的宽和高，那么内容的宽度=width - (padding-left + padding-right) - (border-left + border-right)，内容的高度=height - (padding-top + padding-bottom) - (border-top + boder-bottom)。

除此之外还有IE盒模型，但只会出现在IE6和IE怪异模式下。

2、多盒子边距合并问题

网页是由多个元素构成的盒子排列而成的。而多个盒子之间会出现外边距合并的现象，具体如下：

（1）上下相邻的块元素垂直外边距合并，如果上面的元素有下外边距，下面的元素有上外边距，则垂直边距为两者中的较大者。如下图所示。

  （2）嵌套块级元素的垂直外边距合并，父元素没有上内边距和边框，则父元素与子元素的上外边距合并为较大者。

3、盒模型内容扩展

观看以下视频，了解更多关于盒子模型的相关内容。

 

果。由于主要的浏览器（如Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。因此，随着元素显示效果控制需求的变化，标签原有属性难以满足要求，就需要扩展标签的属性以适应该变化。

但HTML作为一种标记语言，其某个版本的核心标签库应该保持相对稳定，不宜频繁变化。

为了解决这个问题，万维网联盟（W3C）这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在 HTML4.0之外创造出样式（Style）。于是，扩展标签属性机制的CSS（Cascading style sheets）层叠样式表技术应运而生。

W3C在1996年提出第一个定义HTML显示样式的层叠样式表规范CSS1，并且很快就成为一个被广泛采纳的标准。到1998年，W3C在原有草案的基础上进行了扩展，建立了CSS2规范，它不仅包括了原有的表现形式与标准，还有许多增强功能。现在已经发展到CSS3规范，语义化能力更加强大。

所有的主流浏览器均支持层叠样式表。CSS用来控制网页元素的样式（即显示效果），比如字号、颜色、排版布局等。它能够配合HTML设计出丰富多彩的网页。CSS中书写样式规则必须要遵循如下的语法规则。

          选择器 { 声明列表; } 

其中，大括号中的每条声明由冒号分隔的属性值对组成，声明之间用分号分隔，注意最后的“;”不能省略。

假设把<h1>标签中文字的颜色设置成红色、字号设置成14像素，需要按下面语法设置。

                              

特别要注意的是，最后一个声明后，也要加上分号“;”，以免出错。

要理解和掌握好CSS，需要准确把握以下3个概念。

（1）元素。元素是指表示文档格式的一个模块，它包括一个开始标签、一个结束标签和包含在这两个标签里的所有内容。

（2）属性。在HTML文档中属性是指元素某方面的特性。

（3）规则。样式规则由选择器和声明列表（或声明块）构成，而声明块则是“属性:值”对（即声明）的集合，用来控制网页元素的显示方式。

总起来说，CSS具有以下几个作用。

（1）简化了网页格式设计，增强了网页的可维护性。它加强了网页的表现力，提供更多效果来扩展内容表现形式。

（2）增强了网站格式的一致性，降低网站开发与维护工作量。

（3）允许作者独立控制文档中所有标签的显示形式。

3.1.2 CSS使用方式

CSS样式可以按其出现在不同地方划分为不同类型。按照该标准来划分，CSS中主要有以下3种样式类型：

（1）内联样式，也称行内式或元素级样式。它用于给某个元素设定具体的样式规则。它在元素的开始标签内写入具体的样式规则，内联样式的作用范围仅限于本元素。

（2）内部样式，亦称文档级样式或页面级样式。它是将所有样式规则都罗列在HTML网页文档的头部，即写在(<head>和</head>之间的)<style>与</style>中，其作用范围是整个文档。

（3）外部样式，也叫外联式或项目级样式。它是把所有样式规则书写在一个独立于网页外的文档(.css文件)中。可以供整个项目中所有有需要的HTML网页文档使用。

CSS样式必须引入到HTML文档才能被浏览器识别并应用到HTML元素上。CSS类型不同，引入方式也不同。因此，将CSS样式引入至HTML文档也就有三种方式，下面分别举例加以说明。

（1）内联样式引入

通过直接设置标签属性style来引入CSS样式，即直接将样式规则的声明块作为style的属性值。例如：

    <h2 style="color:red;font-style:italic;">

          欢迎光临

    </h2>

以上方式将该标题文字设置为红色倾斜字体。

（2）内部样式引入

通过<style>标签引入CSS样式，通常需要被嵌套在<head>标签中，例如：

        <style type="text/css">

                /*内联样式写在此处*/

            h2 {color:red;font-style:italic;}

        </style>

这类样式将使该网页中所有<h2>标签定义的文字都为红色倾斜字体。

（3）外部样式引入

将CSS样式写在一个独立的.css文件中，然后通过<link>标签引入到HTML文档头部（<head>与</head>之间）。例如：

    <link rel="stylesheet" type="text/css" href="mystyles.css">

另外，还可以在<head>头部使用<style>标签间的一个特殊命令@import(at规则)引入文件（但不常用），如：

    <style type="text/css">

        @import url(http://www.abc.com/styles.css); 或

        @import "http://www.abc.com/styles.css";

          </style>

CSS基础概念

1、单位

页面布局中，经常会设置元素的宽高、字号、位置等属性，这些属性值都是以一个数值形式存在的，这时我们就需要有相应的单位表达。CSS中的单位有很多，我们只介绍以下几种。

（1）px（像素）

大家熟悉，屏幕是由无数个网格状的点构成的，把这些点称为像素，例如1366 * 768指屏幕由水平方向1366个像素，垂直方向768个像素构成。比如：

（2）%（百分比）

百分比是指相对于某一元素尺寸（通常是父元素）的大小。

（3）em（字号大小）

em是一个相对单位，等于当前元素字号大小。

2、颜色值

通常，网页由不同颜色的HTML元素构成，CSS提供了多种方法设置元素的颜色值。

（1）关键字

关键字由表示颜色的英文单词构成，如red、green、blue等。例如：

（2）16进制值

16进制值由一个6位长度的16进制的数值和符号"#"构成，如#FFFFFF、#F2F2F2等。例如：

（3）三原色（RGB值）

三原色（RGB值）由Red（红）、Green（绿）、Blue（蓝）3色组合构成，如rgb(120, 120, 120)，3个参数分别代表红色值、绿色值、蓝色值，取值范围为0~255，也可以是3个百分比，如rgb(10%,20%,50%),组合不同的数值会得到不同的颜色。例如：

3、继承性

继承指的是当为某个父元素设置CSS属性时，其子元素也会被应用这些CSS属性，比如，为父元素<p>设置的CSS属性“color:red;font-size:24px;”，也同样会应用到其子元素。

注：并不是所有CSS属性都会被继承，继承适用于所有嵌套标签场景。

4、层叠性

当同一个HTML元素被不止一个样式定义时，就会产生样式层叠。也就是在HTML文件中对同一元素设有多个相同权重的CSS样式，则处于最后面的CSS样式会被应用。示例代码如下：

<style>

     p{color:red;}

     p{color:green;}

</style>

/*下面段落文字将显示为绿色*/

<p>小红是一个胆小如鼠的女孩。</p>

5、重要性

在某个样式的声明后添加“!important”，代表该样式具有最高权值，强调样式的重要性。“!important”要写在该声明后的分号“;”的前面。

示例代码如下：

<style>

     p{color:red !important;}

     p{color:green;}

</style>

/*由于重要性的设置，使下面段落文字显示为红色*/

<p>小白是一个胆大包天的男孩。</p>

6、元素类型

CSS元素划分成块元素、行内元素、行内块元素等多种常用类型。元素类型不同，它在文档中的表现方式也有变化。

（1）块元素是一个标准的盒子，可以对盒子的任一构成部分进行设置，默认情况下独占一行。

常见块元素：body、h1~h6、p、ul、ol、li、dl、dt、dd、table、form、div等。

（2）行内元素是一个非标准的盒子，设置宽度、高度、垂直内边距、垂直外边距无效，并且与相邻元素共享一行。

常见行内元素：a、b、s、i、span等。

（3）行内块元素是块元素和行内元素的结合体，可以对盒子的任一构成部分进行设置，并且与相邻元素共享一行。

常见行内块元素：img、input、select等。

CSS中，通过display属性可实现元素类型的转换。例如：

7、文档流

所谓文档流指文档里各元素的默认排列方式。在正常文档流中，网页中元素的排列规律如下：

（1）块元素：自上而下排列。

（2）行内元素：自左向右排列。

3.3  CSS选择器

在CSS中，选择器是一种模式，即用于选择元素样式的模式。

CSS可以对HTML元素样式进行分别设置，例如，将<p>元素设成红色、<h1>元素设成绿色，通过CSS选择器能够选对元素进筛选，进而设置不同的样式。

根据选择器的作用将CSS中的选择器划分为很多（40+）类，下面只介绍常用的几种。

1、选择器类型

（1）元素选择器，通常就是HTML的元素，在W3C标准中，元素选择器又称为类型选择器（type selector）。例如：

        <style type="text/css">

                      /*选择h2元素应用下面样式*/

                    h2 {color:red; font-style:italic;}

               /*选择img元素应用下面样式*/

               img {width:200px;}

        </style>

（2）类选择器，语法格式为".类选择器名"，以一个点号来标明类选择器。类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。为了将类选择器的样式与元素关联，必须将class指定为一个适当的类选择器名。同一个页面多个元素可以使用相同的类选择器名。例如：

    .myfont {color:red; font-style:italic;}

因此，多个不同元素的class属性均可取值为“myfont”来使用该样式。

（3）ID选择器，允许以一种独立于文档元素的方式来指定样式。通过设置ID属性，然后根据其属性值来应用样式，语法格式为"#id"，以一个#号来标明ID选择器。例如：

    #identifier {color:blue;}

但是，同一个页面不能出现相同的ID名，因为网页中元素的ID值是唯一的。因此，使用ID选择器只能为网页中的某一个元素设置样式。

（4）后代选择器，又称包含选择器，根据元素之间的嵌套关系选择元素，语法格式为：

    "parents descendant"

注意，祖先元素和后代元素之间用空格分隔。例如,嵌套在p元素内的img元素（不一定是子元素）的宽度是120px可设置为：

    p img {width:120px;}

（5）子选择器，根据元素之间的嵌套关系选择元素，但是只包含子元素，语法格式为：

    "parent>child"

例如：

    p>img {width:120px;} 

只对p的子元素img有效，对p的孙子以下的后代元素无效。

（6）交集选择器，将多个选择器联合使用，取交集，语法格式为：

   "p.special"

例如：

    p.special {color:green;}

相当于给类选择器".special"添加了一个元素选择器的限制，它所定义的样式规则只能应用于class="special"为p元素，对其它情况无效。

（7）并集选择器，也就是选择器分组，将多个选择器联合使用以逗号分隔，取并集，其语法格式为：

   "h2, h3, p"

例如：

    p,h2,h3 {color:pink;font-size:16px;}

相当于分别对p,h2,h3各设置了一次{color:pink;font-size:16px;}。

（8）通用选择器，用"*"号代表所有元素。例如：

    * {

         padding:0;

         margin:0;

       }

它所设置的该样式将应用于网页的所有元素。

（9）匿名选择器，通过标签style属性直接引入CSS样式，也就是前面所学的内联样式。例如：

    <p style="color: red; font-style: italic;">

2、选择器优先级

在选择器类型部分介绍了9种常用的选择器。那么，如果我们将声明相同的多种选择器应用于同一个元素时会发生什么事情呢？比如，先定义样式为：

     p {color:yellow;}

     .special {color:blue;}

再编写HTML元素为：

            <p>只要功夫深，铁杵磨成针。</p>

            <p class="special">缓缓飘落的枫叶像思念！</p>

通过浏览器查看，会发现第2个p元素内容颜色为蓝色，这是由于选择器的优先级发挥作用的结果。

CSS优先级指CSS样式在浏览器中被解析的权重不同。它分为以下几种情况。

（1）通常，不同选择器被赋予不同优先级权重。内联样式（匿名选择器）的权值最高，置为 1000；id选择器的权值置为100；类选择器的权值置为10；HTML标签选择器的权值置为1，CSS选择器的优先级顺序如下图所示。

（2）如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使用多重样式的情况。一般在多重样式（Multiple Styles）情况下（即<link>出现在<style>之前），样式优先级顺序如下图所示：

  需要说明的是，如果<link>引入的外部样式出现在<style>声明的样式之后，那么外部样式相当于在<style>之后定义，其优先级就会高于内部样式。所以，内部样式和外部样式的优先级由它们出现在网页文件中的先后顺序决定，大家在测试时，注意清空浏览器的缓存。

 （3）设置!important可以提升样式优先级，例如：

            p {

                color:red !important;

            }

（4）如果同时出现了上述3种情况，优先级顺序依次为：

!important > 匿名选择器（内联样式） > ID选择器 > 类选择器 > 元素（标签）选择器 > 通用选择器（*）>继承的样式 

在这种情况下，如果优先级一样该如何处理呢？

如果CSS优先级一样，书写顺序会影响最终的执行结果，后面的样式会覆盖前面的重复样式。可以类比其它编程语言中，给变量重复赋值情况，就容易理解最后所得的结果了。比如：

p {color:red;font-size:20px}

P {color:green;}

则应用上述样式的段落文字最终是20像素大小的绿色字体。

最后，各种情况的优先级规则总结如下：

（1）权值越大越优先；

（2）当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

（3）创作者的规则高于浏览者：即网页编写者设置的CSS样式的优先权，高于浏览器所设置的默认样式；

（4）继承的CSS样式权值小于后来指定的CSS样式；

（5）在同一组属性设置中标有“!important”规则的优先级最大。