📄 js09.htm
字号:
<HTML>
<HEAD>
<META http-equiv="Content-Language" content="zh-cn">
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>第九章 级联样式表(CSS)技术</TITLE>
<LINK rel="stylesheet" type="text/css" href="js.css">
</HEAD>
<BODY>
<H1><A name="第九章 级联样式表(CSS)技术">第九章 级联样式表(CSS)技术</A>
<A href="index.htm">主目录</A></H1>
<HR>
<UL>
<LI><A href="#9.1 CSS简介">9.1 CSS简介</A></LI>
<LI><A href="#9.2 样式定义">9.2 样式定义</A><UL>
<LI><A href="#9.2.1 样式定义的格式">9.2.1 样式定义的格式</A></LI>
<LI><A href="#9.2.2 选择器的分类">9.2.2 选择器的分类</A></LI>
</UL>
</LI>
<LI><A href="#9.3 使用样式">9.3 使用样式</A><UL>
<LI><A href="#9.3.1 嵌入样式表">9.3.1 嵌入样式表</A></LI>
<LI><A href="#9.3.2 链接外部样式表">9.3.2 链接外部样式表</A></LI>
<LI><A href="#9.3.3 内嵌样式">9.3.3 内嵌样式</A></LI>
<LI><A href="#9.3.4 CSS样式的优先级">9.3.4 CSS样式的优先级</A></LI>
</UL>
</LI>
<LI><A href="#9.4 Style对象">9.4 STYLE对象</A></LI>
<LI><A href="#9.5 CSS属性">9.5 CSS属性</A><UL>
<LI><A href="#9.5.1 字体属性">9.5.1 字体属性</A></LI>
<LI><A href="#9.5.2 文本属性">9.5.2 文本属性</A></LI>
<LI><A href="#9.5.3 颜色和背景属性">9.5.3 颜色和背景属性</A></LI>
<LI><A href="#9.5.4 容器属性">9.5.4 容器属性</A></LI>
<LI><A href="#9.5.5 列表属性">9.5.5 列表属性</A></LI>
<LI><A href="#9.5.6 鼠标属性">9.5.6 鼠标属性</A></LI>
<LI><A href="#9.5.7 定位和显示">9.5.7 定位和显示</A></LI>
<LI><A href="#9.5.8 CSS滤镜">9.5.8 CSS滤镜</A></LI>
</UL>
</LI>
</UL>
<H2><A name="9.1 CSS简介">9.1 CSS简介</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H2>
<UL>
<LI>级联样式表(Cascading Style
Sheets,简称CSS)是一种格式化网页的标准方式，用于扩展HTML的功能。CSS定义可以应用到网页或页面元素的样式，CSS样式定义页面元素的显示方式和位置。</LI>
<LI>CSS样式可以作用于一个元素，也可以作用于具有指定HTML标记的所有元素，另外也可以作用于一组分配有指定class属性或id属性的元素。</LI>
<LI>CSS样式可以通过内嵌方式放置在单个HTML元素内，也可以在页面<HEAD>部分的<STYLE>
块内加以分组，或从单独的CSS样式表文件中导入。同一个外部样式表文件可链接到多个Web 页，从而使整个Web站点具有统一的外观。</LI>
<LI><A href="SAMPLE/S09_01.HTM">例9.1</A>，在FrontPage环境下使用CSS技术控制<P>段落的显示格式,使所有文字的字形为“倾斜”。</LI>
</UL>
<H2><A name="9.2 样式定义">9.2 样式定义</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H2>
<H3><A name="9.2.1 样式定义的格式">9.2.1 样式定义的格式</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>基本格式：</LI>
</UL>
<BLOCKQUOTE>
<P>selector {property1:value1;property2:value2;…}</P>
</BLOCKQUOTE>
<UL>
<LI>每个样式定义都包含一个选择器，其后是该选择器的属性和值。</LI>
<LI>示例： </LI>
</UL>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>H1 { font-size: large; color:green }<BR>
H2 { font-size: small; color:blue }<BR>
.product_name { font-family:隶书}<BR>
#my_name { font-size: 14pt } </P>
</BLOCKQUOTE>
<P>其中:</P>
<UL>
<LI>H1和H2为选择器，用来修改HTML标记的默认格式设置。</LI>
<LI>选择器的属性和值包含在大括号内{ }，可以用分号(;)分隔多个属性。</LI>
<LI>选择器也可以是类选择器(如.product_name)、ID选择器(如#my_name)等。</LI>
<LI>在同一个样式定义中可以为多个选择器(用逗号分隔)定义相同的属性，如：<BR>
H1,H2,H3 { color:red }</LI>
</UL>
</BLOCKQUOTE>
<H3><A name="9.2.2 选择器的分类">9.2.2 选择器的分类</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>选择器可以是HTML标记、具有上下文关系的HTML标记、类、ID和虚类。</LI>
<LI>HTML标记选择器<UL>
<LI>为HTML标记定义的样式将改变它的默认显示格式。</LI>
</UL>
</LI>
<LI>有上下文关系的HTML标记选择器<UL>
<LI>为位于某个标记内的标记设置特定的样式,如：<BR>
ADDRESS I { color:red } /* 注意: ADDRESS和I之间以空格分隔 */</LI>
</UL>
</LI>
<LI>类选择器<UL>
<LI>可以为HTML标记指定class属性。</LI>
<LI>为其指定样式,形如：<BR>
.classname { property:value;…}</LI>
<LI>例如<BR>
.web_name { font-style:italic; font-weight:bold }</LI>
<LI><A href="SAMPLE/S09_02.HTM">例9.2</A>，使用类选择器控制页面中单词“Web”的显示样式为“倾斜、加粗”。<BR>
</LI>
</UL>
</LI>
<LI>ID选择器<UL>
<LI>为HTML标记指定ID属性</LI>
<LI>为其指定样式,形如：<BR>
#IDname { property:value;…}</LI>
<LI>例如：<BR>
#web_name { font-style:italic; font-weight:bold }</LI>
<LI><A href="SAMPLE/S09_03.HTM">例9.3</A>，使用ID选择器控制显示样式为“倾斜、加粗、大字体”。<BR>
</LI>
</UL>
</LI>
<LI>虚类选择器<UL>
<LI>对于<A>标记，可以使用虚类的方式设置不同类型链接的显示方式。虚类选择器有<UL>
<LI>A:link
超链接没有被访问</LI>
<LI>A:visited 超链接已被访问过</LI>
<LI>A:active 超链接当前被选中</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S09_04.HTM">例9.4</A>，使用虚类选择器除去页面中超链接的下划线。</LI>
</UL>
</LI>
</UL>
<H2><A name="9.3 使用样式">9.3 使用样式</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H2>
<BLOCKQUOTE>
<P>在页面中使用CSS样式有三种方法，即：嵌入样式表、链接外部样式表和内嵌样式。</P>
</BLOCKQUOTE>
<H3><A name="9.3.1 嵌入样式表">9.3.1 嵌入样式表</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>使用<STYLE>标记把一个或多个CSS样式定义在HTML文档的<HEAD>标记之间，这就是嵌入样式表。</LI>
<LI>在嵌入样式表中定义的CSS样式作用于当前页面的有关元素。</LI>
<LI><A href="SAMPLE/S09_05.HTM">例9.5</A>，设计一个页面，要求页面中所有大学名称的显示样式为“加粗”，并且所有超链接没有下划线。</LI>
</UL>
<H3><A name="9.3.2 链接外部样式表">9.3.2 链接外部样式表</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>定义外部样式表：把CSS样式定义写入一个以.css为扩展名的文本文件中(注意:此时不需要<STYLE>标记)。</LI>
<LI>链接外部样式表：如果一个HTML文档要使用外部样式表中的样式，则可以在其<HEAD>部分加入类似代码：<BR>
<link rel="stylesheet" type="text/css" href="mystyle.css"></LI>
<LI>链接的外部样式表将作用于这个页面，如同嵌入样式表。</LI>
<LI>
链接外部样式表的好处在于一个外部样式表可以控制多个页面的显示外观，从而确保这些页面外观的一致性。而且，如果决定更改样式，只需在外部样式表中作一次更改,该更改就会反映到所有与这个样式表相链接的页面上。</LI>
<LI>例9.6，设计多个页面，要求这些页面中所有大学名称的显示样式为“加粗”，并且所有超链接没有下划线。<UL>
<LI>步骤1：创建外部样式表文件S09_06.css，内容如下：<BR>
.university_name {font-weight: bold}<BR>
a:link, a:acitve, a:visited { text-decoration: none }<BR>
</LI>
<LI>步骤2：设计一个链接了文件S09_06.css的页面<A href="SAMPLE/S09_06A.HTM">S09_06A.htm</A><BR>
</LI>
<LI>步骤3：设计另一个链接了文件S09_06.css的页面<A href="SAMPLE/S09_06B.HTM">S09_06B.htm</A></LI>
</UL>
</LI>
</UL>
<H3><A name="9.3.3 内嵌样式">9.3.3 内嵌样式</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>直接为某个页面元素的HTML标记的style属性指定的样式就是内嵌样式，该样式只作用于这个元素。</LI>
<LI>例如：<BR>
<P style="font-size:large;color:red">Hello</P></LI>
<LI><A href="SAMPLE/S09_07.HTM">例9.7</A>，使用内嵌样式设计一个页面，要求页面中大学名称的显示样式为“加粗”，并且超链接没有下划线。</LI>
</UL>
<H3><A name="9.3.4 CSS样式的优先级">9.3.4 CSS样式的优先级</A>
<A href="#第九章 级联样式表(CSS)技术">(目录)</A></H3>
<UL>
<LI>CSS样式是“级联”的，即全局样式规则会一直应用于HTML元素，直到有局部样式将其取代为止。<UL>
<LI>局部样式的优先级高于全局样式。<UL>
<LI>
例如，通过<STYLE>标记定义的嵌入样式表中的样式可取代外部样式表中定义的样式。同样，单个HTML标记内定义的内嵌样式可取代在其他地方为同一元素定义的任何样式。</LI>
</UL>
</LI>
<LI>另外，在局部样式应用于页面元素之后，全局样式中不与局部样式冲突的部分继续应用于这些元素。</LI>
</UL>
</LI>
<LI><A href="SAMPLE/S09_08.HTM">例9.8</A>，设计一个页面，要求页面中超链接的显示字体为“隶书”，没有下划线,但其中一个超链接有下划线。</LI>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -