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

CSS 的引入方式

css 的引入方式

行内样式，行间样式

内部样式表

外部样式表

猜你喜欢