前端設計師必須知道的10個重要的CSS技巧

對於一個初入門的前端設計師，在設計修改網站前端的時候，我們需要編寫一些CSS、JS的內容達到介面效果。今天分享10個對於前端設計師來說重要的CSS技巧，這也是我在給許多客戶做網站的過程當中總結出來的。

在絕大過程中，想確定一個元素在網站當中的固定位置，絕對定位是實現這個方式的解決辦法。在網頁當中，絕對定位可精確的控制元素在網頁當中的位置，我們可使用頂部、底部、左側和右側，附上一個畫素值來控制元素所在的位置。

position:absolute;top:50px;right:50px

上面的CSS設定一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內使用絕對定位。

寫CSS的時候都應該知道，當你想給一個元素新增一個新的CSS樣式，但這個樣式之前已經被定義過了。此時我們可以採用！important來定義。

例如，如果我想在我的網站的特定部分的H3標題是紅色而不是黃色，可以使用下面的CSS：

.section h3 {color:red !important; }

居中分很多情況，一般會分成文字居中和DIV的內容居中。

文字居中
文字居中使用text-align：center; 。如果想讓文字在左右兩側，可以使用左側或右側。

DIV內容
DIV內容居中跟文字居中不一樣。CSS可以這樣定義：

#div1 { display: block; margin: auto; width: anything under 100% }

把寬度設定為“100％以下”的原因是因為如果它是100％寬度，那麼如果是全寬度，並且不需要居中。最好有一個固定的寬度，如60％或550畫素等。

要使選單的高度和文字的行高一致，可以這麼設定：

.nav li{line-height:50px; height:50px;}

這適用於按鈕，文字連結，網站的部分，圖示等等。如果你想做一個懸停效果，可以試試：

.entry h2{font-size:36px; color:#000; font-weight:800;}  .entry h2:hover{color:#ffeb3b;}

這個功能可以讓你的h2標籤的顏色從黑色變成黃色。

對於懸停效果，如使用選單或網站上的影像，我們肯定不希望顏色快速貼近結果，所以我們可以通過使用時間變化來達到過渡的效果。

.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}

這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。

我們在遇到a標籤的時候，一定要給a標籤做樣式定義，否則特別容易造成使用者在使用上的困惑。通過樣式可以讓使用者知道這個連結是否被點選過，更利於使用者體驗。

a:link {color: blue; } a:visited {color: red; }

說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應效果。作為一個新手，我相信這個效果肯定有很多人都想做，當然，我提供的方法也只是其中的一種：

img {max-width:100%;height:auto;}

這個樣式意味著最大的影像可能是100％，並根據影像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。

如果ni不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，請使用子元素選擇器：

h1 > strong {color:red;}

特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：

li:nth-child(n)

具體的使用方法可以去w3school上看。

如果你想要在所有圖片，部落格部分和側邊欄上新增相同的邊框。你不必寫出相同的CSS樣式重複3次。只需列出這些專案，用逗號分隔：

.blog,img,.sidebar {border: 1px solid #000;}

今天就跟大家分享這麼多吧，這10個是我自己覺得比較重要的css技巧，我在給客戶做網站的過程中經常會出現。說到建站，給大家推薦一個容易上手的系統：蟬知。

好啦，希望新手前端設計師看完這篇文章也可以有所收穫，如果感興趣的夥伴，也歡迎大家關注小喬的個人部落格：小喬設計。

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。