分享更有价值
被信任是一种快乐

HTML中引入CSS的方式有哪些

文章页正文上

这篇文章给大家分享的是有关HTML中引入CSS的方式有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
  一、认识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的方式有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

相关推荐: web前端必须要掌握的定时任务有哪些

这篇文章主要介绍了web前端必须要掌握的定时任务有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇web前端必须要掌握的定时任务有哪些文章都会有所收获,下面我们一起来看看吧。 定时任务,简单的理解就是多久后做什么,每隔多久做什么…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册