C1任务-19：CSS引入方式-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_49869756/article/details/120071003

任务背景
CSS（层叠样式表）定义了HTML元素在页面中的样式、布局以及整个页面的布局。CSS遵循W3C规范，实现了跨浏览器的标准化。

任务目标

掌握CSS的引入方式

行内样式
直接使用HTML元素的style属性引入CSS样式例：<pstyle=＂font-size:16px;color:#333;＂>软件工程师能力认证</p

内嵌样式
使用style></style标签引入样式

<style>p{color:#333;font-size:16px;}</style>

外部样式

link标签的href属性设置为目标链接的CSS文件路径，rel属性设置为"stylesheet"表示链接样式表，type属性设置为"text/css"

例：<linkrel="stylesheet"href="style.css"type=“text/css”/>

2.导入样式
使用@import()引入CSS文件

在CSS文件中直接使用@import()
在HTML文件中需要在标签中使用@import()

在HTML初始化时，@import()导入的CSS会被直接导入到HTML或CSS文件中，成为文件的一部分

//在HTML文件中导入
<style>
    @import(style.css)
</style>
//在CSS文件中导入@import(style.css

练习题
现需要导入外部样式表，请补全代码片段

<head>
     <metacharset="utf-8"><linktype="text/css"rel="________"href="style.css"/>
</head>

答：stylesheet

link标签用于链接外部文档，最常用的是方式是用于链接样式表
link标签常用属性
href：被链接文档的位置（URL）
type：规定被链接文档的MIME类型
rel：规定当前文档与被链接文档之间的关系。链接样式表时rel属性设置为stylesheet