CSS經常使用技巧介紹

時間 2019-11-15

標籤 css 經常使用技巧介紹欄目 CSS 简体版

原文原文鏈接

1. CSS字體定義簡寫規則
通常的寫法會是這樣：

font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

而實際上你能夠用更簡潔的寫法：

font: bold italic small-caps 1em/1.5em verdana,sans-serif

是否是更省事？不過使用這種簡寫須要注意幾點：要使簡寫定義有效必須至少提供 font-size 和 font-family 這兩個屬性；同時font-weight, font-style 以及 font-varient 這幾個屬性若是不作設定的話將默認爲normal。

還有background，border等等.

1. 關於background的寫法

DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}

1）您能夠看到background的第一個定義是一個顏色值這表示在背景圖片失效的時候顏色將起做用。

2）url括號中的引號是沒有必要的，咱們能夠不寫引號

2. 關於Border的寫法，若是您想定義div的四個邊的顏色不一樣，而粗度和樣式都同樣，您能夠這樣寫：

DIV.special{border:1px solid; border-color:color1 color2 color3 color4}

四種顏色一次是上，右，下，左的顏色

顏色相同就合併成：

DIV.special{border:1px solid color4}

2. 同時使用兩個Class定義
通常咱們只會給內容塊指定一個Class，但這並不表明咱們只能指定一個。實際上只要你願意，能夠同時把任意多個Class賦給某塊內容。好比：

多個Class之間用空格分隔便可。當多個Class之間的屬性發生重疊的時候，將根據各個Class在CSS定義文件中被定義的位置，後定義的Class屬性自動覆蓋以前定義的Class屬性（而不是根據你在class="text side"這裏排列的順序來進行覆蓋）

3. CSS border的缺省值
一般咱們定義border屬性都會提供color,width,style這些屬性。好比 border: 3px solid #000 。不過實際上必需要提供的屬性只有style。若是你只寫 border: solid 的話，其餘的屬性自動使用缺省值。border的缺省寬度是medium(大約3px-4px)，缺省的顏色是位於border裏面的內容文字的顏色。若是這些缺省值能夠知足你的要求，你徹底能夠省略這兩項屬性。

4. 專門用於打印的CSS文檔
不少web頁面都會提供一個打印連接，方便用戶使用另外一種適合打印界面的CSS。但實際上你徹底能夠爲你的頁面指定兩個CSS文檔link，這樣瀏覽器會自動調用合適的CSS來用於顯示或打印。好比：

經過指定link的media屬性，瀏覽器就能根據須要來調用特定的CSS文件來處理頁面了。關於打印更多的建議，請參見 Print Different,

5. CSS中的內容垂直對齊
用傳統的table來實現垂直對齊很容易，只要用 vertical-align: middle 就可讓table的內容垂直居中。但這個屬性在CSS裏面卻行不通。
解決方法是把內容的行高設置成與內容塊同樣高。好比你的div高是32px，那就在你的CSS定義裏面添加屬性 line-height: 32px; 這樣文字看上去就垂直居中於層裏面了。不過這個方法只適用於單行文字，對於多行文字，彷佛沒有什麼好方法。

6. 讓背景色可以垂直拉齊到底部
CSS與傳統的table來講另外一個讓人不爽的地方是它的垂直層的對齊。若是你的頁面分爲兩列，其中一列比較長而另外一列比較短，同時兩列的背景色和頁面總的背景色是不一樣的話，顯示出來的效果就比較醜陋，不像table那樣只要把td的高度設成100%就可以把每一列的高度拉到同樣長。
要解決這個問題彷佛只能用一個取巧的辦法，根據每列的寬度和背景色設置背景圖片，讓用戶看上去彷佛拉平了：

body
{
background: url(blue-p_w_picpath.gif) 0 0 repeat-y
}

7. block / inline 屬性
任何一個HTML元素都是block或者inline的。
block元素的特性包括：

老是另起一行開始顯示
height, line-height, top/bottom margin屬性能夠被設置
width缺省值是100%,除非你指定了另外的width值
這一類的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。

inline元素的特性包括：

直接跟在當前行的後面顯示
height, line-height, top/bottom margin屬性不能改變
width值就等於包含其中的文字/圖片的寬度，而且這個值不能被改變
這一類的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。

你能夠經過設置元素屬性display: inline 或 display: block來改變元素的以上特性。

8. 設置頁面的最小寬度
CSS語法中頗有用的一個屬性是 min-width 。經過這個屬性你能夠設置任何元素的最小寬度。也就是說你也能夠用這個來限制頁面顯示的最小寬度。
但有個小問題是：IE瀏覽器沒法爲<body>元素設置min-width，所以要讓這個屬性起做用，咱們須要走點彎路。
首先在<body>後面插入一個<div>：

而後在CSS定義裏面定義最小寬度爲600px：

#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一個屬性是最小寬度定義的標準寫法；第二個屬性則是隻有IE可以理解的javascript表達式。
你也能夠同時設定頁面的最大最小寬度：

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}

9. Text-transform 屬性
這個屬性可能也是CSS當中用的人很少但卻頗有用處的屬性之一。其常見的可用值包括：text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一個將把全部的字母轉化成大寫；第二個將把全部字母轉成小寫；第三個則把每一個單詞的首字母轉成大寫。不過對於非英文網站來講，這個功能確實就沒什麼用了。

10. IE中消失的文字和圖片
IE有個很莫名其妙的Bug：有時候文字或者背景圖片死活顯示不出來。若是你全選整個頁面，會發現那些內容實際上還在那裏，或者從新刷新一下頁面顯示就正常了。
一般來講這個問題都發生在那些跟在浮動元素後面顯示的文字或背景圖片身上。要解決這個問題，能夠試試給你的那些消失的元素加上position: relative 屬性。若是還不行，再試試設置一下width屬性。通常來講這樣作以後問題就解決了。

11. 顏色的縮寫

咱們能夠將#ff0033縮寫成#f03

17. 關閉輸入法狀態

使用戶只能輸入英文狀態下的字符，相似輸入密碼

input {ime-mode: disabled ; }