search

博客列表 >1216 状态匹配伪类选择器 选择器的优先级 以及提权 属性简写 盒模型简写

1216 状态匹配伪类选择器 选择器的优先级 以及提权 属性简写 盒模型简写

Allen在php中文网的学习笔记
Allen在php中文网的学习笔记原创
2020年12月17日 20:50:30688浏览

作业

作业标题：1216作业
作业内容：
1.实例演示选择器组合实现优先级提权方式;
2.实例演示字体与字体图标;
3.实例演示盒模型常用属性的缩写方案

演示地址:
https://php.gzj2001.com/day6/index.html
image.png

作业代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>1216作业</title>
  9.     <style>
  10.     /*默认状态没有访问 点击*/
  11.         a:link {
  12.             color: aqua;
  13.             text-decoration: none;
  14.         }
  15.     /*已经访问过的状态*/
  16.         a:visited {
  17.             color: blueviolet;
  18.         }
  19.     /*鼠标悬停的状态*/
  20.         a:hover {
  21.             color: brown;
  22.             text-decoration: underline;
  23.         }
  24.     /*鼠标点下去的状态 激活状态*/
  25.         a:active {
  26.             color: #000;
  27.         }
  28.     /* 选择input标签中的必填*/
  29.         input:required {
  30.             background-color: #555;
  31.         }
  32.     /*选择input标签中的关闭*/
  33.         input:disabled {
  34.             background-color: #666;
  35.         }
  36.     /*选择input标签中的只读*/
  37.         input:read-only {
  38.             background-color: #777;
  39.         }
  40.     /*最高级的id选择 优先级1 0 0*/
  41.         #beiid {
  42.             background-color: #777;
  43.         }
  44.     /*clss选择器 优先级0 1 3*/
  45.         html body span.bei {
  46.             background-color: #666;
  47.         }
  48.     /*class选择器 优先级 0 1 2*/
  49.         body span.bei {
  50.             background-color: #555;
  51.         }
  52.     /*class选择器 优先级 0 1 1*/
  53.         span.bei {
  54.             background-color: #444;
  55.         }
  56.     /*class选择器 优先级 0 1 0*/
  57.         .bei {
  58.             background-color: #333;
  59.         }
  60.     /*标签选择器 优先级 0 0 3*/
  61.         html body span {
  62.             background-color: #222;
  63.         }
  64.     /* 标签选择器 优先级 0 0 2*/
  65.         body span {
  66.             background-color: #111;
  67.         }
  68.     /*标签选择器 优先级 0 0 1*/
  69.         span {
  70.             background-color: #000;
  71.         }
  73.     /*引入font-icon文件*/
  74.         @font-face {
  75.             font-family: 'iconfont';
  76.             src: url('css/iconfont.eot');
  77.             src: url('css/iconfont.eot?#iefix') format('embedded-opentype'),
  78.                 url('css/iconfont.woff2') format('woff2'),
  79.                 url('css/iconfont.woff') format('woff'),
  80.                 url('css/iconfont.ttf') format('truetype'),
  81.                 url('css/iconfont.svg#iconfont') format('svg');
  82.         }
  83.     /*定义iconfont*/
  84.         .iconfont {
  85.             font-family: "iconfont" !important;
  86.             font-size: 16px;
  87.             font-style: normal;
  88.             -webkit-font-smoothing: antialiased;
  89.             -moz-osx-font-smoothing: grayscale;
  90.         }
  92.         /*重写iconfont 使其看得到 优先级 0 1 1*/
  93.         body .iconfont{
  94.             background-color: #fff;
  95.             font-size: 64px;
  96.         }
  97.         /* 简写 div盒模型*/
  98.         .test{
  99.             /*4边框分别等定义顺序 上 右 下 左 顺时针*/
  100.             width: 300px;
  101.             height: 200px;
  102.             /* 边框简写 */
  103.             /* 每个边框可以设置三个属性：宽度，样式，颜色 */
  104.             /* border-top-width: 3px; 宽度
  105.             border-top-color: red; 颜色
  106.             border-top-style: solid;  样式*/
  107.             /*
  108.             border-top-*
  109.             border-right-*
  110.             border-bottom-*
  111.             border-left-*
  112.             */
  113.             /*简写 四个合一个*/
  114.             border: 5px rgb(0, 134, 116) solid;
  115.             /* 背景裁切 */
  116.             background-color: #999;
  117.             background-clip: content-box;
  118.             /* 内边距  4边合一10px*/
  119.             /* 当左右相等 上下不相等，用3个value */
  120.             /* 当左右相等，上下也相等，用2个value */
  121.             /* 如果四个方向全相等,使用单值语法 */
  122.             padding: 10px;
  123.             /* 外边距  4边合一5px*/
  124.             margin: 5px;
  125.         }
  126.     </style>
  127. </head>
  129. <body>
  130.     <a href="">状态匹配选择器</a>
  131.     <form action="">
  132.         <p>邮箱<input type="" required></p>
  133.         <p>账号<input type="" required></p>
  134.         <p>密码<input type="" disabled></p>
  135.     </form>
  136.     <hr>
  137.     <span class="bei" id="beiid">我是要被提权的家伙</span>
  138.     <hr>
  139.     引用字体图标与提权
  140.     <span class="iconfont">&#xe606;</span>
  141.     <hr>
  142.     盒模型简写
  143.     <div class="test">
  145.     </div>
  146. </body>
  148. </html>

其他信息

My Blog: https://www.gzj2001.com
My Blog In PHP.cn:https://www.php.cn/blog/linwx611.html

上一条：CSS选择器优先级提权方式与字体、图标应用，盒模型常用属性缩写方案下一条：理工附中2020年度初二课程表|表单控件实例演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多