8.文字样式.html 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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. #news {
  9. width: 300px;
  10. height: 300px;
  11. background: #00f;
  12. color: rgba(0, 255, 0, .3);
  13. font-size: 30px;
  14. /* font-weight: normal;
  15. font-style: normal; */
  16. font-family: 'Times New Roman', Times, serif;
  17. opacity: 1;
  18. background: transparent;
  19. }
  20. /*
  21. 常用16进制颜色 rgb颜色 rgba(a=>alpha) 0(全透明)~1(全显示)
  22. 红色 #f00 #ff0000 rbg(255,0,0)
  23. 黄色 #ff0 #ffff00 rbg(255,255,0)
  24. 绿色 #0f0 #00ff00 rbg(0,255,0)
  25. 蓝色 #00f #0000ff rbg(0,0,255)
  26. 白色 #fff #ffffff rbg(255,255,255)
  27. 黑色 #000 #000000 rbg(0,0,0)
  28. */
  29. /* 文字颜色 color
  30. 字体大小 font-size:xxpx;
  31. 浏览器默认的根字体大小16px
  32. 最小可识别字体 12px
  33. 字体粗细
  34. font-weight
  35. 加粗 bold bolder 600~900
  36. 正常 normal 400 500
  37. 变细 lighter 100~300
  38. 字体样式
  39. font-style
  40. 倾斜 italic
  41. 正常 normal
  42. 字体
  43. font-family
  44. 透明度
  45. opacity:0(全透明)~1(全显示) 元素透明 不消失
  46. transparent 透明色 元素消失
  47. */
  48. </style>
  49. </head>
  50. <body>
  51. <div id="news">这是一段文字</div>
  52. </body>
  53. </html>