Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Css提权、字体图标、常用模型属性简写
Blogger Information
Blog 19
fans 0
comment 1
visits 14093
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
Css提权、字体图标、常用模型属性简写
心
Original
891 people have browsed it

伪类选择器 a链接状态匹配

顺序无法打乱，会无法显示

  1. 默认没有访问/点击
    a：link
  2. 以访问过的状态
    a:visited
  3. 鼠标悬停状态
    a:hover
  4. 激活.当鼠标点击压下去的时候
    a:active
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta chaser="utf-8>
  5.         <title>a链接状态匹配</title>
  6.         <style>
  7.             /*默认没有访问点击状态*/
  8.             a:link{
  9.                 color:red;
  10.             }
  11.             /*访问过的状态*/
  12.             a:visitde{
  13.                 color:#000;
  14.             }
  15.             /*鼠标悬停状态*/
  16.             a:hover{
  17.                 color:red;
  18.                 width:20px;
  19.             }
  20.             /*点击按压下去的时候的状态*/
  21.             a:active{
  22.                 color:#0f0f0f;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <a href="https:www.baidu.com">百度一下</a>
  28.     </body>
  29. </html>

表单的选取方案

  1. form p:first-of-type input：first-of-type
  2. 直接使用属性来获取 如 input：required
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     <meta chaset="utf-8">
  5.     <title>表单的选取方案</title>
  6.     <style>
  7.     /*使用 first-of-type 太过麻烦 一般不推荐*/
  8.     form p:first-of-type inpyt:first-of-type{
  9.         background-color:red;
  10.     }
  11.     /*使用input中的属性来直接获取*/
  12.     input:required{
  13.         background-color:blue;
  14.     }
  15.     </style>
  16.     </head>
  17.     <body>
  18.         <form action="" method="">
  19.             <p><input type="text" disabled></p>
  20.             <p><input type="text" required></p>
  21.         </form>
  22.     </body>
  23. </html>

优先级 提权

  1. 浏览器自上而下来审查元素，所以优先级也是自上而下，当以级别时，最下面的会覆盖掉上一层的样式
  2. id>class>标签
  3. 换算单位是【0(id).0(class).1(标签)】
  4. @important 不是选择器 它可以强制提权
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta chaset="utf-8">
  5.         <title>优先级的提权方式</title>
  6.         <style>
  7.             /*当只有标签时 会显示红色*/
  8.             h2{
  9.                 color:red;
  10.             }
  11.             /*使用clss 属性时 会显示蓝色*/
  12.             .on{
  13.                 color:blue;
  14.             }
  15.             /*使用id 时 会显示黑色*/
  16.             #demo{
  17.                 color:#000;
  18.             }
  19.             /*当级别够高时 不会因为位置的影响而被覆盖*/
  20.             /*不考虑id 时 这个会比 .on 级别高 根据换算方式【0，1，1】>[0,1,0]*/
  21.             .on h2{
  22.                 color:#333;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <h2 id="demo" class="on">优先级提权方式</h2>
  28.     </body>
  29. <html>

属性的简写

最常用的时是字体属性

应用 属性 属性值
字体 font-family sans-serif
大小 font-size 20px
样式 font-style itallic
加粗 font-weight normal(数值：500)

简写方式 font: 样式 加粗 大小 字体 可以自定义字体

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>font属性值的缩写</title>
  6.         <style>
  7.             /*平常使用时*/
  9.             .demo{
  10.                 font-size:16px;
  11.                 font-family:sans-serif;
  12.                 font-style:itallic;
  13.                 font-weight:normal;
  14.             }
  15.             /*现在使用缩写形式*/
  16.             .demo{
  17.                 font:itallic normal 20px sans-serif;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div class="demo">你好，中文网</div>
  23.     </body>
  24. </html>

使用阿里云矢量图标

1.下载阿里云矢量图标到本地
2.将文件移动到我们自己的样式文件夹中
3.引入文件
4.拷贝项目下面生成的font-face
@font-face {font-family: ‘iconfont’;
src: url(‘iconfont.eot’);
src: url(‘iconfont.eot?#iefix’) format(‘embedded-opentype’),
url(‘iconfont.woff’) format(‘woff’),
url(‘iconfont.ttf’) format(‘truetype’),
url(‘iconfont.svg#iconfont’) format(‘svg’);
}
5.定义使用iconfont的样式
.iconfont{
font-family:”iconfont” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
6.<i class="iconfont">3</i>
7.类的引用<i class="iconfont icon-xxx"></i>

盒模型的属性缩写

应用 属性 值
宽 width 200px
高 height 200px
背景颜色 background-color red
上边框的宽 border-top-width 5px
上边框的颜色 border-top-color blue
上边框的样式 border-top-style solid

简写方式 border-top: 5px solid red; 属性值的顺序无关

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>边框属性的缩写</tltle>
  6.         <style>
  7.             /*边框的缩写形式*/
  8.             .box{
  9.                 border:red 5px solid;
  10.             }
  11.         </style>
  12.     </head>
  13.     <body>
  14.         <div class="box"></div>
  15.     </body>
  16. </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