search

博客列表 >1216CSS优先级

1216CSS优先级

咸鱼老爷
咸鱼老爷原创
2021年02月25日 17:48:30624浏览

伪类选择器 状态匹配

一、链接：4个状态
1、默认没有访问的状态：:link;
2、已访问过的状态：:visited;
3、鼠标悬停状态:hover;
4、激活状态：:active;

  1. <style>
  2.         a:link {
  3.             color: #ccc;
  4.             text-decoration: none;
  5.         }
  6.         a:visited {
  7.             color: #000;
  8.         }
  9.         a:hover {
  10.             color: red;
  11.             text-decoration: underline;
  12.         }
  13.         a:active {
  14.             color: slateblue;
  15.         }
  16.     </style>
  17.      <a href="http://www.baidu.com">百度</a>

二、表单

  1.  <style>
  2.         /* 快速选中只读的 */
  3.         input:read-only {
  4.             background-color: slategrey;
  5.         }
  6.         input[type=email] {
  7.             background-color: springgreen;
  8.         }
  9.         input:required {
  10.             background-color: teal;
  11.         }
  12.         input:disabled {
  13.             background-color: violet;
  14.         }
  15.     </style>
  16.      <form action="">
  17.         <p>用户名：<input type="text" name="username" value="admin" readonly></p>
  18.         <p>邮箱：<input type="email" name="email" value="admin@admin.com" required></p>
  19.         <p>密码：<input type="password" name="password" value="admin" disabled></p>
  20.         <p><button>提交</button></p>
  21.     </form>

选择器的优先级

1、当选择器相同时，写在后面的优先级大（离元素近的）
2、当标签选择器和类选择同时选中时，类选择的优先级大，级别高的层叠级别低的
3、id选择器>类选择>标签选择器

选择器的提权方式

1、声明的顺序对优先级的影响

  1.  <style>
  2.         h1 {
  3.             color: violet;
  4.         }
  5.         h1 {
  6.             color: red;
  7.         }
  8.     </style>
  9.     <h1>php</h1>

效果图

2、选择器的类型对优先级的影响

  1.  <style>
  2.         .php {
  3.             color: violet;
  4.         }
  5.         h1 {
  6.             color: red;
  7.         }
  8.     </style>
  9.     <h1 class="php">php</h1>


3、优先级计算公式
[id选择器的数量，类选择器的数量，标签选择的数量]；[0 ,0 ,0];

  1. <style>
  2.       html body h1 {
  3.             color: rgb(20, 23, 32);
  4.         }
  5.         /* [0,0,3] */
  6.         body h1 {
  7.             color: violet;
  8.         }
  9.         /* [0,0,2] */
  10.         h1 {
  11.             color: red;
  12.         }
  13.         /* [0,0,1] */
  14.         h1.php {
  15.             color: salmon;
  16.         }
  17.         /* [0,1,1] */
  18.         .php {
  19.             color: salmon;
  20.         }
  21.         /* [0,1,0] */
  22.         h1#p.php {
  23.             color: rgb(30, 209, 45);
  24.         }
  25.         /* [1,1,1] */
  26.         #p.php {
  27.             color: rgb(201, 157, 15);
  28.         }
  29.         /* [1,1,0] */
  30.         #p {
  31.             color: rgb(10, 177, 243);
  32.         }
  33.         /* [1,0,0] */
  34.     </style>
  35.     <h1 class="php" id="php">php</h1>

效果图

属性的简写

1、字体
font-size/line-height 大小/行高;
font-famil 字体;
font-style 样式;
font-weight 粗细;
简写：font:样式 粗细 大小/行高 字体；

字体图标小案例

  1. <style>
  2.         .iconfont.icon-shouye {
  3.             font-size: 5em;
  4.         }
  5.         .iconfont.icon-sousuo {
  6.             font-size: 5em;
  7.         }
  8.     </style>
  9. <body>
  10.     <span class="icon iconfont icon-shouye"></span>
  11.     <span class="icon iconfont icon-sousuo"></span>
  12. </body>

效果图

2、背景
background标签
background-color：背景颜色
background-image：背景图片;url();
background-repeat：重复；no-repeat repeat-x repeat-y;
background-size：大小;
background-position：位置;0 0;方位名词 top center bottom；
简写：background:颜色 图片 重复 位置；

盒模型

1、边框border
简写：htmlborder:1px solid #ccc;
2、内边距：padding：上 右 下 左(背景色会自动扩展到padding 将背景色裁切到padding backgroud-clip:content-box)
简写html padding:1px 2px 3px 4px

  1.  <style>
  2.         .box {
  3.             width: 200px;
  4.             height: 200px;
  5.             background-color: cyan;
  6.             box-sizing: border-box;
  7.         }
  8.         .box {
  9.             /* border-top-width: 5px;
  10.             border-top-style: solid;
  11.             border-top-color: red; */
  12.             /* 简写 */
  13.             border-top: 5px solid red;
  14.             border-bottom: 10px solid blue;
  15.             border: 1px solid #ddd;
  16.         }
  17.         .box {
  18.             padding: 5px 10px 15px 20px;
  19.             background-clip: content-box;
  20.         }
  21.     </style>
  22. <body>
  23.     <div class="box"></div>
  24. </body>

效果图

当左右相等，上下不相等 使用三值语法 上 左右 下
当左右相等，上下相等 使用二值语法 上下 左右
当四个方向都相等，使用单值语法；
3、外边距：控制多个盒子之间的排列间距
语法和padding一样；
margin:上 下 左 右；

上一条：CURD常用操作、select常用查询、预处理原理下一条：命名空间与数据库基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多