asp老师 发表于 2014-11-29 15:39:51

div css 第二节在div css当中并列标签的应用规则详解

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

什么是并列标签?为什么说学好并列标签,是以后学习代码知识的基础?
大家要静下心来,听老师耐心的讲解!
请大家关注下一节:
我们先来看下第一节的代码如下;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--下面就是css的编写方法<stye type="text/css"> </style>-->
<style type="text/css">
P{color:#F00; }


</style>
</head>

<body>


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

</body>
</html>那么我们可以看下里面的css代码
如下:
<style type="text/css">
P{color:#F00; }


</style>好那么我们给这个属性在添加属性,代码如下:
<style type="text/css">
P{color:#F00; font-size:24px;}


</style>那么此时我们可以看下这个font-size:24px;所起到的效果,让字体变大,效果如下:

此时我们在给加一个背景色的属性background:#F00;   具体css代码如下:
<style type="text/css">
P{color:#F00; font-size:24px; background:#9C6;}


</style>效果如下:

这样呢,我们就是针对这个P标签进行设定的参数。如果我们需要对其他的进行设定的话,需要我们另起一行,代码如下:
<style type="text/css">
P{color:#F00; font-size:24px; background:#9C6;}
body{background:#F30;}


</style>大家可以看到此时我们又多写了一个另外的一个代码:
body{background:#F30;}那么此时效果如下:

如果我们想要对 QQ群226547332 这句话,变化一个颜色同时还要让这个字体变大,我们通过css怎么设置呢?
我们可以先给这句话,加一个<span></span> (span标签是不换行也不断行的标签),之后呢,我们在返回到<style tpye="text/css"></style>这里进行设定就可以了。
代码如下;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!--下面就是css的编写方法<stye type="text/css"> </style>-->
<style type="text/css">
P{color:#F00; font-size:24px; background:#9C6;}
body{background:#F30;}
span{color:#00F; font-size:45px;}

</style>
</head>

<body>


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

</body>
</html>效果如下;



点击查看其他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]
查看完整版本: div css 第二节在div css当中并列标签的应用规则详解