生活小技巧

作者: 前端知识  发布:2019-08-01

CSS小技巧

2015/09/30 · CSS · CSS

原文出处: simurai   译文出处:大漠   

CSS中的级联(cascade)在同一时间可谓是幸福的,也可以说是痛苦不堪的。通常能工作得非常好,但有问题的时候,也让人们都很激动,甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难,可以说CSS的困难无处不在。

在这篇文章中,我将通过一些示例来向大家展示一些CSS的小技巧,让你知道如何使用CSS的级联能变得更友好,也减少一些不必要的需求,从而也减少权重上遇到的麻烦。

CSS小技巧,生活小技巧

原文出处: simurai   译文出处:大漠   欢迎分享原创到伯乐头条

CSS中的级联(cascade)在同一时间可谓是幸福的,也可以说是痛苦不堪的。通常能工作得非常好,但有问题的时候,也让人们都很激动,甚至事件中也离开不CSS。我们所涉及的不仅是CSS的级联也还涉及到CSS的权重。不是说碰到特殊问题才显得困难,可以说CSS的困难无处不在。

在这篇文章中,我将通过一些示例来向大家展示一些CSS的小技巧,让你知道如何使用CSS的级联能变得更友好,也减少一些不必要的需求,从而也减少权重上遇到的麻烦。

技巧一

每当你写CSS时,你想尽可能的回到树形顶部。换句话说,回到:root

例如,我们的网站有一个侧边栏,希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样:

<body> <main class=“Posts”> <aside class=“SideBar”> <nav class=“Nav”> <p class=“Bio”>

1
2
3
4
5
<body>
    <main class=“Posts”>
    <aside class=“SideBar”>
        <nav class=“Nav”>
        <p class=“Bio”>

CSS是这样写的:

CSS

.Bio { font-size: .8em; line-height: 1.5; color: #888; }

1
2
3
4
5
.Bio {
    font-size: .8em;
    line-height: 1.5;
    color: #888;
}

这样写是能正常工作的,并不存在样式上的问题。但是,侧边栏还有一个导航 nav ,很有可能他们有一些样式是相同的。在我们这个示例中 font-size 和 color 都是相同的。让我们把这些属性从 nav 和 .Bio 中提取出来,并且将它们添加到其父元素 .SideBar 中:

CSS

.SideBar { font-size: .8em; color: #888; }

1
2
3
4
.SideBar {
    font-size: .8em;
    color: #888;
}

事实证明,在 .Posts 中已经设置了 line-height:1.5; 。似乎整个页面都使用了相同的行高,那么我们可以将 .Bio 和 .Posts 中的 line-height 移到根元素中:

CSS

:root { line-height: 1.5; }

1
2
3
:root {
    line-height: 1.5;
}

这看起来是一个CSS常识,但他也不会太关注兄弟元素定义同样的事情。这也让你发现,有一些代码产生重复。其实这并不可怕,因为我们只需要花点时间重新重构代码,但这样保持了CSS的代码处理健康状态。

金沙澳门官网网址 1

在树支上写样式,而不应该在树叶上写样式

技巧一

每当你写CSS时,你想尽可能的回到树形顶部。换句话说,回到:root。

例如,我们的网站有一个侧边栏,希望在这个侧边栏上添加一个简短的个人介绍。其HTML的结构看起来可能会像这样:

   

1 2 3 4 5 <body>     <main class=“Posts”>     <aside class=“SideBar”>         <nav class=“Nav”>         <p class=“Bio”>

CSS是这样写的:

          CSS  

1 2 3 4 5 .Bio {     font-size: .8em;     line-height: 1.5;     color: #888; }

这样写是能正常工作的,并不存在样式上的问题。但是,侧边栏还有一个导航 nav ,很有可能他们有一些样式是相同的。在我们这个示例中 font-size 和 color 都是相同的。让我们把这些属性从 nav 和 .Bio 中提取出来,并且将它们添加到其父元素 .SideBar 中:

          CSS  

1 2 3 4 .SideBar {     font-size: .8em;     color: #888; }

事实证明,在 .Posts 中已经设置了 line-height:1.5; 。似乎整个页面都使用了相同的行高,那么我们可以将 .Bio 和 .Posts 中的 line-height 移到根元素中:

          CSS  

1 2 3 :root {     line-height: 1.5; }

这看起来是一个CSS常识,但他也不会太关注兄弟元素定义同样的事情。这也让你发现,有一些代码产生重复。其实这并不可怕,因为我们只需要花点时间重新重构代码,但这样保持了CSS的代码处理健康状态。

金沙澳门官网网址 2

在树支上写样式,而不应该在树叶上写样式

技巧二

样式总是作为特定属性组合出现

金沙澳门官网网址 ,一个很好的例子就是 color 和 bakground-color 的组合。除非你只做小调整,不然你需要一起调整他们。当给一个元素添加背景颜色时,它可能不包含任何文本,但可能会有一些子元素。因此,我们一起设置前景色(color)和背景色(background-color),我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时,不需要到处寻找需要修改的文本颜色,因为他们都以一个组合的形式出现在一起。

金沙澳门官网网址 3

技巧二

样式总是作为特定属性组合出现

一个很好的例子就是 color 和 bakground-color 的组合。除非你只做小调整,不然你需要一起调整他们。当给一个元素添加背景颜色时,它可能不包含任何文本,但可能会有一些子元素。因此,我们一起设置前景色(color)和背景色(background-color),我们总是可以确定这些元素不会遇到任何易读性和对比问题。下次我们改变背景色时,不需要到处寻找需要修改的文本颜色,因为他们都以一个组合的形式出现在一起。

金沙澳门官网网址 4

本文由金沙澳门官网发布于前端知识,转载请注明出处:生活小技巧

关键词: 金沙澳门官网

上一篇:浅析页面绘制时间,Web品质优化种类
下一篇:没有了