你當前所在位置:首頁 > 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的技巧還有很多很多,我們會在后續文章中根據不同用途給大家分類介紹。如果想學習更多軟件開發方面的知識,可多多關注我們哦!

課程預約

极速1分彩_Welcome