欢迎光临
我的个人博客网站

CSS引入方式


CSS引入方式

1. 内部样式表(内嵌样式表)

将所有的CSS代码抽取出来,单独放到HTML页面的一个<style>标签中

<style> div {     color: blue; } </style> 

注:

  • <style>标签可以放到HTML文档的任何一个地方,但一般放在<head>标签中
  • 没有实现结构与样式完全分离
  • 也称为嵌入式引入

2. 行内样式表(内联样式表)

在元素标签内部的style属性中设定CSS样式,适合于修改简单样式。

<div style="color: blue;">      </div> 

注:

  • style是标签的属性
  • 样式写在双引号中间
  • 控制的是当前标签的样式
  • 只有对当前元素添加简单样式的时候可以考虑使用
  • 也称为行内式引入

3. 外部样式表

样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步:

  1. 新建一个后缀名为.css的样式文件,把所有CSS代码都放到此文件中
  2. 在HTML页面中,使用<link>标签引入这个文件
<head>     <link rel="stylesheet" href="css文件路径"> </head> 
属性 作用
rel 定义当前文档与被链接文档之间的关系。指定为"stylesheet"表示被链接的文档是一个样式表文件。
href 定义所链接外部样式表文件的url,可以是相对路径或绝对路径。

注:

  • <link>标签写在HTML页面 的head标签里
  • css文件里只有样式没有标签
  • 是开发中常用的方式
  • 也称为外链式链接式引入

4. 总结

样式表 优点 缺点 使用情况 控制范围
行内样式表 书写方便,权重高 结构样式没有分离 较少 控制一个标签
内部样式表 部分样式和结构相分离 结构样式没有完全分离 较多 控制一个页面
外部样式表 完全实现结构和样式相分离 需要引入 最多 控制多个页面
赞(0) 打赏
未经允许不得转载:张拓的天空 » CSS引入方式
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏