4.常用的文字样式.html 2.0 KB

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