任务背景
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>
外部样式
- 链接样式(最常用)
在标签中,使用标签链接外部的CSS文件
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