第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%的人还看了以下文章

  • FLV视频播放代码及Flvplayer.swf播放器下载

    FLV是被众多新一代视频分享网站所采用,是目前增长最快、最为广泛的视频传播格式。 FLV 是FLASH VIDEO的简称,它形成的文件极小、加载速度极快,有效地解决了视频文件在网络上很好的使用等问题。 下面分享在网页制作时,插入FLV格式视频的代码(兼容主流浏览器): <object class id=”clsid:D27CDB6E-AE6D-11cf…

    2018年5月14日
    4.9K0
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    1.8K0
  • 第14课:元素的定位

    CSS定位令你可以将一个元素精确地放在页面上你所指定的地方。联合使用定位与浮动(参见第13课),你将能够创建多种高级而精确的布局。本课我们将讨论以下内容: CSS定位的原理 绝对定位 相对定位 CSS定位的原理 把浏览器窗口想象成一个坐标系统: CSS定位的原理是:你可以将任何盒子(box)放置在坐标系统的任何位置上。 假设我们要放置一个标题。通过使用盒状模…

    2020年2月25日
    1.9K0
  • “注册”按钮(图片)怎么跳转到注册页面?

    页面代码: <input name=”Submit” type=”submit” class=”STYLE2″ value=”登陆”> <input name=”Submit2″ type=”submit” class=”STYLE2″ value=”注册”> “注册”按钮怎么跳转到注册页面? <inpu…

    2021年4月5日
    1.6K0
  • js实现进度拖拽的效果-调节音量

    用js实现的一个进度拖拽效果,常用于调节音量。 该程序代码简单易懂,单页面可多次调用,效果如下图: js实现进度拖拽的|www.125jz.com效果 音量:0

    2019年2月15日
    3.1K0
  • 使用html、css、bootstrap设计一个电子商务网站的导航条(免费)

    本课程适合前端开发初级学习者,学习使用html、css和bootstrap技术,实现导航条设计。 预计用时:30分钟 1、实现导航条2、实现品牌字体3、实现搜索表单4、实现快捷菜单的显示

    2018年12月20日
    2.0K0

发表回复

登录后才能评论