CSS选择器基础

2019-11-28 本文已影响0人 whuisu

为网页添加CSS有三种，分别是：外部样式、内部样式和内联样式。
最推荐使用外部样式表，更加符合Web标准所主张的内容和表现相分离思想。

1 内联样式

<p style="color: red;">I'm learning to code!</p>

2 内部样式

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

3 使用<link>自闭合标签在html中引入外部样式，link元素必须放在HTML文档的head元素里面

<head>
  <link href="global_v1.5.1.css" rel="stylesheet" type="text/css" media="screen"/>
</head>

标签名 Tag Name 🏷️

p {
  font-family: Arial;
}

h1 {
  color: maroon;
}

类名 Class Name

<p class="title">Sole Shoe Company</p>

.title {
  color: teal
}

链式选择 Chaining Selectors

h2.destination{
  font-family: cursive;
}

嵌套元素 Nested Elements

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>
.main-list li {

}

多个选择器 Multiple Selectors

h5, p {
  font-family: Georgia;
}