1.font修文字改样
<font>标签规定文本的字体、字体尺寸、字体颜色。
face属性 设置字体样式
color属性 设置字体颜色
size属性 设置字体大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html修改样式</title>
</head>
<body>
<h1 align="center">
<font color="red">成功法则</font>
</h1>
<p align="center">
<font face="宋体" color="aqua" size="5">迟到毁一生</font>
</p>
<p align="center">
<font face="宋体" color="aqua" size="5">早退穷三代</font>
</p>
<p align="center">
<font face="宋体" color="aqua" size="5">按时上下班</font>
</p>
<p align="center">
<font face="宋体" color="aqua" size="5">必成高富帅</font>
</p>
</body>
</html>
通过标签修改样式需要大量的代码才能满足需求。
2.css修文字改样
html的作用是添加语义。
css的作用是添加样式。
css学习选择器和属性。
css代码写在head标签中的style标签中。
格式：
<head>
···
<style type="text/css">
选择器（标签）{
属性：值;
key:value;
···
}
</style>
</head>
分号不要省略。
style 标签中，默认带有 type="text/css" 告诉浏览器这个是css文件,可以省略不写。
text-align属性 设置文本对齐方式
color属性 设置字体颜色
size属性 设置字体大小
font-family 设置字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css中修改样式</title>
<style type="text/css">
h1 {
text-align:center;
color: red;
}
p {
text-align:center;
color: aqua;
size: 5px;
font-family: 楷体;
}
</style>
</head>
<body>
<h1>成功法则</h1>
<p>迟到毁一生</p>
<p>早退穷三代</p>
<p>按时上下班</p>
<p>必成高富帅</p>
</body>
</html>
在开发过程中修改样式都使用css。
3.css注释
单/多行注释 /* */
4.文字相关属性
4.1文字样式属性
文字样式属性：
font-style
值：
normal: 默认的，正常显示。
italic：斜体。
快捷键:
fs+tab font-style:italic;
fsn+tab font-style:normal;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字样式属性</title>
<style>
p{
font-style: italic;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
4.2文字粗细属性
文字粗细属性：
font-weight
值：
单词取值：
lighter: 默认的，细线。
bold: 加粗。
bolder 更加粗。
数值取值：（几乎不会用）
100-900之间整百取值。
快捷键：
fw+tab font-weight:;
fwb+tab font-weight:bold;
fwbr+tab font-wight:bolder;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字粗细属性</title>
<style>
p {
font-weight:bold;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
4.3文字大小属性
文字大小属性：
font-size
值：
数字px; 默认为12px;
px像素 1920 * 1080 长有1920个小方格 宽有1080个小方格。
快捷键：
fz+tab font-size:;
fz30+tab font-size:30px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字大小属性</title>
<style>
p {
font-size:30px;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
4.4文字字体属性
文字字体属性：
font-family
值：字体名称，默认为宋体。
常用：
中文：宋体，黑体，微软雅黑；
(中文字体都有英文名字：SimSun, SimHei, Microsoft YaHei)
英文：Times New Roman, Arial;
区分中英文字体：
中文字体中包含英文，英文字体没有包含中文，
设置后能影响到中文的就是中文字体否则就是英文字体。
注意点:
1.如果取值是中文，需要加单引号或双引号。
2.设置的字体是电脑系统上安装的了的字体。
3.设置的字体不存在，会使用默认使用宋体显示。
4.可以设置备选方案，设置多个值，值与值之间用逗号隔开。
快捷键：
ff+tab font-family:;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字字体属性</title>
<style>
p {
font-family:'楷体','微软雅黑';
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
让中英文分别使用不同的字体:
预备方案先设置英文字体在设置中文字体，让字母使用英文字体，中文使用中文字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体预备方案</title>
<style>
p {
font-family:Arial,'楷体';
}
</style>
</head>
<body>
<p>abc 你好！</p>
</body>
</html>
4.5.文字属性缩写
缩写格式：
font: style weight size family; 的值
注意点：
style weight 的值可以省略,可以互换位置。
size family 的值不可以省略，不可以互换位置，必须写在的最后两位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性设置缩写</title>
<style>
p {
font:italic bold 30px '楷体';
}
</style>
</head>
<body>
<p>
<p>
abc, 你好！
</p>
</p>
</body>
</html>
4.6文字颜色属性
文本颜色属性：
color
值：
1. 单词 部分颜色有英文单词
2. rgb （ ，，） 三原色数字代码光源的亮度，0不发光，255最亮。
3. rgba （，，，） a为透明度，取值0~1，值越小月透明。
4. 十六进制 #FFEEDD 每两组分别代表R/G/B
5. 十六进制缩写 每一组的两个值都相同可以省略只写一位。
rgb颜色：
红色：rgb(255,0,0)
绿色：rgb(0,255,0)
蓝色：rgb(0,0,255)
黑色：rgb(0,0,0)
白色：rgb(255,255,255)
三个值一样，越小就越黑否则偏白。
开发中的字体颜色黑色太刺眼，除标题外一般用灰色。
10/16进制转换：
16进制的第一位*16+第二位=10进制。
FF == 16 * 1 6 + 15 = 255
红色: #FF0000 #F00
绿色：#00FF00 #0F0
蓝色：#0000FF #00F
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文字颜色属性</title>
<style>
p {
color:rgba(00,255,255,0.5);
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
4.7文本装饰属性
文本装饰属性：
text-decoration
值：
none; 没有（常用于去除a标签的下划线）
overline； 上划线
line-through; 删除线
underline; 下划线
快捷键：
td+tab text-decoration:none;
tao+tab texe-decoration:oberlinel
tal+tab text-decoration:line-through;
tau+tab text-decoration:underline;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本装饰属性</title>
<style>
p {
text-decoration:overline;
}
a {
text-decoration:none;
}
</style>
</head>
<body>
<p>你好！</p>
<a href="https:www.baidu.com">百度</a>
</body>
</html>
4.8文本水平对齐属性
文本水平对齐属性：
text-align
值：
left; 居左
center; 居中
right; 居右
快捷键：
ta+tab text-align:left;
tac+tab text-align:center;
tar+tab text-align:right;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本水平对齐属性</title>
<style>
p {
text-align:center;
}
</style>
</head>
<body>
<p>你好！</p>
</body>
</html>
4.9文本缩进属性
文本缩进属性：
text-indent
值：
数字em； 一个em代表所经一个文字的宽度。
数字px; 以像素为单位设置比较麻烦。
快捷键：
ti+tab text-indent:;
ti2+tab text-indent:2px;
ti2e+tab text+indent:2em;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本缩进属性</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>
所谓“活到老，学到老”，而学习的首要技能就是要学会阅读。阅读不单单是为了学习，也为了延缓大脑衰老的唯一方式。一说到读书就感觉那是大学生的事情，那是知识分子需要做的事情和自己无关，自己读书提不起兴趣来，即使提起兴趣也没法坚持下去，也不知道如何坚持读下去，更不知道阅读有什么好的技巧和方法。
</p>
</body>
</html>