3.文字常用样式.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. /*
  9. font-size 字体大小
  10. 浏览器默认字体大小 16px
  11. 最小可识别 12px
  12. font-weight 字体粗细
  13. 100~300 字体变细 lighter
  14. 400~500 字体正常 normal
  15. 600-900 字体加粗 bold bolder
  16. font-style 字体样式
  17. italic 字体倾斜
  18. normal 正常字体
  19. font-family 文字字体
  20. color 字体颜色
  21. */
  22. div {
  23. font-size: 24px;
  24. /* 缩放 scale 0~1 */
  25. /* scale: 0.5; */
  26. /* font-weight: 100; */
  27. font-weight: bolder;
  28. font-style: normal;
  29. font-family:'Courier New', Courier, monospace;
  30. width: 300px;
  31. height: 200px;
  32. background: #00f;
  33. /* 透明度:0~1 */
  34. opacity: 0.5;
  35. color: white;
  36. /*
  37. 已知宽高的盒子内 文本居中
  38. text-align 控制文本水平位置
  39. text-align:center;(left/right)
  40. line-height 行间距 控制文本垂直位置居中
  41. line-height:当前盒子的高度
  42. */
  43. text-align: left;
  44. line-height: 200px;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <div>
  50. <p>这是一段文本</p>
  51. </div>
  52. </body>
  53. </html>