程序界的葵花宝典教程CSS创建

在过去的几年中，CSS有了很大的改进。总会有一些新功能出来，让你感到惊讶。你可以使用CSS的功能来创建很多令人惊奇的东西，只需要有一点创意即可。

首先，先说一下三种方法为：外部样式表、内部样式表、内联样式

1、外部样式表

应用场景：当样式需要应用于很多页面的时候，就需要用到外部样式表。在外部样式情况下，你可以通过改变一个文件而改变整个网站的样式。

写法：每个页面使用标签连接到样式表，

例如：

<head>
 <link ref="stylesheet" type="text/css" href="style.css">
</head>1234复制代码类型：[css]

浏览器会从style.css中读取样式声明，并根据这个文件来美化HTML

外部样式表文件不能包含任何HTML标签，样式以.css作为扩展名进行保存

例如：

hr {color:sienna;}p {margin-left:20px;}body {background-image:url("/images/back40.gif");}123复制代码类型：[css]

注意：不要在属性值与单位之间留有空格

p {margin-left:20px;} <!--正确的写法-->p {margin-left:20 px;}  <!--错误的写法-->12复制代码类型：[css]

2、内部样式表

应用背景：当单个页面需要特使样式时，就需要使用内部样式表。

写法：使用标签在文档头头部定义内部样式表，就像这样：

<head>
<style>
 hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");}
</style>
</head>1234567复制代码类型：[css]

3、内联样式

这是一种将样式和内容混在一起写的样式，这样不便于统一维护，所以jingshen谨慎使用。

应用场景：当样式仅需在一个元素上应用一次的时候。

写法：在相应的标签中使用style属性，属性值为CSS属性，例如：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>1复制代码类型：[css]

多重样式

如果即使用了外部样式又使用了内部样式，那具体使用哪个呢?这就是多重样式

例如：

外部样式：

h3{ color:red; text-align:left; font-size:8pt;
}123456复制代码类型：[css]

内部样式：

h3{ text-align:right; font-size:20pt;
}12345复制代码类型：[css]

同样的标签，内部有两个属性，外部多一个color，这种情况下，内部样式会继承外部样式的样式，但是和自己属性相同的部分，内部样式会覆盖外部样式，也就是说，上述同时使用了外/内部样式的文件，具体表现的样式为：

最终样式：

h3{ color:red; text-align:right; font-size:20pt;
}123456复制代码类型：[css]

color继承了外部样式，因为内部样式没有这个属性，其他名称相同的两个属性（text-align/font-size）用了自己的样式

多重样式的优先级：

内联样式>内部样式>外部样式>浏览器默认样式

当你学会创建之后，你就可以自己独立的联系，好记性不如烂笔头，当你的熟练度提升了，你就会发现做什么都会容易。

赞 (0)

相关推荐