2020-09-23 CSS3的学习2

CSS3第二天

CSS3文本样式

1.掌握CSS的常见字体样式规则
2.掌握CSS的常见字体布局规则

---

以下是本篇文章正文内容，下面案例可供参考

一、字体样式

1.color

color 为字体指定颜色
代码如下（示例）：

	/* 1.关键字 */
    color: lightcoral;
    /* 2.RGB */
    color: rgb(231, 178, 178);
    /* 3.6位16进制 */
    color: #ff00ff;
    /* 4.RGBA */
    color: rgb(102, 176, 236,0.6);
    /* 5.HSL
    H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色 。取值为：0-360 
    S：Saturation(饱和度)。取值为0.0% - 100.0%，0% 意味着灰色，而 100% 是全彩，越来越饱 和
    L：Lightness(亮度)。取值为：0.0% - 100.0%，0% 意味着黑色，而 100% 是白色,越来越亮 */
    color: hsl(200, 50%, 50%);
    /* 6.HSLA */
    color: hsla(300, 80%, 84%, 0.3);

2.font-family

①取值：通用字体
• serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
• sans-serif 无衬线的字体，笔画结尾是平滑的字体
• sans-monospace 等宽字体，用于代码，字体中每个字宽度相同
• cursive草书，这种字体有的有连笔，有的还有特殊的斜体效果。
• fantasy梦幻装饰字体 ，具有特殊艺术效果的字体
②常用字体
• Microsoft YaHei
• 微软雅黑
• 宋体
③字体栈
由于我们不能保证我们的字体有效，可以一次性指定多个字体，如果第一个字体 无效则使用下一个字体，以此类推。一般将字体栈中最后一个字体设置为通用字体.

p {font-family: "Microsoft YaHei",arial,sans-serif;}

④WebFont
当用户电脑中没有安装对应字体的时候，webFont可以加载网络字体进行显示。

<!--html中-->
	<div class="myfont"> 浅浅の奈雪体 </div>
<!--css中-->
@font-face { 
    font-family: myfont; 
    src: url(“/fonts/下载字体名.woff”), url("/fonts/下载字体名.ttf"); 
}
.myfont { 
    font-family: myfont; 
}

⑤字体图标
目前比较流行的开源字体图标库有
font-awesome 链接: link.
iconfont 链接: link.

3.font-style

用于打开和关闭斜体文本
取值
normal 【默认】正常字体，关闭斜体
italic 斜体
oblique 模拟斜体

4.font-weight

为字体设置粗细程度
取值
normal 【默认】正常,400
bold 加粗字体,700
lighter 设置当前元素字体比父元素更细
bolder 设置当前元素字体比父元素更粗
100–900 数值类型的粗细程度（值越大字体越粗）

5.text-align

文字排列方式
取值
left 左对齐
center 居中
right 右对齐

6.text-transform

允许字体改变，文本变形
取值
none 防止任何改变
uppercase 将文本转换为大写
lowercase 将文本转换为小写
capitalize 将所有单词第一个字母转换为大写
full-width 转换为类似于一个等宽字体

7.text-decoration

设置或者取消文本修饰
速写属性 line style color
text-decoration-line线的种类
none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
text-decoration-style 线的样式
solid(实线) 、wavy(波浪线)、dashed(虚线)、dotted(点状线)、double(双实线)
Text-decoration-color 颜色

二、字体阴影

text-shadow

设置或者取消文本阴影
语法：text-shadow: h-shadow v-shadow blur color;
取值:
none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值

三、列表样式

• 列表的默认样式
• list-style-type 设置列表项标志类型
• list-style-image 自定义设置列表项标志
• list-style-position 设置列表项标志出现的位置
• list-style 列表样式的速记写法

[<type>][<image>][<position>]

四、其它样式

①cursor
调整光标悬浮到链接上的时候光标的形状

属性	含义
url	需使用的自定义光标的 URL。
default	默认光标（通常是一个箭头）
auto	默认。浏览器设置的光标
pointer	手型
crosshair	十字交叉
wait	等待
help	帮助
move	移动
text	文本

②line-height
设置文本的行高，取值为绝对单位或者相对单位
③outline
调整环绕链接的框，速写属性
类似border,但是不占据屏幕空间
outline-width 边框线的宽度
outline-style 边框线的样式
outline-color 边框线的颜色
outline-offset 边框线的偏移
④display
显示方式
inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 行内显示同时宽高有效
none 不显示，不占据屏幕空间
**⑤visibility **
显示与隐藏
hidden 隐藏，占据屏幕空间
visible 显示
⑥opacity
透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
⑦overflow
溢出处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条