CSS选择器基础

为网页添加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;
}

https://yangjh.oschina.io/front-end/css/thewayofuse.html

类名 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;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 篇首语 也许你觉得你已经理解了CSS方面的知识了,确实CSS和HTML的学习特点也是先易后难。如果你觉得CSS很简...
    thisDong阅读 1,208评论 1 9
  • 一.class 和 id 的使用场景? name:指定标签的名称应用场景:①form表单:name可作为传递给服务...
    Sunset125阅读 988评论 0 0
  • 1. class 和 id 的使用场景? id:id选择器,使用#name定义(name为id名),使用id="n...
    cheneyzhangch阅读 563评论 0 0
  • 托起阳光的人 ——写在5.26环保日 在那瑞雪纷纷的日子里 当你躺在暖房享受暇意的生活 那橘色身影早在飘雪的寒风里...
    蓝梦清韵阅读 156评论 0 0
  • 每日一练
    古月归园居阅读 120评论 0 1