CSS样式的使用

New924

已于 2023-02-15 15:53:43 修改

阅读量29

点赞数

分类专栏： HTML+CSS+JS 文章标签： css 前端 css3

于 2023-01-29 16:41:36 首次发布

本文链接：https://blog.csdn.net/New924/article/details/128791245

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 外联样式,在项目中使用较多 -->
  <link rel="stylesheet" href="css文件名">

  <!-- 内联样式 -->
  <style>
    /*元素选择器 */
    span {
      color: blue;
      font-size: larger
    }

    /* 全局选择器 */
    * {
      color:black;
      padding: 0;
    }

    /* 类选择器  不能使用数字命名*/
    .test {
      margin-top: auto;
      padding: 0
    }

    /* ID选择器 唯一性,不能重复,不能使用数字*/
    #hello {
      font-size: larger;
      padding: 0
    }
  </style>
</head>

<body>
  <!-- 样式的优先级:行内样式>ID选择器>类选择器>元素选择器 -->
  <!-- 行内样式 -->
  <p style="color:red; font-size:larger">大家好</p>

  <!-- 使用class引入类选择器里的样式, 使用id引入ID选择器里的样式 -->
  <span class="test" id="hello">大家好</span>
</body>

</html>