1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             letter-spacing: 10px;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <!--字间距
    14.         可以设置负值(间距小)
    15.         normal  正常字间距
    16.     -->
    17.     <div>测试字间距</div>
    18. </body>
    19. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             line-height: 20px;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <!--行高
    14.         一行的高度，可以控制行与行之间的间距，但是不等同于行与行的间距
    15.         值：默认行高：normal   尺寸单位    数字，指的是当前尺寸的倍数   百分比，指的是当前尺寸的百分比
    16.         通常用来使单行文本垂直居中
    17.     -->
    18.     <div>测试字间距</div>
    19. </body>
    20. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         p{
    8.             text-indent: 2em;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <!--首行缩进
    14.         值：尺寸单位  默认值为0   (2)em   可以为负值   百分比
    15.     -->
    16.     <p>庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。</p><br/>
    18.     <p>予观夫巴陵胜状，在洞庭一湖。衔远山，吞长江，浩浩汤汤，横无际涯，朝晖夕阴，气象万千，此则岳阳楼之大观也，前人之述备矣。
    19.         然则北通巫峡，南极潇湘，迁客骚人，多会于此，览物之情，得无异乎？</p><br/>
    21.     <p>若夫淫雨霏霏，连月不开，阴风怒号，浊浪排空，日星隐曜，山岳潜形，商旅不行，樯倾楫摧，薄暮冥冥，虎啸猿啼。
    22.         登斯楼也，则有去国怀乡，忧谗畏讥，满目萧然，感极而悲者矣。</p><br/>
    24.     <p>至若春和景明，波澜不惊，上下天光，一碧万顷，沙鸥翔集，锦鳞游泳，岸芷汀兰，郁郁青青。而或长烟一空，皓月千里，浮光跃金，静影沉璧，渔歌互答，此乐何极！
    25.         登斯楼也，则有心旷神怡，宠辱偕忘，把酒临风，其喜洋洋者矣。</p><br/>
    27.     <p>嗟夫！予尝求古仁人之心，或异二者之为，何哉？不以物喜，不以己悲，居庙堂之高则忧其民，处江湖之远则忧其君。
    28.         是进亦忧，退亦忧。然则何时而乐耶？其必曰“先天下之忧而忧，后天下之乐而乐”乎！噫！微斯人，吾谁与归？</p><br/>
    30.     <p>时六年九月十五日。</p>
    31. </body>
    32. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         div{
    8.             width: 300px;
    9.             height: 40px;
    10.             line-height: 40px;
    11.             background: skyblue;
    12.             margin: 100px auto;
    13.             text-align: center;
    14.             text-align: justify;
    15.         }
    16.     </style>
    17. </head>
    18. <body>
    19.     <!--水平排列
    20.         text-align: "值：left center  right  justify(文本两端对齐) ";
    21.     -->
    22.     <div>程晓白</div>
    23.     <div>程晓白<p style="display: inline-block;width: 100%"></p></div>
    24. </body>
    25. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         .a{
    8.             font-size: 40px;
    9.         }
    10.         .b{
    11.             font-size: 20px;
    12.             vertical-align: baseline;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <!--垂直对齐   对行级元素及行内块级元素，表格元素生效
    18.         baseline(默认)    对齐父元素基线
    19.         sub              对齐下标
    20.         super            对齐商标
    21.         top              顶部对齐
    22.         bottom           底部对齐
    23.         middle           居中对齐
    24.         text-top
    25.         text-bottom
    26.     -->
    27.     <div>
    28.         <span class="a">20.0</span>
    29.         <span class="b">元</span>
    30.     </div>
    31. </body>
    32. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         a{
    8.             text-decoration: none;
    9.         }
    10.     </style>
    11. </head>
    12. <body>
    13.     <!--文本修饰    text-decoration
    14.         underline       下划线
    15.         overline        上划线
    16.         line-through    删除线
    17.         blink           闪烁的文字效果
    18.         none            默认值：没有
    19.     -->
    20.     <a href="#">点我下载</a>
    21. </body>
    22. </html>
    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>test</title>
    6.     <style>
    7.         p{
    8.             color: red;
    9.             font-size: 30px;
    10.             font-weight: 700;
    11.             text-shadow: 2px 3px 2px black;
    12.         }
    13.     </style>
    14. </head>
    15. <body>
    16.     <!--文本阴影    text-shadow
    17.         值1：水平阴影位置(正值，阴影在右，负值，阴影在左)
    18.         值2：垂直阴影位置(正值，阴影在下，负值，阴影在上)
    19.         值3：阴影模糊距离
    20.         值4：阴影颜色
    21.     -->
    22.     <p>出师表</p>
    23. </body>
    24. </html>