53.0/CSS 基础知识(详细版)

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

53.1 CSS 简介

53.1.1 CSS 是什么有何作用

53.4 在网页制作中运用 CSS 技术的几种方法

53.4.1 内联样式(Inline Style)

53.4.2 嵌入式样式(Internal Style Sheet)

53.4.3 外部样式(External Style Sheet)

53.4.4 三种样式表使用方法对比

53.1 CSS 简介

CSSCascading Style Sheets 译为层叠样式表是对 HTML 的补充。

在当今的网页制作中几乎所有漂亮的网页都用了 CSS 。

有了 CSS 的控制网页变得更加赏心悦目生动活泼。

打个比方CSS 好比网页的美容师。

53.1.1 CSS 是什么有何作用

在解决这个问题之前我们先来看看

网站中一个页面的基本组成

通常一个页面前台

由以下三个部分组成

结构表现和行为。

注

结构

通常指结构化的文本通俗点理解就是经过结构化了的页面内容。

用于结构化 WEB 标准技术有 HTML 、 XHTML 、 XML 等。

表现指将页面中的元素用什么样的外观展示出来

比如

文字的字体字号颜色大小是否有下划线页面的背景颜色图片段落的对齐方式

元素在页面的摆放位置等等。

通常用于表现的标准技术就是我们将要学习的

CSS 层叠样式表技术。

行为

通俗理解为人用户与网页的交互比如我在页面的某个元素

上单击一下鼠标页面会给我什么反应。目前主要表现行为的技术是各种所谓

的脚本技术

比如

javascript 。

有了上面的知识铺垫我们知道了 CSS 是用来控制页面表现的也就是说

是用来控制网页最终展示出来的外观的。那么我们为什么要使用 CSS 呢先来

看看不使用 CSS 的网页页面代码

<p><font color="red" size="5">文字内容</font></p>
<hr />
<p><font color=" red " size="5">文字内容</font></p>

从上面我们可以看出用于控制内容表现形式的代码是和内容部分混杂在

一起的也就是说二者互相混杂不可分割。现在我们再来看看使用 css 后

的代码

HTML 部分
<p>文字内容</p>
<hr />
<p>文字内容</p>
CSS 部分
p{color: red; font-size: 20px;}

从上我们可以看出使用 CSS 后可以将内容 HTML 部分和表现 css

部分区分开来只要你愿意你甚至可以将 CSS 部分和 HTML 部分分别做成

2 个不同的文件存放在不同的文件夹下。很显然使用 CSS 将结构和表现分

离后的代码维护方便逻辑清晰有条理而且我们甚至还可以把一个 CSS

文件应用给多个不同的 HTML 文件来控制他们的外观可以有效减小站点的

体积。

以下是对 CSS 优点的总结

内容和样式分离使得网页设计趋于明了、简洁。更加方便了网站的维
护。
弥补 HTML 对标记属性控制的不足如背景图像重复文字大小只
有 7 级等等。
更加精细地控制网页元素如行距段落缩进图片定位等。
提高网页速度。因为多个网页可以同时应用一个 CSS 样式即减少了
代码的下载。

53.2 CSS 的基本规则

CSS 的基本规则由选择符 selector 和声明组成

而声明又由属性 property

和值 value 组成。

基本语法

selector{property: value; property: value; property: value; … }

语法说明

选择符又称选择器指明文档中要应用此样式的元素。
{}中的是声明。
属性和值之间用冒号隔开。
多个属性之间用分号隔开。
最后一条声明可以没有分号但为了以后修改方便一般也加上分号。
为了使样式更加易于阅读一般将每条声明写在一个单独的行内。

如

selector{
property: value;
property: value; 
property: value
… ; }

53.3 选择符的类型

CSS 中的选择符主要包括以下几种

53.3.1 HTML 选择符

HTML 选择符就是以 HTML 的标记作为选择符

如

body 、 p 、 table 等。

例

p{color: blue;}

定义了该样式后文档中所有的 <p> 元素都会应用这个样式。

53.3.2 类选择符

类选择符以“ . ”开头如

.blue{color: blue;}

定义了该样式后在 HTML 标签中要用 class 属性引用它如

<p class=“blue”>这里的文字为蓝色</p>

类选择符可以重复使用并且可以用在任意元素上使用任意次。例如

<p class=”blue”>这里的文字为蓝色</p>
<p>这里不是蓝色文字<b class=”blue”>这里才是蓝色文字</b></p>
<h1 class=”blue”>这里是蓝色标题</h1>

53.3.3 id 选择符

id 选择符的定义方法跟类选择符基本相似只是开头不是“ . ”而是“ # ”。

如

#blue{color: blue;}

定义了该样式后在 HTML 标签中要用 id 属性引用它 :

<p id=”blue”>本段落的文字为蓝色其他元素则不会受影响</p>

id 属性应该是唯一的只有拥有该 id 的元素才会应用该样式。在实际应用

中一个页面内存在重复的 id 值浏览器也不会报错并且拥有相同 id 的元素

也会应用相同的样式但这样是不符合规范的。

53.3.4 包含选择符

包含选择符的格式是 s1 s2{ 属性值 } 其意义是选择所有被 s1 包含并

且被 s2 包含的元素。如

CSS 部分
#menu b{color:blue;}
HTML 部分:
<p id=”menu”>这是<b>一个</b>段落</p>
上例中只“一个”二字会显示为蓝色。

53.3.5 群组选择符

群组选择符可以将同一种样式应用于多个选择符。选择符中间以逗号隔开。

如:

h4,p,span
{
color: blue;
}

表示页面所有的 h4,p,span 标签内文字都为蓝色。

53.3.6 伪类选择符

最广泛的伪类是链接的 4 个状态如

a:link
{
color: green;
}
a:hover
{
color: yellow;
}
a:active
{
color: red;
}
a:visited
{
color: gray;
}

a:link 未访问过的链接
a:visited 已访问链接状态
a:hover 鼠标指针
a:active 被激活的链接状态

上例

表示未被点击的链接文字的颜色为绿色鼠标放在链接文字上时的颜

色为黄色点击时链接文字的颜色为红色点击过后变为灰色。

53.3.7 通配选择符

选定所有的元素。如

*{color: blue;}

表示所有对象的字体都为蓝色。

53.4 在网页制作中运用 CSS 技术的几种方法

从样式表插入 HTML 的形式来看基本可分为 3 种

1. 内联样式在 HTML 元素内部

2. 嵌入式样式表位于 <head> 标签内部

3. 外部样式表

这三类也分别代表了运用 CSS 的 3 种不同方法首先来看第一种方法

53.4.1 内联样式(Inline Style)

Inline Style 是写在标签里面的内嵌样式只对所在的标签有效。

<html>
<head><title>内嵌式样式(Inline Style)</title></head>
<body>
<P style="font-size:20pt; color:red">这个内联样式(Inline Style)定义段落
里面的文字是 20pt 字体字体颜色是红色。</p>
<P>这段文字没有使用内嵌样式。</p>
</body>
</html>

本例在浏览器中显示效果如下