博客列表 >CSS的基本语法/选择器优先级/实例演示前端组件样式模块化原理与实现、常用伪类选择器的使用方式,并用伪类来模块化元素组件

CSS的基本语法/选择器优先级/实例演示前端组件样式模块化原理与实现、常用伪类选择器的使用方式,并用伪类来模块化元素组件

浅笑
浅笑原创
2021年05月23日 23:10:01693浏览

一. CSS简介

CSS即层叠样式表,是一种用来设置网页中元素的样式的计算机语言。

二.CSS语法

CSS样式规则:

1.选择器指向你需要设置样式的HTML元素。
2.每条声明都包含一个CSS属性名称和一个值,以冒号分隔。
3.声明块在花括号内;多条CSS、声明用分号分隔。
4.选择器+声明块=样式规则
实例
在此例中,所有 <h1>元素都居中对齐,且带有绿色文本颜色。

效果图:

例子解释
h1是CSS中的选择器,它指向要设置样式的HTML元素:<h1>。
color是属性,green是属性值。
text-align 是属性;center是属性值。
注:
1.important:级别最高的,不建议用,适用于调试。
2.行内样式:适用于当前元素,优先级要高于style标签设置的内部样式。

三.CSS选择器

CSS选择器用于“查找”(或选取)要设置样式的 HTML 元素。
我们可以将 CSS 选择器分为五类:
1.简单选择器(根据名称、id、类来选取元素)
2.组合器选择器(根据它们之间的特定关系来选取元素)
3.伪类选择器(根据特定状态选取元素)
4.伪元素选择器(选取元素的一部分并设置其样式)
5.属性选择器(根据属性或属性值来选取元素)
简单的CSS选择器

CSS Id和Class
id和class 选择器
如果你要在HTML元素中设置CSS样式,你需要在元素中设置”id” 和 “class”选择器。
id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
基本选择器
实例
效果图

代码块

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>基本选择器</title>
  8. <style>
  9. /* 标签,属性*/
  10. li {
  11. background-color: green;
  12. }
  13. /* 属性选择器 */
  14. /*li[class="on"] {
  15. background-color: yellow;
  16. } */
  17. li.on {
  18. background-color: yellow;
  19. }
  20. li[id="foo"] {
  21. background-color: lightgreen;
  22. }
  23. li#foo {
  24. background-color: lightcoral;
  25. }
  26. /* id,class选择器,本质上仍是属性选择器 */
  27. li[title="three"] {
  28. background-color: cyan;
  29. }
  30. </style>
  31. </head>
  32. <body>
  33. <ul>
  34. <!--元素 =标签 + 属性 来描述 -->
  35. <li id="foo">item1</li>
  36. <li class="on">item2</li>
  37. <li id="three">item3</li>
  38. <li class="on">item4</li>
  39. <li class="on">item5</li>
  40. </ul>
  41. </body>
  42. </html>

上下选择器
实例
效果图

代码块

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>上下文选择器</title>
  8. <style>
  9. /* 根据元素位置来选择*/
  10. /* 后代选择器 */
  11. /* 0,0,2 */
  12. ul li {
  13. background-color: lightblue;
  14. }
  15. /* 只选中子元素,忽略孙元素 */
  16. /* 0,0,3 */
  17. body > ul > li {
  18. background-color: lightgreen;
  19. }
  20. /* 同级相邻 */
  21. .start + li {
  22. background-color: yellow;
  23. }
  24. /* 同级所有兄弟 */
  25. .start ~ li {
  26. background-color: yellow;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <ul>
  32. <li>item1</li>
  33. <li class="start">item2</li>
  34. <li>item3</li>
  35. <li>
  36. item4
  37. <ul>
  38. <li>item4-1</li>
  39. <li>item4-2</li>
  40. <li>item4-3</li>
  41. </ul>
  42. </li>
  43. <li>item5</li>
  44. </ul>
  45. </body>
  46. </html>

伪类选择器原理与应用
实例1 伪类
效果图
代码块

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>伪类</title>
  8. <style>
  9. /* 结构伪类:选择子元素,要有一个父元素作为查询点 */
  10. /* .list > :nth-child(3) {
  11. background-color: violet;
  12. } */
  13. /* 匹配任何位置的元素
  14. n = (0,1,2,3,4...) */
  15. .list > li:nth-child(0n + 3) {
  16. background-color: violet;
  17. }
  18. /* 分组伪类结构选择器,推荐使用 */
  19. .list > li:nth-of-type(3) {
  20. background-color: cyan;
  21. }
  22. /* 选中第一个p */
  23. .list > p:nth-of-type(1) {
  24. background-color: lightgreen;
  25. }
  26. .list > li:nth-of-type(1) {
  27. background-color: lightgreen;
  28. }
  29. /* 最后一个li */
  30. .list > li:nth-of-type(7) {
  31. background-color: green;
  32. }
  33. /* 最后一个p */
  34. .list > p:nth-of-type(3) {
  35. background-color: lightblue;
  36. }
  37. .list p:last-of-type {
  38. background-color: blue;
  39. }
  40. .list p:first-of-type {
  41. background-color: red;
  42. }
  43. /* 选择倒数第三个 */
  44. .list > li:nth-last-of-type(3) {
  45. background-color: yellow;
  46. }
  47. ul li:only-of-type {
  48. background-color: yellow;
  49. }
  50. /* 选择任何一个::nth-of-type(n)
  51. 选择第一个::first-of-type
  52. 选择最后一个::last-of-type
  53. 选择倒数某一个::nth-last-of-type()
  54. 唯一子元素的元素::only-of-type */
  55. </style>
  56. </head>
  57. <body>
  58. <ul class="list">
  59. <li>item1</li>
  60. <li>item2</li>
  61. <li>item3</li>
  62. <li>item4</li>
  63. <li>item5</li>
  64. <li>item6</li>
  65. <p>item7</p>
  66. <p>item8</p>
  67. <li>item9</li>
  68. <p>item10</p>
  69. </ul>
  70. <ul>
  71. <li>item</li>
  72. </ul>
  73. </body>
  74. </html>

实例2 组件化编程思想
效果图

代码块

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>组件化编程思想</title>
  8. <style>
  9. /* 只要获取到某个页面中某个元素组件的入口,
  10. 在根据子元素的位置,
  11. 使用伪类就可以选择任何一个元素 */
  12. /* 选择首页 */
  13. /* .index {
  14. background-color: yellow;
  15. } */
  16. /* menu是入口 */
  17. .menu :first-of-type {
  18. background-color: lightgreen;
  19. }
  20. .menu :last-of-type {
  21. background-color: lightgreen;
  22. }
  23. .menu :nth-last-of-type(2) {
  24. background-color: yellow;
  25. }
  26. /* 只要获取表单的入口,使用伪类可以获取表单中的任何一个控件 */
  27. .login :only-of-type {
  28. background-color: seagreen;
  29. color: white;
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <nav class="menu">
  35. <a href="">首页</a>
  36. <a href="">视频</a>
  37. <a href="">下载</a>
  38. <a href="">注册/登录</a>
  39. </nav>
  40. <hr />
  41. <form action="" style="display: grid; gap: 1rem" class="login">
  42. <input type="text" placeholder="UserName" />
  43. <input type="password" placeholder="Password" />
  44. <input type="email" placeholder="demo@email.com" />
  45. <button>提交</button>
  46. </form>
  47. </body>
  48. </html>

导入组件
复制一段代码,在css文档中新建一个menu组件,粘贴保存。在代码中导入这个组件,效果和复制的代码一样。
演示图


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议