20個非常實用的web開發CSS小技巧
在工作中,為了提升工作效率與持續學習,常常會收集整理很多素材,有網站案例原始碼,有片段的程式碼特效,有喜歡UI作品,有LOGO設計案例,總之,只要是自己喜歡的內容,我都會收集,每過一段時間,就會集中時間進行整理。以下就是我收集的一些CSS小技巧,希望能幫助到你,如果你感覺有用,也請你收藏與分享給你的小夥伴們。
1. 文字水平居中
將一段文字置於容器的水平中點,只要設定text-align屬性即可:
text-align:center;
2. 容器水平居中
先該容器設定一個明確寬度,然後將margin的水平值設為auto即可。
div#container { width:760px; margin:0 auto; }
3. 文字垂直居中
單行文字的垂直居中,只要將行高與容器高設為相等即可。
比如,容器中有一行數字。
<div id="container">1234567890</div>
然後CSS這樣寫:
div#container {height: 35px; line-height: 35px;}
如果有n行文字,那麼將行高設為容器高度的n分之一即可。
4. 容器垂直居中
比如,有一大一小兩個容器,請問如何將小容器垂直居中?
<div id="big"> <div id="small"> </div></div>
首先,將大容器的定位為relative。
div#big{position:relative;height:480px; }
然後,將小容器定位為absolute,再將它的左上角沿y軸下移50%,最後將它margin-top上移本身高度的50%即可。
div#small { position: absolute; top: 50%; height: 240px; margin-top: -120px; }
5. 圖片寬度自適應
如何使得較大的圖片,能夠自動適應小容器的寬度?CSS可以這樣寫:
img {max-width: 100%}
6. 3D按鈕
要使按鈕具有3D效果,只要將它的左上部邊框設為淺色,右下部邊框設為深色即可。
div#button { background: #888; border: 1px solid; border-color: #999 #777 #777 #999; }
7. font屬性快捷寫法
font快捷寫法的格式為:
body { font: font-style font-variant font-weight font-size line-height font-family; }
所以,
body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; font-variant: small-caps; font-style: italic; line-height: 150%; }
可以被寫成:
body { font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif; }
8. link狀態設定順序
link的四種狀態,需要按照下面的前後順序進行設定:
a:link a:visited a:hover a:active
9. CSS優先性
如果同一個容器被多條CSS語句定義,那麼哪一個定義優先呢?
基本規則是:
行內樣式 > id樣式 > class樣式 > 標籤名樣式
比如,有一個元素:
<div id="ID" class="CLASS" style="color:black;"></div>
行內樣式是最優先的,然後其他設定的優先性,從低到高依次為:
div < .class < div.class < #id < div#id < #id.class < div#id.class
10. font-size基準
瀏覽器的預設字型大小是16px,你可以先將基準字型大小設為10px:
body {font-size:62.5%;}
後面統一採用em作為字型單位,2.4em就表示24px。
h1 {font-size: 2.4 em}
11. Text-transform和Font Variant
Text-transform用於將所有字母變成小寫字母、大寫字母或首字母大寫:
p {text-transform: uppercase} p {text-transform: lowercase} p {text-transform: capitalize}
Font Variant用於將字型變成小型的大寫字母(即與小寫字母等高的大寫字母)。
p {font-variant: small-caps}
12. CSS重置
CSS重置用於取消瀏覽器的內建樣式,請參考YUI和Eric Meyer的樣式表。
13. 用圖片充當列表標誌
預設情況下,瀏覽器使用一個黑圓圈作為列表標誌,可以用圖片取代它:
ul {list-style: none} ul li { background-image: url("path-to-your-image"); background-repeat: none; background-position: 0 0.5em; }
14. 透明
將一個容器設為透明,可以使用下面的程式碼:
.element { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
在這四行CSS語句中,第一行是IE專用的,第二行用於Firefox,第三行用於webkit核心的瀏覽器,第四行用於Opera。
15. CSS三角形
如何使用CSS生成一個三角形?
先編寫一個空元素
<div class="triangle"></div>
然後,將它四個邊框中的三個邊框設為透明,剩下一個設為可見,就可以生成三角形效果:
.triangle { border-color: transparent transparent green transparent; border-style: solid; border-width: 0px 300px 300px 300px; height: 0px; width: 0px; }
16. 禁止自動換行
如果你希望文字在一行中顯示完成,不要自動換行,CSS命令如下:
h1 { white-space:nowrap; }
17. 用圖片替換文字
有時我們需要在標題欄中使用圖片,但是又必須保證搜尋引擎能夠讀到標題,CSS語句可以這樣寫:
h1 { text-indent:-9999px; background:url("h1-image.jpg") no-repeat; width:200px; height:50px; }
18. 獲得焦點的表單元素
當一個表單元素獲得焦點時,可以將其突出顯示:
input:focus { border: 2px solid green; }
19. !important規則
多條CSS語句互相沖突時,具有!important的語句將覆蓋其他語句。由於IE不支援!important,所以也可以利用它區分不同的瀏覽器。
h1 { color: red !important; color: blue; }
上面這段語句的結果是,其他瀏覽器都顯示紅色標題,只有IE顯示藍色標題。
20. CSS提示框
當滑鼠移動到連結上方,會自動出現一個提示框。
<a class="tooltip" href="#">連結文字 <span>提示文字</span></a>
CSS這樣寫:
a.tooltip {position: relative} a.tooltip span {display:none; padding:5px; width:200px;} a:hover {background:#fff;} /*background-color is a must for IE6*/ a.tooltip:hover span{display:inline; position:absolute;}
最後,如果有想一起學習web前端,HTML5及JavaScript的可以來一下我的前端群733581373,好友都會在裡面交流,分享一些學習的方法和需要注意的小細節,每天也會準時的講一些前端的炫酷特效,及前端直播課程學習
如果想看到更加系統的文章和學習方法經驗可以關注的微訊號:‘web前端技術圈’或者‘webxh6’關注後回覆‘2018’可以領取一套完整的學習視訊