HTML中引入CSS的方式有哪些
这篇文章给大家分享的是有关HTML中引入CSS的方式有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司长期为上千客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为宜黄企业提供专业的网站制作、网站设计,宜黄网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。
一、认识CSS
CSS:层叠样式表(Cascading Style Sheets)
样式表:如果把HTML比作人,那么样式表就是衣帽服饰,就是用来打扮HTML外观的(俗话说人靠衣服,网页靠CSS,才能变得漂亮)
内容与样式分离:HTML代码与CSS代码分离,让它们各自去做擅长的事情
HTML控制结构和内容;CSS控制样式
这样有利于代码的维护
举个栗子:存在已久的QQ空间的装扮功能就是内容与样式分离的最好体现
当我们点击切换不同的皮肤时,空间页面会显示不同的主题样式,这就是在给网页更换皮肤啊
既然将HTML与CSS分离,那么又如何让它们精诚合作呢?向下看
二、四种CSS的引入方式
1. 内联样式(行内式)
即:在html标签内的style属性中设定CSS样式,例如:
我是段落
注:这种方式不推荐使用,因为它只能改变当前标签样式,多处使用会导致代码的可维护性极差
2. 内部样式(嵌入式)
即:在html内的head头部内的style标签对中设定CSS样式,例如:
注:这种方式使html内容结构和css样式分开,便于阅读且代码比较集中,但CSS样式只对当前页面有效。
当多个页面需要引用同一个CSS样式时,修改CSS样式将十分麻烦,此时不利于代码维护,可维护性变差。
3. 外部样式(链接式:link)
即:使用html的link标签引入一个外部独立的 .css 文件
link标签放在html文件内的head头部中,例如:
注:这种方式,CSS代码存储在一个外部独立的文件中,若要更换网站样式,只需修改CSS文件即可,不需改动html文件,所以采用这种方式使代码具有良好的可维护性
4. 外部样式(导入式:@import)
即:使用CSS的语法规则引入一个外部独立的 .css 文件
@import放在html文件head头部里的style标签内(@import也可以放在导入样式表的开头,去引用其他样式),例如:
@import url("style.css");
注:这种方式与链接式link一样,将CSS代码存储在一个外部独立的文件中,也具有良好的可维护性,但这种方式也有缺点:白屏和无样式内容闪烁
嘿,除了以上引用的样式外,不要忽略 “ 浏览器的默认样式 ” 哦
三、 引用外部样式时:link 和 @import 的区别
1. 从属关系
link属于HTML的标签,通过 link 标签的 href 属性来引入外部文件;link不仅可以引入CSS样式表,还可以定义RSS、rel属性等
@import属于CSS的语法,@import语法只有一项作用:导入样式表
2. 加载顺序
使用link标签引入的CSS样式在加载页面时被同时加载
使用@import导入的CSS样式将在页面加载完毕之后才被加载
3. 兼容性
link 属于HTML标签,不存在兼容性问题
@import 是 CSS2.1 是在CSS2.1提出的,低版本的浏览器不支持,只可在 IE5+ 才能被识别
4. DOM可控区
link 支持使用Javascript控制DOM去改变样式(通过 JS 操作 DOM ,插入link标签来改变样式)
@import不支持使用Javascript控制DOM去改变样式( 由于DOM 方法是基于文档的,所以无法使用@import的方式插入样式)
5. 权重(若有兴趣自行查询它的原因)
link引入的样式权重大于@import引入的样式
感谢各位的阅读!关于“HTML中引入CSS的方式有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
分享文章:HTML中引入CSS的方式有哪些
网址分享:http://scyanting.com/article/gchooh.html