1217 选择器(字体图标、盒模型)示例: - css

首页 > 博客列表 > 1217 选择器(字体图标、盒模型)示例:

博主信息

博文 49

粉丝 0

访问量 51897

专题推荐

更多>

选择器优先级:

//一.当选择器级别相同时，和写的顺序有关,写到后面的会把前面的覆盖
     h2 {
        color: gold;
      }
      h2 {
        color: violet;
      }
//二.当选择器不同时,级别高覆盖级别低
//on表示class级
     .on {
        color: wheat;
      }
//表示id级
      #foo {
        color: blue;
      }
<body>
    <h2 class="on" id="foo">hello php.cn</h2>
</body>

总结: id>class>tag
效果预览：

提权方式:

//有一个计算公式:[id选择器的数量,class选择器的数量, tag选择器的数量]
//tag级向class级进位,class级向id级进位[id=0,class=0, tag=0]
        //[0,0,1]
         h2{
            color: red;
        }
//要继续提权,就要选择一个比h2 权重高的选择器组合就可以
        // [0,0,2] tag=2
         body h2{
            color: skyblue;
        }
       //[0,1,0] class=1
          .on{
            color: slateblue;
        }
        //[1,0,0] id=1
        #foo{
            color: sandybrown;
        }
<body>
    <h2 class="on" id="foo">hello php.cn</h2>
</body>

效果预览：

字体属性:

<style>
 .title {
       //简写后:
       font: italic lighter 36px sans-serif;
//图标属性:
 .iconfont {
        font-family: "iconfont" !important;
        font-size: 36px;
        color: cornflowerblue;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
@font-face {
        font-family: "iconfont";
        src: url("icon-font/iconfont.eot");
        src: url("icon-font/iconfont.eot?#iefix") format("embedded-opentype"),
          url("icon-font/iconfont.woff2") format("woff2"),
          url("icon-font/iconfont.woff") format("woff"),
          url("icon-font/iconfont.ttf") format("truetype"),
          url("icon-font/iconfont.svg#iconfont") format("svg");
      }
</style>
//第二个图标引入样式
<link rel="stylesheet" href="icon-font/iconfont.css" />
<body>
<span class="iconfont">&#xe607;</span>
<h2 class="title">php中文网</h2>
<span class="iconfont icon-kehuguanli"></span>
</body>

效果预览:

盒模型:

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: rgb(130, 238, 220);
            box-sizing: border-box;
        }
        .box{
           //每个边框可以设置三个属性: 宽度,样式,颜色
            border: 5px solid #000;
        }
        .box{
            //内边距
            //四值
            padding: 5px 10px 15px 20px;
           //将背景色裁切到内容区
            background-clip: content-box;
            //三值语法
            padding: 10px 20px 15px;
            //二值语法
            padding: 10px 30px;
            //单值
            padding: 10px;
        }
        .box {
               //外边距
               //四值
               margin: 5px 8px 10px 15px;
               //三值
               margin: 15px 20px 30px;
               //二值
               margin: 10px 15px;
               //单值
               margin: 8px;
            }
//总结: 四值,顺时针,上右下左 | 三值,左右相等,上下不等 | 二值,左右相等,上下相等 | 单值,四个方向全相等
    </style>
<body>
    <div class="box"></div>
</body>

效果预览:

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1217 选择器(字体图标、盒模型)示例:

2020-12-17 17:13:53