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">
      <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

猜你喜欢

转载自blog.csdn.net/u014301409/article/details/112689563