CSS_CSS/HTML の使用に関する 20 のヒント

1. CSS字体属性简写规则

一般用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 ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：

...

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：

border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：

Buy widgets

但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1
{
background: url(widget-image.gif) no-repeat;
height: image height
text-indent: -2000px
}

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box
{
width: 100px;
border: 5px;
padding: 20px
}

这样调用它：

...

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box
{
width: 150px
}

#box div
{
border: 5px;
padding: 20px
}

这样调用：

...

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：

#content
{
width: 700px;
margin: 0 auto
}

你会使用

来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body
{
text-align: center
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto
}

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：

#container
{
position: relative
}

这样容器内所有的元素都会相对定位，可以这样用：

...

如果想定位到距左30點，距上5悖梢哉庋?BR>
#navigation
{
position: absolute;
left: 30px;
top: 5px
}

當然，你還可以這樣：

margin: 5px 0 0 30px

注意4個數字的順序是：上、右、下、左。當然，有時候定位的方法而不是邊距的方法比較好。

10. 直通到螢幕底部的背景色

在垂直方向是進行控制是CSS所不能的。如果你想讓導覽列和內容列一樣直通到頁面底部，用表格是很方便的，但如果只用這樣的CSS：

#navigation
{
background: blue;
width: 150px
}

較短的導航條是不會直通到底部的，半路內容結束時它就結束了。怎麼辦呢？

不幸的是，只能採用欺騙的手段了，給這較短的一欄加上個背景圖，寬度和欄寬一樣，並讓它的顏色和設定的背景色一樣。

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

此時不能用em做單位，因為那樣的話，一旦讀者改變了字體大小，這個花招就會露餡，只能使用px。

11. Block與inline元素對比
所有的HTML元素都屬於block和inline之一。 block元素的特點是：
總是在新行開始；
高度，行高以及頂和底邊距都可控制；
寬度缺省是它的容器的100%，除非設定一個寬度

,

,

,

,

和
• 是區塊元素的例子。相反地​​，inline元素的特徵是：
  和其他元素都在一行上；
  高，行高及頂和底邊距不可改變；
  寬度就是它的文字或圖片的寬度，不可改變。
  , , , , , 和是inline元素的例子。

  用code class="inline">display: inline 或display: block指令就可以改變一個元素的這個特性。什麼時候需要改變這個屬性呢？
  讓一個inline元素從新行開始；

  讓塊元素和其他元素保持在一行上；

  控制inline元素的寬度（對導航條特別有用）；

  控制inline元素的高度；

  無須設定寬度即可為一個區塊元素設定與文字同寬的背景色。

   

  12. 再來一個box駭客方法

  之所以有這麼多box駭客方法，是因為IE在6之前對box的理解跟別人都不一樣，它的寬度要包含邊線寬和空白。要讓IE5等同其他瀏覽器保持一致，可以用CSS的方法：

  padding: 2em;
  border: 1em solid green;
  width: 20em;
  width/**/:/**/ 14em;
  

  第一個寬度所有瀏覽器都認得，但IE5.x不認得第2行的寬度設置，只因為那一行上有空白的註釋符號（多麼愚蠢的語法分析！），所以IE5.x就用20減掉一些空白，而其他瀏覽器會用14這個寬度，因為它是第2行，會覆蓋掉第1行。

  13. 頁的最小寬度

  min-width是個非常方便的CSS指令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當作最小寬度來使。為了讓這項指令在IE上也能用，可以把一個

  放到 標籤下，再為div指定一個類別：
  

  
  

  }
  

  第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上透過Javascript的判斷來實現最小寬度。

  同樣的辦法也可以為IE達到最大寬度：
  

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

  14. IE與寬度與高度的問題

  IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裡這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設定寬度和高度。

  例如要設定背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：
  

  .box
  {
  width: 80px;
  height: 35px;
  }

  html>body .box
  {
  幅: 自動;
  高さ: 自動;
  最小幅: 80px;
  最小高さ: 35px;
  }
  

  すべてのブラウザは最初のボックス設定を使用できますが、IE はサブセレクター コマンドを使用するため、設定の 2 番目の段落を認識しません。 2 番目の設定はより具体的であるため、最初の設定はオーバーライドされます。

  5. フォント変換コマンド

  text-transform コマンドは便利です。このコマンドには 3 つの値があります: text-transform: uppercase、text-transform: lowercase、text-transform: Capitalize。 1 つ目はテキストをすべて大文字に変更し、2 つ目はすべて小文字に変更し、3 つ目は最初の文字を大文字に変更します。これは、ピンイン テキストの場合に非常に便利です。入力時に大文字小文字の間違いがあったとしても、Web ページには表示されません。

  16. IEで画像の文字が消える問題

  テキストや背景画像が突然消えて、更新後に再び表示されるという問題が発生することがあります。これは、フローティング要素の近くにある場合に発生する可能性が高くなります (注: 私は見たことがありません)。この時点で、消える要素に対して位置:相対を設定できます。それが機能しない場合は、これらの要素の幅を指定することを検討してください。

  17. 非表示のテキスト

  印刷や小さい画面など、Web ページのテキストをブラウザーに表示したくない理由に関係なく、 display: none を使用できます。これは非常に単純ですが、人によっては少し役に立たない場合があるため、このコントロールを削除して、position: left: -9000px を使用することができます。

  これは実際にページの外に表示されるテキストを指定します。

  18. ハンドヘルドデバイス用に特化した CSS を設計します

  つまり、携帯電話/PDA などの小さな画面を使用するユーザーは、Web ページの表示をより快適にするために特別に CSS を設計できます。これを行うには、ブラウザ ウィンドウを幅 150 ポイントに調整して効果を確認します。ハンドヘルド固有の CSS を指定する構文は次のとおりです:

  専用のハンドヘルド デバイスの在庫状況も読み取ることができます。

  19. 3D効果ボタン

  以前は、クリックすると変化する 3D 効果を備えたボタンを作成したい場合は、CSS を使用する必要がありました。
  

  a
  {
  表示: ブロック;
  境界線: 1 ピクセルの実線;
  境界線の色: #aaa #000 #000 #aaa;
  幅: 8em;
  背景: #fc0;
  }

  a:ホバー
  {
  位置: 相対;
  上: 1px;
  左: 1px;
  境界線の色: #000 #aaa #aaa #000;
  }
  

  エフェクトに関しては、自分で調整することもできます。

  20. 異なるページで同じナビゲーション コードを使用します

  多くの Web ページにはナビゲーション メニューがあります。特定のページに入ると、メニュー上の対応する項目が灰色になり、他のページが点灯します。通常、この効果を実現するには、各ページ専用のプログラムまたはデザインを作成する必要がありますが、CSS を使用してこの効果を実現できるようになりました。

  まず、ナビゲーション コードで CSS クラスを使用します。
  

  
  
  • ホーム
  
  
  • 会社概要
  
  
  • お問い合わせ
  
  

  
  

  次に、各ページの Body に、上記のクラスと同じ名前の ID を指定します。

  など。

  次に、CSS を次のように設計します。
  

  #home .home、#about .about、#about .about
  {
  強調表示されたナビゲーションのコマンドはここに移動します
  }
  

  ここで、ID が home に設定されている場合、.home が有効になります。つまり、クラスが home に設定されているナビゲーション バーの行に特殊効果が表示されます。他のページも同様です。