第7课:元素的分类与标识(class和id)

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

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

用class对元素进行分类

比方说,我们有两个由链接组成的列表。其HTML代码如下:

<p>教程</p>
<ul>
 <li><a href="#">网页设计</a></li>
 <li><a href="#">网页制作(Chardonnay)</a></li>
 <li><a href="#">网页配色(Pinot Blanc)</a></li>
</ul>
<p>工具</p>
<ul>
 <li><a href="#">Hbuilder X(Cabernet Sauvignon)</a></li>
 <li><a href="#">Dreamweaver</a></li>
 <li><a href="#">Sublim Text</a></li>
</ul>

现在,我们希望教程的链接全部显示为黄色,工具的链接全部显示为红色,其余的链接显示为缺省的兰色。

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

参加如下代码:

<p>教程</p>
<ul>
 <li><a href="#" class="yellowa">网页设计</a></li>
 <li><a href="#" class="yellowa">网页制作(Chardonnay)</a></li>
 <li><a href="#" class="yellowa">网页配色(Pinot Blanc)</a></li>
</ul>
<p>工具</p>
<ul>
 <li><a href="#" class="reda">Hbuilder X(Cabernet Sauvignon)</a></li>
 <li><a href="#" class="reda">Dreamweaver</a></li>
 <li><a href="#" class="reda">Sublim Text</a></li>
</ul>

然后,我们就可以为教程和工具的链接分别应用不同的风格了。

a {color: blue;}
a.yellowa {color: #FFBB00;}
a.reda {color: #800000;}

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

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5235.html

(2)
江山如画的头像江山如画管理团队
上一篇 2020年2月25日 上午10:40
下一篇 2020年2月25日 上午11:04

99%的人还看了以下文章

  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    5.1K0
  • 中国省、市区二级联动下拉选择框-JS源码

    中国省、市区二级联动下拉选择框,包含所有省份及市县信息。 当选择省份下拉选择框时,市区的下拉框会根据选择的省市加载出来。如上图所示选择“山东省”,市的下拉选择框只会出现山东省的市县。 1.把中国省份和市区的信息放到JavaScript文件里(js/common.js),中国网页设计在js文件里定义了两个数组,分别存放省份和对应的市区。 //省份 var pr…

    2019年6月5日
    4.8K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    2.7K0
  • 第13课:浮动元素(float)

    我们可以通过CSS属性float令元素向左或向右浮动。也就是说,令盒子及其中的内容浮动到文档(或者是上层盒子)的右边或者左边(参见第9课关于盒状模型的描述)。下图阐明了其原理: 举个例子,假如我们想让一张图片被一段文字围绕着,那么其显示效果将如下所示: 如何实现这个效果? 上例的HTML代码如下所示: <div id=”picture”><…

    2020年2月25日
    2.3K0
  • 会移动的文字 marquee标签(入门到高级)

    会移动的文字(Marquee) 基本语法 <marquee> … </marquee> <marquee> 啦啦啦,我会移动耶! </marquee> 文字移动属性的设置 方向 <direction=#> #=left, right <marquee direction=left&…

    2018年7月30日
    3.8K0
  • 哪些浏览器支持HTML5?

    目前支持HTML5的浏览器主要有: 谷歌浏览器(全面支持HTML5)、360浏览器、搜狗浏览器、世界之窗、Firefox、Safari、Opera、QQ浏览器、傲游浏览器、IE10。 如要下载支持HTML5的浏览器,请到官网下载!

    2019年3月13日
    5.8K0

发表回复

登录后才能评论