CSS3文本样式、字体栈、几种显示和隐藏的方式

CSS3day02 文本样式

字体样式

1、字体颜色color

字体颜色的取值
• 关键字
• RGB
• 6位16进制 • RGBA
• HLS
• HLSA

2、 font-size

为字体指定文字大小，取值可以为绝对单位或者相对单位

3、font-family

为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体。
• serif 有衬线的字体,笔画结尾有特殊的装饰线或衬线
• sans-serif 无衬线的字体，笔画结尾是平滑的字体
• monospace 等宽字体，用于代码，字体中每个字宽度相同
• cursive 草书，这种字体有的有连笔，有的还有特殊的斜体效果。
• fantasy 梦幻装饰字体 ，具有特殊艺术效果的字体

常用字体

• Microsoft YaHei
• 微软雅黑 • 宋体

字体栈

由于我们不能保证我们的字体有效，可以一次性指定多个字体，如果第一个字体

无效则使用下一个字体，以此类推。一般将字体栈中最后一个字体设置为通用字体.
p {font-family: “Microsoft YaHei”,arial,sans-serif;}

WebFont

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

4、font-style

用于打开和关闭斜体文本

取值
normal 【默认】正常字体，关闭斜体
italic 斜体
oblique 模拟斜体

5、font-weight

为字体设置粗细程度

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

6、text-align

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

7、text-transform

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

8、text-decoration

设置或者取消文本修饰
速写属性
line style color

text-decoration-line线的种类

none 取消所有文本修饰
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线

text-decoration-style 线的样式

solid 实线、wavy 波浪线、dashed 点状线、dotted 虚线、double 双实线

Text-decoration-color 颜色

9、text-shadow

设置或者取消文本阴影

语法:

text-shadow: h-shadow v-shadow blur color;

取值:

none 取消所有阴影
h-shadow 必需。水平阴影的位置。允许负值
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊的距离
color 可选。阴影的颜色。参阅 CSS 颜色值

10、list-style

列表样式的速记写法
[<type>][<image>][<position>]

list-style-type 设置列表项标志类型

取值:
none No item marker is shown.
disc A filled circle (default value)
circle A hollow circle
square A filled square
decimal Decimal numbers，Beginning with 1
lower-roman 小写罗马Lowercase roman numerals，E.g. i, ii, iii, iv, v…
upper-roman 大写罗马Uppercase roman numerals，E.g. I, II, III, IV, V…
decimal-leading-zero : 补零Decimal numbers，Padded by initial zeros，E.g. 01, 02, 03, … 98, 99

list-style-position 设置列表项标志出现的位置

outside 【默认】列表项标志出现在主块框的外部
inside 列表项标志出现在主块框的内部

list-style-image

自定义设置列表项标志
url() 指定图标路径

11、cursor

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

url 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url(’./images/zhankai.png’), help
default 默认光标(通常是一个箭头)
auto 默认。浏览器设置的光标
pointer 手型
crosshair十字交叉
wait 等待
help 帮助
move 移动
text 文本

e-resize
此光标指示矩形框的边缘可被向右(东)移动。
ne-resize
此光标指示矩形框的边缘可被向上及向右移动(北/ 东)。
nw-resize
此光标指示矩形框的边缘可被向上及向左移动(北/ 西)。
n-resize
此光标指示矩形框的边缘可被向上(北)移动。
se-resize
此光标指示矩形框的边缘可被向下及向右移动(南/ 东)。
sw-resize
此光标指示矩形框的边缘可被向下及向左移动(南/ 西)。
s-resize
此光标指示矩形框的边缘可被向下移动(南)。
w-resize
此光标指示矩形框的边缘可被向左移动(西)。

12、line-height

设置文本的行高
取值为绝对单位或者相对单位

块级元素独占一行，宽高有效
行内元素与其他元素共享一行，宽高无效

outline 调整环绕链接的框，速写属性

类似border,但是不占据屏幕空间

outline-width 边框线的宽度
outline-style 边框线的样式
outline-color 边框线的颜色
outline-offset 边框线的偏移

13、display 显示方式

inline 行内显示，宽高无效
block 块级显示，宽高有效
inline-block 行内显示同时宽高有效
none 不显示，不占据屏幕空间

14、 visibility 显示与隐藏

hidden 隐藏，占据屏幕空间
visible 显示

opacity 透明度，0-1之间的取值，取值为0的时候隐藏，占据屏幕空间
overflow 溢出处理
hidden 超出内容隐藏
auto 超出产生滚动条
scroll 滚动条