9個非常有用的CSS網頁設計技巧
CSS也叫層疊樣式表，它現在是web開發不可或缺的一部分。開發者可以對任何頁面中的任意元素使用CSS，使之前認為不可能的效果成為可能。如果你有正確的源代碼，你可以輕易改變本空間、下劃鏈接和其他一些之前認為是不可改變的一些東西。隨著移動瀏覽的流行，響應式設計也變得流行起來。這里，我們會討論一些最常用的CSS技巧，這些都在網頁設計的開發和設計中發揮著重要作用。作為開發者都知道維護網站比設計網站更難，所以開發者必須懂得網頁布局平衡的藝術并得確保任何元素或鏈接都是好的。
下面讓我們來看看那些在網頁設計中扮演重要角色的幾個簡單易用的CSS吧。
1、消除下劃線
我們都知道，CSS的進入使網頁開發有了很多改變。所有文本鏈接的下劃線將不復存在。從網頁盛行，如果你瀏覽網頁時也應該注意到了其實文本鏈接標注下劃線也就為了突出他們。不過現在由于CSS代碼的出現，文本鏈接的下劃線可以通過很簡單的代碼就去掉。
下面是去除下劃線的簡單代碼：
<style type=”text/css”>
a {
text-decoration:none;
}
</style>
應用這段代碼，便可去除文本鏈接中的下劃線。我個人認為，沒有下劃線的文本鏈接好看多了。當然，這只是個人喜好并非最新趨勢或是網頁設計的要求。帶下劃線的文本鏈接也是可以的。
2、響應視頻
為了嵌入視頻并使其自適應長寬，我們為所有開發人員準備了一個非常有用的CSS技巧。在我進一步之前，我想引入介紹這個CSS技巧并幫助很多開發者嵌入交互視頻的網站tjkdesign.com
.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
3、鏈接變色
鏈接變色最近獲得很高的人氣特別是在移動瀏覽盛行之后。創建一個滾動的效果也并不難，只需要幾行代碼。這段代碼不僅從整體上修飾了代碼，還讓當鼠標經過時文字變色。
<style type="text/css">
a:hover{
color:red;
}
</style>
只是更進一步說，之前提到的消除下劃線的那段代碼和上面的代碼都需要加入頭部信息。還有，如果你想用你選擇的顏色，你用你想要的顏色替換掉‘red’就可以了。
4、最小寬度和最大寬度
最大寬度屬性幫助開發者限制文本或其他元素的寬度。最大寬度的目的是把你的元素限制在邊界線以內。使用下面的代碼就可以限制最大寬度，你還可以根據你的需要改變數值。
.container {
width: 800px;
max-width: 90%;
}
- 自適應圖片大小
下面的代碼可以幫你根據限制的寬度自動調節圖片大小。你需要做的就是設最大寬度為100%高度自適應。
img {
max-width: 100%;
height: auto;
}
不過對IE8上面的代碼需要做些許調整，因為上面的代碼只對IE7和IE9起效。對IE8如下：
@media \0screen { img { width: auto; /* for ie 8 */ } }
- 最小寬度
要時刻記得最大寬度和最小寬度的區別。最大寬度把所有元素限制在框內，而最小寬度為文本或其他元素設置最小寬度。不過應用這個樣式，到達最小寬度后你的網頁不會更進一步按比例縮小。
5、CSS設置背景圖片
一些開發者喜歡通過表格來設置背景圖片或塊級元素。如果你也是這樣你應該很樂意知道用CSS代碼使塊級元素包括任一方形區域加上背景圖片。它是可以是段落或者標題。同樣的，加入你想要的背景圖片你只需要加入以下代碼：
<div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;">Example of a DIV element with a background image:</div> <div style="background-image: url(../images/test-background.gif); height: 200px; width: 400px; border: 1px solid black;"> </div>
6、相對值
相對值在響應式的網頁設計中相當有用。如果你想得到最好的效果，你應該知道什么時候使用這些值讓它發揮最大益處。這樣它將幫你得到最好的布局效果。
- 相對字體大小
對字體大小，你要做的就是使用相對單位像em或百分值（%）。這樣很容易控制字體大小、行距和行高的多少。這樣你想做任何調整只需要改變父級元素便可。
- 相對百分比內邊距
通過下面的截圖，你會理解使用百分值的內邊距要比固定內邊距要好得多。它可以根據你的每一次調整做出相應改變，這就是為什么百分值的內邊距會更有效。
7、有趣的邊框
下面另一個好用的CSS技巧是幫你無時的變化邊框。如果你想高亮你的邊框，用用下面的代碼吧。
border-bottom: 2px solid #427AA8;
你可以根據你的需求改變值。
8、斷字
CSS技巧也包括包住一個文本讓它不出現在一行，因為這樣實在不好看。下面的代碼幫你行內斷字。
.break-word {
word-wrap:break-word;
}
9、overflow hidden屬性技巧
默認顯示相反的就是隱藏。它會隱藏超出盒子的任何東西。
總結
這里有對響應式網頁設計最有用的CSS技巧。這些技巧應用到你的網頁中確實會有幫助。有了CSS，你不必堅持你之前開發的東西，你可以通過簡單的代碼做出改變。
英文原文 , OSChina.NET翻譯