html如何引入CSS样式

发布时间:2022-03-25 10:22:26 作者:小新
来源:亿速云 阅读:169

这篇文章主要为大家展示了“html如何引入CSS样式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html如何引入CSS样式”这篇文章吧。

引入CSS样式

CSS使用非常灵活,即可以嵌入在HTML文档中,也可以是一个单独的文件,如果是单独的文件,则必须以.css为扩展名。CSS和HTML的结合3种常用方式:

(1)行内样式

行内样式,是通过标签的style属性来设置元素的样式。

<!-- 方式1:行内样式
color : 表示字体颜色
font-size : 表示字体大小
-->
<a style="color: #f00; font-size: 30px;">小灰灰</a>

html如何引入CSS样式

 行内样式通过标签的属性来控制样式,这样并没有做到结构与表现(HTML展示结构、CSS显示效果)相分离,所有一般很少使用。学习阶段有时候为了快速编程,偶尔使用。

(2)内部样式

内部样式又称为内嵌式,是将CSS代码集中卸载HTML文档的<head>头部标签体中,并且使用<style>标签定义。

给当前html文件中的多个标签设置样式。

在html的<head>标签中使用<style>标签来定义CSS

<!-- 方式2:内部样式
          background-color :表示背景色
-->
<style type="text/css">
          body{
              background-color: #ddd;
          }
</style>

 html如何引入CSS样式

 (3)外部样式

 外部样式又称为链入式,是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link>标签将样式连接到HTML文档中。

<!-- 方式3:外部样式
          rel="stylesheet",固定值,表示样式表
          type="text/css",固定值,表示css类型
          href,表示css文件位置
          font-family 表示使用的字体系列,多个字体使用逗号分隔。例如:"字体1,字体2,字体3",此时优先使用"字体1",如果"字体1"系统不存在,再使用"字体2",以此类推。
          -->
<link rel="stylesheet" type="text/css" href="css/demo00.css"/>

html如何引入CSS样式

html如何引入CSS样式

 链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个<link/>标记链接多个CSS样式表。

以上是“html如何引入CSS样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 引入CSS样式文件
  2. html如何引入js

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html css

上一篇:html下拉列表标签是什么

下一篇:css如何使用元素选择器

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》