CSS与HTML连接（样式设置）

最新推荐文章于 2024-04-24 10:07:36 发布

L..P

最新推荐文章于 2024-04-24 10:07:36 发布

阅读量2k

点赞数 1

分类专栏： web基础文章标签： css 前端 xhtml html

本文链接：https://blog.csdn.net/thefairwilldim/article/details/131540833

版权

web基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css 层叠样式表（cascading style sheets）可以使多个样式可以层叠到一个元素，它功能强大，可以将内容和表现分离，分工明确提高开发效率。简单来说，它就是用来美化HTML中的元素的。实际运用中我们一般将CSS文件和HTML分开写，在HTML中通过link标签引入外部css文件。

1.行内样式

即直接在标签中使用style属性改变元素样式，style属性的值即为CSS代码。示例：使用行内样式将div标签中的内容字体变为红色。

<div style="color: red">
  行内样式div标签
</div>

2.内部样式

即在HTML文件中的head标签内通过style标签设置元素样式。示例：通过内部样式将div标签中的内容字体变为红色。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  内部书写style标签-->
  <style>
    div{
      color:red;
    }
  </style>
</head>
<body>
<div>
  内部样式div元素
</div>
</body>

3.外部样式

外部样式是指在HTML文件的head标签中使用link标签引入css文件，是实际运用中最常见的方法。

创建a.css文件，使div元素中字体的颜色设为红色，其内容如下：

div{
    color: red;
}

HTML文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  外部样式使用link标签引入外部css文件-->
  <link rel="stylesheet" href="css/a.css">
</head>
<body>
<div>
  外部样式div元素
</div>
</body>
</html>

4.外部导入

外部导入是指在HTML文件中的head标签中使用style标签，通过@import导入CSS文件。示例还是用上述的a.css文件，其HTML文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "css/a.css";
    </style>
</head>
<body>
<div>
  外部导入div元素
</div>

</body>
</html>

外部导入和外部样式的区别：link是xhtml的内部标签，@import是css2（可以认为是CSS的升级版）的内部属性。外部样式link先加载文件，再对内容进行渲染，而外部导入@import先渲染内容，再加载文件，这种方式在网速差的情况下会出现闪烁，即内容的效果要等加载完才会出现。简单来说，如果都是将字体变为红色（没有其他效果要求），网速差的情况下，link方式直接出现红字，而@import开始字体为默认的黑色，加载完才变成红色。除此之外，导入式@import对于不支持css2的浏览器不太友好，故常用link方法链接css文件。

5.css样式优先级

行内样式>内部样式>外部样式。当一个元素被多种方法定义时，将优先遵循行内样式的内容变化（谁离元素近，谁效果最强）。下面通过两组对比更直观地展示其优先级。

①行内样式>内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--    <link rel="stylesheet" href="css/a.css">-->
    <style>
      div{
        color: green;
      }
    </style>
</head>
<body>
<div style="color: red">
    css优先级 行内样式>内部样式>外部样式
</div>
</body>
</html>

②内部样式>外部样式

a.css文件和上述提到的是同一个文件，作用是将字体变为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="css/a.css">
    <style>
      div{
        color: green;
      }
    </style>
</head>
<body>
<div >
    css优先级 行内样式>内部样式>外部样式
</div>
</body>
</html>

L..P

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS与HTML连接（样式设置）

外部导入和外部样式的区别：link是xhtml的内部标签，@import是css2（可以认为是CSS的升级版）的内部属性。外部样式link先加载文件，再对内容进行渲染，而外部导入@import先渲染内容，再加载文件，这种方式在网速差的情况下会出现闪烁，即内容的效果要等加载完才会出现。外部导入是指在HTML文件中的head标签中使用style标签，通过@import导入CSS文件。外部样式是指在HTML文件的head标签中使用link标签引入css文件，是实际运用中最常见的方法。②内部样式>外部样式。
复制链接

扫一扫