1.导论--CSS编写技巧2

本小节内容是一些小的知识点，比较零散
目录
1.CSS易维护性 v.s.简洁

2.currentColor-当前的标签所继承的文字颜色

3.inherit-继承父元素的相应属性

4.视觉误差

---

1. CSS易维护性 v.s.简洁

代码示例1
简洁的代码

border-width: 10px 10px 10px 0;

易维护的代码

border-width: 10px;
border-left-width: 0;

分析：
简洁的代码 1.我们需要编辑3次
易维护的代码 1.编辑次数变少 2.易阅读

---

2. currentColor-当前的标签所继承的文字颜色

代码示例2
html

<div>
     this is div
     <p>this is p</p>
</div>

css

p{   
    color:deeppink;
    text-shadow: 10px 10px 10px currentColor;
}

currentColor效果图

---

3.inherit-继承父元素的相应属性

代码示例3
html

<div class="callout"> 
   Only letters,numbers,underscores(_) and hyphens (-) allowed!
</div>

css

.callout{
    position:relative;
}

.callout::before {
    content: '';
    position: absolute; 
    top: -.4em;  
    left: 1em;  
    padding: .35em;
    background: inherit;   
    border: inherit;  
    border-right: 0;  
    border-bottom: 0; 
    transform: rotate(45deg); 
}

**background: inherit; **
**border: inherit; **

继承了父级背景色和边框色

---

4.视觉误差

人眼总会把黄色线误认为文字留白线
而浏览器则认为是黑线

原图
两侧比上下窄

因此我们可以把上下两侧的padding留白设置大于左右两侧

---