【CSS】字体文本
- color 颜色
- font-size 大小
- font-family 字体
- font-style 样式
- font-weight 加粗
- text-decoration 下划线
- text-shadow 阴影
- text-transform 大小写变换
- text-indent 缩进
- text-align 水平对齐 、vertical-align垂直对齐
- text-overflow 溢出
- word-wrap 换行
- word-break 截断
- white-space 空白符
- word-spacing 单词间隔 、letter-spacing 字母间隔
- line-height 行高
- writing-mode 排布
- iconfont 字体图标 、font-family 字体引入
继承性：子级继承父级样式控制属性（子级拥有自己的样式则不会继承父级）；层叠性：相同的属性后面覆盖前面，不同的属性叠加；优先级：选择器优先级高的样式生效
color 颜色
<style>
div{
color: red; /* 命名颜色 */
color: #48ff00; /* 十六进制 */
color: rgb(6, 140, 250); /* RGB（红,绿,蓝） 取值范围 0-255 */
color: rgba(252, 0, 197,0.8); /* RGB（红,绿,蓝,透明度） 透明度取值范围 0-1*/
}
</style>
<div>颜色颜色颜色</div>
效果:
font-size 大小
默认为16px；可设置为绝对大小，也可设置为相对大小
<style>
div{
font-size: 30px;
}
div:nth-of-type(1) span{
font-size: 40px; /* px：绝对单位，不会随父元素字体大小改变 */
}
div:nth-of-type(2) span{
font-size: 2em; /* em：相对于父元素的字体大小的n倍 */
}
div:nth-of-type(3) span{
font-size:200%; /* %：相对于父元素的字体大小的%多少 */
}
div:nth-of-type(4) span{
font-size:2rem; /* rem：相对于根元素（即html元素）的字体大小（16px）的2倍 */
}
</style>
<div>绝对<span>px</span>单位</div>
<div>相对<span>em</span>单位</div>
<div>相对<span>%</span>单位</div>
<div>相对<span>rem</span>单位</div>
效果:
font-family 字体
可
同时指定多个字体，中间以逗号隔开；表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体；如果都没有，则以我们电脑默认的字体为准。若要给英文设置另一个字体，则英文字体需写在中文字体前面
<style>
div:nth-of-type(1){
font-family: "隶书";
}
div:nth-of-type(2){
font-family: "SimSun","微软雅黑";
}
div:nth-of-type(3){
font-family: "Times New Roman","SimSun","微软雅黑";
}
</style>
<div>文字文字文字hello happy</div>
<div>文字文字文字hello happy</div>
<div>文字文字文字hello happy</div>
效果:
font-style 样式
<style>
div:nth-of-type(1){
font-style: normal; /* normal 默认正常文本 */
}
div:nth-of-type(2){
font-style: italic; /* italic 斜体 */
}
div:nth-of-type(3){
font-style: oblique; /* oblique 正常文本的倾斜显示 */
}
</style>
<div>文字文字hello文字happy文字</div>
<div>文字文字hello文字happy文字</div>
<div>文字文字hello文字happy文字</div>
效果:
font-weight 加粗
关键字:normal默认，bold粗体；具体数值:100 200 300400等同于normal500 600700等同于bold800 900（有时候看不到粗细变化，是因为所使用的字体不支持。比如"微软雅黑"，只支持400和700这两种粗细；而Mac的"苹方"字体，支持100到900之间的各种粗细）；相对值:lighter更细，bolder更粗
<style>
div:nth-of-type(1) span:nth-of-type(1){
font-weight: bold;
}
div:nth-of-type(1) span:nth-of-type(2){
font-weight: 900;
}
div:nth-of-type(2) span:nth-of-type(1){
font-weight: lighter;
}
div:nth-of-type(2) span:nth-of-type(2){
font-weight: bolder;
}
</style>
<div><span>加粗</span> normal <span>900</span></div>
<div><span>更细</span> normal <span>更粗</span></div>
效果:
text-decoration 下划线
<style>
div{
margin: 10px;
}
div:nth-of-type(1){
/* none：默认属性，没有装饰；underline：下划线；overline：上划线；line-through：中划线，有一条贯穿文本中间的修饰线 */
text-decoration-line: underline;
/* 颜色 */
text-decoration-color: #0022ff;
/* solid：实线；double：双实线；dotted：点划线；dashed：虚线；wavy：波浪线 */
text-decoration-style: wavy;
/* auto：由浏览器为文本装饰线选择合适的厚度；from-font：字体文件中包含的首选的厚度值；其它： em px % */
text-decoration-thickness: 2px;
}
div:nth-of-type(2){
/* 四个参数可以写在 text-decoration 的任意位置 */
text-decoration: #00be16 6px dotted line-through;
}
div:nth-of-type(3){
text-decoration: #ff2222 from-font dashed underline;
}
div:nth-of-type(4){
text-decoration: #d122ff 2px double underline;
}
</style>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
<div>文字hello文字happy文字</div>
效果:
text-shadow 阴影
<style>
*{
font-size: 30px;
margin: 10px;
}
.one{
/*
h-shadow 必需的；水平偏移量；正数-向右偏移，负数-向左偏移。
v-shadow 必需的；垂直偏移量；正数-向下偏移，负数-向上偏移
blur-radius 可选；模糊半径；数值越大越模糊；若不指定则无模糊效果。
color 必需的；颜色；
*/
text-shadow: 3px 10px 2px red;
}
.more{
/* 使用多个阴影效果时，用逗号隔开；后面的阴影会叠加在前面的阴影之上 */
text-shadow: -3px -10px 2px red,
-1px -16px 2px rgb(5, 173, 104),
2px -20px 2px #ffb700,
5px -24px 2px rgba(163, 7, 225,0.5);
}
.loukong{
color: white;
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
.jianbian{
/* 线性渐变 */
background: linear-gradient(to right,red,green 40%,orange 60%,plum 80%,blue);
/* 控制背景的裁剪区域，决定背景在元素中的显示范围 */
-webkit-background-clip: text;
/* 文字的填充颜色 transparent透明，text-fill-color会覆盖color */
-webkit-text-fill-color: transparent;
/* 阴影 */
text-shadow: 0 5px 20px #cdff88;
}
</style>
<span class="one">文字文字</span>
<span class="more">文字文字</span>
<span class="loukong">文字</span>
<p class="jianbian">文字文字文字文字文字文字</p>
效果:
text-transform 大小写变换
<style>
/* none：默认不做任何处理 */
p:nth-of-type(1){
text-transform: capitalize; /* capitalize：单词的首字母大写，通过空格来识别单词 */
}
p:nth-of-type(2){
text-transform: lowercase; /* lowercase：所有的字母都小写 */
}
p:nth-of-type(3){
text-transform: uppercase; /* uppercase：所有的字母都大写 */
}
</style>
<p>designers and developers</p>
<p>designers and developers</p>
<p>designers and developers</p>
效果:
text-indent 缩进
仅适用于块级元素，对行内元素无效
<style>
p:nth-of-type(1){
/* 可以设置为负值，但是会出现显示不全的问题，需要提前预留出位置（padding）即可 */
text-indent: 70px;
}
p:nth-of-type(2){
padding: 0 20px;
text-indent: -20px;
}
p:nth-of-type(3){
text-indent: 2em; /* 2em即两个中文的宽度 */
}
p:nth-of-type(4){
text-indent: 30%; /* 相对于父元素宽度的百分比 */
}
</style>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
<p>文字文字文字hello文字文字happy文字文字我，是卖报的小行家捡到一分钱。文字文字happy文字文字我，是卖报的小行家捡到一分钱</p>
效果:
text-align 水平对齐 、vertical-align垂直对齐
<style>
p{
border: 1px solid red;
}
p:nth-of-type(1){
text-align: center; /* left:默认值；right：右对齐；center：居中对齐 */
}
p:nth-of-type(2) span{
/* 不同大小的文字的垂直对齐，使用vertical-align（top默认 middle bottom baseline基线）*/
vertical-align: middle;
}
</style>
<p>文字文字文字</p>
<p>
<span style="font-size: 25px;">Second</span>
<span style="font-size: 16px;">First</span>
</p>
效果:
text-overflow 溢出
<style>
/*
clip：不显示溢出文本 ellipsis：用省略标记"..."溢出文本
需要与 overflow: hidden;和 white-space: nowrap;一起使用 若依旧不生效常见于容器被设置了display: flex;
*/
ul{
list-style: none;margin: 20px 0;padding: 0;
border: 1px solid #727272;
width: 200px;
}
li{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
table{
width: 200px;
/* 但是在 table 中不起作用，百度说要想起作用需给 table元素设定 table-layout: fixed 单元格固定 */
table-layout: fixed;
}
td{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
<ul>
<li>骄傲了单精度第四集外拉倒大垃圾袋</li>
<li>骄傲了单精度第四集外拉倒大垃圾袋</li>
</ul>
<table border="1">
<tr>
<td>骄傲大垃圾袋大大垃圾袋垃圾袋</td>
<td>骄傲了大垃圾袋骄傲大垃圾了单</td>
</tr>
</table>
效果:
word-wrap 换行
<style>
/*
normal：（浏览器默认处理）仅仅在同意的断字点换行
break-word：允许在长单词或URL地址内部进行换行；即在容器末端有长单词不能完全显示时，不会截断单词，而是作为整体自动换行
*/
div{
width: 200px;height: 120px;border: 1px solid red;
}
#div2{
overflow-wrap: break-word;
word-wrap: break-word;
/* CSS3中将 word-warp 改名为 overflow-wrap，同时使用提高兼容性 */
}
</style>
<div id="div1">
Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>
<div id="div2">
Lorem ipsum dolor sit amet, ipsum amet-consectetur elit. https://blog.csdn.net/wei_xin_30667649
</div>
效果:
word-break 截断
<style>
div{
width: 200px;height: 80px;border: 1px solid red;
}
#div2{
/*
keep-all：默认，不允许在单词内换行，仅能在半角空格或连字符"-"处换行
break-all：在单词内换行，即在容器末端有长单词不能全然显示，会截断单词
（弥补了 word-wrap:break-word 对于长串英文不起作用的缺陷）
*/
word-break: break-all;
}
</style>
<div id="div1">
Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
<div id="div2">
Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
效果:
white-space 空白符
<style>
div{
width: 200px;height: 100px;border: 1px solid red;
}
#div2{
/*
空白字符包括空格，制表符等
normal：合并空格（换行符转化为一个空格），换行
nowrap：合并空格（换行符转化为一个空格），不换行
pre-wrap：保留空格、换行符，换行
pre：保留空格、换行符，不换行
pre-line：合并空格，保留换行符，换行
*/
white-space: pre-wrap;
}
</style>
<div id="div1">
Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
<div id="div2">
Lorem ipsum dolor sit amet, ipsum amet-consectetur elit
</div>
效果:
word-spacing 单词间隔 、letter-spacing 字母间隔
<p style="letter-spacing: 2em">Hello Word 你好，世界！</p>
<p style="word-spacing: 2em">Hello Word 你好，世 界！</p> <!-- 仅仅作用于空格隔开的单词、字-->
效果:
line-height 行高
<style>
p{
border: 1px solid red;
height: 40px;
/* 让单行文本垂直居中，设置 line-height 与文字父元素的高度相同 */
line-height: 40px;
/* 行高：行与行之间的基线到基线的距离 */
}
</style>
<p>First</p>
<p>Second</p>
效果:
writing-mode 排布
<style>
p{
width: 150px;height: 150px;border: 1px solid red;
margin: 0px;float: left;
}
/* 定义了文本水平或垂直排布以及在块元素中文本的行进方向，不是所有的浏览器都兼容 */
p:nth-of-type(1){
writing-mode: vertical-rl;
}
p:nth-of-type(2){
writing-mode: vertical-lr;
}
p:nth-of-type(3){
writing-mode: horizontal-tb;
}
</style>
<p>海上生明月，天涯共此时。情人怨遥夜，竟夕起相思。</p>
<p>灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p>
<p>灭烛怜光满，披衣觉露滋。不堪盈手赠，还寝梦佳期。</p>
效果:
iconfont 字体图标 、font-family 字体引入
<!-- font-class引用方式 1：引入项目下面生成的 fontclass 代码 -->
<link rel="stylesheet" href="./day5/font/iconfont.css">
<style>
/* font-class引用方式 3：可以单独修改某一个的样式*/
.icon-img_home_tag_classify_1_bg_color{
color: red;
font-size: 100px;
}
/* Symbol引入方式 2：加入通用 CSS 代码（引入一次就行） */
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
/* Symbol引入方式 4：可以单独修改某一个的样式 */
.dd{
width: 100px;
height: 100px;
}
/* 使用 @font-face规则来定义字体名称和字体文件路径 */
@font-face {
font-family: "阿里妈妈刀隶体"; /* 自定义字体名称 */
src: url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.ttf") format("truetype"), /* 字体文件的路径 */
url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff") format("woff");
url("./day5/阿里妈妈刀隶体/AlimamaDaoLiTi.woff2") format("woff2"); /* 为了提高兼容性，可提供多种格式的字体文件 */
}
p {
font-family: "阿里妈妈刀隶体", "fangsong"; /* fangsong是备用字体 */
font-size: 50px;
}
</style>
<!-- font-class引用方式 2：挑选相应图标并获取类名，应用于页面 -->
<span class="iconfont icon-img_home_tag_classify_1_bg_color"></span>
<!-- Symbol引入方式 3：挑选相应图标并获取类名，应用于页面（浏览器渲染 SVG 的性能一般，还不如 png） -->
<svg class="icon dd" aria-hidden="true">
<use xlink:href="#icon-pencil-01"></use>
</svg>
<!-- Symbol引入方式 1：引入项目下面生成的 symbol 代码 -->
<script src="./day5/font/iconfont.js"></script>
<!-- 使用 @font-face规则中的外部下载的字体 -->
<p>中秋节快乐</p>
效果:
