10 techniques CSS peu connues_CSS/HTML

WBOY

Libérer： 2016-05-16 12:11:37

original

1106 Les gens l'ont consulté

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。

如果你得到原作者或原发表网站的授权，可以自由使用本翻译。

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文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写

...

也不能这样写

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 }

Achten Sie darauf, die Bildhöhe durch die Höhe des echten Bildes zu ersetzen. Hier wird das Bild als Hintergrund angezeigt und da die Einrückung auf -2000 Pixel eingestellt ist, erscheint der echte Text 2000 Punkte auf der linken Seite des Bildschirms und ist unsichtbar. Aber Leute, die das Bild ausschalten, können es möglicherweise überhaupt nicht sehen, seien Sie also vorsichtig.

6. Eine weitere Anpassungstechnik für das CSS-Box-Modell

Die Anpassung dieses Box-Modells gilt hauptsächlich für IE-Browser vor IE6. Sie zählen die Rahmenbreite und den Leerraum in die Elementbreite. Zum Beispiel:

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

Nennen Sie es so:

...

Die volle Breite des Felds sollte jetzt 150 Punkte betragen, was in allen Browsern außer IE vor IE6 korrekt ist. Aber in Browsern wie IE5 beträgt die volle Breite immer noch 100 Punkte. Dieser Unterschied kann mit der von früheren Leuten erfundenen Box-Anpassungsmethode behoben werden.

Doch derselbe Zweck kann mit CSS erreicht werden, um eine konsistente Anzeige zu gewährleisten.

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

Rufen Sie so an:

...

Auf diese Weise beträgt die Breite unabhängig vom Browser 150 Punkte.

7. Blockelemente in der Mitte ausrichten

Wenn Sie eine Webseite mit fester Breite erstellen möchten und die Webseite horizontal zentriert sein soll, sieht das normalerweise so aus:

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

Sie würden

verwenden, um alle Elemente zu umgeben. Das ist einfach, aber nicht gut genug, und Versionen vor IE6 zeigen diesen Effekt nicht. Ändern Sie das CSS wie folgt:

body { text-align: center } #content { text-align: left; width: 700px }

Dadurch wird der Inhalt der Webseite zentriert, daher habe ich

zum Inhalt hinzugefügt.

text-align: left .

8. Verwenden Sie CSS für die vertikale Ausrichtung

Eine vertikale Ausrichtung lässt sich ganz einfach mithilfe von Tischen erreichen. Stellen Sie einfach die Tischeinheit vertikal aus: Mitte. Aber das ist mit CSS nutzlos. Wenn Sie eine Navigationsleiste auf eine Höhe von 2 cm festlegen möchten und möchten, dass der Navigationstext vertikal zentriert ist, ist das Setzen dieses Attributs nutzlos.

Was ist die CSS-Methode? Stellen Sie übrigens die Zeilenhöhe dieser Wörter auf 2em ein: line-height: 2em und fertig.

9. CSS-Positionierung innerhalb des Containers

Ein Vorteil von CSS besteht darin, dass Sie ein Element beliebig positionieren können, sogar innerhalb eines Containers. Zum Beispiel für diesen Container:

#container { position: relative }

Auf diese Weise werden alle Elemente im Container relativ positioniert. Sie können es wie folgt verwenden:

Wenn Sie 30 Punkte von links und 5 Punkte von oben lokalisieren möchten, können Sie Folgendes tun:

#navigation { position: absolute; oben: 5px }

Natürlich können Sie auch Folgendes tun:

Rand: 5px 0 0 30px

Beachten Sie, dass die Reihenfolge der 4 Zahlen ist: oben, rechts, unten, links. Natürlich ist manchmal die Positionierung statt der Ränder besser.

10. Hintergrundfarbe direkt am unteren Bildschirmrand

Die Steuerung in vertikaler Richtung liegt außerhalb der Möglichkeiten von CSS. Wenn Sie möchten, dass die Navigationsleiste wie die Inhaltsleiste direkt zum Ende der Seite reicht, ist die Verwendung einer Tabelle sehr praktisch, wenn Sie jedoch nur CSS wie dieses verwenden:

#navigation {Hintergrund: blau; Breite: 150px}

Eine kürzere Navigationsleiste reicht nicht direkt nach unten, sondern endet, wenn der Inhalt auf halbem Weg endet. Was zu tun?

Leider besteht die einzige Möglichkeit zum Betrügen darin, der kürzeren Spalte ein Hintergrundbild hinzuzufügen, dessen Breite der Spaltenbreite entspricht und dessen Farbe mit der eingestellten Hintergrundfarbe übereinstimmt.

Körper { Hintergrund: url(blue-image.gif) 0 0 Wiederholungs-y }

Sie können derzeit nicht em als Einheit verwenden, da der Trick dann aufgedeckt wird, sobald der Leser die Schriftgröße ändert, und Sie nur px verwenden können.

Originalquelle:
http://blog.csdn.net/zhoujian2003/archive/2006/04/28/696012.aspx