search

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

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

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

伪类选择器之状态匹配
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.            /* 注： 以上四种状态必须为固定顺序 */
  31.             /* 表单状态匹配 */
  32.             /* read-only只读 */
  33.             input:read-only{
  34.                 background-color: darkgreen;
  35.             }
  36.             /* required必选 */
  37.             input:required{
  38.                 background-color: darkkhaki;
  39.             }
  40.             /* disabled禁用 */
  41.             input:disabled{
  42.                 background-color: darksalmon;
  43.             }
  44.             /* focus获取焦点 */
  45.             input:focus{
  46.                 border:red 1px solid;
  47.             }
  48.         </style>
  49. </head>
  50. <body>
  51.     <a href="#">伪类选择器之状态匹配</a>
  53.     <form action="">
  54.         <!-- readonly只读，required必选，disabled禁用 ,autofocus获取焦点-->
  55.         <p>用户名： <input type="text" name="" value="" readonly></p>
  56.         <p>密码： <input type="text" name="" value="" required autofocus></p>
  57.         <p>用户名： <input type="text" name="" value="" disabled></p>
  58.     </form>
  59. </body>
  60. </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.          }
  19.          /* body>h1会覆盖h1的样式 */
  21.          /* 有这么一个公式来计算优先级的方法
  22.          以body>h1为例
  23.          body>h1 ：id=0,class=0,tag=2
  24.          body>h1以[0,0,2]表示
  25.          h1为 [0,0,1]
  26.          所以body>h1比 h1 大 */
  28.          /* 进为优先级 */
  29.          /*.h1为 [0,1,0] 所以会覆盖前面的样式 */
  30.          .h1{
  31.              color: yellow;
  32.          }
  33.          /* h1.h1为[0,1,1]覆盖 .h1 依次类推 */
  34.          h1.h1{
  35.             color: tomato;
  36.          }
  37.          /* [0,2,0] */
  38.          .h1.a1{
  39.             color: violet;
  40.          }
  41.          /* [1,0,0] */
  42.          #h1{
  43.              color: yellowgreen;
  44.          }
  45.          /* [1,0,1] */
  46.          h1#h1{
  47.             color: salmon;
  48.          }
  49.          /* [1,1,0] */
  50.          #h1.h1{
  51.              color: seagreen;
  52.          }
  53.     </style>
  54. </head>
  55. <body>
  56.     <h1 class="h1 a1" id="h1">选择器的优先级的提权方式</h1>
  57. </body>
  58. </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>
  11.     .h3{
  12.         color: slateblue;
  13.         font-family: sans-serif;
  14.         font-size: 24px;
  15.         /* font-style: italic;斜体 */
  16.         font-style: italic;
  17.         /* font-weight: bolder;粗体 */
  18.         font-weight: bolder;
  19.         /* 简写 */
  20.         font:italic lighter 12px sans-serif;
  21.     }
  22.     body{
  23.         /* background-color:背景颜色 */
  24.         /* background-color: wheat; */
  25.         /* background-image:背景图片 */
  26.         /* background-image: url('6.png'); */
  27.         /* background-repeat:平铺 no-repeat不平铺*/
  28.         /* background-repeat: no-repeat; */
  29.         /* background-size: 背景图片的尺寸 */
  30.         /* background-size: 100px; */
  31.         /* background-position:背景图片的位置 */
  32.         /* background-position: 200px 200px; */
  33.         /* background-position:right;  */
  35.         /* 简写 */
  36.         background: url('6.png') no-repeat 200px 200px ;
  37.     }
  38.     /* 字体图标 */
  39.     .iconfont{
  40.         font-size: 50px;
  41.         color: tomato;
  42.     }
  43.     </style>
  44. </head>
  45. <body>
  46.     <h3 class="h3">属性的简写</h3>
  47.     <span class="iconfont icon-zhuye"></span>
  48. </body>
  49. </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;
  13.         }
  14.         div{
  15.             background-color: tomato;
  16.             width: 200px;
  17.             height: 200px;
  18.             margin: auto;
  19.         }
  20.         /* 边框 每条边框可以设置三个属性 */
  21.         .box{
  22.             border-top-color: maroon;
  23.             border-top-width: 3px;
  24.             border-top-style: solid;
  25.             /* 简写 */
  26.             border-top: teal 5px solid;
  27.             /* 还可以简写 */
  28.             border:springgreen 3px solid;
  29.         }
  30.         /* 内边距 */
  31.         .box{
  32.             /* padding: 值按上右下左顺序 */
  33.             /* padding: 5px 10px 15px 20px; */
  34.             /* 三值为左右相等上下不想等 */
  35.             /* padding: 5px 10px 15px; */
  36.             /* 二值为 左右相等 上下相等 */
  37.             /* padding: 5px 10px; */
  38.             /* 单值为四边想等 */
  39.             padding: 10px;
  40.             /* 显示内边距 */
  41.             background-clip:content-box;
  42.             /* 注：第二个值为左右 */
  43.         }
  44.         /* 外边距同 padding设置同*/
  45.         .box{
  46.             margin: 5px 10px 20px 25px;
  47.             margin: 5px 10px 20px;
  48.             margin: 5px 10px;
  49.             margin: 10px;
  50.         }
  51.     </style>
  52. </head>
  53. <body>
  54.     <h1>盒模型</h1>
  55.     <div class="box">我是盒模型</div>
  56. </body>
  57. </html>

上一条：选择器优先级及属性简写下一条：css选择器的简述和使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多