CSS基础选择器和文字属性控制

CSS

层叠样式表(Cascading Style Sheets)，是一种样式表语言，它和HTML一起被用来描述网页的样式。HTML 主要用来定义网页的内容，也就是骨架，CSS 用来定义网页的样式。

CSS 是由选择器和属性声明组成的。选择器用来选择元素，属性声明用来设置元素的样式。CSS 的语法如下：

selector {
  property: value;
}

选择器：选择器用于选择元素。选择器可以是标签名、类名、ID、属性等。
属性：属性是样式的属性，如颜色、字体、大小、边框、背景等。

CSS 引入方式

CSS 引入方式有三种：

内联样式：在 HTML 标签中直接写样式，如：<div style="color: red;">Hello World</div>。
内部样式表：在 HTML 文件中通过 style 标签引入样式，如：<style>div { color: red; }</style>。
外部样式表：在 HTML 文件中通过 link 标签引入样式，如：<link rel="stylesheet" href="style.css">。

在开发中，一般我们都是使用外部样式表的方式来引入 CSS。例如：

<!-- HTML文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>这是 p 标签</p>
    <div>这是 div 标签</div>
</body>
</html>

/* CSS样式表 */
p {
    color: red;
}
div {
    color: blue;
}

CSS 选择器

CSS 选择器用于选择元素。选择器可以是标签名、类名、ID、属性等。

标签选择器

选择器是标签名，如：p、div、span等。使用标签选择器，可以匹配所有该标签的元素。适用场景是匹配所有该标签的元素。

类选择器

使用类选择器，可以匹配所有该类名的元素。使用的时候需要在 CSS 文件中定义类名，然后在标签中添加 class 属性。例如：

<!-- 在标签中添加 class 属性 -->
<p class="red"></p>

/* 在 CSS 文件中定义类名 */
.red {
    color: red;
}

需要注意的是 CSS 文件中定义的类名是 .red，在标签中添加 class 属性的时候是 red。

ID 选择器

使用 ID 选择器，可以匹配所有该 ID 的元素。使用的时候需要在 CSS 文件中定义 ID，然后在标签中添加 ID 属性。例如：

<!-- 在标签中添加 ID 属性 -->
<p id="red"></p>

/* 在 CSS 文件中定义 ID */
#red {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

需要注意的是，ID 选择器在 CSS 文件中定义的 ID 是 #red，在标签中添加 ID 属性的时候是 red。ID 选择器只能匹配一个元素，如果多个元素有相同的 ID，那么 CSS 文件中定义的 ID 只会生效一个。

通配符选择器

通配符选择器是匹配所有元素的选择器。使用通配符选择器，可以匹配所有元素。适用场景是匹配所有元素。通配符选择器是 *。例如：

/* 在 CSS 文件中定义通配符选择器 */
* {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

<!-- 使用了通配符选择器之后，全部都是红色 -->
<p>这是 p 标签</p>
<div>这是 div 标签</div>
<span>这是 span 标签</span>
<h1>这是 h1 标签</h1>

通配符选择器通常用于以下情况：

在不同浏览器中，元素的默认样式可能不同，使用 * 选择器可以重置默认样式。例如：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

全局字体/颜色
在某些情况下，可能需要全局设置字体和颜色，这时候可以使用通配符选择器。例如：

* {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    font-size: 14px;
}

文字属性控制

文字属性控制是指控制文字的样式，如颜色、字体、大小、边框、背景等。
文字属性控制可以使用以下 CSS 属性：

字体属性	描述
font-family	设置字体，例如：Arial, Helvetica, sans-serif;
font-size	设置字体大小，例如：16px;
font-weight	设置字体的粗细，例如：bold;
font-style	设置字体的样式(是否倾斜)，例如：italic;
line-height	设置行高，例如：1.5; 表示行高为字体的1.5倍；设置为 30px，表示行高为30px
color	设置字体颜色，例如：red;
text-indent	设置首行缩进，例如：2em; em表示当前标签的字体大小
text-align	设置文本水平方向的对齐方式，默认是左对齐，例如：center;
text-decoration	设置文本修饰线，例如：underline;
font	复合属性，例如：font: 16px Arial, Helvetica, sans-serif; 必须设置字号和字体，否则font属性不生效。

行高是包括字体的上下边距以及字体本身的高度在内的，因此在设置单行字体垂直居中的时候，可以将字体的高度和行高设置为相等，这样字体就会垂直居中。
font-family 是设置字体的，它可以设置多个字体，如果第一个字体不支持，则会使用第二个字体，以此类推。一般最后一个字体设置为 sans-serif，表示无衬线字体族。
color 是设置字体颜色的，它可以设置颜色名称、十六进制颜色值、RGB颜色值等。通常在开发时，使用的都是 RGB 颜色值，而不是颜色名称。

秒客网