01 div+css 教程系列第一节 div css基本书写规则和原理详细解答
本帖最后由 asp老师 于 2014-11-30 22:39 编辑大家好，我们以前看过了Html的基本知识之后呢，现在我们一起来看div+css教程！
div+css首先它是一个设计标准，是网页的布局方法。
div+css的优点是：实现网页内容与表现分享，是目前来说，最流行的网页布局形式。
那么div+css的基本书写规则和原理又是什么呢？
1 .好，我们来看这段代码：
<body>
大家好，<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p>本节视频由 道勤网提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!为各位新手站长提供学习交流的互助平台,还可以学到网站推广的知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!QQ群226547332
</body>那么它的效果如下：
这个在 <p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p>，这里表示：断开同时也表示在这里用红色写出;
2.好，我们继续来看这段代码，我们把这段文字，加入多个<p></p>标签; 代码如下：
<body>
大家好，<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p>本节视频由 道勤网提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p>QQ群226547332
</body>效果如下：
3.好，那么安装我们以前学过的html知识的话，我们想要把这里的每一个段落字体的颜色都变为红色，我们需要对每一个<p></p>标签进行<style="color:#FF0;">进行设置，才可以实习这一功能！但是这样太麻烦了，而且非常繁琐，所以我们现在引入CSS的写法
css一般写在<head>这里</head>；如下：
代码是这样的：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--这里是内容-->
</style>
</head>
4.好我们现在在这里<style type="text/css">
</style>
里面来控制我们的<p></p>标签的内容
5.好代码如下：这个是css的代码
<style type="text/css">
P{color:#F00;}
</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;}
</style>
</head>
<body>
大家好，<p style="color:#F00;">现在我们一起来学习这个div+css系列教程-道勤网</p><p>本节视频由 道勤网提供,全部免费建站视频教程请登录道勤网!www.daoqin.net .请关注本节课discuz视频教程!<p>为各位新手站长提供学习交流的互助平台,还可以学到网站推广的<p>知识,如:SEO等!实实在在的为新手站长包括空间域名的购买指导,到程序的使用,及网站建设,网站优化,网站维护等全方位服务,是道勤网努力的方向!<p>QQ群226547332
</body>
</html>
图示：
那么效果就是右面的效果，我们直接通过控制在css里面的p{color:#F00;}来实现了控制下面的所有P标签的内容颜色。是不是非常方便。这样我们打开网页的速度也非常的快速。比直接用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]