HTML中引入CSS文件的几种方法
2016-05-10 21:24
411 查看
概况来说有以下四种:
1.行内式:也称内联式,在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势;
2.嵌入式:将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中;
3.链接式:跟第4个的导入式都称外部式或者外联式,使用link引用外部CSS文件;
4.导入式:使用@import引用外部CSS文件;
-----------------------------------------------------A
对于行内式,是刚开始写最容易也最习惯的方式,但这种写法完全体现不出css的优势,如下:
-----------------------------------------------------B
嵌入式如果页面比较少的情况下,也是挺不错的选择,但如果对应一个项目页面很多,这样无疑有点灾难性,要修改个样式,或许是大篇幅的相似页
面,但都得一个个的去修改,如下:
这种写法一定程度上避免了页面一种"无样式"现象,页面加载完css才去渲染页面...
-----------------------------------------------------CD
外部式css样式就是把css代码写一个单独的外部文件中,这个css样式文件以“
通过@import引入的格式如下:
以上的两种外部引入方式从直观看语法结构的区别:
@import这种方式还应注意下载HTML和CSS文件中的不同,在HTML中需要加上<style type="text/css"></style>,而在css文件中就可以直接@import
来添加路径使用了,这就出现了一个点:对应样式文件较多的项目,我们可以选择先主后次,把主要的样式先渲染出来,一些次要的可以放在css文件
中进行import,这样也可一定程度上缓解服务器的压力,虽然文件不大,但能优化还是好的。本质上这两种外部引入方式并没太多区别,但有时为了项
目中编辑站点的样式方便,较多的使用link的方式。
当然还有一些以XML为编辑要求的引入方式,但不常用....
1.行内式:也称内联式,在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势;
2.嵌入式:将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中;
3.链接式:跟第4个的导入式都称外部式或者外联式,使用link引用外部CSS文件;
4.导入式:使用@import引用外部CSS文件;
-----------------------------------------------------A
对于行内式,是刚开始写最容易也最习惯的方式,但这种写法完全体现不出css的优势,如下:
<span style="font-size:14px;"><div id="demo" style="position:absoulte;left: 20px;top:50px;width:300px;height: 50px;border: solid 1px red;padding-left: 20px;color:gray;font-size: 20px;line-height: 50px;text-align: center;">我是行内式写法</div></span>一个页面中如果标签很多,这种写法看起来不好并且显得很累赘,重复性太大,是很不建议的!
-----------------------------------------------------B
嵌入式如果页面比较少的情况下,也是挺不错的选择,但如果对应一个项目页面很多,这样无疑有点灾难性,要修改个样式,或许是大篇幅的相似页
面,但都得一个个的去修改,如下:
<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{ position:absoulte; left: 20px; top:50px; width:300px; height: 50px; border: solid 1px red; padding-left: 20px; color:gray; font-size: 20px; line-height: 50px; text-align: center;</span>
<span style="font-size:14px;">} </style></span>
这种写法一定程度上避免了页面一种"无样式"现象,页面加载完css才去渲染页面...
-----------------------------------------------------CD
外部式css样式就是把css代码写一个单独的外部文件中,这个css样式文件以“
.css”为扩展名,在<head>标签内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,这样最大化的发挥了css出现的优势,当然".css"文件文件的命名要有一定的意义,方便后面的修改或增强其可读性,如"main.css"...
<link href="main.css" rel="stylesheet" style="text/css"/>其中的rel="stylesheet" type="text/css" 是固定写法不可修改
通过@import引入的格式如下:
<style type="text/css"> @import url(demo.css); </style>这种方式会在整个页面加载完成时才引入css文件,很明显的问题就是页面的"裸奔"现象,这个当然从交互和体验的角度考虑是绝对不能接受的
以上的两种外部引入方式从直观看语法结构的区别:
<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>
@import这种方式还应注意下载HTML和CSS文件中的不同,在HTML中需要加上<style type="text/css"></style>,而在css文件中就可以直接@import
来添加路径使用了,这就出现了一个点:对应样式文件较多的项目,我们可以选择先主后次,把主要的样式先渲染出来,一些次要的可以放在css文件
中进行import,这样也可一定程度上缓解服务器的压力,虽然文件不大,但能优化还是好的。本质上这两种外部引入方式并没太多区别,但有时为了项
目中编辑站点的样式方便,较多的使用link的方式。
当然还有一些以XML为编辑要求的引入方式,但不常用....
相关文章推荐
- Css基本样式————字体
- Css基本样式————文本
- css半透明
- css浮动float的使用示例
- 当装了dreamweaver等某些IDE时,css失效了,其中1个原因
- 高级CSS filters
- CSS
- Qt样式表的使用
- 进度条样式
- 一个简单版的波纹css3动画
- CSS零碎知识点
- [css]零散的重构知识
- 浅析CSS中calc()的使用
- 使用自定义透明Dialog样式的Activity
- 窗口样式表格
- 实用css总结
- CSS3动画效果——js调用css动画属性并回调处理详解
- 盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
- CSS3 :target伪类实现Tab切换效果 BY commy
- css中important的用处