一、CSS笔记

1.1、CSS文本颜色

CSS中，颜色可以使用四种格式，分别是：

表示颜色的单词。

十六进制的颜色数字。

rgb格式。

rgba格式，添加了透明度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        .box1 {
            color: red;
        }
        .box2 {
            color: #0f7b2e;
        }
        .box3 {
            color: rgb(26, 187, 201);
        }
        .box4 {
            color: rgba(255, 0, 255, .2);
        }
    </style>
</head>
<body>
    <div class="box1">单词表示的颜色</div>
    <div class="box2">十六进制的颜色</div>
    <div class="box3">rgb的颜色</div>
    <div class="box4">rgba的颜色</div>
</body>
</html>

1.2、CSS字母大小写

CSS提供了【text-transform】属性，可以用于转换字母的大小写，取值有三种：

【text-transform】属性：

uppercase：转换为大写字母。

lowercase：转换为小写字母。

capitalize：每个单词的首字母大写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        .box1 {
            text-transform: uppercase;
        }
        .box2 {
            text-transform: lowercase;
        }
        .box3 {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <div class="box1">css 字母 大写</div>
    <div class="box2">CSS 字母 小写</div>
    <div class="box3">html javaScript css 字母单词首字母大写</div>
</body>
</html>

1.3、CSS文本对齐

文本水平对齐属性：【text-align】，取值：

left左对齐。

right右对齐。

center居中对齐。

justify文本左右两端对齐。

文本垂直对齐属性：【vertical-align】，取值：

baseline基线对齐。

text-top文本顶部对齐。

text-bottom文本底部对齐。

sub下角标对齐。

supper上角标对齐。

基线对齐是按照四线三格来计算的，并且这只对英文有效，英文字母位于四线三格中的第二格，第三条线就是叫做基线，如下所示。

1.4、CSS文本缩进、间距、行高

设置文本缩进：【text-indent】属性，可以使用【px、em】，一般使用【2em】，表示两个字母宽度。
设置文字间距：【letter-spacing】属性，具体数字。
设置单词间距：【word-spacing】属性，这个只对英文有效。
设置文本的行间距、行高：【line-height】属性，取值：normal表示正常行高，数字、px。
设置文本空白：【white-space】属性，取值：nowrap表示不换行。

（1）如何计算行高？？？

CSS中行高，也是按照四线三格来计算的，如下所示：

注意：

当line-height设置为1的时候，这个时候行距就等于0。

1.5、CSS文本装饰线

【text-decoration-line】属性，设置文本装饰线，取值三个：

overline：上划线。

line-through：删除线。

underline：下划线。

【text-decoration-style】属性，设置装饰线的类别，取值：

solid：实线。

double：双实线。

dotted：圆点线。

dashed：虚线。

【text-decoration-thickness】属性，设置装饰线的粗细，取值：

auto：默认属性。

px：使用像素设置线条粗细。

百分比%：根据文字的高度计算。

上面几个属性值可以简写成一个属性【text-decoration】。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <style>
        div {
            color: red;
            font-size: 20px;
            margin: 20px 0;
        }
        .a {
            text-decoration-line: line-through;
        }
        .b {
            color: blue;
            text-decoration-line: overline;
            text-decoration-style: dotted;
        }
        .c {
            text-decoration-line: underline;
            text-decoration-style: dashed;
            text-decoration-thickness: 4px;
        }
        .d {
            color: green;
            text-decoration: line-through red double 4px;
        }
    </style>
</head>
<body>
    <div class="a">
        文本装饰线
    </div>
    <div class="b">
        文本装饰线
    </div>
    <div class="c">
        文本装饰线
    </div>
    <div class="d">
        文本装饰线
    </div>
</body>
</html>

1.6、CSS字体和字号

【font-family】属性，用于设置字体，可以使用多个属性值，采用逗号隔开。

【font-size】属性，设置字体大小，可以使用【px】像素单位；可以使用【em】相对单位，1em等于16px；可以使用【rem】相对单位。

【font-style】属性，设置字体的风格，例如：normal正常显示、italic斜体。

【font-weight】属性，设置字体粗细，例如：lighter细体、normal正常、bold加粗、bolder更加加粗，或者使用数字：100、200、300、400、500、600、700、800、900。

（1）谷歌字体

google谷歌字体是免费使用的，支持1000多种字体，使用的时候，只需要在HTML里面引入即可。

<!-- 引入谷歌字体 Sofia -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

需要使用多种字体，那就可以在family后面使用【|】竖线将多种字体分隔即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>font字体</title>
    <!-- 引入谷歌字体 Sofia -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Trirong">
    <style>
        div {
            font-size: 30px;
            color: green;
            font-family: "Sofia", serif;
        }
        .b {
            font-family: "Trirong", serif;
        }
    </style>
</head>
<body>
    <div class="a">
        谷歌字体
    </div>
    <div class="b">
        谷歌字体
    </div>
</body>
</html>

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/134675.html