💕CSS 基础入门指南💕：选择器与文本样式

一、CSS 语法规范

所有的样式都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

选择器分类

基础选择器
复合选择器

案例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
    span {
        color: red;
    }
    </style>
</head>
<body>
    <p><font color="red">24大数据描述</font></p>
    <p><font color="red">你处于</font></p>
    <span>网页设计</span>
    <span>现在学CSS样式</span>
</body>
</html>

二、基础选择器

1. 标签选择器

语法

css 复制代码

标签 {
    属性名1: 属性值1;
    属性名2: 属性值2;
}

2. 类选择器

语法

css 复制代码

.类名 {
    属性名1: 属性值1;
    属性名2: 属性值2;
}

案例

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
    span {
        color: red;
    }
    .textColor {
        color: red;
    }
    </style>
</head>
<body>
    <p><font color="red">24大数据 | 班</font></p>
    <p><font color="red">你好</font></p>
    <span>网页设计</span><br />
    <span>现在学CSS样式</span>
    <p class="textColor">你好</p>
    <div class="textColor">今天星期五</div>
    <div class="textColor">真好！明天就可以休息</div>
</body>
</html>

3. ID 选择器

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 "#" 来定义。

语法

css 复制代码

#id的属性值 {
    属性名1: 属性值1;
    属性名2: 属性值2;
}

注意

id 属性只能在每个 HTML 文档中出现一次

案例

html 复制代码

<style>
#text1 {
    color: red;
}
#text2 {
    color: blueviolet;
}
#text3 {
    color: cyan;
}
</style>

<body>
    <span id="text1">这是第一个span标签</span>
    <p id="text2">这是第一个p标签</p>
    <div id="text3">这是第一个div标签</div>
</body>

4. 通配符选择器

语法

css 复制代码

* {
    属性名1: 属性值1;
    属性名2: 属性值2;
}

三、文本样式

字体属性

css 复制代码

p {
    /* font-family: "宋体"; */
    /* font-size: 30px; */
    /* font-weight: bold; */
    /* font-weight: 700; */
    /* font-style: italic; */
    font: italic bold 30px "宋体";
}

文本颜色

颜色表示方式：

二进制：0-1组成
八进制：0-7组成
十进制：0-9组成
十六进制：0-9，A-F组成（0123456789 a(10) b(11) c(12) d(13) e(14) f(15)）

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。

案例

css 复制代码

div {
    text-indent: 10px;
}

p {
    text-indent: 2em;
}

说明

em 是一个相对单位，就是当前元素（font-size）1个文字的大小
如果当前元素没有设置大小，则会继承父元素的1个文字大小

行间距

line-height 属性用于设置行间的距离（行高），可以控制文字行与行之间的距离。

案例

css 复制代码

p {
    line-height: 26px;
}

行高组成

上间距
文本高度
下间距