CSS语法与CSS选择器

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

目录

CSS 语法

实例

例子解释

 CSS 选择器

CSS 元素选择器

实例

CSS id 选择器

实例

CSS 类选择器

实例

实例

实例

CSS 通用选择器

实例

CSS 分组选择器

实例

所有简单的 CSS 选择器

延伸阅读


CSS 语法

CSS 规则集rule-set由选择器和声明块组成

选择器指向您需要设置样式的 HTML 元素。

声明块包含一条或多条用分号分隔的声明。

每条声明都包含一个 CSS 属性名称和一个值以冒号分隔。

多条 CSS 声明用分号分隔声明块用花括号括起来。

实例

在此例中所有 <p> 元素都将居中对齐并带有红色文本颜色

p {
  color: red;
  text-align: center;
}

亲自试一试

例子解释

  • p 是 CSS 中的选择器它指向要设置样式的 HTML 元素<p>。
  • color 是属性red 是属性值
  • text-align 是属性center 是属性值


 CSS 选择器

CSS 选择器用于“查找”或选取要设置样式的 HTML 元素。

我们可以将 CSS 选择器分为五类

我们将了解最基本的 CSS 选择器。


CSS 元素选择器

元素选择器根据元素名称来选择 HTML 元素。

实例

在这里页面上的所有 <p> 元素都将居中对齐并带有红色文本颜色

p {
  text-align: center;
  color: red;
}

亲自试一试


CSS id 选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。

元素的 id 在页面中是唯一的因此 id 选择器用于选择一个唯一的元素

要选择具有特定 id 的元素请写一个井号后跟该元素的 id。

实例

这条 CSS 规则将应用于 id="para1" 的 HTML 元素

#para1 {
  text-align: center;
  color: red;
}

亲自试一试

注意id 名称不能以数字开头。


CSS 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素请写一个句点.字符后面跟类名。

实例

在此例中所有带有 class="center" 的 HTML 元素将为红色且居中对齐

.center {
  text-align: center;
  color: red;
}

亲自试一试

还可以指定只有特定的 HTML 元素会受类的影响。

实例

在这个例子中只有具有 class="center" 的 <p> 元素会居中对齐

p.center {
  text-align: center;
  color: red;
}

亲自试一试

HTML 元素也可以引用多个类。

实例

在这个例子中<p> 元素将根据 class="center" 和 class="large" 进行样式设置

<p class="center large">这个段落引用两个类。</p>

亲自试一试

注意类名不能以数字开头

另注如果有冲突的元素将以后面的类为基准。


CSS 通用选择器

通用选择器*选择页面上的所有的 HTML 元素。

实例

下面的 CSS 规则会影响页面上的每个 HTML 元素

* {
  text-align: center;
  color: blue;
}

亲自试一试


CSS 分组选择器

分组选择器选取所有具有相同样式定义的 HTML 元素

请看下面的 CSS 代码h1、h2 和 p 元素具有相同的样式定义

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

最好对选择器进行分组以最大程度地缩减代码。

如需对选择器进行分组请用逗号来分隔每个选择器

实例

在这个例子中我们对上述代码中的选择器进行分组

h1, h2, p {
  text-align: center;
  color: red;
}

亲自试一试


所有简单的 CSS 选择器

选择器例子例子描述
.class.intro选取所有 class="intro" 的元素。
#id#firstname选取 id="firstname" 的那个元素。
**选取所有元素。
elementp选取所有 <p> 元素。
element,element,..div, p选取所有 <div> 元素和所有 <p> 元素。

延伸阅读

课外书CSS 元素选择器

课外书CSS 选择器分组

课外书CSS 类选择器详解

课外书CSS ID 选择器详解

课外书CSS 属性选择器详解

课外书CSS 后代选择器

课外书CSS 子元素选择器

课外书CSS 相邻兄弟选择器

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6
标签: CSS