CSS 文本标签
文本标签
<em>和<strong>
1.em标签用于表示一段内容中的着重点。（语气强调）
2.strong标签用于表示一个内容的重要性。（内容强调）
3.通常em显示为斜体，而strong显示为粗体。
<i>和<b>
1.i标签会使文字变成斜体。 京东用 ico 展现小图片，小图标，这和em显示斜体的区别
2.b标签会使文字变成粗体。
二者存表现的，不同于<em>和<strong>，没语意。只是加粗和斜体
small
1.表示细则，变成小字，比如版权。
2.big
变成大字。现在不用。都是表现的，都用css样式变。
cite
<cite>《七龙珠》</cite> 变斜
q
1.<p>孔子曾经说过：<q>学而时习之不亦说乎</q></p>
----->出现" " css加的. before . 后期就不需要把带的去掉,因为ie7就不支持"".样式不统一.
2.blockquote
<blockquote>天将降大任于是人也...</blockquote>
独占一行了 所以不能用<p>包含了。
3.知乎，用的比较多，比如知乎上引用别人的话（回复）就需要这个。
sup和sub
1.sup（包起来想要表线的元素） ：上标 常用：百度百科 后面的小链接。
2.sub : ：下标
<ins>和<del>
1.ins表示插入的内容，显示时通常会加上下 划线。
2.del表示删除的内容，显示时通常会加上删 除线。 常用：京东淘宝价格 知道语意就可以，CSS做样式。
<code>和<pre>
1.pre 预格式 保存代码格式。结果：默认等宽字体了，每个字符宽度一样了，保存原来格式了。
2.code 表示代码的（语意）
3.一般他俩一起用。 -->爬到code标签就知道抓到了代码。
4.学文本就是学语意，样式CSS写。
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<p>
今天天气<em>真凉快</em>！
</p>
<p>
<strong>
注意：你不好好听课。就找不到工作！
</strong>
</p>
<p>
<!-- i -> ico图片 -->
<i>我好i标签中的内容</i>
<b>我好b标签中的内容</b>
</p>
<p>
我是p标签中的内容
<small>我是small标签中的内容</small>
<big>我是big标签中的内容</big>
</p>
<p>
<cite>《西红柿首府》</cite>是最近比较火的一部电影
</p>
<p>
<!-- q:after q:letter -->
子曰:<q>学而时习之 不亦说乎！</q>
</p>
<p>
子曰:<blockquote>学而时习之 不亦说乎！</blockquote>
</p>
<p>2<sup>2</sup></p>
<p>
杨幂<sup><a href="#">[4]</a></sup>
</p>
<p>
H<sub>2</sub>O
</p>
<p>
<del>30000</del><br>66666<br>
</p>
<p>
郭敬明的个头<ins>真高啊</ins>!
</p>
<pre>
if(True):
print('hello')
</pre>
<pre>
<code>
if(True):
print('hello')
</code>
</pre>
</body>
</html>
QQ截图20180808221733.png
列表（三者可以互相嵌套）
- 有序列表（序号）
输出结果：显示1、2、3、 （可以更改样式 type=‘1’ type=‘a’ type=‘i’）
demo
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
- 无序列表 （用的最多）
输出结果：前面带项目符号 （点，不用原点可以换 详见手册）一般不用默认，因为不同浏览器，显示不同。如果必须有用背景图片。
常用：新闻列表，下方123导航。
！！！去除项目符号：
<ul>
list-type:none；
</ul>
demo
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
！li是块元素，ul就是块元素所以能嵌套。
- 定义列表
（给一个东西下定义）
使用dl、dd（对定义的描述）、dt（被定义内容）来创建一个定义列表。
demo
<dl>
<dt>定义项1</dt>
<dd>定义描述1</dd>
<dt>定义项2</dt>
<dd>定义描述2</dd>
<dt>定义项3</dt>
<dd>定义描述3</dd>
</dl>
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<style type="text/css">
去掉项目符号
/*ul{
list-style: none;
}*/
</style>
</head>
<body>
<!--
列表就相当于去超市购物时的那个购物清单，在HTML也可以创建列表，在网页中一共有三种列表：
1、无序列表
2、有序列表
3、定义列表
-->
<!--
无序列表
使用ul标签来创建一个无序列表
使用li在ul中创建一个一个的列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号，可选值：
disc：默认值，实心的圆点
square：实心的方块
circle：空心的圆圈
注意：默认的项目符号我们一般都不使用
如果需要设置项目符号，则可以采用为li设置背景图片的方式来设置
ul和li都是块元素
-->
<ul>
<li>西门大官人</li>
<li>柴大官人</li>
<li>许大官人</li>
<li>唐僧大官人</li>
</ul>
<!--
有序列表和无序列表类似，只不过它使用ol来代替ul
有序列表使用有序的序号作为项目符号
type属性，可以指定序号的类型，可选值：
1，默认值，使用阿拉伯数字
a/A，采用小写或大写字母作为序号
i/I，采用小写或大写的罗马数字作为序号
ol也是块元素
-->
<ol type="1">
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
<!--
列表之间都是可以互相嵌套，可以在无序列表中放个有序列表，也可以在有序列表中放一个无序列表
-->
<p>菜谱</p>
<ul>
<li>
鱼香肉丝
<ol>
<li>鱼</li>
<li>香</li>
<li>肉丝</li>
</ol>
</li>
<li>
宫保鸡丁
<ul>
<li>宫保</li>
<li>鸡丁</li>
</ul>
</li>
<li>过桥茄子</li>
</ul>
<!--
定义列表用来对一些词汇或内容进行定义
使用dl来创建一个定义列表，它有两个子标签
dt：被定义的内容
dd：对定义内容的描述
同样，dl、ul、ol之间都可以互相嵌套
-->
<dl>
<dt>武松</dt>
<dd>景阳冈打虎英雄，战斗力99</dd>
<dd>后打死西门庆，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐饮企业家，战斗力0</dd>
</dl>
</body>
</html>
QQ截图.png
为内容设置不同的样式
文本格式化
1.w200=with200 快捷
2.px
3.百分比（子元素随着父元素一起变，自适应界面）
也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px， 则100%就是16px，200%就是32px。
4.em（手机端移动端用，根据字号调整）
em和百分比类似，是相对于font-size说的
1em = 1font-size
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
.flage1{
width: 200px;
height: 200px;
background-color: red;
}
.flage2{
font-size: 20px;
width: 2em;
height:50%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="flage1">
<div class="flage2"> </div>
</div>
</body>
</html>
颜色
RGB
1.也可以使用计算机中常用的RGB值来表示 颜色。可以使用0~255的数值，也可以使 用0%~100%的百分比数。
– RGB(100%,0%,0%)
– RGB(0,255,0)
第一个数表示红色的浓度，第二个数表示 绿色浓度，第三个数表示蓝色的浓度。
十六进制颜色
6600FF实际上包含了三组十六进制的 数字。
上边的例子中66代表红色的浓度，00代表绿 色的浓度，FF代表了蓝色的浓度。
如果每一组数中的两个数字都相同（6600FF缩短为#60F。）
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>颜色的单位</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: rgb(161,187,215);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
字体样式
1.通过font-family可以指定标签中文字使用 的字体。
例如：
p{font-family:Arial} Arial只是英文，汉语不变。为了解这个问题。
可以同时指定多个字体。
例如：
！p{font-family:Arial , Helvetica , 微软雅黑} 只能先支持第一个，后面不支持。！ 中间有空格的字体，一定要引上
避免使用花花的字体，必须适用，可用截图。
字体分类
（大的分类。是一类字体）
放在浏览器里面，会根据浏览器显示不同的字体。
serif（衬线字体） （横平竖直）
sans-serif（非衬线字体） （不一样的字体 一后面代沟）
monospace （等宽字体） 编程时用等宽
cursive （草书字体）
fantasy （虚幻字体）
字体其他样式
font-style
用来指定文本的斜体。
指定斜体：font-style:italic 斜体 i标签
font-style:oblict倾斜
font-weight
用来指定文本的粗体。
指定粗体：font-weight:bold
font-weight:100指定数值 （400细，600正常，900加粗）
小型大写字母
– font-variant:small-caps
在该样式中，字母看起来像是稍 微缩小了尺寸的大写字母。
ABCD 小的ABCD
字体属性的简写（设置多个样式用它）
font可以一次性同时设置多个字体的样式。
语法：
– font:加粗 斜体 小型大写 大小/行高 字体
.P3{
font: italic ‘微软雅黑’；
}
！字号字体必须写。字体最后一个样式，字号放在字体前面，他俩不能乱，乱了没效果
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体其他样式</title>
<style>
.flag{
/*设置文字大小*/
font-size: 50px;
/*设置字体*/
font-family: 华文彩云;
/*设置文字斜体*/
font-style: italic;
/*设置文字加粗*/
font-weight: bold;
/*设置小型大写*/
font-variant: small-caps;
}
.flag1{
font: bold italic small-caps 60px "微软雅黑";
}
</style>
</head>
<body>
<p class="flag">一段汉字，ABCDEFGabcdefg</p>
<p class="flag1">一段汉字，ABCDEFGabcdefg</p>
</body>
</html>
11576306-9eb94282f3928bf9.png
行间距
原理：
设置行高，间接设置间距。
例子：
默认设置字号16
间距=行高-16（默认）
公式：
行间距 = line-height – font-size
%100 = 1 相对于 size20（也就是说%50==10px
%100==20px）
font ： 30px/50px 行高
不写50PX就是默认值。
.p2{
line-height: 50px;
font: 30px "微软雅黑";
}
必须放在后面不然被覆盖。
大写化
text-transform样式用于将元素中的字母全都变成大写。
大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none
demo
.p1{
text-transform: lowercase;
}
文本的修饰
text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。
可选值：
underline 下划线
overline 上划线
line-through 中划线
！！！none 默认正常显示 去除超链接的下滑线
字母间距和单词间距
letter-spacing用来设置字符之间的间距。（字母中文都可以）
.P3{
letter-spacing：10xp；
}
word-spacing用来设置单词之间的间距。（中文无意义）
这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。
对齐文本
text-align用于设置文本的对齐方式。
可选值：
left：左对齐
.P3{
text-align：left；
}
right：右对齐
justify：两边对齐
center：居中对齐
首行缩进
text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效。
32px相当于二个字。但是不随着字号变化而变化。
.P3{
flont.size=20px
text-indent：2em；
}
可以通过搜索引擎搜索到，但是不让用户看。 text-indent：-2222em；
