Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1216 状态伪类、css优先级提权、字体和字体图标、盒模型常用属性
Blogger Information
Blog 5
fans 0
comment 0
visits 3926
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 状态伪类、css优先级提权、字体和字体图标、盒模型常用属性
待伊散落尽芳华
Original
618 people have browsed it

1216 状态伪类、css优先级提权、字体和字体图标、盒模型常用属性

1. 状态伪类

  1. <head>
  2.     <style>
  3.         /* 链接的四种状态，按照顺序执行 */
  5. /* 默认状态，未点击 */
  6. a:link {
  7.     color: red;
  8. }
  10. /* 已访问状态 */
  11. a:visited {
  12.     color: red;
  13. }
  15. /* 鼠标悬停状态 */
  16. a: hover{
  17.     color: red;
  18. }
  20. /* 激活状态：当鼠标点击按下时 */
  21. a:active {
  22.     color: red;
  23. }
  25. /* ------------------------------------------- */
  27.         input:read-only {
  28.             background-color: yellow;
  29.         }
  31.         input:required {
  32.             background-color: lightgreen;
  33.         }
  35.         input:disabled {
  36.             background-color: #eee;
  37.         }
  39.         input:focus {
  40.             background-color: red;
  41.         }
  43.     </style>
  44. </head>
  46. <body>
  47.     <a herf="#">点击链接</a>
  49.    <form action="">
  50.         <p>用户名:<input type="text" name="" value="admin" readonly autofocus></p>
  51.         <p>邮箱:<input type="email" name="" value="" required></p>
  52.         <p>密码:<input type="password" name="" value="123456" disabled></p>
  53.         <p><button>提交</button></p>
  54.     </form>
  55. </body>

2.css提权

选择器优先级规则：

  1. 当选择器相同的时,与书写顺序有关,后面的样式覆盖前面的
  2. 当选择器不同时,与优先级相关,级别高的覆盖级别低
  3. 优先级排序：id > class > tag
  4. !important: 不是选择器

权重计算公式:
[id选择器的数量, class选择器的数量, tag选择器的数量]

  1. <style>
  2. /* [0,0,1] */
  3. h1 {
  4.     color:red;
  5. }
  7. /* [0,0,2] */
  8. div h1 {
  9.     color:red;
  10. }
  12. /* [0,1,0] */
  13. .b1 {
  14.     color:red;
  15. }
  17. /* [0,2,0] */
  18. .b1.b2 {
  19.     color:red;
  20. }
  22. /* [1,0,0] */
  23. #a1 {
  24.     color:red;
  25. }
  27. /* [2,0,0] */
  28. #a1#a2 {
  29.     color:red;
  30. }
  32. /* [2,2,3] */
  33. body div#a2.b2 h1#a1.b1 {
  34.     color:red;
  35. }
  37. </style>
  39. <body>
  40.     <div id='a2' class='b2'>
  41.         <h1 id='a1' class='b1'>hello world!</h1>
  42.     </div>
  43. </body>

3.字体和字体图标

步骤：

  1. 进入www.iconfont.cn阿里巴巴矢量图标网

  2. 下载图标素材

  3. 放入项目中，并引入

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>index</title>
  8.        <link rel="stylesheet" href="icon-font/iconfont.css">
  9.     <style>
  10.         @font-face {
  11.             font-family: 'iconfont';
  12.             src: url('icon-font/iconfont.eot');
  13.             src: url('icon-font/iconfont.eot?#iefix') format('embedded-opentype'),
  14.                 url('icon-font/iconfont.woff2') format('woff2'),
  15.                 url('icon-font/iconfont.woff') format('woff'),
  16.                 url('icon-font/iconfont.ttf') format('truetype'),
  17.                 url('icon-font/iconfont.svg#iconfont') format('svg');
  18.         }
  19.         .iconfont {
  20.             font-family: "iconfont" !important;
  21.             font-size: 38px;
  22.             color: skyblue;
  23.             font-style: normal;
  24.             -webkit-font-smoothing: antialiased;
  25.             -moz-osx-font-smoothing: grayscale;
  26.         }
  27.         .iconfont.icon-xiangmu {
  28.             color: blue;
  29.             font-size: 100px;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <span class="iconfont icon-xiangmu"></span>
  35. </body>
  36. </html>

演示结果

3.盒模型

盒模型：
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

margin边距/外边距：指元素与相邻同级元素的距离
border边框：指元素显示边界
padding填充/内边距：指元素内容与边框的距离
内容：显示的文本和图像等

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>盒模型的属性缩写</title>
  8.     <style>
  9.         .box {
  10.             width: 200px;
  11.             height: 200px;
  12.             background-color: lightgreen;
  13.             box-sizing: border-box;
  14.         }
  16.         .box {
  17.             /* 边框 */
  18.             /* 每个边框可以设置三个属性: 宽度,样式,颜色 */
  19.             /* border-top-width: 5px;
  20.             border-top-color: red;
  21.             border-top-style: solid; */
  23.             /* border-top: 5px red solid; */
  24.             border-top: rgb(255, 0, 255) solid 5px;
  26.             border-bottom: 10px red dashed;
  28.             border: 5px solid #000;
  29.         }
  31.         .box {
  32.             /* 内边距 */
  33.             /* padding: 上 右 下 左; 按顺时针方向*/
  34.             padding: 5px 10px 15px 20px;
  35.             /* 页面看不到是因为padding是透明的,且背景色会自动扩展到padding */
  36.             /* 将背景色裁切到到内容区 */
  37.             background-clip: content-box;
  38.             /* 当左右相等，而上下不相等，使用三值语法 */
  39.             padding: 10px 20px 15px;
  40.             /* 当左右相等，上下也相等，使用二值语法 */
  41.             padding: 10px 30px;
  42.             /* 如果四个方向全相等，使用单值语法 */
  43.             padding: 10px;
  45.             /* 总结,当使用三值和二值时,只需要记住第二个永远表示左右就可以了 */
  47.         }
  49.         .box {
  50.             /* 外边距:控制多个盒子之间的排列间距 */
  51.             /* 四值,顺时针,上右下左 */
  52.             margin: 5px 8px 10px 15px;
  53.             /* 三值,左右相等，上下不等 */
  54.             margin: 10px 30px 15px;
  55.             /* 二值,左右相等,上下也相等 */
  56.             margin: 10px 15px;
  57.             /* 单值,四个方向全相等 */
  58.             margin: 8px;
  59.         }
  60.     </style>
  61. </head>
  63. <body>
  64.     <div class="box"></div>
  65. </body>
  67. </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