第五节div+css当中 class类别选择符的应用详解
本帖最后由 asp老师 于 2014-11-30 22:57 编辑好，我们来看这段代码：
<body>
大家好，<p style="color:#F00;">现在我们一起来学习这个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当中的 背景图片的定位概念
页:
[1]