CSS 的引入方式

最新推荐文章于 2023-07-15 23:05:07 发布

「已注销」

最新推荐文章于 2023-07-15 23:05:07 发布

阅读量64

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/u014301409/article/details/112689563

版权

前端技术专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css 的引入方式

行内样式，行间样式

是通过style属性来设置元素的样式

<标签名 style="属性1:属性值1；属性2:属性2;属性3:属性3">

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div style="color:red; font-size:16px">
      <input type="text" value="韩国思密达" style="color: red; font-size:18px"/>
    </div>
  </body>
</html>

缺点：没有与html分离开来

内部样式表

写在 head标签之间

选择器{
	属性1：属性值；
  属性2：属性值；
  属性3：属性值；
}

<style type="text/css">
  div {
    color:red;
    font-size:16px;
    position:absolute;
  }
</style>

初步实现了样式与结构的分离。

文档仍然较为冗长，只针对当前页面。

外部样式表

结构与样式的完全分离

样式共享只写一次

<head>
  <link rel="stylesheet" type="text/css" href="path/to/file/" />
</head>

/** path/to/file/index.css**/
div h3 {
  color:red;
  font-size:16px;
}

KEVINGUO.CN https://www.kevinguo.cn

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 的引入方式

css 的引入方式行内样式，行间样式是通过style属性来设置元素的样式<标签名 style="属性1:属性值1；属性2:属性2;属性3:属性3"><!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div style="color:red; font-size:16px"&g
复制链接

扫一扫

专栏目录