CSS-文本样式

学习目标

掌握文本样式的用法

一、color

1.1、设置字体颜色

单词表示法：red、blue、green、grey… 十六进制表示法：#ff00ff、#f0f rgb、rgba、hsl、hsla 关键字：currentColor 当前的颜色 一般用在边框上、transparent 透明度为0 颜色是由red green blue 混合构成的 rgba 是增强了透明度，第四个值是透明度 color:rgba(0,0,0,0.3)一般用1-0之间的值 ，0的话透明看不见，1是黑 rgb 三个参数也是 red green blue构成，三颜色混合 #333 #999 值相同表示由黑到灰到白 颜色越浅越黑 颜色越高越偏灰色的黑，值越大越弱 hsl 饱和度由灰像彩色转变，0%就是灰色 100就是像彩色转变 一般饱和度用100%，明度用50%

1.2、以下代表什么颜色

#000黑色、#333淡黑、 #666灰色、 #999淡灰色、 #eee接近白色的灰色、 #fff白色、 #f00红色、 #0f0绿色、 #00f蓝色、 rgba(255, 255, 255, 1)纯白色、rgba(0, 0, 0, 0.3)半透明的黑色、hsl(0, 100%, 50%)红色、 hsl(120, 100%, 50%)绿色、hsl(240, 100%, 50%)蓝色

1.3、color举例

color: red; color: #0f0; color: #00ff00; color: rgba( 34, 12, 64); color: rgba( 34, 12, 64, 0.3); /* 色相(0和360是红 120是绿 240是蓝) 饱和度(0%灰) 明度(0%是黑) */ color: hsl( 0, 100%, 50%); color: hsla( 120, 100%, 64, 0.3); color: currentColor; /* 边框的颜色使用继承自父亲的color属性的颜色 */ border: 1px solid currentColor; color: inherit;

二、font-size

2.1、设置字体大小

px： 像素 em： 2em 相对于父亲字体大小的倍数（如果是非font-size属性对应的值，则 是相对于当前元素的font-size） rem： 2rem 根元素(html 或者:root)字体的倍数 百分比：80% 同em相对于父亲字体大小的倍数

2.2、注意

rem是相对于html的font-size，不是相对于body浏览器默认字体大小16pxChrome有最小字体限制(11px or 12px)font-size只有本身em相对于父亲的大小，除了font-size以外的其他em都是相对于自己

2.3、font-size举例

<div class='wrap'> <div class='a'>饥人谷</div> <div class='b'>饥人谷</div> <div class='c'>饥人谷</div> <div class='d'>饥人谷</div> </div> <style> :root { /* :root 的意思等同于根元素 也就是html */ font-size: 14px; } .wrap { font-size: 2em; } .a { font-size: 28px; } .b { font-size: 2em; } .c { font-size: 200%; } .d { font-size: 2rem; } </style>

三、vw、vh

3.1、长度单位

1vw = 视窗宽度的1%， 100vw表示水平满屏1vh = 视窗高度的1%， 100vh表示垂直满屏

3.2、兼容性

记住这个网站 https://caniuse.com/#search=vwIE9及以上能用

3.3、 应用

如何使用vw做单位实现移动端适配（等比放大缩小）(设计稿标注的大小 * 设计稿宽度/100) vw

四、设置字体 font-family

1、font-family: ‘微软雅黑’, ‘Microsoft YaHei’, ‘Source Han Sans’, Helvetica, Arial, sans-serif; 2、先找第一个字体，找不到再第二个，依次往后… 最后找不到就用默认字体 3、字体里包含空白字符最好要加引号（可以不加，但 如果字体包含数字和其他特殊字符，一定要加引号） font-family: Gill Sans Extrabold, sans-serif; font-family: ‘Gill Sans Extrabold’, sans-serif; font-family: ‘Gill Sans Extrabold 2020’, sans-serif;

/* 以下都不对*/ font-family: Gill Sans Extrabold 2020, sans-serif; font-family: test@foo, sans-serif; font-family: #POUND, sans-serif;

4.1、@font-face

设置自定义字体

@font-face { font-family: "Bitstream Vera Serif Bold"; src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf"); } body { font-family: "Bitstream Vera Serif Bold", serif }

字体图标 优缺点

优点：矢量放大不失真，可设置颜色，体积小加载快，使用 方便缺点：单色或者CSS3渐变色

小实战

如何使用字体图标https://www.iconfont.cn/

参考文章

https://zhuanlan.zhihu.com/p/22724856

4.2、font-style

• 用于设置文字是否以斜体显示

normal 正常italic 斜体oblique 模拟斜体

4.3、font-weight

• 用于设置文字粗细

normal 正常bold 粗体lighter 比父元素字体细一级bolder 比父元素字体粗一级 ü 100-900 用于微调字体粗细

• 注意

设置字体的粗细还取决于字体库是否存在该粗细尺寸的字体的图形描述

匹配机制（了解)

400~500： 从400至500升序查找->从400开始降序往前查找->从500开始升序往后查找小于400： 从设置值开始降序往前查找->从设置值开始升序往后查找大于500： 从设置值开始升序往后查找->从设置值开始降序往前查找

4.4、text-decoration

• 设置文字划线样式

none 取消下划线underline 设置下划线overline 上划线line-through 中划线 <div class='a'>饥人谷a</div> <div class='b'>饥人谷b</div> <div class='c'>饥人谷c</div> <div class="d">饥人谷d</div> <a href='#'>饥人谷</a> <style> a { text-decoration: none; } .a { text-decoration: underline; } .b { text-decoration: line-through; } .c { text-decoration: overline; } .d { text-decoration: green wavy underline; } </style>

4.5、text-transform

• 用于改变字母的大小写

none 取消转换效果uppercase 转为大写lowercase 转为小写capitalize 转为首字母大写

4.6、text-shadow

• 设置文字阴影

text-shadow: 水平偏移 垂直偏移 模糊半径 颜色; <p>欢迎来到饥人谷</p> <h1>多重阴影</h1> <style> p { text-shadow: 5px 5px 3px green; } h1 { text-shadow: 5px 5px 3px green, 2px -3px 4px red, -3px 3px 3px blue; } </style>

4.7、text-align

• 块级容器设置行内内容（例如文字） 的对齐方式

left 左对齐right 右对齐center 居中justify 文字向两侧对齐，对最后一行无效

注意

text-align 应用在块级容器上，对行内内容生效

4.8、white-space

• 设置如何处理元素中的空白和换行

normal 连续的空白符会合并，换行符不换行；边界换行。nowrap 连续的空白符会合并；换行符不换行；保持一 行遇到边界不换行。pre 连续空白符会保留；换行符会换行；边界不换行。pre-wrap 连续空白符会保留；换行符换行；边界换行。pre-line 空白符会被合并；换行符换行；边界换行。

溢出和隐藏 • text-overflow

应用到块级元素上，设置内部文本溢出后的展示样式 • 不设置， 默认溢出会展示 • text-overflow: clip; 溢出隐藏切断 • text-overflow: ellipsis; 溢出最后展示…

• overflow

应用到块级元素上，设置如何处理内容太大的场景 • overflow: visible; 默认值。内容不修剪，呈现在元素框之外 • overflow: hidden; 内容被修剪，不出现滚动条 • overflow: scroll; 出现滚动条 • overflow: auto; 不超出时无滚动条，超出出现滚动条

注意 • overflow可以单独设置水平和垂直方向，如overflow-x: scroll; overflow-y: hidden; • 使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将 white-space设置为nowrap。

红色 #ff0000 绿色 #00ff00 蓝色 #0000ff 黑色 #000000 白色 #ffffff