第五节div+css当中 class类别选择符的应用详解

asp老师 · 发表于 2014-11-29 23:39:33

亲注册登录道勤网-可以查看更多帖子内容哦！（包涵精彩图片、文字详情等）请您及时注册登录-www.daoqin.net

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 asp老师于 2014-11-30 22:57 编辑

好，我们来看这段代码：

<body>
大家好，<p style="color:#F00;">现在我们一起来学习这个html" target="_blank" class="relatedlink">div+css系列教程-道勤网</p><p>本节视频由道勤网提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:seo等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p><span>QQ群226547332</span>
<h1>道勤网免费学习</h1>
<h2>天道酬勤，要学习，来道勤！</h2>
<h3>免费交流学习！</h3>
</body>

复制代码

我们来进行控制这个<h1><h2><h3>的内容；
原来的效果如下：

我们可以通过修改其所在的样式css内容进行修改就可以的，不需要用内联的css

好那么，我们此时在内容中写一个无序列表，<ul><li></li></ul>这个就是无序列表的写法，具体代码如下：

<ul>
<li>道勤网</li>
<li>学设计</li>
<li>淘宝美工</li>
<li>做网站</li>
<li>一切都是可以从0开始</li>
</ul>

复制代码

那么此时效果如下;

,
好如果我们想要让这无序列表的颜色变为其他颜色。我们可以在
<link href="" rel="stylesheet" type="text/css"/>里面的href里面的css进行修改
效果如下;

那么如果我们单独修改其中的第一句话呢？那么我们就来看下类的用法;
首先返回到我们的源代码当中，我们给我们的第一个<li>道勤网</li> 这段文件，定义一个类，class="aaa"
具体代码如下：

<li class="aaa">道勤网</li>

复制代码

那么就表示这个<li class="aaa">道勤网<li>就可以在css中这样来修改;代码如下

.aaa{color:#F00;}

复制代码

前面加一个点.然后在写上类的名称aaa 那么就表示我们对这个道勤网进行控制。我们来进行更改，看下效果
css文件代码如下：

.aaa{color:#F00; font-size:28px;}

复制代码

那么效果如下;

那么这就是效果，

如果我们要让最后一句话，变为其他颜色和进行更改它的字体大小.该分别如何对源代码和CSS文件里面的代码进行修改呢？方法如下：
1.首先，我们要到源代码当中，给最后一个文字添加一个类,代码如下;

<ul>
<li class="aaa">道勤网</li>
<li>学设计</li>
<li>淘宝美工</li>
<li>做网站</li>
<li class="ddd">一切都是可以从0开始</li>
</ul>

复制代码

我们此时给他归类为ddd,
2.我们要到css文件当中，进行修改；具体代码为

P{color:#F00; font-size:24px; background:#9C6;}
span{color:#00F; font-size:45px;}
.aaa{color:#F00; font-size:28px;}
.ddd{color:#FF0; font-size:48px; background:#000;}

复制代码

此时我们看到了，我们对这个.ddd的类即为（class="ddd"）,进行了效果为
.ddd{color:#FF0; font-size:48px; background:#000;}
的效果处理：具体效果如下：

这样呢，我们就可以通过分别对源代码当中分别设定为一个类，class="...." 之后呢，我们在css当中，进行设定这个类的效果.aaa就可以了！
我们给大家总结了一句口诀为：

源代码归类，css 加点.写类进行控制！

点击查看其他DIV+CSS教程
第一节 div css基本书写规则和原理详细解答
第二节在div css当中并列标签的应用规则详解
第三节 div+ css中文字和图片背景的常用css熟悉详解
第四节div+css当中的内联样式和外联的区别讲解
第五节div+css当中 class类别选择符的应用详解
第六课. DIV +CSS当中的 id选择器的应用和匹配原理详解
第七课 div css当中组合选择符的应用和原理详解
第八课 div css 通配选择符和包含选择器的用法技巧
第九课 div css里面常用选择器的课程总结
第十课 div css 中css伪类元素的讲解和应用原理详解
第十一课 div css当中的背景图片的定位概念

道勤主机提供365天*24小时全年全天无休、实时在线、零等待的售后技术支持。竭力为您免费处理您在使用道勤主机过程中所遇到的一切问题! 如果您是道勤主机用户，那么您可以通过QQ【792472177】、售后QQ【59133755】、旺旺【诠释意念】、微信：q792472177免费电话、后台提交工单这些方式联系道勤主机客服！如果您不是我们的客户也没问题，点击页面最右边的企业QQ在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！