css实例教程之款式表的基础英语的语法(2) class(类

日期：2021-01-20 类型：科技新闻 

关键词：公众号小程序，小程序正规价格表，微信群签到小程序，网络抽签小程序，个人做小程序需要什么

class(类)和id的1个小案例

在上1节中大家掌握了怎样为特殊的标识界定款式，比如大家运用 “h1{font-size: 12px;}”将网页页面内全部的题目1的字体样式尺寸改成了12像素。那末假如我不期待全部的题目1款式都被改动该如何做呢？这时候class和id便可以帮你的忙。

以便掌握class和id，大家先看来两个网页页面。

沒有添加CSS时的网页页面，添加CSS以后的网页页面。它们的源码以下：

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>我真惨!被用来演试CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
</head>
<body>
<h1>我是网页页面最上端题目1</h1>
<h1>我是网页页面左边的题目1，用来导航栏</h1>
<h1>我是网页页面右边新闻的题目1</h1>
<p>我是新闻的內容。</p>
</body>
</html>

 

拷贝编码
编码以下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head>
<title>我真惨!被用来演试CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
h1.dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
h1.xinwen {
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
-->
</style>
</head>
<body>
<h1 class="dabiaoti">我是网页页面最上端题目1</h1>
<h1 id="daohang">我是网页页面左边的题目1，用来导航栏</h1>
<h1 class="xinwen">我是网页页面新闻的题目1</h1>
<p class="xinwen">我是新闻的內容。</p>
</body>
</html>

class和id的用法

上面的事例运用class和id完成了3种不一样的题目1。下面大家就来说讲class和id的实际运用标准。

特定标识的class和id

最先大家要在<head>一部分界定class(类)或id。

class的界定方式： 特定标识.类名 {款式}

id的界定方式：特定标识#id名 {款式}

随后大家在要想运用类的标识上再加class(类)或id特性：

class的运用方式：<特定标识 class="类名">

id的运用方式：<特定标识 id="id名">

这类方法界定的class(类)和id只能功效于特定标识。在上面的事例中大家界定了3个类，类名各自为"dabiaoti"、"daohang"和"xinwen"，它们均功效于h1标识。当大家尝试将在其中“xinwen”的款式运用于1个<p>标识的情况下(<p class="xinwen">我是新闻的內容。</p>)，您会看到它的款式沒有产生任何更改。这是1种不正确的CSS运用。

留意：类名和id名不能以用数据开始。

不特定标识的类或id

在网页页面设计方案的全过程中，你将会不期待你界定的类只局限于1个标识。就拿上面的事例来讲，你将会期待xinwen类能够运用于段落标识<p>。那末你只必须将界定一部分的h1.xinwen改成.xinwen，即去掉h1。这类界定中不含标识名的类自然也就已不局限于某1个标识了。看看大家改动以后的网页页面，“新闻的內容”也运用了xinwen类的款式。

class(类)与id的差别

到这里你或许要问了，class和id看起来除1个.和#的差别以外，不管在界定上還是在运用上好像全是1模1样啊？但是客观事实上其实不这般，同1id在1个网页页面内只能运用1次，而class则是用于叙述数次出現的元素。这从它们的名字上很非常容易了解。id就相近元素的省分证号码，它务必是唯1的，而class则是1类具备相互特性的元素的合称，是1类。

假如你尝试在1个1面内数次应用同1个id，网页页面一般是能够一切正常显示信息的。可是这会给后期的维护保养带来麻烦，还将会导致其它的难题。因此大家1定要区别开id和class，而且有效的运用它们。

上一篇：css相对性精准定位应用示例 返回下一篇：没有了