一、行间样式表
行间样式表是指将CSS样式编码写在HTML标签中,格式如下
<h1 style="font-size:12pxcolor:#000FFF">
我的CSS样式。
</h1>
行间样式表由HTML元素的HTML元素的style支持,只需将CSS代码用分号隔开写在style=""之中。这是最基本的形式,但是它没有实现表现与内容分离且不能灵活的控制多个页面所以我们只是在调试CSS代码的时候使用。
二、内部样式表
内部样式表与行间样式表相似都是把CSS代码写在HTML页面中,稍微不同的是前者可以将样式表放在一个固定的位置,格式如下
<html>
<head>
<title>内部样式表</title>
<style type="text/css">
h1{font-size:12px
color:#000FFF
}
</style>
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
内部样式表编码是初级的应用形式,不能达到跨页面使用所以不适合使用。
三、外部样式表
外部样式表是CSS应用中最好的一种形式,它将CSS样式代码单独放在一个外部文件中,再由网页进行调用。多个网页可以调用一个样式文件表,这样能够实现代码的最大限度的重用及网站文件的最优化配置,格式如下
<html>
<head>
<title>外部样式表</title>
<link rel="stylesheet" rev="stylesheet" href="style.css">
</head>
<body>
<h1>我的CSS样式。</h1>
</body>
</html>
在style.css中的代码为
h1{font-size:12px
color:#000FFF
}
我们在<head>中使用了<link>标签来调用外部样式表文件。将link指定为stylesheet方式,并使用了href="style.css"指明样式表文件的路径便可将该页面应用到在style.css中定义的样式。
一、内部引用:运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。具体css代码写到<style></style>中,如下面的例子<style>
bdoy{font-size:14px}
</style>
二、外部引用:用<link>标签引用外部CSS文件中的样式。可将CSS做成单独文件。比如css写到style.css文件中,然后在html中应用这个css。一般最常用的这种方法。
<link rel="stylesheet" type="text/css" href="style.css">
三、在代码中使用:<div style="color:red"></div>
样式的引用形式大致可分为以下四种:一、行间样式,即直接加在标签上的样式 例:<div style="width:50px"></div>
二、内联样式 即用<style></style>标签括起来写在页面中的样式
三、外联样式:即将样式单独放到一个文件夹中,然后用link标签引入页面的形式
四,导入样式,即将样式,按模块划分或其它的分法分别放在不同的css文件中,然后用@导入到其它样式中 。此方法建议不要用,因为效率不是特别高
前三种的优先级为: 行间 >内联 >外联