您的位置：首页 > Web前端 > CSS

CSS三种样式

2017-03-13 21:52 357 查看

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"/>是固定写法不可更改.

下面给出样例代码:

首先将我们需要的css代码写入到.css文件中(样例中我的命名为"exone.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.一旦选择内部样式,每个页面的代码会变得很臃肿,不利于维护.现在都追求代码简介.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS 内部样式外部样式内联样式三种样式

相关文章推荐

新的分享

章节导航