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

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


一、絕對定位

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

 

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

  

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



二、覆蓋全部樣式

寫CSS的時候都應該知道,當你想給一個元素添加一個新的CSS樣式,但這個樣式以前已經被定義過了。此時咱們能夠採用!important來定義。瀏覽器

例如,若是我想在個人網站的特定部分的H3標題是紅色而不是黃色,可使用下面的CSS:
ide

 

.section h3 {color:red !important; }

  


三、居中

居中分不少狀況,通常會分紅文本居中和DIV的內容居中。網站

文本居中
文本居中使用text-align:center; 。若是想讓文本在左右兩側,可使用左側或右側。
spa


DIV內容
DIV內容居中跟文本居中不同。CSS能夠這樣定義:
設計

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

  

把寬度設置爲「100%如下」的緣由是由於若是它是100%寬度,那麼若是是全寬度,而且不須要居中。最好有一個固定的寬度,如60%或550像素等。前端設計


四、垂直對齊(對於一行文本)

要使菜單的高度和文本的行高一致,能夠這麼設置:htm

 

.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標籤作樣式定義,不然特別容易形成用戶在使用上的困惑。經過樣式可讓用戶知道這個連接是否被點擊過,更利於用戶體驗。

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應用於多個類或選擇器

若是你想要在全部圖片,博客部分和側邊欄上添加相同的邊框。你沒必要寫出相同的CSS樣式重複3次。只需列出這些項目,用逗號分隔:

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

  


今天就跟你們分享這麼多吧,這10個是我本身以爲比較重要的css技巧,我在給客戶作網站的過程當中常常會出現。說到建站,給你們推薦一個容易上手的系統:蟬知

好啦,但願新手前端設計師看完這篇文章也能夠有所收穫,若是感興趣的夥伴,也歡迎你們關注小喬的我的博客:小喬設計


相關文章
相關標籤/搜索