CSS（1）基础语法、常见属性

阅读原文时间：2021年05月29日阅读：1

CSS：层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS语法：CSS实例由选择器，以及一条或多条声明（属性）两部分组成。每个声明（属性）可以有一个或多个值。属性和值被冒号分开。CSS声明以分号;结束，声明以大括号{}括起来。

p {
color: red;
}

/* 我是注释内容 */

Hello there

Hello A

通配符选择器：通配符选择器是以*选取所有标签。
标签选择器：直接使用标签名选取该标签名的所有标签。
id选择器：id选择器可以选取到标有该id属性的HTML标签。id选择器以"#"来定义。一个元素只能有一个ID
类选择器：类选择器可以选取到标有该class属性的HTML标签。类选择器以"."来定义。class选择器有别于id选择器，class属性可以在多个标签中使用。也支持一个标签中有多个class属性值（用空格隔开）。

Hello A

Hello B

/* 通配符选择器 */
* {
color: gray;
}

/* id选择器 */
#china {
color: red;
}

/* 类选择器 */
.america {
color: green;
}

/* 标签选择器 */
li {
color: yellow;
}

我是孙子

熊二

曹

color：文本颜色。
text-align：设置文本的水平对齐方式。左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。
line-height：设置文本垂直的对齐方式（行高）【实现原理：行高由文字高度 + 上下空隙组成，当父类有高度，则会自动填满上下空隙，保证文字居中。】
word-spacing：设置文本字间距
letter-spacing：设置单词和字符间距
text-transform：设置文本转换。无、首写字母大写、大写和小写。
text-decoration：设置文本装饰。下划线、删除线、上划线、闪烁等。
text-indent：设置首行文本缩进距离。

#cqz {
/* 设置文本颜色（具体设置方式见下文CSS中颜色定义） */
color: #00f0ff;
/* 设置文本水平对齐方式：左对齐(left)、右对齐(right）、居中(center)和两端对齐(justify)。 */
text-align: center;
/* 设置文本垂直对齐方式（设置行高，当行高与父容器的高度相同时且文字仅有一行，则文本垂直居中） */
line-height: 100px;
/* 设置文本装饰：下划线（underline）、删除线（line-through）、上划线（overline）、闪烁（blink）等。注意：标签默认值为underline，想要去除标签的下划线，就将text-decoration设置为none */
text-decoration: line-through;
/* 设置文本缩进：一般设置为em，代表当前文字大小的距离，是一个相对单位 */
text-indent: 2em;

CSS中颜色定义：W3C标准化组织定义的标准的16中颜色的名称分别是：aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)。还可以使用十六进制RGB：#ff0000、#00ff00、#0000ff等。还可以使用rgb函数【rgb(0,255,255)】

#cqz {
/* RGB函数 */
color: rgb(0, 255, 255);
/* 十六进制RGB */
color: #fff000;
/* W3C标准色 */
color: red;
}