你当前所在位置:首页 > IT技术探讨 > 10个CSS技巧让你前端工作更轻松

10个CSS技巧让你前端工作更轻松

掌握这10个CSS实用技巧可让你的前端工作更轻松,尤其是初学前端的小白,即使现在看不懂也可收藏起来,以备需要时用上。如果你是高手有话要说,欢迎在留言区发表高见。

 

废话不多说,直接上干货:


CSS技巧 (1).jpg

干货来了,赶紧做笔记。。。


 

一、使用 :not() 在菜单上应用/取消应用边框

 

我们通常的做法是先给每个菜单项设置边框,然后再设置最后一个菜单的边框为零。

 

1

/* add border */

.nav li {

  border-right: 1px solid #666;

}

 

//* remove border */

.nav li:last-child {

  border-right: none;

}

2

3

4

5

6

7

8

9

 

其实不需要这么麻烦,使用 :not() 伪类即可达到同样的效果,而且代码更干净,易读。

 

1

.nav li:not(:last-child) {

  border-right: 1px solid #666;

}

2

3

 


二、使用counter()在列表中自动添加序号

 

使用它,你能方便的在页面标题,区块和其它各种连续出现的页面内容上添加序号。有了它,你就不必限制于只能使用

  1. 来实现这个效果,你可以更灵活的在页面上使用自定义数字序列。

 

1

body {

counter-reset: choose;

}

h4:before {

counter-increment: choose;

content: "Choose #" counter(choose) ".";

}

2

3

4

5

6

7

 


三、使用calc()做算术

 

这个函数可以执行简单的算术计算,例如计算元素的长宽,不用写JS代码。这个函数支持所有简单的基本算术运算,包括加减乘除。

 

1

.parent {

width: 100%;

position: relative;

}

 

.child {

position: absolute;

left: 100px;

width: calc(90% - 100px);

}

2

3

4

5

6

7

8

9

10

 


四、使用:nth-child(n)选择项目


:nth-child(3) 表示选择列表中的第三个元素 

:nth-child(2n)表示列表中的偶数标签,即选择第2、第4、第6……标签 

:nth-child(2n-1) 表示选择列表中的奇数标签,即选择 第1、第3、第5、第7……标签 

:nth-child(n+3) 表示选择列表中的标签从第3个开始到最后(>=3) 

:nth-child(-n+3) 表示选择列表中的标签从0到3,即小于3的标签(<=3) 

:nth-last-child(3) 表示选择列表中的倒数第3个标签 

:nth-of-type(n) 匹配属于父元素的特定类型的第 N 个子元素的每个元素

 

(注:第一个子元素的下标是1)

 


五、在CSS中用attr()显示HTML属性值

 

attr()功能早在CSS 2.1标准中就已经出现,它能通过CSS获取到html上的属性,在很多情况下都能帮你省去了以往需要Javascript处理的过程。

 

要想使用这个功能,你需要用到三种元素:一个:before或:afterCSS伪类样式,.content属性,和一个带有HTML属性名称的attr()表达式。


1

h3:before {

    content: attr(data-id) " ";

}

<h3 data-id="1">This is a h3</h3>

2

3

4

 

注:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。

 


六、给 body添加行高

 

你不需要分别添加 line-height ,只要添加到 body 即可。

 

1

body {

line-height: 1;

}

2

3

 

这样文本元素就可以很容易地从 body 继承。

 


七、表格列宽自适用

 

当要调整表格列宽时,是比较痛苦的。这里有一个可以使用的技巧:给td元素添加white-space: nowrap;能让文本正确的换行。

 

1

td {

    white-space: nowrap;

}

2

3

 


八、包裹长文本

 

如果你碰到一个比自身容器长的文本,默认时,不管容器的宽度,文本都将水平填充。如下图:

 

CSS技巧 (2).jpg


这里,采用简单的CSS代码就能在容器中调整文本:

 

1

pre {

    white-space: pre-line;

    word-wrap: break-word;

}

2

3

4

 

效果如下图:


CSS技巧 (3).jpg



九、实现loading省略号动画

 

使用CSS3的帧动画来模拟loading文字后面的3个小省略号的动画效果,对于简单的加载状态是很有用的,而不用去使用gif图像。

 

1

.loading:after {

    overflow: hidden;

    display: inline-block;

    vertical-align: bottom;

    animation: ellipsis 2s infinite;

    content: "\2026"; /* ascii code for the ellipsis character */

}

@keyframes ellipsis {

    from {

        width: 2px;

    }

    to {

        width: 15px;

    }

}

2

3

4

5

6

7

8

9

10

11

12

13

14

15

 


十、背景渐变动画

 

CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色、透明度、元素大小添加动画。目前,你不能为渐变添加动画,但下面的代码可能有帮助。它通过改变背景位置,让它看起来有动画效果。

 

1

button {

    background-image: linear-gradient(#5187c4, #1c2f45);

    background-size: auto 200%;

    background-position: 0 100%;

    transition: background-position 0.5s;

}    

button:hover {

    background-position: 0 0;

}

2

3

4

5

6

7

8

9

 


以上这10个CSS实用技巧,你学会了吗?当然,关于CSS的技巧还有很多很多,我们会在后续文章中根据不同用途给大家分类介绍。如果想学习更多软件开发方面的知识,可多多关注我们哦!

课程预约