zoukankan      html  css  js  c++  java
  • css:元素的分类与标识(class和id)

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

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

    用class对元素进行分类

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

    	 <p>制造白葡萄酒的葡萄:</p> <ul> <li><a href="ri.htm">雷司令(Riesling)</a></li> <li><a href="ch.htm">夏敦埃(Chardonnay)</a></li> <li><a href="pb.htm">白比诺(Pinot Blanc)</a></li> </ul> <p>制造红葡萄酒的葡萄:</p> <ul> <li><a href="cs.htm">卡百内索维农(Cabernet Sauvignon)</a></li> <li><a href="me.htm">墨尔乐(Merlot)</a></li> <li><a href="pn.htm">黑比诺(Pinot Noir)</a></li> </ul> 
    	

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

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

    参加如下代码:

    	 <p>制造白葡萄酒的葡萄:</p> <ul> <li><a href="ri.htm" class="whitewine">雷司令(Riesling)</a></li> <li><a href="ch.htm" class="whitewine">夏敦埃(Chardonnay)</a></li> <li><a href="pb.htm" class="whitewine">白比诺(Pinot Blanc)</a></li> </ul> <p>制造红葡萄酒的葡萄:</p> <ul> <li><a href="cs.htm" class="redwine">卡百内索维农(Cabernet Sauvignon)</a></li> <li><a href="me.htm" class="redwine">墨尔乐(Merlot)</a></li> <li><a href="pn.htm" class="redwine">黑比诺(Pinot Noir)</a></li> </ul> 
    	

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

    	 a { color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; } 
    	

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

    利用id标识元素

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

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

    	 <h1>第1章</h1> ... <h2>第1.1节</h2> ... <h2>第1.2节</h2> ... <h1>第2章</h1> ... <h2>第2.1节</h2> ... <h2>第2.1.1小节</h2> ... 
    	

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

    	 <h1 id="c1">第1章</h1> ... <h2 id="c1-1">第1.1节</h2> ... <h2 id="c1-2">第1.2节</h2> ... <h1 id="c2">第2章</h1> ... <h2 id="c2-1">第2.1节</h2> ... <h3 id="c2-1-2">第2.1.1节</h3> ... 
    	

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

    	 #c1-2 { color: red; } 
    	

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

  • 相关阅读:
    欧拉回路 定理
    UESTC 1087 【二分查找】
    POJ 3159 【朴素的差分约束】
    ZOJ 1232 【灵活运用FLOYD】 【图DP】
    POJ 3013 【需要一点点思维...】【乘法分配率】
    POJ 2502 【思维是朴素的最短路 卡输入和建图】
    POJ 2240 【这题貌似可以直接FLOYD 屌丝用SPFA通过枚举找正权值环 顺便学了下map】
    POJ 1860【求解是否存在权值为正的环 屌丝做的第一道权值需要计算的题 想喊一声SPFA万岁】
    POJ 1797 【一种叫做最大生成树的很有趣的贪心】【也可以用dij的变形思想~】
    js 实现slider封装
  • 原文地址:https://www.cnblogs.com/SophiaTang/p/2262254.html
Copyright © 2011-2022 走看看