CSS引入方式

时间  2020-08-10
标签 css 引入 方式 栏目 CSS 繁體版
原文   原文链接

CSS引入方式

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

将全部的CSS代码抽取出来，单独放到HTML页面的一个<style>标签中。css

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

注：html

  • <style>标签能够放到HTML文档的任何一个地方，但通常放在<head>标签中
  • 没有实现结构与样式彻底分离
  • 也称为嵌入式引入

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

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

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

注：code

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

3. 外部样式表

样式单独写到CSS文件中，以后把CSS文件引入到HTML页面中使用。htm

引入外部样式表分为两步：开发

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

注：文档

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

4. 总结

样式表 优势 缺点 使用状况 控制范围
行内样式表 书写方便，权重高 结构样式没有分离 较少 控制一个标签
内部样式表 部分样式和结构相分离 结构样式没有彻底分离 较多 控制一个页面
外部样式表 彻底实现结构和样式相分离 须要引入 最多 控制多个页面
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程