css编码技巧

最新推荐文章于 2021-08-04 03:32:33 发布

bug的生产者

最新推荐文章于 2021-08-04 03:32:33 发布

阅读量119

点赞数

分类专栏： css揭秘

本文链接：https://blog.csdn.net/qq_43209768/article/details/92758359

版权

css揭秘专栏收录该内容

2 篇文章 0 订阅

订阅专栏

从今天开始，要好好学习啦，那么就从css揭秘这本书开始吧，哈哈
今天开始第一章—css编码技巧

1.尽量减少代码重复

首先上一段代码，这是一段按钮的样式，在代码的可维护性上出了一点问题

      .button {
            padding: 6px 16px;
            border: 1px solid #446d88;
            background: #58a linear-gradient(#77a0bb, #58a);
            border-radius: 4px;
            box-shadow: 0 1px 5px gray;
            color: #fff;
            text-shadow: 0 -1px 1px #335166;
            font-size: 20px;
            line-height: 30px;
        }

他在页面中的效果是这样的
在这里插入图片描述
问题一：与字体尺寸相关的部分，在这个例子中，如果我们决定改变字体大小，就得同时改变行高，因为这两个都写成绝对值了，而且，行高并没有反映出它和字体大小的关系，这意味着当我们改变字体大小时，可能需要算出字体改变之后的行高应该是多少，因此：当某些值相互依赖时，应该把他们的相互关系用代码表现出来；因此上面的字体代码建议改成这样

font-size: 20px;
line-height: 1.5s;

问题二：上面的字体我们设置的是绝对大小的px值，实际上这不利于我们后期的修改，比如说我们决定将父级的字号加大，就必须得修改每一处使用绝对值作为字体尺寸的样式，因此建议修改为百分比或者是em单位的

font-size: 125%;         //假设父级字体大小为16px;
line-height: 1.5s;

在这种情况下，我们改变父级字体的大小，按钮字体的大小就会随之发生改变，如下图，若将父级字体的大小改成40px;则效果如下
在这里插入图片描述
我们发现这个时候我们的按钮看起来很不协调，因为所有其他的效果都是为一个小按钮设计的，比如说 padding 和 border ，并没有跟着一起缩放，在这里我们希望字号和其他尺寸是跟父级的字号产生关联，所以我们采用 em 为单位，若你希望字号和根元素产生关联，则可以使用 rem 为单位，修改后的代码如下：
em的计算方式（来源于 https://zhidao.baidu.com/question/754489442073667604.html?qbl=relate_question_1&word=em%D7%D6%CC%E5%B4%F3%D0%A1%D4%F5%C3%B4%CB%E3）：
字体计算公式：1 ÷ 父元素的font-size × 需要转换的像素值 = em值
其它属性计算公式：1 ÷ 元素的font-size × 需要转换的像素值 = em值
举例说明：在这里插入图片描述
经过改造之后我们按钮的样式变成了这样

    .button {
            padding: 0.3em 0.8em;
            border: 1px solid #446d88;
            background: #58a linear-gradient(#77a0bb, #58a);
            border-radius: 0.2em;
            box-shadow: 0 1px 5px gray;
            color: #fff;
            text-shadow: 0 -1px 1px #335166;
            font-size: 1.25em;
            line-height: 1.5s;
        }

按钮在浏览器中显示的样式为，现在我们的按钮比较像一个原按钮的等比例放大版本了
在这里插入图片描述
在解决了大小的问题之后，再来看另一个问题，如何变更按钮的颜色，按钮的颜色容易改变，比较难得是如何根据按钮的亮面和暗面相对于主色调变亮和变暗的程度来推导出其它颜色各自的亮色和暗色版本，在这里，其实只要把半透明的黑色或白色叠加在主色调上，就可以产生色调的亮色和暗色变体，代码如下：

 .button {
            padding: 0.3em 0.8em;
            border: 1px solid rgba(0, 0, 0, .1);
            background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
            border-radius: 0.2em;
            box-shadow: 0 1px 5px gray;
            color: #fff;
            text-shadow: 0 -1px 1px #335166;
            font-size: 1.25em;
            line-height: 1.5s;
        }

现在我们只需要覆盖 background-color的属性就可以得到不同颜色版本的按钮了，

  .button {
            background-color: #c00;
        }

效果图如下
在这里插入图片描述
现在我们的按钮已经非常灵活了，好的，我们明天继续。^^

现在是北京时间2019年6月23日晚上七点15分，为我的迟到抱歉，这两天头好疼啊，昨晚睡觉的时候以为自己见不到明天的太阳了，唉。

a.有的时候 代码易维护和代码量少不可兼得，比如说我们要为一个元素添加一个10px的边框，但是左侧不添加边框，为了简洁，我们可能会这样写
border-width:10px 10px 10px 0
但这种写法其实不利于以后我们更改边框的宽度，我们可以这样写
border-width:10px; border-left-width:0;

b.currentCoor-----css中有史以来的第一个变量
比如说我们想让所有的hr元素自动与文本的颜色保持一致，我们可以这样写

        body {
            color: red;
        }
        
        hr {
            height: 0.5em;
            background: currentColor;
        }

<body>
    今天是2019年11月24日，有雨，心情不好不坏
    <hr>
</body>

此时在页面上展示的效果是这样子的
在这里插入图片描述
c.继承inherit
inherit可以用在任何css属性中，它总是绑定到父元素的计算值，对于伪元素来说会生成该元素的宿主元素，比如说把表单元素的字体设置为与页面的其它部分相同

input,select,button{
            font:inherit;
 }

继承的小案例，inherit对于背景色同样有用，在创建提示框的时候，，希望箭头能够自动继承背景和边框的样式
在这里插入图片描述

<style>
        body {
            font-size: 16px;
        }
        
        .content {
            color: palevioletred;
            text-align: center;
        }
        
        .tips {
            background-color: #8a957a;
            padding: .375em;
            color: #fff;
            border-radius: 4px;
            width: 12.5em;
            position: relative;
            margin: 0 auto;
            border: 2px solid red;
            display: none
        }
        
        .content:hover+.tips {
            display: block;
        }
        
        .tips::before {
            content: '';
            position: absolute;
            top: -.5em;
            left: 6.25em;
            background: inherit;
            border: inherit;
            padding: .35em;
            border-right: 0;
            border-bottom: 0;
            transform: rotate(45deg)
        }
    </style>
</head>

<body>
    <div>
        <h2 class="content">晴天</h2>
        <p class="tips">从前从前有个人爱你很久，但偏偏风渐渐把距离吹得好远，好不容易又能再多爱一天，但故事的最后你好像还是说了拜拜。</p>
    </div>
</body>

bug的生产者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css编码技巧

从今天开始，要好好学习啦，那么就从css揭秘这本书开始吧，哈哈今天开始第一章—css编码技巧1.尽量减少代码重复首先上一段代码，这是一段按钮的样式，在代码的可维护性上出了一点问题 .button { padding: 6px 16px; border: 1px solid #446d88; backgroun...
复制链接

扫一扫

专栏目录