首页 > 代码库 > 4.2 样式表的基本语法

4.2 样式表的基本语法

样式表由样式规则组成,这些规则告诉浏览器如何显示文档。一个样式(STYLE)的基本语法由3部分构成:selector(中文叫选择器,有点怪怪的,就用英文吧!),属性(property)和属性值(value)。

本节单词记忆:标签 1.style 属性 1.class 2.font-size 3.font-family

网页学习网提示:html语言非常简单,不需要逻辑理解,而绝大部分朋友觉得它难以掌握,90%的原因在于英语单词不过关,所以每节记忆几个单词是非常有必要的。

一、样式表的基本结构

<STYLE>和</STYLE>标签之间的所有内容都是样式规则,样式规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。下面让我们先来看一个样式表的基本结构,使我们对样式表有个感性的认识。

样式表的基本结构为:

<STYLE type="text/css">

<!--文档样式表开始,类型为CSS样式-->
 P {
     color:red;
     font-family:"隶书";
     font-size:24px;
   }
   ……

 <!--样式规则-->
</STYLE>

<!--文档样式表结束-->

文档样式表一般位于HTML文件的头部,即<HEAD>和</HEAD>标签之间,定义的样式规则就可应用到当前页面中。这些样式规则表示什么意思?下面我们就来了解一下样式规则的组成及其含义。

二、样式规则

层叠样式表是一组规则,用于定义文档的样式。例如,可以创建一个样式规则,来指定所有<P>标题的颜色均为浅绿。可以用来修饰网页中所有<P>标签的样式。

样式规则示例如下:

P { color:red; font-family:"隶书"; font-size:24px;}

<!--选择器{属性:属性的值;}-->

其中,规则的第一部分称为选择器。每个选择器都有属性以及对应的属性值。上面的示例中P是规则选择器。括在大括号内的部分称为声明。声明由两部分组成:冒号前面的部分是属性,冒号后面的部分是该属性的值。一个选择器可以有多个属性,它们可以写在一起,用分号隔开。

P { color:red; font-family:"隶书"; font-size:24px;}

<!--color 颜色属性 font-family 字体属性 font-size 字体大小属性-->

示例1使用文档样式定义了页面中的所有<P>标签的样式。

示例:

<HTML>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
 P { color:red; font-family:"隶书"; font-size:24px;}

 <!--定义<P>标签的样式 不同属性之间用分号隔开-->
</STYLE>
</HEAD>
<BODY>
<H2>静夜思</H2>
<P>床前明月光,</P>
<P>疑是地上霜。</P>
<P>我是郭德刚,</P>
<P>低头思故乡。</P>

<!--所有段落都采用了<P>标签的样式,保持风格统一-->
</BODY>
</HTML>

示例1在浏览器中预览效果,如图1所示。

图1 文档样式效果
图1 文档样式效果

三、类样式(class)

在示例l中,如果我们想<H2>标签的样式与<P>标签的样式一模一样,那如何实现?有了!要为它们定义一个共享样式。这个共享样式可以使用类样式来实现。

类选择器的定义格式为:

<STYLE type="text/css">
 .red{

 <!--类名 即类选择器-->

      color:red;

      font-family:"隶书"

      <!--类规则样式-->

     }
</STYLE>

注意类名前面有——“.”号,类名可随意命名,最好根据元素的用途来定义一个有意义的名称。某个标签(如<H2>)希望采用该类选择器的样式。语法格式为:

语法:

<H2 class="red">静夜思</H2>
<P class="red">床前明月光,</P>

<!--应用类选择器-->

示例2:

<HTML>
<HEAD>
<TITLE>样式规则</TITLE>
<STYLE type="text/css">
 .red { color:red; font-family:"隶书";}

 <!--类选择器-->
</STYLE>
</HEAD>
<BODY>
<H2 class="red">静夜思</H2>

<!--应用了名为red的类选择器-->
<P class="red">床前明月光,</P>
<P class="red">疑是地上霜。</P>
<P >我是郭德刚,</P>

<!--该段没有采用任务样式,按默认样式显示-->
<P class="red">低头思故乡。</P>
</BODY>
</HTML>
 

示例2在浏览器中预览效果,如图2所示。<H2>、第一个段落<P>、第二个段落<P>和第四个段落<P>都采用了red类选择器,所以字体都为红色,字体类型为隶书。第三段没采用仟何样式,按默认的样式显示。

图2 类样式效果

图2 类样式效果

从此例可以看出,不同类别的标签(如<H2>和<P>)可以使用同一类选择器,同一类的标签(如<P>)可以采用不同的类选择器,类选择器实现了样式的灵活共享。

 

本节作业:

制作如下图网页。

 html基础 CSS基础 作业

注意事项:

1.本节学习的是CSS基础,仅要求掌握其基本的两种用法,重要的是理解CSS的意义,分清样式属性和标签属性的区别。

2.本节作业是美化的TD标签,大部分一样,只有第二行不一样,大家可以思考下怎么运用CSS样式表知识

3.字体颜色、字体大小、字体的样式属性是color、font-size、font-family。

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第四章案例及作业资源 返回《HTML入门经典》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/html/jc/521.html