CSS布局中元素的分类(class)和标识(id)

本小节向大家介绍一下CSS布局中元素的分类与标识，主要包括用class对元素进行分类，利用id标识元素两大部分内容，相信通过本文的学习你对class和id属性的用法会有深刻的认识。

成都创新互联公司主要从事成都网站制作、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务新源,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

解析CSS布局中元素的分类与标识（class和id）

有时你希望对特定元素或者特定一组元素应用特殊的样式。在这一课，我们将深入学习如何利用class和id来为所选元素指定属性。

如何实现为网站上许多标题中的某一个单独应用颜色？如何实现把网站上的链接分为不同的类，并对各类链接分别应用不同的样式？这只是本课将解决的诸多问题中的最具代表性的两个问题。

用class对元素进行分类

比方说，我们有两个由链接组成的列表，它们分别是用于制造白葡萄酒和红葡萄酒的葡萄。其HTML代码如下：

以下是代码片段：

 
 
 
    
  
  
  
  1. 制造白葡萄酒的葡萄：
    2. 
  
  
  
    2. 
  
  
  
    • 雷司令（Riesling）
      • 
  
  
  
    • 夏敦埃（Chardonnay）
      • 
  
  
  
    • 白比诺（PinotBlanc）
      • 
  
  
  
    3. 
  
  
  
  3. 
  
  
  
  4. 制造红葡萄酒的葡萄：
    5. 
  
  
  
    5. 
  
  
  
    • 卡百内索维农
      • 
  
  
  
    • （CabernetSauvignon）
      • 
  
  
  
    • 墨尔乐（Merlot）
      • 
  
  
  
    • 黑比诺（PinotNoir）
      • 
  
  
  
    6. 
  
  
  
  6.

现在，我们希望白葡萄酒的链接全部显示为黄色，红葡萄酒的链接全部显示为红色，其余的链接显示为缺省的兰色。

为了实现这一要求，我们将链接分为两类。对链接的分类是通过为链接设置HTML属性class实现的。

参加如下代码：

以下是代码片段：

 
 
 
    
  
  
  
  1. 制造白葡萄酒的葡萄：
    2. 
  
  
  
    2. 
  
  
  
    • 雷司令（Riesling）
      • 
  
  
  
    • 夏敦埃（Chardonnay）
      • 
  
  
  
    • 白比诺（PinotBlanc）
      • 
  
  
  
    3. 
  
  
  
  3. 
  
  
  
  4. 制造红葡萄酒的葡萄：
    5. 
  
  
  
    5. 
  
  
  
    • 卡百内索维农
      • 
  
  
  
    • （CabernetSauvignon）
      • 
  
  
  
    • 墨尔乐（Merlot）
      • 
  
  
  
    • 黑比诺（PinotNoir）
      • 
  
  
  
    6. 
  
  
  
  6.

 然后，我们就可以为白葡萄酒和红葡萄酒的链接分别应用不同的风格了。

以下是代码片段：

 
 
 
    
  
  
  
  1. a{ 
    2. 
  
  
  
  2. color:blue; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. a.whitewine{ 
    5. 
  
  
  
  5. color:#FFBB00; 
    6. 
  
  
  
  6. } 
    7. 
  
  
  
  7. a.redwine{ 
    8. 
  
  
  
  8. color:#800000; 
    9. 
  
  
  
  9. } 
    10. 
  
  
  
  10.

如上例所示，你可以通过在样式表里利用.classname来为属于某一类的元素定义CSS属性。#p#

利用id标识元素

除了可以对元素进行分类以外，你还可以标识单个元素。这是通过HTML属性id实现的。

HTML属性id的特别之处在于，在同一HTML文档中不能有两个具有相同id值的元素。文档中的每个id值都必须是唯一的。在其他情况下，你应该使用class属性。下面，我们来看一个使用id属性的例子：

以下是代码片段：

 
 
 
    
  
  
  
  1. 第1章
    2. 
  
  
  
  2. ... 
    3. 
  
  
  
  3. 第1.1节
    4. 
  
  
  
  4. ... 
    5. 
  
  
  
  5. 第1.2节
    6. 
  
  
  
  6. ... 
    7. 
  
  
  
  7. 第2章
    8. 
  
  
  
  8. ... 
    9. 
  
  
  
  9. 第2.1节
    10. 
  
  
  
  10. ... 
    11. 
  
  
  
  11. 第2.1.1小节
    12. 
  
  
  
  12. ... 
    13. 
  
  
  
  13.

 上例是一个文章的各章节的标题。我们自然可以为其中每一章节指定一个id（如下）：

以下是代码片段：

 
 
 
    
  
  
  
  1. 第1章
    2. 
  
  
  
  2. ... 
    3. 
  
  
  
  3. 第1.1节
    4. 
  
  
  
  4. ... 
    5. 
  
  
  
  5. 第1.2节
    6. 
  
  
  
  6. ... 
    7. 
  
  
  
  7. 第2章
    8. 
  
  
  
  8. ... 
    9. 
  
  
  
  9. 第2.1节
    10. 
  
  
  
  10. ... 
    11. 
  
  
  
  11. 第2.1.1节
    12. 
  
  
  
  12. ... 
    13. 
  
  
  
  13.

 假如我们要求第1.2节显示为红色，那么CSS可以这样写：

以下是代码片段：

 
 
 
    
  
  
  
  1. #c1-2{ 
    2. 
  
  
  
  2. color:red; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4.

如上例所示，你可以在样式表里通过#id为特定元素定义CSS属性。

当前标题：CSS布局中元素的分类(class)和标识(id)
网页路径：http://www.shufengxianlan.com/qtweb/news8/106308.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

用户体验知识

行业网站建设

成都多线机房　　 　班戈纳美网站　　 　成都标牌标识牌制作公司　　 　成都微信开发　　 　响应式网站设计　　 　成都花箱　　 　禾巨建站　　 　虚拟主机　　 　工业净化空调　　 　犀浦防护栏定制　　 　蓬安网站建设　　 　php主机　　 　成都响应式网站建设公司　　 　贵安服务器托管　　 　中建建业环保　　 　成都网站推广　　 　成都网站设计　　 　营销推广　　 　高端网站设计　　 　证企宝