Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1216CSS优先级
Blogger Information
Blog 45
fans 0
comment 0
visits 34637
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
1216CSS优先级
咸鱼老爷
Original
625 people have browsed it

伪类选择器 状态匹配

一、链接：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:上 下 左 右；

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