CSS样式的使用分为三种类型,分别为内联样式,内部样式,外部样式,
下面会介绍这三种样式,并分析它们优缺点.
1.内联样式
内联样式就是将css代码直接写进style属性里面.style是所有HTML元素都支持的一个属性,下面给出样例代码:
<p style="color:red;font-size:10px">内联样式</p>
2.内部样式
内部样式就是将css代码写在<style>标签里面,<style>标签通常位于<head>标签之间,下面给出样例代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
div{
width:250px;
height:76px;
}
</style>
</head>
3.外部样式
外部样式就是将css代码写入样式表中.样式表是一个独立文件,可以使用<link>元素,就可以将其附加到HTML文档.
注意:
a.推荐使用一个全小写单词来命名样式表,这样既可以使样式表命名简单易记,也能保证它在所有操作系统上能正常运行,
b.<link rel="stylesheet" href="文件名.css" type="text/css"/>是固定写法不可更改.
下面给出样例代码:
div{
background:url("heading2.jpg") no-repeat;
width:250px;
height:76px;
}
然后,在html文件里面通过link元素引入外部样式表
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" href="exone.css" type="text/css"/>
</head>
自此,CSS三种样式的使用方法介绍完毕,下面我分析一下如何选择这三个样式
- 首先我们必须要知道一点,三种样式的优先级为:内联样式>内部样式>外部样式.
- 当同一个样式要应用到多个网页时,我们选择外部样式,这样我们仅需建一个样式表,然后在每个页面中通过link引入样式表即可.
- 如果单个页面需要特殊的样式时,我们最好的选择是内部样式.
- 内联样式和内部样式本质上没区别,但是对页面的影响确实巨大的,大量的内联样式会给网页的维护带来大量的负担,
- 所以,内联样式仅仅适用于单个元素需要特殊样式这种情况.
总的来说,一定要养成使用外部样式的习惯,这个将为我们以后工作效率打好基础,因为
1.因为做一个网站时,会有很多页面有相同的样式.如果我们使用外部样式,我们仅仅需要修改样式表即可,大大节省我们时间.
2.一旦选择内部样式,每个页面的代码会变得很臃肿,不利于维护.现在都追求代码简介.