第四节div+css当中的 内联样式和外联的区别讲解
本帖最后由 asp老师 于 2014-11-30 22:54 编辑内联是inner join是两个表在连接的条件下,所有的字段相同才显示。
外联包括左联， 显示左表所有内容,右表有就显示,没有就显示null，
右联和左联相反 。
内联就是在当前页面用<style type="text/css">..........</style> 来进行控制的样式，那么我们把这个统称为内联。
代码如下：
<!--下面就是css的编写方法<stye 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当中的 背景图片的定位概念
页:
[1]