静思田园

Appearance

文本 ​

基础 ​

字体设置 ​

通用预设置字体，这些字体从前向后匹配，使用最先匹配的字体。

css
font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", Verdana, Arial, '微软雅黑', '宋体';

自定义字体 ​

可以声明自定义字段，如果客户端不存在将下载该字体，使用方式也是通过 font-family 引入。字体格式或者后缀一般有otf woff ttf等。

字体格式
.otfopentype
.woffwoff
.ttftruetype
.eotEmbedded-opentype
html
<style>
  @font-face {
  	font-family: "custom";
  	src: url("custom-Light.otf") format("opentype"),
         url("custom-Heavy.otf") format("opentype");
  }

  span {
  	font-family: 'custom';
  }
</style>

字重 ​

字重指字的粗细定义。取值范围 normal | bold | bolder | lighter | 100 ~900。

400 对应 normal,700 对应 bold ，一般情况下使用 bold 或 normal 较多。

字号 ​

字号用于控制字符的显示大小，包括 xx-small | x-small | small | meidum | large | x-large | xx-large 。百分数是子元素相对于父元素的大小，如父元素是 20px，子元素设置为 200%即为你元素的两倍大小。

em ​

等同于百分比。

颜色 ​

字符串颜色 ​

可以使用如 red | green 等字符颜色声明

color:red;

十六进制颜色 ​

color:#ddffde

如果颜色字符相同如 #dddddd 可以简写为 #ddd

RGB 颜色 ​

color:rgb(38, 149, 162);

颜色透明度 ​

透明色从 0~1 间，表示从透明到不透明

color:rgba(38, 149, 162,.2);

行高 ​

行高可以调节文字的上下居中位置

倾斜 ​

倾斜的可以使用font-style，值有italic和normal，也可以使用em.

组合定义 ​

可以使用 font 一次将字符样式定义，但要注意必须存在以下几点:

  • 必须有字体规则
  • 必须有字符大小规则
css
span {
	font: bold italic 20px/1.5 'Courier New', Courier, monospace;
}

大小转换 ​

字母大小写转换

css
.transform {
    text-transform: uppercase;
    text-transform: capitalize;
    text-transform: lowercase;
}

文本线条 ​

css
.underline {
    text-decoration: underline;
}

.through {
    text-decoration: line-through;
}

.overline {
    text-decoration: overline;
}

阴影 ​

css
// text-shadow: h-shadow v-shadow blur color;
 
h2 {
  	text-shadow:  3px 3px 5px rgba(255, 0, 0, 0.8);
  }
值描述测试
h-shadow必需。水平阴影的位置。允许负值。测试
v-shadow必需。垂直阴影的位置。允许负值。测试
blur可选。模糊的距离。测试
color可选。阴影的颜色

空白 ​

使用 white-space 控制文本空白显示。

选项说明
pre保留文本中的所有空白，类似使用 pre 标签
nowrap禁止文本换行
pre-wrap保留空白，保留换行符
pre-line空白合并，保留换行符

溢出 ​

使用overflow-wrap控制.

单行 ​

overflow-wrap：break-word可使文本溢出后换行。溢出后末尾添加...使用text-overflow：ellipsis。

多行 ​

css
.mutiple {
        width: 200px;
        border: 1px red solid;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
}

表格文本溢出 ​

表格文本溢出控制需要为 table 标签定义 table-layout: fixed; css 样式，表示列宽是由表格和单元格宽度定义。

css
table {
    border-collapse: collapse;
    width: 300px;
    table-layout: fixed;
}

table thead tr th,
table tbody tr td {
    border: 1px solid #000;
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

段落 ​

缩进 ​

text-indent，值可以为各种宽度量，一般为2em。

水平对齐 ​

使用 left|right|center|justify 对文本进行对齐操作

垂直对齐 ​

使用 vertical-align 用于定义内容的垂直对齐风格，包括middle | baseline | sub | super|top|bottom 等。

字符间隔 ​

单词与字符间距 ​

使用 word-spacing 与 letter-spacing 控制单词与字符间距。

排版模式 ​

模式说明
horizontal-tb水平方向自上而下的书写方式
vertical-rl垂直方向自右而左的书写方式
vertical-lr垂直方向内内容从上到下，水平方向从左到右

示例： ​

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <style>
        .weight {
            font-weight: bold;
        }

        .size {
            font-size: xx-large;
            font-size: 300%;
            font-size: 30px;
            font-size: 3em;
        }

        .color {
            color: red;
            color: #ddffed;
            color: rgb(255, 0, 0);
            color: rgba(255, 0, 0, 0.5);
        }

        .line-height {
            line-height: 3em;
        }

        .em {
            font-style: italic;
        }

        .transform {
            text-transform: uppercase;
            text-transform: capitalize;
            text-transform: lowercase;
        }

        .underline {
            text-decoration: underline;
        }

        .through {
            text-decoration: line-through;
        }

        .overline {
            text-decoration: overline;
        }

        .shadow {
            font-size: 30px;
            text-shadow: 3px 3px 5px rgba(255, 0, 0, 0.8);
        }

        .space {
            display: block;
            width: 100px;
            border: 1px red solid;
            white-space: pre;
            white-space: nowrap;
            white-space: pre-wrap;
            white-space: pre-line;
        }

        .overflow-wrap {
            display: block;
            width: 200px;
            border: 1px red solid;
            overflow-wrap: break-word;
        }

        .single {
            display: block;
            width: 200px;
            border: 1px red solid;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

        }

        .mutiple {
            width: 200px;
            border: 1px red solid;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        table {
            border-collapse: collapse;
            width: 300px;
            table-layout: fixed;
        }

        table thead tr th,
        table tbody tr td {
            border: 1px solid #000;
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .indent {
            text-indent: 2em;
        }

        .text-align {
            border: 1px solid #000;
            text-align: left;
            text-align: right;
            text-align: justify;
            text-align: center;
        }

        .vertical-align img {
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
            vertical-align: auto;
            vertical-align: baseline;
            vertical-align: sub;
            vertical-align: super;
            vertical-align: -40px;
        }

        .word-spacing {
            word-spacing: 4em;
        }

        .letter-spacing {
            letter-spacing: 3em;
        }

        .horizontal-tb {
            height: 200px;
            border: solid 1px #ddd;
            writing-mode: horizontal-tb;
        }

        .vertical-rl {
            height: 200px;
            border: solid 1px #ddd;
            writing-mode: vertical-rl;
            writing-mode: vertical-lr;
        }
    </style>
</head>

<body>
    <p>静思田园</p>
    <p class="weight">静思田园</p>
    <p class="size">静思田园</p>
    <p class="color">静思田园</p>
    <p class="line-height">静思田园</p>
    <p class="em">静思田园</p>
    <p class="transform">transform</p>
    <p class="underline">下划线</p>
    <p class="through">删除线</p>
    <p class="overline">上划线</p>
    <p class="shadow">上划线</p>
    <p class="space">I love you! you love me?</p>
    <p class="overflow-wrap">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>
    <p class="single">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>
    <p class="mutiple">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</td>
                <td>18</td>
                <td>男</td>
            </tr>
            <tr>
                <td>是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</td>
                <td>20</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <p class="indent">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>
    <p class="text-align">是CSS3中用于给文本添加阴影效果的属性。</p>
    <p class="vertical-align">
        <img src="https://cdn.stocksnap.io/img-thumbs/280h/autumn-fall_MQT9LIHYNA.jpg" alt="">
        是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。
    </p>

    <p class="word-spacing">I love you! you love me?</p>
    <p class="letter-spacing">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>
    <p class="horizontal-tb">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>
    <p class="vertical-rl">是CSS3中用于给文本添加阴影效果的属性。它允许您为文本内容添加一个或多个阴影,以增强视觉效果,创建立体感或装饰性文字外观。</p>

    <div style="height: 500px;"></div>
</body>

</html>