01 div+css 教程系列第一节 div css基本书写规则和原理详细解答

asp老师 · 发表于 2014-11-29 12:57:12

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

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

x

本帖最后由 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>
<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当中的背景图片的定位概念

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