Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1216 状态匹配伪类选择器 选择器的优先级 以及提权 属性简写 盒模型简写
Blogger Information
Blog 16
fans 0
comment 0
visits 15838
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1216 状态匹配伪类选择器 选择器的优先级 以及提权 属性简写 盒模型简写
Allen在php中文网的学习笔记
Original
689 people have browsed it

作业

作业标题：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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post