demo03-text.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>CSS文本样式</title>
  6. <style>
  7. .text-color{
  8. color: #00ff00;
  9. background-color: red;/*设置背景颜色*/
  10. }
  11. .txt-center{
  12. text-align: center;
  13. }
  14. /*文本对齐*/
  15. .txt-align{
  16. text-align: right; /**/
  17. }
  18. /*文本方向*/
  19. .txt-vertical{
  20. direction: rtl;
  21. vertical-align: middle;
  22. }
  23. /*文本装饰*/
  24. .txt-decoration{
  25. text-decoration: overline; /*上划线*/
  26. text-decoration: line-through; /*中划线*/
  27. text-decoration: underline; /*下划线*/
  28. }
  29. /*文本转换*/
  30. .txt-transform{
  31. text-transform: uppercase; /*转换为大写字母*/
  32. text-transform: lowercase; /*转换为小写字母*/
  33. text-transform: capitalize; /*保持不变*/
  34. }
  35. /*文本间距*/
  36. .txt-indent{
  37. text-indent: 50px; /*文本缩进50px*/
  38. letter-spacing: 10px; /*字母间距*/
  39. line-height: 2; /*行高*/
  40. word-spacing: 30px; /*字间距 单词和单词之间的间距*/
  41. }
  42. /*文本阴影*/
  43. .txt-shadow{
  44. text-shadow: -2px -1px 2px red; /*左 上 模糊 颜色设置文字阴影和颜色*/
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <p class="text-color">
  50. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  51. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  52. </p>
  53. <p class="txt-align">
  54. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  55. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  56. </p>
  57. <p class="text-color txt-right">
  58. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  59. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  60. </p>
  61. <p class="txt-vertical">
  62. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  63. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  64. </p>
  65. <p class="txt-decoration">
  66. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  67. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  68. </p>
  69. <p class="txt-transform">
  70. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  71. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  72. </p>
  73. <p class="txt-indent">
  74. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  75. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  76. </p>
  77. <p class="txt-shadow">
  78. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  79. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  80. </p>
  81. <p class="">
  82. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  83. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  84. </p>
  85. <p class="">
  86. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  87. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  88. </p>
  89. <p class="">
  90. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  91. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  92. </p>
  93. <p class="">
  94. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  95. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  96. </p>
  97. <p class="">
  98. 由北京微鲤科技有限公司开发的生活实用工具类APP,最初发布于Android、iOS及Windows
  99. Phone平台。部分用户反馈其功能冗余及广告干扰体验,但仍保持较高市场覆盖率。
  100. </p>
  101. </body>
  102. </html>