博客列表 >CSS引入到HTML方式和CSS伪类选择器

CSS引入到HTML方式和CSS伪类选择器

Jerry
Jerry原创
2020年12月16日 16:46:08749浏览

CSS引入到HTML的三种方式

1.直接通过<style>标签引入

  1. <style>
  2. h2 {
  3. color: green;
  4. }
  5. </style>

2.通过<link>标签引入外部共享样式表

  1. <link rel="stylesheet" href="css/style.css">

3.通过style属性设置样式

  1. <h2 style="color:bule">蓝色钻石一样的颜色</h2>

CSS选择器

CSS选择器- 标签 类和ID

比较简单的选择器 包括标签 类和ID

  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>CSS选择器:标签 类和ID</title>
  7. <style>
  8. li {
  9. background-color: aqua;
  10. }
  11. .hehe {
  12. background-color: greenyellow;
  13. }
  14. #four {
  15. background-color: blue;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <ul>
  21. <li>item1</li>
  22. <li class="hehe">item2</li>
  23. <li>item3</li>
  24. <li id="four">item4</li>
  25. <li>item5</li>
  26. </ul>
  27. </body>
  28. </html>

CSS选择器-上下文选择器

空格: 所有层级, >: 仅父子层级, +: 后面相邻一个兄弟, ~: 后面相邻所有兄弟

  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>CSS选择器-上下文选择器</title>
  7. <style>
  8. /* 空格: 所有层级 */
  9. ul li {
  10. background-color: blueviolet;
  11. }
  12. /* >: 仅父子层级 */
  13. body > ul > li {
  14. background-color: burlywood;
  15. }
  16. /* +: 后面相邻一个兄弟 */
  17. .third + li {
  18. background-color: chartreuse;
  19. }
  20. /* ~: 后面相邻所有兄弟 */
  21. .third ~ li {
  22. background-color: darkcyan;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <ul>
  28. <li>列表1</li>
  29. <li>列表2</li>
  30. <li class="third">列表3</li>
  31. <li>列表4</li>
  32. <ul>
  33. <li>列表4-1</li>
  34. <li>列表4-2</li>
  35. <li>列表4-3</li>
  36. </ul>
  37. <li>列表5</li>
  38. </ul>
  39. </body>
  40. </html>

css选择器-伪类选择器

主要语法: nth-of-type()

  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>css选择器-伪类</title>
  7. <style>
  8. /* 匹配第5个 正序 */
  9. ul li:nth-of-type(5) {
  10. background-color: aqua;
  11. }
  12. /* 倒数第一个 倒序 */
  13. ul li:nth-last-of-type(1) {
  14. background-color: brown;
  15. }
  16. /* 偶数行 even或者2n */
  17. ul li:nth-of-type(even) {
  18. background-color: coral;
  19. }
  20. /* 奇数行 odd或者2n-1 */
  21. ul li:nth-of-type(odd) {
  22. background-color: cornflowerblue;
  23. }
  24. /* 带偏移量 移动8 an+b */
  25. ul li:nth-of-type(n + 8) {
  26. background-color: darkorange;
  27. }
  28. /* 第一个 */
  29. ul li:first-of-type {
  30. background-color: darkseagreen;
  31. }
  32. /* 最后一个 */
  33. ul li:last-of-type {
  34. background-color: darkseagreen;
  35. }
  36. /* 只对含有一个元素的有效 */
  37. ul li:only-of-type {
  38. background-color: darkgreen;
  39. }
  40. </style>
  41. </head>
  42. <body>
  43. <ul>
  44. <li>列表1</li>
  45. <li>列表2</li>
  46. <li>列表3</li>
  47. <li>列表4</li>
  48. <li>列表5</li>
  49. <li>列表6</li>
  50. <li>列表7</li>
  51. <li>列表8</li>
  52. <li>列表9</li>
  53. <li>列表10</li>
  54. </ul>
  55. <ul>
  56. <li>只有这个一个li</li>
  57. </ul>
  58. </body>
  59. </html>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议