HTML+CSS学习笔记，快速入门

原创已于 2024-11-13 10:33:03 修改 · 902 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #css #学习

于 2024-11-13 10:28:38 首次发布

HTML+CSS 专栏收录该内容

1 篇文章

订阅专栏

HTML+CSS学习笔记，快速入门

一、HTML基础

W3C官网  www.w3c.org
菜鸟教程  https://www.runoob.com/
MDN     developer.mozilla.org

1、基本结构

<!--文档生命-->
<!DOCTYPE html>
<html>
    <!--头部-->
	<head>
        <title>标题</title>
    </head>
    <body>
        内容
    </body>
</html>

2、字符编码

1.ASCII：大写字母、小写字母、数字、一些符号，共计128个。

2.ISO-8859-1：在ASCII基础上，扩充了一些希腊字符等，共计是256个。

3.GB2312：继续扩充，收录了6763个常用汉字、682个字符。

4.GBK：收录了的汉字和符号达到20000+，支持繁体中文。

5.UTF-8：包含世界上所有语言的：所有文字与符号。——很常用。

【注意：存储时采用哪种编码，读取时也要采用哪种编码】
【总结：】
· 平时编写代码时，统一采用UTF-8编码（最稳妥）
· 为了让浏览器在渲染html文件时，不犯错误，可以通过meta标签配合charset属性指定字符编码。
  <head>
 	<meta charset="UTF-8"/>
  </head>

3、语言设置

【写法：】
<html lang="zh-CN">
    
    ·zh-CN：中文-中国大陆（简体中文）
    ·zh-TW：中文-中国台湾（繁体中文）
    ·zh：中文
    ·en-US：英语-美国
    ·en-GB：英语-英国
    
【作用：】
    让浏览器显示对应的翻译提示。
    有利于搜索引擎优化。

4、标准结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标准结构</title>
</head>
<body>
    内容...
</body>
</html>

·VSCode 输入!，随后回车即可快速生成标准结构。
·配置VScode的内置插件emmet，可以对生成结构的属性进行定制。
·在存放代码的文件夹中，存放一个favicon.ico图片，可配置网站图标。

5、排版标签

标签名	含义	单/双标签
h1~h6	标题	双
p	段落	双
div	无	双

【使用原则：】

> h1最好写一个    h2~h6可以适当多写

> h1~h6 不能互相嵌套

> p标签里不能有h1~h6、p、div标签

> div标签里可以有h1~h6、p、div

6、块级元素与行内元素

> 块级元素：独占一行（排版标签都是块级元素）
> 行内元素：不独占一行（如：input\span）

【使用原则：】
> 块级元素中 能写 行内元素 和 块级元素 (除了 h1~h6 和 p 元素外)
> 行内元素中 能写 行内元素，但 不能写 块级元素。
> 特殊规则：
   h1~h6不能互相嵌套。
   p中不要写块级元素

7、文本标签

>. 用于包裹：词汇、短语等
>. 通常写在排版标签里面。
>. 排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）。

标签名	含义	单/双标签
em	要着重阅读的内容	双
strong	十分重要的内容（语气比em要强）	双
span	无	双

8、图片标签（行内元素）

标签名	含义	单/双标签
img	图片（行内元素）	单

【属性：】
src：图片路径（又称：图片地址）——图片的具体位置
alt：图片描述
width：图片宽度，单位是像素，例如：200px或200
height：图片高度，单位是像素，例如：200px或200

【注意：】
尽量不同时修改图片的宽和高，可能会造成比例失调

相对路径：
   ./ 同级    /下级   ../上一级

常见的图片格式：
JPG:
   主要特点：支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图。
   使用场景：对图片细节没有极高要求的场景，例如：网站的产品宣传图等。——该格式网页中很常见。

PNG:
   主要特点：支持的颜色丰富、占用空间略大、支持透明背景、不支持动态图。
   使用场景：①想让图片有透明背景；②想更高质量的呈现图片；例如：公司logo图、重要配图等。

BMP:
   主要特点：支持的颜色丰富、保留的细节更多、占用空间极大、不支持透明背景、不支持动态图。
   使用场景：对图片细节要求极高的场景，例如：一些大型游戏中的图片。（网页中很少使用）

GIF:
   主要特点：支持的颜色较少、支持简单透明背景、支持动态图。
   使用场景：网页中的动态图片。

WEBP:
   主要特点：具备上述几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容性问题。
   使用场景：网页中的各种图片。

9、超链接

标签名	含义	单/双标签
a （行内元素）	超链接	双

【属性：】
href：指定要跳转到的具体目标。

target：控制跳转时如何打开页面，常用值如下:
		_self：在本窗口打开。
        _blank：在新窗口打开。

id：元素的唯一标识，可用于设置锚点。name：元素的名字，写在a标签中，也能设置锚点。
【注意】
> 代码中的多个空格、多个回车，都会被浏览器解析成一个空格！
> 虽然a是行内元素，但a元素可以包裹除它自身外的任何元素！

【锚点：】
<!-- 第一种方式：a标签配合name属性 -->
<a name="test1"></a>

<!-- 第二种方式：其他标签配合id属性 -->
<h2 id="test2">我是一个位置</h2>

【跳转锚点：】
<!-- 跳转到test1锚点-->
<a href="#test1">去test1锚点</a>

<!-- 跳到本页面顶部 -->
<a href="#">回到顶部</a>

<!-- 跳转到其他页面锚点 -->
<a href="demo.html#test1">去demo.html页面的test1锚点</a>

<!-- 刷新本页面 -->
<a href="">刷新本页面</a>

<!-- 执行一段js,如果还不知道执行什么，可以留空，javascript:; -->
<a href="javascript:alert(1);">点我弹窗</a>

【唤起其他应用：】
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>

<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>

<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>

10、列表

【有序列表】
	<h1>这是有序列表</h1>
    <ol>
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
    </ol>
【无序列表】
    <h1>这是无序列表</h1>
    <ul>
        <li>第一步</li>
        <li>第二步</li>
        <li>第三步</li>
    </ul>

【自定义列表】
    <h1>这是自定义列表</h1>
    <dl>
        <dt>第一步</dt>
        <dd>1.1</dd>
        <dd>1.2</dd>
        <dd>1.3</dd>
        <dt>第二步</dt>
        <dd>2.1</dd>
        <dd>2.2</dd>
        <dd>2.3</dd>
        <dt>第三步</dt>
        <dd>3.1</dd>
        <dd>3.2</dd>
        <dd>3.3</dd>
    </dl>

【注意：】
> li标签最好写在ul或ol中，不要单独使用

> 一个dl就是一个自定义列表，
	一个dt就是一个术语名称，
	一个dd就是术语描述（可以有多个）。

11、表格

一个完整的表格由：表格标题、表格头部、表格主体、表格脚注 四部分组成
<table>
    <option>表格标题</option>
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>李飞</td>
            <td>男</td>
            <td>30</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>共计：1人</td>
        </tr>
    </tfoot>
</table>

【属性：】
table:
	width：设置表格宽度。
	height：设置表格最小高度，表格最终高度可能比设置的值大。
	border：设置表格边框宽度。
	cellspacing：设置单元格之间的间距。(表现为 格与格中间的间隙)

thead\tbody\tfoot\tr:
	height：设置表格头部高度。
	align：设置单元格的水平对齐方式，
		可选值如下：
			1.left：左对齐
			2.center：中间对齐
			3.right：右对齐
	valign：设置单元格的垂直对齐方式，
		可选值如下：
			1.top：顶部对齐
			2.middle：中间对齐
			3.bottom：底部对齐


td\th:
	width：设置单元格的宽度，同列所有单元格全都受影响。
	heigth：设置单元格的高度，同行所有单元格全都受影响。
	align：设置单元格的水平对齐方式。
	valign：设置单元格的垂直对齐方式。
	rowspan：指定要跨的行数。（合并行）
	colspan：指定要跨的列数。（合并列）

12、其他常用标签

标签名	含义	单/双标签
br	换行	单
hr	分割行	单
pre	按原文显示	双

【注意：】
> 不要用<br>来增加文本之间的行间隔，应使用<p>元素，或后面即将学到的CSS margin属性。
> <hr>的语义是分隔，如果不想要语义，只是想画一条水平线，那么应当使用CSS完成。

13、表单

form  表单  ： 
	action：用于指定表单的提交地址（需要与后端人员沟通后确定）。
	target：用于控制表单提交后，如何打开页面，
		常用值如下：
			_self：在本窗口打开。
			_blank：在新窗口打开。
	method：用于控制表单的提交方式
	
input 输入框  ： 
	type：设置输入框的类型，目前用到的值是text，表示普通文本。
	name：用于指定提交数据的名字

button 按钮 ：

【常用表单控件：】

> 文本输入框
<input type="text">
    name属性：数据的名称。
    value属性：输入框的默认输入值。
    maxlength属性：输入框最大可输入长度。

    
> 密码输入框
<inputtype="password">
    name属性：数据的名称。
    value属性：输入框的默认输入值（一般不用，无意义）。
    maxlength属性：输入框最大可输入长度。

    
> 单选框
<input type="radio" name="sex"  value="female">女
<input type="radio" name="sex"  value="male">男
	name属性：数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致。
    value属性：提交的数据值。
    checked属性：让该单选按钮默认选中。
    
    
> 复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头
	name属性：数据的名称，注意：想要单选效果，多个radio的name属性值要保持一致。
    value属性：提交的数据值。
    checked属性：让该单选按钮默认选中。
    
    
> 隐藏域
<input type="hidden" name="tag" value="100">
    用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。
    name属性：指定数据的名称。
    value属性：指定的是真正提交的数据。

> 提交按钮
<input type="submit" value="点我提交表单">
<button>点我提交表单</button>
	button标签type属性的默认值是submit。
    button不要指定name属性
    input标签编写的按钮，使用value属性指定按钮文字

> 重置按钮
<input type="reset" value="点我重置">
<button type="reset">点我重置</button>
	button不要指定name属性
    input标签编写的按钮，使用value属性指定按钮文字。
    

> 普通按钮
<input type="button" value="普通按钮">
<button type="button">普通按钮</button>
	普通按钮的type值为button，
    若不写type值是submit会引起表单的提交
    
    
> 文本域
<textarea name="msg" rows="22" cols="3">我是文本域</textarea>
	rows属性：指定默认显示的行数，会影响文本域的高度。
    cols属性：指定默认显示的列数，会影响文本域的宽度。
    不能编写type属性，其他属性，与普通文本输入框一致。
    
    
> 下拉框
<select name="from">
    <optionvalue="黑">黑龙江</option>
    <optionvalue="辽">辽宁</option>
    <optionvalue="吉">吉林</option>
    <optionvalue="粤"selected>广东</option>
</select>
    name属性：指定数据的名称。
    option标签设置value属性，如果没有value属性，提交的数据是option中间的文字；
    如果设置了value属性，提交的数据就是value的值（建议设置value属性）
    option标签设置了selected属性，表示默认选中。

【其他属性】
> disabled 禁用表单 ： input、textarea、button、select、option都可以设置disabled属性

> label：   标签可与表单控件相关联，关联之后点击文字，与之对应的表单控件就会获取焦点。
        让label标签的for属性的值等于表单控件的id。
		把表单控件套在label标签的里面。

> fieldset可以为表单控件分组
  legend标签是分组的标题。

14、框架标签

【iframe标签的实际应用:】
	在网页中嵌入广告
	与超链接或表单的target配合，展示不同的内容

【行内元素】

标签名	内涵	单/双标签
iframe	框架（在网页中嵌入其他文件）	双

例子：
<!-- 利用iframe嵌入一个普通网页 -->
<iframe src="https://www.taobao.com" width="900" height="300" frameborder="0"></iframe>

<!-- 利用iframe嵌入其他内容 -->
<iframe src="./favicon.ico" width="250" height="200" frameborder="0"></iframe>

<!-- 与超链接的target属性配合使用 -->
<a href="https://www.toutiao.com" target="container">点我看新闻</a>
<a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
<!-- 与表单的target属性配合使用 -->
<form action="https://so.toutiao.com/search" target="container">
    <input type="text" name="keyword">
    <input type="submit" value="搜索">
</form>
<br>
<iframe name="container" frameborder="0" width="900" height="300"></iframe>

15、全局属性

属性名	含义
id	给标签指定唯一标识，注意：id是不能重复的。
class	给标签指定类名，随后通过CSS就可以给标签设置样式。
style	给标签设置CSS样式
dir	内容的方向，值: ltr、rtl
title	给标签设置一个文字提示，一般超链接和图片用得比较多。
lang	给标签指定语言

16、meta元信息

1、配置字符编码
<meta charset="utf-8">
    
2、针对IE浏览器的兼容性配置
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    
3、针对移动端的配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
4、配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
    
5、配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">
    
6、配置网页作者
<meta name="author" content="tony">
    
7、配置定义网页版权信息
<meta name="copyright" content="2023-2027©版权所有">
    
8、配置网页自动刷新
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">
    
9、针对搜索引擎爬虫配置
<meta name="robots" content="此处可选值见下表">

值	描述
index	允许搜索爬虫索引此页面。
noindex	要求搜索爬虫不索引此页面
follow	允许搜索爬虫跟随此页面上的链接。
nofollow	要求搜索爬虫不跟随此页面上的链接。
all	与index, follow等价
none	与noindex, nofollow等价
noarchive	要求搜索引擎不缓存页面内容。
nocache	noarchive的替代名称

17、总结

在这里插入图片描述

二、CSS基础

1、CSS语法规范

CSS语法规范由两部分组成：

· 选择器： 找到要添加样式的元素
· 声明块： 设置具体的样式（属性名：属性值）


/* 给h1元素添加样式 */
h1 {
	/* 设置文字颜色为红色 */
	color: red;
	/* 设置文字大小为40px */
	font-size: 40px;
}

2、CSS三大特性

【层叠性】
如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）

【继承性】
元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
优先继承离得近的

【优先级】
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式。

3、CSS样式编写位置

> 【行内样式：】
<h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>

格式： key:value

> 【内部样式：】
<style>
   h1{
       color:red;
       font-size:50px;
    }
</style>
一般放在head标签中

> 【外部样式：】
<link rel="stylesheet" href="./xxx.css"/>
h1{
   color:red;
   font-size:40px;
}

【属性：】
href: 引入的文档来自哪里
rel: 说明引入的文档与当前文档之间的关系。（relation）

【样式优先级】

【【【【行内样式 > 内部样式 = 外部样式】】】】


> 内部样式 和 外部样式 的优先级是相同的。且后面的会覆盖前面的
> 同一个样式表中，优先级也和编写顺序有关，且后面的会覆盖前面的

4、CSS选择器

4.1、基本选择器

【通配选择器：】

语法：
* {
  属性名：属性值;
}

例子：
*{
  color: orange;
  font-size: 40px;
}

备注：目前通配符样式很少用到，但后面设置默认字体和字体大小，以及清除样式会使用到。

【元素选择器：】

语法：
标签名 {
   属性名：属性值;
}

例子：
/* 选中所有的h1元素 */
h1{
  color:yellow;
  font-size:40px;
}

/* 选中所有的P元素 */
p{
  color:blue;
  font-size:12px;
}

备注：元素选择器无法实现差异化设置，例如上面的代码中，所有的p元素效果都一样。

【类选择器：】

语法：
.类名{
   属性名：属性值;
}

例子：
.speak{
   color:red;
}
.answer{
   color:blue;
}

【注意：】
· 一个元素不能写多个class属性,下面是错误实例：
  <h1 class="speak" class="pig">你好啊</h1
      >
· 一个元素的class属性，能写多个值，要用空格隔开
  <h1 class="speak pig">你好啊</h1>

· class属性可以重复用在多个元素上，而ID元素是唯一的

【ID选择器】

语法：
#id值{
  属性名：属性值;
}

例子：
#speak{
  color:red;
  font-size:60px;
}
#answer{
  color:blue;
  font-size:30px;
}

【注意:】
· id属性值，尽量由字母、数字、下划线、短杠组成，最好以字母开头、不要包含空格、区分大小写

· 一个元素只能有一个id属性，多个元素的id属性值不能相同

· 一个元素可以同时拥有id和class属性

总结:

基本选择器	特点
通配选择器	选中所有标签，一般用于清除样式。
元素选择器	选中所有同种标签，但是不能差异化选择。
类选择器	选中所有特定类名（class值）的元素——使用频率很高。
ID选择器	选中特定id值的那个元素（唯一的）。

4.2、复合选择器

复合选择器建立在基本选择器之上。由多个基础选择器，通过不同的方式组合而成。

【交集选择器】

语法:

选择器1选择器2选择器3...选择器n{

}

例子:
p.beauty{
 color:blue;
}

.rich.beauty{
  color:green;
}

【注意:】
· 交集有并且的含义，既...又...

. 他们是挨着的 区别于后代选择器（是分开的）如: p.class 交集选择器 和 p .class 后代选择器

· 有标签名，标签名必须写在前面 （元素）

· id选择器、通配选择器理论上也可以使用交期选择器，但没必要。他们本身就是唯一的

· 交集选择器不可能同时出现两个元素选择器，因为一个元素不可能既是p又是span

· 使用最频繁的就是 元素选择器+类选择器，如p.beauty

【并集选择器 or 分组选择器】

语法：
选择器1，选择器2，选择器3，...选择器n{

}

例子：
#peiqi,
.rich,
.beauty{
   width:200px;
   background-color:skyblue;
   font-size:40px;
}

【注意：】
· 并集 有 或的 含义，就是 这里面的所有选择器 都使用下面的样式

· 并集选择器，一般竖着写

· 任何形式的选择器，都可以作为并集选择器

· 并集选择器，通常用于集体声明，可以缩小样式表体积

【后代选择器】

HTML元素之间的关系有：①、父元素 ②、子元素 ③、祖先元素 ④、后代元素 ⑤、兄弟元素

语法：
/* 选中ul中的所有li */
ul li {
	color: red;  
}

/* 选中ul中所有li中的a */
ul li a {
	color: orange;
}

/* 选中类名为subject元素中的所有li */
.subject li {
	color: blue;
}

/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
	color: blue;
}

【注意：】
· 后代选择器，最终选择的是后代，不选中祖先
· 儿子、孙子、重孙子，都算后代
· 结构一定要符合之前的HTML嵌套，如：不能p中写h1~h6

【子代选择器】

概念：符合要求的子元素（儿子元素）

语法：
选择器1 > 选择器2 > 选择器3 > ... 选择器n{

}

例子：
/* div中的子代a元素 */
div>a {
	color: red;
}

/* 类名为persons的元素中的子代a元素 */
.persons>a {
	color: red;
}

【注意：】
· 子代选择器最终选择的是子代，不是父级

· 子、孙子、重孙子 等统称后代，子就是单指儿子

【兄弟选择器】

【a、相邻兄弟选择器：】

语法：
选择器1+选择器2{

}

例子：
/*选中div后相邻的兄弟P元素*/
div+p{
   color:red;
}

【b、通用兄弟选择器】

语法: 
选择器1~选择器2{

}

例子：
/* 选中div后的所有兄弟p元素 */
div~p{

}

【注意：】
两种兄弟选择器都是选择的下面的兄弟

【属性选择器】

语法：
·【属性名】 选中具有某个属性的元素
·【属性名=“值”】  选中包含某个属性，且属性值 “等于” 指定值的元素
·【属性名^=“值”】 选中包含某个属性，且属性值 以指定值 “开头” 的元素
·【属性名$="值"】选中包含某个属性，且属性值 以指定值 “结尾” 的元素
·【属性名*=“值”】 选中包含某个属性，且属性值 包含指定值 的元素

例子：
/* 选中具有title属性的元素 */
div[title]{
	color:red;
}

/* 选中title属性值为atguigu的元素 */
div[title="hello"]{
	color:red;
}

/* 选中title属性值以a开头的元素 */
div[title^="a"]{
	color:red;
}

/* 选中title属性值以u结尾的元素 */
div[title$="u"]{
	color:red;
}

/* 选中title属性值包含g的元素 */
div[title*="g"]{
	color:red;
}

【伪类选择器】

【动态伪类】
1.:link超链接未被访问的状态。

2.:visited超链接访问过的状态。

3.:hover鼠标悬停在元素上的状态。

4.:active元素激活的状态。




【结构伪类】
1.:first-child所有兄弟元素中的第一个。

2.:last-child所有兄弟元素中的最后一个。

3.:nth-child(n)所有兄弟元素中的第n个。

4.:first-of-type所有同类型兄弟元素中的第一个。

5.:last-of-type所有同类型兄弟元素中的最后一个。

6.:nth-of-type(n)所有同类型兄弟元素中的第n个。

7.:nth-last-child(n)所有兄弟元素中的倒数第n个。

8.:nth-last-of-type(n)所有同类型兄弟元素中的倒数第n个。

9.:only-child选择没有兄弟的元素（独生子女）。

10.:only-of-type选择没有同类型兄弟的元素。

11.:root根元素。

12.:empty内容为空元素（空格也算内容）。



【否定伪类】
:not(选择器)排除满足括号中条件的元素。



【UI伪类】
1.:checked被选中的复选框或单选按钮。

2.:enable可用的表单元素（没有disabled属性）。

3.:disabled不可用的表单元素（有disabled属性）。

【伪类元素选择器】

1、:first-letter选中元素中的第一个文字。

2、:first-line选中元素中的第一行文字。

3、:selection选中被鼠标选中的内容。

4、:placeholder选中输入框的提示文字。

5、:before在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。

6、:after在元素最后的位置，创建一个子元素（必须用content属性指定内容）。

4.3、选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 > 继承的样式
!important的权重，大于行内样式，大于所有选择器，权重最高！


详细描述：
每个选择器，都可计算出一组权重，格式为：(a,b,c)
a:ID选择器的个数。
b:类、伪类、属性选择器的个数。
c:元素、伪元素选择器的个数。

按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比

在这里插入图片描述

5、常用属性

5.1、像素与颜色

【像素】
我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。

像素点越小，呈现的内容就越清晰、越细腻。

【颜色】
1、【颜色名 直接表示】
红色:red  绿色：green  蓝色：blue  紫色：purple  橙色：orange   灰色：gray  粉红色：pink

2、【rgb或rgba】
r表示红色  g表示绿色  b表示蓝色 a表示透明度

color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */

color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
color:rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

3、【HEX或HEXA】
HEX的原理同与rgb一样，依然是通过：红、绿、蓝色进行组合，只不过要用6位（分成3组）来表达，
格式为：#rrggbb  取值范围：0 ~ f

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */

5.2、字体属性

【font-size】字体大小：

1、Chrome支持最小文字大小为12px,默认是16px

2、不同浏览器默认大小不一致

3、通常给body的font-size设置一个默认大小，这样其他元素就都可以继承了

【font-family】字体类型：

1、如果字体名包含空格，必须使用引号包起来

2、可设置多个字体，找到就用，找不到就下一个。且 通常最后写上serif（衬线字体）或 sans-serif（非衬线字体）

3、windows默认字体 “微软雅黑”

【font-style】是否为斜体：

1、nomal 正常、italic 斜体（推荐）、oblique 斜体

【font-weight】字体粗细：

1、关键词：  lighter 细、 nomal 正常 、 bold 粗、  bolder 很粗（多数字体不支持）

2、数值（无单位）： 100~1000 数值越大 字体越粗
            100~300 = lighter   400~500 = normal  600及以上 = bold

【font】汇集上面属性的复合写法：（推荐）

1、字体大小、字体类型 必须有

2、字体类型必须最后一位，字体大小必须倒数第二位

3、各属性间用空格隔开

5.3、文本属性

【color】文字颜色：

1、颜色名 red \ green \ blue \ pink 等

2、RGB 或  RGBA   如： rgb(112,45,78)

3、HEX 或  HEXA (16进制)

【letter-space】 字母间距：
【word-space】 单词间距：

单位为 px  em

px（像素）是一个绝对单位，它提供了一个具体的、固定的尺寸
em是一个相对单位，它相对于父元素的字体大小来定义尺寸

【text-decoration】文本装饰线：

1、none 无、underline 下划线、overline 上划线、line-through 删除线

可搭配如下：dotted 虚线、wavy 波浪线  也可指定颜色

【text-indent】文本首字母缩进：

单位 px

【text-align】文本水平对齐：

1、left 左对齐、right 右对齐 、center 居中

【line-height】一行文字的高度：

1、nomal: 由浏览器根据文字的大小设置一个默认值

2、像素px

3、数字：参考自身font-size的倍数

4、百分比：参考自身font-size的百分比


【注意】:
line-height和height是什么关系？
	设置了height，那么高度就是height的值。
	不设置height的时候，会根据line-height计算高度。

【应用场景】：
   对于多行文字：控制行与行之间的距离。
   对于单行文字：让height等于line-height，可以实现文字垂直居中。

【文本垂直对齐】：

1、顶部对齐：无需任何属性，默认就是顶部对齐
2、垂直居中：对于单行文字，让height=line-height即可。
3、底部对齐：line-height=(height×2)-font-size-x。   x是根据字体族，动态决定的一个值。

【vertical-align】垂直对齐方式

1、用于同一行元素之间 或 表格单元格内文字的垂直对齐方式。

2、 baseline 默认、元素的基线与父元素的基线对齐
    top 使元素的顶部与其所在行的顶部对齐。
    middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐。
	bottom：使元素的底部与其所在行的底部对齐。

3、vertical-align 不能控制块元素