CSS之引入方式

CSS的作用

CSS是为HTML提供显示效果的,但是我们必须在HTML里引入CSS,它才会起作用。

CSS的引入方式

  • 内联属性(Inline style attribute)
    • 内联属性(Inline style attribute)的使用方法是,对于想要设置样式的HTML元素,直接修改他的style属性,将css代码直接写在style属性里。 比如:
<h1 style="font-size: 14px;color:blue;">我的字号和高度被修改了</h1>
  • 写在style标签里
    • 直接写在style标签里
<style type="text/css">   
 body{        
         margin-left: 200px; 
         margin-right: 200px;    
}
</style>
-  一般要求写在head标签里
<head>
.button{    
            background-color: aqua;    
            height: 30px;    
            width: 100px;    
            font-size: 14px;
}
</head>
  • 用link标签引用外部文件
    • 写在head标签里
<link rel="stylesheet"  href="css/index.css"/>
  -  这是最常用的引入方式。如果没有特别的理由,最好使用引入外部css文件的方式。 所谓特别的理由一般是在极其特殊情况下,而且往往也是临时性策略,所以,就算你这么做了也请在未来改进成使用link标签引入外部css文件的方式。

引入方式的优先级

外部链接,写在style标签里,内联属性这三种引入方式的优先级依次提高。也就是“内联属性”里的会覆盖上面两种,“写在style标签里”的会覆盖写在外部文件里,用“外部链接”引进来的。
如果在同一个级别里,几乎只有一个规则,后写的覆盖先写的。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,599评论 32 459
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,315评论 0 5
  • 半颓的土墙里,两棵香椿树摇曳生姿,中间生着一棵枣树,树上满满的挂着青枣,怕是再过几日,等着枣儿全都熟透了,便也被邻...
    G阿苏阅读 211评论 0 1
  • 月落西窗,清风送爽,秋天在酷热一夏的哀怨里如约而至,熬过了热浪席卷的日子,在这薄凉的季节里,静下心来,梳理一下燥热...
    古城苍狼阅读 518评论 7 15