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

一、文本属性

1.1 颜色属性

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

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

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等。