这篇文章主要为大家展示了“html如何引入CSS样式”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html如何引入CSS样式”这篇文章吧。
CSS使用非常灵活,即可以嵌入在HTML文档中,也可以是一个单独的文件,如果是单独的文件,则必须以.css为扩展名。CSS和HTML的结合3种常用方式:
(1)行内样式
行内样式,是通过标签的style属性来设置元素的样式。
<!-- 方式1:行内样式
color : 表示字体颜色
font-size : 表示字体大小
-->
<a style="color: #f00; font-size: 30px;">小灰灰</a>
行内样式通过标签的属性来控制样式,这样并没有做到结构与表现(HTML展示结构、CSS显示效果)相分离,所有一般很少使用。学习阶段有时候为了快速编程,偶尔使用。
(2)内部样式
内部样式又称为内嵌式,是将CSS代码集中卸载HTML文档的<head>头部标签体中,并且使用<style>标签定义。
给当前html文件中的多个标签设置样式。
在html的<head>标签中使用<style>标签来定义CSS
<!-- 方式2:内部样式
background-color :表示背景色
-->
<style type="text/css">
body{
background-color: #ddd;
}
</style>
(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"/>
链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用,同时一个HTML页面也可以通过多个<link/>标记链接多个CSS样式表。
以上是“html如何引入CSS样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。