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

4.2 样式表的基本语法

2024-07-08 20:06:17   225人阅读

样式表由样式规则组成，这些规则告诉浏览器如何显示文档。一个样式(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


联系
我们