CSS样式怎么写才优雅？先看CSS样式的五种来源！

css元素样式来源

1、当前文档:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css元素样式来源,当前文档</title>
  </head>
  <style>
    .dangqian {
      font-size: 1.1rem;
      color: white;
      background-color: orange;
      line-height: 45px;
    }
  </style>
  <body>
    <!-- 案例> -->
    <p class="dangqian">php中文网,当前文档</p>
 </body>
</html>

2. 当前元素的属性:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css元素样式来源,当前元素的属性</title>
  </head>
 <body>
<p style=" font-size: 1.1rem; color: white; background-color: black; line-height: 45px; " > php中文网,当前元素的属性: </p>
 </body>
</html>

3. 外部引用公共样式:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css元素样式来源有哪些,实例演示</title>
    <link rel="stylesheet" href="wb_yingyong.css" />
  </head>
  <body>
  <p class="yinyong">php中文网，外部公共样式:</p>
  </body>
</html>

1、当前文档:

2. 当前元素的属性:

3. 外部引用公共样式:

4.浏览器默认样式

5.用户设置浏览器样式

相关文章