CSS的使用（二）——字体及文本样式

大家好，欢迎来到IT知识分享网。

一、文本属性

1.1 颜色属性

在CSS中通过color属性来设置颜色，颜色可以是英文单词、rgb格式、rgba格式、十六进制格式；可以使用一些取色工具进行取色。

 div{ /* 字体颜色 */ /* 通过单词 */ color: red; /* 通过RGB格式 */ color: rgb(113, 164, 208); /* 通过RGBA-A为透明度 */ /* 通过十六进制格式 */ color: #; }

1.2 font-开头的属性

font-style：用于设置字体是否倾斜。属性值有两个，分别是italic斜体和normal默认显示。

font-weight：用于设置字体的粗细程度。属性值有加粗bold、更加粗bolder、默认细线lighter、数字取值（100-900之间的数字，400=normal；700=bold）。

font-size：用于设置文字的大小。需要有单位，如px、rpx、em等。

font-family：用于设置文字的字体。取值为中文或者多个取值（后边的为备选方案）要用单引号括起来。

缩写方式（不推荐使用）：font:style(可以省略) weight(可以省略) size family。

 /* 字体样式 */ font-style: italic; /* 字体粗细 */ font-weight: bold; /* 字体大小 */ font-style: 50px; /* 字体 */ font-family: 'Courier New', Courier, monospace;

1.3 text-开头的属性

text-decoration：文本装饰属性，常用的属性值有underline下划线、line-through删除线、overline上划线、 none常用于去除超链接的下划线。

text-align：文本的对齐方式。

text-indent：文本的缩进，常为2em。

text-transform：使文本变形，常用的属性值有none防止改变、uppercase转为大写字母、lowercase转为小写字母、capitalize将单词的第一个字母大写、full-width转换为等宽字体。

text-shadow：设置文本阴影。text-shadow:垂直偏移 水平偏移 模糊值 颜色。

 div{ width: 500px; /* height: 100px; */ text-decoration: underline; border: 1px solid black; /* 让div在水平方向居中 */ margin: 0 auto; /* 设置文字在水平方向上居中 */ /* text-align: center; */ /* 通过行高使文字在垂直方向上居中 */ /* line-height: 100px; */ /* 文本缩进 */ text-indent: 2em; /* 文本形变 */ text-transform: uppercase; /* 文本阴影 */ text-shadow: 10px 10px 10px blue; }

二、列表样式

它有一些边距的默认样式，我们一般用通配符删除后自行设置。

list-style-type：列表项标志样式，不区分有序列表和无序列表，包括实心圆disc、方块square、小写罗马数字lower-roman等。

list-style-position：列表项标志的位置，包括内部inside和外部outside（默认）。

list-style-image：自定义列表项标志，用url()指定图标。

list-style：综合使用方式type position image，常用none消除所有的样式。

 ul{ /* 列表样式 */ list-style-type: lower-roman; /* 列表项位置 */ list-style-position: inside; /* 自定列表项 */ list-style-image: url(); /* 清空所有样式 */ list-style: none; }

三、其他样式

line-height：设置文本行高，可以用于单行文字的垂直居中。

display：显示方式的切换，包括块级block宽高有效、行内inline宽高无效、行内块级inline-block行内显示同时宽高有效、none不显示且不占据屏幕空间、flex伸缩盒布局。

visibility：元素的显示与隐藏，包括显示visible、隐藏hidden占据屏幕空间。

opacity：元素的透明度，是0-1之间的取值。透明度为0时隐藏，且占据屏幕空间。

overflow：是对元素的溢出处理，包括visible、hidden超出部分隐藏、auto超出产生滚动条、scroll滚动条。

cursor：用于指定光标样式，常用十字线光标crosshair、一只手pointer、指示文本text、程序忙wait等。