第四节div+css当中的内联样式和外联的区别讲解

asp老师 · 发表于 2014-11-29 21:42:11

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

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

x

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

内联是inner join是两个表在连接的条件下,所有的字段相同才显示。
外联包括左联，显示左表所有内容,右表有就显示,没有就显示null，
右联和左联相反。

内联就是在当前页面用<style type="text/css">..........</style> 来进行控制的样式，那么我们把这个统称为内联。
代码如下：

<style type="text/css">
P{color:#F00; font-size:24px; background:#9C6;}
body{ background:url(xml.jpg) repeat-y; }
span{color:#00F; font-size:45px;}
h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}
</style>

复制代码

这个就是内联inner的css。
那么我们看了内联，现在来看一下什么是外联。
外联也是写在<title></title>之后，<style></style>之前的，那么代码如下;

<title>无标题文档</title>
<link href="" rel="stylesheet" type="text/css" />
</head>

复制代码

<link href="" rel="stylesheet" type="text/css" /> 这个就表示外联，此时呢，需要我们新建一个名称为01.css的文件；直接在01.css里面把如下内联样式，全部写上去，不需要加<style type="text/css"> </style>

P{color:#F00; font-size:24px; background:#9C6;}
body{ background:url(xml.jpg) repeat-y; }
span{color:#00F; font-size:45px;}
h1{color:#FF0; font-family:Verdana, Geneva, sans-serif; font-size:9px; font-weiht:800;}
h2{color:#0C3;}
h3{color:#0F3; background:#000;}

复制代码

那么我们来看这个用外联样式css之后的完整的代码：

<!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>
<link href="" rel="stylesheet" type="text/css" />
</head>
<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>
</html>

复制代码

此时我们保存一下，看一下效果，大家可以看到这个外联的01.css没有发生任何的作用。

之后我们在这个源代码里面加入这个01.css，代码如下：

<link href="01.css" rel="stylesheet" type="text/css" />

复制代码

之后呢，我们保存下就可以看到，我们在01.css文件里面定义的css，就发挥了作用。效果如下：

那么大家现在就可以看到了，我们用了那么多的内联的css样式来控制的效果，只要通过我们外联的css文件，一下就可以解决了，这样是不是非常的方便我们进行后期的开发和制作呢！好那么我们来总结下这个内联和外联样式的书写方式：

内联css样式是：
<style type="text/css">
</style>

外联css样式是：
<link href="01.css" rel="stylesheet" type="text/css"/>

那么这个就是书写的方式，我们可以把内联中的样式，直接写到新建的css文件中，然后用外联直接
<link href="001.css" rel=“stylesheet” type="text/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在线咨询图标联系我们并购买后，我们为您免费进行无缝搬家服务，让您享受网站零访问延迟的迁移到道勤主机的服务！