博客列表 >2016作业 -选择器组合实现优先级提权方式,实例演示字体与字体图标;3.实例演示盒模型常用属性的缩写方案

2016作业 -选择器组合实现优先级提权方式,实例演示字体与字体图标;3.实例演示盒模型常用属性的缩写方案

世纪天城
世纪天城原创
2020年12月17日 21:49:14507浏览

伪类选择器之状态匹配
link 未访问时的样式

  1. a:link{
  2. /* color: brown;文本颜色 */
  3. color: brown;
  4. /* text-decoration: none;为去掉链接下划线 */
  5. text-decoration: none;
  6. }

visited已访问的样式

  1. a:visited{
  2. color: chartreuse;
  3. }

hover鼠标悬停时的样式

  1. /* hover也可以用于其他元素 */
  2. a:hover{
  3. color: chocolate;
  4. }

激活状态当鼠标按下时的样式

  1. a:active{
  2. color: cornflowerblue;
  3. }
  4. /* 注: 以上四种状态必须为固定顺序 */

表单状态匹配

  1. /* read-only只读 */
  2. input:read-only{
  3. background-color: darkgreen;
  4. }
  5. /* required必选 */
  6. input:required{
  7. background-color: darkkhaki;
  8. }
  9. /* disabled禁用 */
  10. input:disabled{
  11. background-color: darksalmon;
  12. }
  13. /* focus获取焦点 */
  14. input:focus{
  15. border:red 1px solid;
  16. }

代码

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>伪类选择器之状态匹配 </title>
  8. <style>
  9. /* link 未访问时的样式 */
  10. a:link{
  11. /* color: brown;文本颜色 */
  12. color: brown;
  13. /* text-decoration: none;为去掉链接下划线 */
  14. text-decoration: none;
  15. }
  16. /* visited已访问的样式 */
  17. a:visited{
  18. color: chartreuse;
  19. }
  20. /* hover鼠标悬停时的样式 */
  21. /* hover也可以用于其他元素 */
  22. a:hover{
  23. color: chocolate;
  24. }
  25. /* 激活状态当鼠标按下时的样式 */
  26. a:active{
  27. color: cornflowerblue;
  28. }
  29. /* 注: 以上四种状态必须为固定顺序 */
  30. /* 表单状态匹配 */
  31. /* read-only只读 */
  32. input:read-only{
  33. background-color: darkgreen;
  34. }
  35. /* required必选 */
  36. input:required{
  37. background-color: darkkhaki;
  38. }
  39. /* disabled禁用 */
  40. input:disabled{
  41. background-color: darksalmon;
  42. }
  43. /* focus获取焦点 */
  44. input:focus{
  45. border:red 1px solid;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <a href="#">伪类选择器之状态匹配</a>
  51. <form action="">
  52. <!-- readonly只读,required必选,disabled禁用 ,autofocus获取焦点-->
  53. <p>用户名: <input type="text" name="" value="" readonly></p>
  54. <p>密码: <input type="text" name="" value="" required autofocus></p>
  55. <p>用户名: <input type="text" name="" value="" disabled></p>
  56. </form>
  57. </body>
  58. </html>

选择器的优先级
基本样式

  1. h1{
  2. color: red;
  3. }

类class选择器优先级大于标签选择器 此时覆盖前面的标签选择器样式

  1. .h1{
  2. color: sandybrown;
  3. }

id选择器大于class选择器

  1. #h1{
  2. color: springgreen;
  3. }

因此总结:id>class>tag标签

代码

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>选择器的优先级</title>
  8. <style>
  9. /* 基本样式 */
  10. h1{
  11. color: red;
  12. }
  13. /* 类class选择器优先级大于标签选择器 此时覆盖前面的标签选择器样式 */
  14. .h1{
  15. color: sandybrown;
  16. }
  17. /* id选择器大于class选择器 */
  18. #h1{
  19. color: springgreen;
  20. }
  21. /* 因此总结:id>class>tag标签 */
  22. </style>
  23. </head>
  24. <body>
  25. <h1 class="h1" id="h1">选择器的优先级</h1>
  26. </body>
  27. </html>

选择器的优先级的提权方式
1.相同声明顺序的优先级,后面的覆盖前面的样式
2.选择器的类型对优先级 按id>class>tag的方式进行覆盖
3.通过组合选择器来提升优先级

  1. body>h1{
  2. color: tomato;
  3. }
  4. h1{
  5. color: springgreen;
  6. }

body>h1会覆盖h1的样式

有这么一个公式来计算优先级的方法
以body>h1为例
body>h1 :id=0,class=0,tag=2
body>h1以[0,0,2]表示
h1为 [0,0,1]
所以body>h1比 h1 大

代码

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>选择器的优先级的提权方式</title>
  8. <style>
  9. /* 1.相同声明顺序的优先级,后面的覆盖前面的样式 */
  10. /* 2.选择器的类型对优先级 按id>class>tag的方式进行覆盖 */
  11. /* 3.通过组合选择器来提升优先级 */
  12. body>h1{
  13. color: tomato;
  14. }
  15. h1{
  16. color: springgreen;
  17. }
  18. /* body>h1会覆盖h1的样式 */
  19. /* 有这么一个公式来计算优先级的方法
  20. 以body>h1为例
  21. body>h1 :id=0,class=0,tag=2
  22. body>h1以[0,0,2]表示
  23. h1为 [0,0,1]
  24. 所以body>h1比 h1 大 */
  25. /* 进为优先级 */
  26. /*.h1为 [0,1,0] 所以会覆盖前面的样式 */
  27. .h1{
  28. color: yellow;
  29. }
  30. /* h1.h1为[0,1,1]覆盖 .h1 依次类推 */
  31. h1.h1{
  32. color: tomato;
  33. }
  34. /* [0,2,0] */
  35. .h1.a1{
  36. color: violet;
  37. }
  38. /* [1,0,0] */
  39. #h1{
  40. color: yellowgreen;
  41. }
  42. /* [1,0,1] */
  43. h1#h1{
  44. color: salmon;
  45. }
  46. /* [1,1,0] */
  47. #h1.h1{
  48. color: seagreen;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <h1 class="h1 a1" id="h1">选择器的优先级的提权方式</h1>
  54. </body>
  55. </html>

实例演示字体与字体图标

代码

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <link rel="stylesheet" href="icon-font/iconfont.css">
  8. <title>属性的简写</title>
  9. <style>
  10. .h3{
  11. color: slateblue;
  12. font-family: sans-serif;
  13. font-size: 24px;
  14. /* font-style: italic;斜体 */
  15. font-style: italic;
  16. /* font-weight: bolder;粗体 */
  17. font-weight: bolder;
  18. /* 简写 */
  19. font:italic lighter 12px sans-serif;
  20. }
  21. body{
  22. /* background-color:背景颜色 */
  23. /* background-color: wheat; */
  24. /* background-image:背景图片 */
  25. /* background-image: url('6.png'); */
  26. /* background-repeat:平铺 no-repeat不平铺*/
  27. /* background-repeat: no-repeat; */
  28. /* background-size: 背景图片的尺寸 */
  29. /* background-size: 100px; */
  30. /* background-position:背景图片的位置 */
  31. /* background-position: 200px 200px; */
  32. /* background-position:right; */
  33. /* 简写 */
  34. background: url('6.png') no-repeat 200px 200px ;
  35. }
  36. /* 字体图标 */
  37. .iconfont{
  38. font-size: 50px;
  39. color: tomato;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <h3 class="h3">属性的简写</h3>
  45. <span class="iconfont icon-zhuye"></span>
  46. </body>
  47. </html>

实例演示盒模型常用属性的缩写方案
代码

  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. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>盒模型</title>
  8. <style>
  9. *{
  10. /* 查看盒模型 */
  11. outline: tomato 1px solid;
  12. }
  13. div{
  14. background-color: tomato;
  15. width: 200px;
  16. height: 200px;
  17. margin: auto;
  18. }
  19. /* 边框 每条边框可以设置三个属性 */
  20. .box{
  21. border-top-color: maroon;
  22. border-top-width: 3px;
  23. border-top-style: solid;
  24. /* 简写 */
  25. border-top: teal 5px solid;
  26. /* 还可以简写 */
  27. border:springgreen 3px solid;
  28. }
  29. /* 内边距 */
  30. .box{
  31. /* padding: 值按上右下左顺序 */
  32. /* padding: 5px 10px 15px 20px; */
  33. /* 三值为左右相等上下不想等 */
  34. /* padding: 5px 10px 15px; */
  35. /* 二值为 左右相等 上下相等 */
  36. /* padding: 5px 10px; */
  37. /* 单值为四边想等 */
  38. padding: 10px;
  39. /* 显示内边距 */
  40. background-clip:content-box;
  41. /* 注:第二个值为左右 */
  42. }
  43. /* 外边距同 padding设置同*/
  44. .box{
  45. margin: 5px 10px 20px 25px;
  46. margin: 5px 10px 20px;
  47. margin: 5px 10px;
  48. margin: 10px;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53. <h1>盒模型</h1>
  54. <div class="box">我是盒模型</div>
  55. </body>
  56. </html>

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