CSS 初阶语法（二）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第十二天，点击查看活动详情

3. 文本属性

3.1 文本颜色

color 属性用于定义文本的颜色

div {
    color: red;
}

表示	属性值
预定义的颜色值	red;green;blue;
十六进制	#FF0000; #FF6600; #29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

3.2 文本对齐

text-align 属性用于设置元素内文本内容的水平对齐方式

div {
    text-align: center;
}

属性
right	右对齐
center	居中
left	（默认）左对齐

3.3 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

div {
    text-decoration: underline;
}

属性值	描述
none	默认。没有装饰线（最常用）取消a签自带下划线
underline	下划线。链接 a 自带下划线
overline	上划线
line-through	删除线

3.4 文本缩进

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

div {
    text-indent: 10px;
}

em 是一个相对单位，就是当前元素（font-size）1个文字的大小

p {
    text-indent: 2em;
}

3.5 行间距

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

p {
    line-height: 26px;
}

4.CSS 的引入方式

4.1 内嵌样式表

将CSS包含在HTML的< style> 标签中

4.2 行内样式表

行内样式表（内联样式表）是在元素标签内部的style 属性中设定CSS格式。适用于修改简单样式

<div style="color: red; font-size:12px;">
    …………
</div>

4.3 外部样式表

在HTML页面中，使用< link> 标签引入这个文件

<link rel="stylesheet" href="css文件路径">

5.Emmet 语法

0. 生成标签 直接输入标签名 按tab键即可，
1. 想要生成多个标签 加上 * 就可以了比如 div*3 就可以快速生成3个div
2. 如果有父子级关系的标签，可以用 > 比如 ul > li 就可以了
3. 如果有兄弟关系的标签，用 + 就可以了，如div+p
4. 如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了
5. 如果生成的div类名是有顺序的，可以用自增符号$