CSS48個技巧是網(wǎng)頁設計必備知識點,下面給大家分享一些最常用的技巧。
1. 使用!important 指定優(yōu)先級
有時候,多個CSS屬性定義了相同的選擇器,往往會造成樣式?jīng)_突,此時我們可以通過!important 指定優(yōu)先級,例如:
pre {
color: #00FFFF!important;
}
2. 元素水平居中
為了讓元素水平居中,可以設置margin-left和margin-right為auto。例如:
pre {
margin-left: auto;
margin-right: auto;
}
3. 元素垂直居中
為了讓元素垂直居中,可以設置position:relative; top:50%;以及transform: translateY(-50%);。例如:
pre {
position: relative;
top: 50%;
transform: translateY(-50%);
}
4. 給表格添加邊框
為了讓表格看起來更具有邊框感,需要在CSS中添加如下代碼:
pre {
border: 1px solid #000;
}
5. 解決浮動引起的高度塌陷
當元素浮動時,有時候會產(chǎn)生高度塌陷的問題,在此情況下我們可以使用clearfix方式解決,如下代碼:
pre:before, pre:after {
content: "";
display: table;
}
pre:after {
clear: both;
}
6. 設置不同的鏈接狀態(tài)
為了讓鏈接狀態(tài)更加突出,可以為不同狀態(tài)添加不同的樣式,例如:
pre a:link {
color: #FF0000;
}
pre a:hover {
color: #0000FF;
}
pre a:visited {
color: #000000;
}
7. 設置背景圖片
為了為元素設置背景圖片,需要在CSS中添加如下代碼:
pre {
background-image: url("image.png");
}
8. 在元素上添加陰影
為了為元素添加陰影效果,需要在CSS中添加如下代碼:
pre {
box-shadow: 5px 5px 5px #888888;
}
9. 調(diào)整列表的樣式
為了調(diào)整列表的樣式,可以為元素添加如下代碼:
pre ol li {
list-style-type: decimal;
}
pre ul li {
list-style-type: square;
}
10. 設置文本溢出處理方式
為了讓文本溢出時有更好的處理方式,需要在CSS中添加如下代碼:
pre {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
以上就是本文分享的CSS48個技巧,希望對網(wǎng)頁設計有所幫助。
上一篇css42個基礎技巧
下一篇mysql查看表格字段名