5.文字样式.html 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  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-weight 字体粗细
  10. 粗 bold bolder 600-900
  11. 正常 normal 400 500
  12. 细 lighter 100-300
  13. font-size 字体大小
  14. 浏览器跟字体 16px
  15. 浏览器最小字体 12px
  16. font-family 字体
  17. font-style 字体样式
  18. italic 倾斜
  19. normal 正常
  20. */
  21. p {
  22. color: #f00;
  23. /* font-weight: 300; */
  24. font-size: 30px;
  25. font-family: 'Courier New', Courier, monospace;
  26. font-style: normal;
  27. }
  28. /* p {
  29. color: blue;
  30. } */
  31. #aaa {
  32. color: #00f;
  33. }
  34. .bbb {
  35. color: #ff0;
  36. }
  37. /*
  38. 2.id选择器
  39. 在body中:
  40. 在开始标签中 id='xxx'
  41. 在style中:
  42. #xxx{样式}
  43. 3.类选择器
  44. 在body中:
  45. 在开始标签中 class='xxx'
  46. 在style中:
  47. .xxx{样式}
  48. */
  49. </style>
  50. </head>
  51. <body>
  52. <p>
  53. 你好啊
  54. </p>
  55. <p id="aaa">哈哈哈</p>
  56. <p class="bbb">哦哦哦哦</p>
  57. </body>
  58. </html>