网络日志

CSS 基础选择器

CSS 规则由两个主要的部分组成,选择器以及一条或多条声明。

 h1 {color: red; font-size: 20px;}

选择器用于指定 CSS 样式的 HTML 标签,大括号内的部分是对该标签设置的具体样式。

上面 h1 就是选择器,意思是该页面中所有的 h1 标签文字都为红色,字体大小为 20 像素。

要点:

  • 属性和属性值以“键值对”的形式出现
  • 属性和属性值之间用英文 “:” 分开
  • 多个“键值对”之间用英文 “;” 分开

一、标签选择器

标签选择器是指用HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

p {
  color: red;
  font-size: 10px;
}

缺点:不能差异化,只能选择全部的 p 标签。

二、类选择器

如果想要差异化选择不同的标签,单独选一个或某几个标签,可以用类选择器.

<!--CSS 样式定义,前面要有'.'-->
.red {
  color: red;
}

<!--html 部分,用 class 来调用-->
<ul>
 <li class='red'>我是红色</li>
 <li>我是黑色</li>
 <li>我是黑色</li>
 <li class='red'>我也是红色</li>
</ul>
<p class='red'>我也是红色哎</p>

我们也可以使用多个类名,更方便的设置样式。在使用多个类名时,类名之间必须用空格分开。

  <div class="类名1 类名2 ...">我有很多样式</div>

在开发中,可以把一些标签相同的样式部分放到一个类里面,这些标签可以都调用这个公共的类,然后再调用自己独有的类,这样可以节省 CSS 代码,统一修改也很方便。

三、id 选择器

id 选择器的使用和类选择器很像,但 id 选择器是用 # 来定义的。

<!--CSS 样式定义,前面要有'#'-->
#only {
 color: blue;
}

<!--html 部分,用 id 来调用-->
<div id='only'>我是唯一的</div>

id 选择器在页面上只能使用一次,不常用

四、通配符选择器

通配符选择器* 来定义,它表示选取页面中的所有标签。通配符选择器不需要被调用,会自动给所有的标签使用样式。

通配符选择器在特殊情况下才会使用,比如清除所有标签的内外边距。

* {
  margin: 0;
  padding: 0;
}