CSS语法中的选择器与属性详解

CSS:层叠样式表，Cascading Style Sheets 层叠样式表

内容和样式分离解耦，便于修改样式。

特殊说明：

最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
为了使用样式更加容易阅读，可以将每条代码写在一个新行内

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS概述</title>
<!--外链的css可以可以影响多个html影响多个页面起作用，作用域大优先级低-->
    <link rel="stylesheet" href="css/style.css">
<!--    style就是css样式的设置,这是内嵌样式，对当前页面的html的结构发生变化-->
    <style>
        p {
            font-size: 24px;
            color: cornflowerblue;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<!--行内css标签优先级 > 内嵌css样式 > 外链css样式 -->
    <p style="color: darkgreen">天使投资早期投资，尤其指的是个人早期投资</p>
    <p>VC:VC是一种将资本投入高成长型企业的私募股权基金。VC往往在创业公司的早期阶段进行投资，同时提供战略和管理方面的支持</p>
    <p>PE:PE是指利用私募基金投资于不公开交易的公司或不上市公司的股权</p>
</body>
</html>

外链代码

css 复制代码

 p {
            font-size: 24px;
            color: red;
            font-weight: bolder;
        }

执行结果

标签选择器

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
    <style>
      body{
        background-color: white;
        text-align: center;
        font-size: 12px;
      }
      p{
        font-family: Arial;
        font-size: 18px;
      }
      h1{
        font-family: '宋体';
        font-size: 30px;
      }
      hr{
        width: 100px;
      }
    </style>
</head>
<body>
    <h1>标题</h1>
    <hr/>
    <p>正文的段落</p>
        版权所有
</body>
</html>

类选择器

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
</head>

<!--类选择器和其他标签不一样的是，需要用.开头表示一个类-->
    <style>
        .one {
          font-size: 18px;
          color: darkred;
        }
        .two {
          font-size: 28px;
          color: aquamarine;
        }
    </style>
<body>
      <p class="one">类别1</p>
      <p class="one">类别2</p>
      <p class="two">类别3</p>
      <p class="two">类别4</p>
</body>
</html>

id选择器

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    使用id选择器的原因是为了保证唯一性，它的特点是id不重复，style用#开头-->
    <title>id选择器</title>

    <style>
        #one {
            font-size: 26px;
            color: darkgreen;
        }
        #two {
            font-size: 18px;
            color: darkred;
        }
    </style>
</head>

<body>
    <p id="one">文字1</p>
    <p id="two">文字2</p>
</body>
</html>

执行结果