css样式的引入方式

有3种引入方式
a、外部引入
b、头部引入
c、行内引入(内联引入)

-----------------------------------分割线--------------------------------------------------
a、外部引入
通过link标签的href属性引入css属性
在工作中,通常会使用这种方式。
优点:结构样式分离,易于修改维护,css文件能够缓存在浏览器。
缺点:增加请求次数,在大型网站(百度,京东等)中一般不会使用这种方式。
优先级:一个html文件可以引入多个css文件,不过会有优先级,越后面的越优先。
首先:
新建一个css文件
在html文件里声明使用这个文件,如下:
<link rel="stylesheet" href="css/base.css" />-------------作为head元素的子元素
href="文件地址"-----有时候需要加上../css/base.css,这个的意思是html的上级文件夹下的css文件夹里的css文件。

-----------------------------------分割线--------------------------------------------------
b、头部引入
在head元素里通过style标签引入css属性----作为head元素的子元素
<style type="text/css">
Css属性
</style>
优点:用于访问量大型网站,减少http请求次数
缺点:css文件不能缓存

-----------------------------------分割线--------------------------------------------------
c、内联引入(行内引入):
在标签里通过元素的style 属性添加css样式
<body style="font-weight:bold;">

不推荐使用,只用在需要使用特殊样式的某些元素上
优点:这样添加的css属性的优先级比其他两种方式要高
缺点:结构跟样式没有分离,只能控制当前style属性的单一元素

-----------------------------------分割线--------------------------------------------------

外部引入和头部引入所写的css样式:

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,679评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,677评论 32 459
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,869评论 0 6
  • 关心是真关心啊! 实际呢,来点实际好不好! 不过现在不需要这种实际了! 希望另一件事可以成! 20170705 2...
    千年人参娃娃阅读 1,183评论 0 0
  • 爱,太抽象而身边却又时常出现爱这个字。只有处在那情那景的才可体味吧。 于我,爱是很神圣的。父母因为工作关系将年幼的...
    编花篮阅读 1,664评论 0 0