免费模板网标签tags 更多...
您的位置:首页 > div+css > 创建css的三种常见代码

创建css的三种常见代码

时间:2018-01-25 来源:网上收集 作者:Tony 阅读次数 tagscss

CSS 创建样式表有三种方法:内联样式、内部样式、外部样式。

(1)、内联样式

 

内联样式也叫行内样式或者行间样式,即在相关标签内使用样式(style)属性定义。如下:

<div style="width:200px;height:100px;border:1px solid black;"></div>

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。因此需要慎用这种方法,例如当样式仅需要在一个元素上应用一次时,可以使用内联样式。要使用内联样式,需要在相关的标签内使用样式属性定义,style 属性可以包含任何 CSS 属性。

 

(2)、内部样式

 

内部样式也叫内嵌样式,即在文档中创建内嵌的样式表,需要使用 <style> 标签在文档头部定义内部样式表,如下:

<head>
<style>
div{
    width:200px;
    height:100px;
    border:1px solid black;
}
p{
    color:blue;
    font-size:14px;
}
span{
    color:black;
    font-weight:bold;
}
</style>
</head>

当单个文档需要特殊的样式时,就应该使用内部样式表。

 

(3)、外部样式

 

外部样式也叫做外联样式,即使用 <link> 标签链接到外部样式表,也是使用的多的一种,如下:

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
 </head>

 当样式需要应用于很多页面时,外部样式表将是理想的选择,在使用外部样式表的情况下,可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表,浏览器会从文件 style.css 中读到样式声明,并根据它来格式化文档。注意:<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式,不可更改。

 

外部样式表可以在任何文本编辑器中进行编辑,样式文件不能包含任何的 HTML 标签,样式表以 .css 扩展名进行保存。注意:不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ,那么它在不同的浏览器中可能无法正常工作,导致意向不到的结果。

 

(4)、样式优先级

 

样式优先级,也可以称为层叠次序,即同一个 HTML 元素不止被一个样式定义时,会优先使用哪个样式。一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中:

 

内联样式 > 内部样式 > 外部样式

 

内联样式(在 HTML 元素内部)拥有最高的优先权,即优先采用在元素内部定义的样式信息,然后是内部样式表(位于 <head> 标签内部),最后是外部样式表中的样式声明,浏览器中的样式声明(缺省值)同外部样式处于同一层次。

 

优先级的顺序是有一个前提的,即内联样式、内部样式、外部样式表中 CSS 样式是在的相同权值的情况下。

 

但是内部样式 > 外部式也有一个前提,即内部样式的位置一定在外部样式的后面。如下:

 <link rel="stylesheet" type="text/css" href="css/style.css">

 <style>

 

</style>

 (5)、多重样式

 

样式表允许以多种方式规定样式信息,样式可以规定在单个的 HTML 元素中,或在 HTML 页的 <head> 元素中,亦或在一个外部的 CSS 文件中,甚至可以在同一个 HTML 文档内部引用多个外部样式表,但是最终多重样式将被层叠为一个。那就意味着:如果你使用了外部文件的样式,在 <head> 中也定义了该样式,那么内部样式会取代外部文件中的样式。

 

猜你喜欢
栏目推荐
模板推荐

Copyright:2014-2018 www.freemoban.com Corporation,All Rights Reserved 免费模板网 版权所有 鄂ICP备17019132号

免责声明:本站部分资源来自互联网收集,版权归原创者所有,如果侵犯了你的权益,请通知我们,我们会及时删除侵权内容,谢谢合作!

建站咨询QQ