20 Tipps zur Verwendung von CSS_CSS/HTML

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
}

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

...

Was können Sie tun, wenn Sie 30 Punkte von links und 5 Punkte von oben lokalisieren möchten?
#navigation
{
Position: absolut;
links: 30px;
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 wiederholen-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.

11. Vergleich zwischen Block- und Inline-Elementen
Alle HTML-Elemente sind entweder Block- oder Inline-Elemente. Die Eigenschaften des Blockelements sind:
Beginnen Sie immer in einer neuen Zeile Höhe, Zeilenhöhe sowie oberer und unterer Rand können gesteuert werden Die Breite beträgt standardmäßig 100 % des Containers, sofern keine Breite festgelegt ist

,

,

,

,

sind Beispiele für Blockelemente. Im Gegenteil, die Eigenschaften des Inline-Elements sind:
und andere Elemente in derselben Zeile;
Höhe, Zeilenhöhe sowie oberer und unterer Rand können nicht geändert werden Die Breite entspricht der Breite des Textes oder Bildes und kann nicht geändert werden.
, , , , sind Beispiele für Inline-Elemente.

Verwenden Sie den Befehl code class="inline">display: inline oder display: block, um diese Funktion eines Elements zu ändern. Wann müssen Sie dieses Attribut ändern?
Lassen Sie ein Inline-Element in einer neuen Zeile beginnen;
Blockelemente in einer Zeile mit anderen Elementen halten;


Kontrollieren Sie die Breite von Inline-Elementen (besonders nützlich für Navigationsleisten);

Kontrollieren Sie die Höhe von Inline-Elementen;

Sie können für ein Blockelement eine Hintergrundfarbe mit derselben Breite wie der Text festlegen, ohne die Breite festzulegen.

12. Eine weitere Box-Hacking-Methode

Der Grund, warum es so viele Box-Hacking-Methoden gibt, liegt darin, dass das Verständnis von Box vor IE 6 anders war als bei anderen. Seine Breite sollte die Kantenbreite und den Leerraum umfassen. Um IE5 mit anderen Browsern konsistent zu machen, können Sie CSS verwenden:

Polsterung: 2em;

Rand: 1em durchgehend grün;

Breite: 20em;

Breite/**/:/**/ 14em;



Die erste Breite wird von allen Browsern erkannt, aber IE5 verwendet 20, um etwas Leerraum zu subtrahieren, während andere Browser die Breite von 14 verwenden, da es sich um Zeile 2 handelt und Zeile 1 abdeckt.

13. Mindestseitenbreite

min-width ist ein sehr praktischer CSS-Befehl. Er kann festlegen, dass die Mindestbreite eines Elements eine bestimmte Breite nicht unterschreiten kann, um sicherzustellen, dass das Layout immer korrekt ist. Der IE erkennt dies jedoch nicht und behandelt die Breite tatsächlich als Mindestbreite. Damit dieser Befehl im IE funktioniert, können Sie ein

unter dem einfügen und dann eine Klasse für das div angeben:


Dann ist das CSS so aufgebaut:


#Container
{
Mindestbreite: 600 Pixel;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}


Die erste Mindestbreite ist normal; die Breite in der zweiten Zeile verwendet jedoch Javascript, das nur vom IE erkannt wird, wodurch Ihr HTML-Dokument auch weniger formal wird. Es implementiert tatsächlich die Mindestbreite durch Javascript-Beurteilung.

Die gleiche Methode kann auch verwendet werden, um die maximale Breite für IE zu erreichen:
#Container
{
Mindestbreite: 600 Pixel;
maximale Breite: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto");
}


14. Probleme mit IE und Breite und Höhe

IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe so, als ob es min gäbe. Dies ist ein großes Problem. Wenn Sie nur Breite und Höhe verwenden, ändern sich diese beiden Werte in einem normalen Browser nicht. Wenn Sie nur Mindestbreite und Mindesthöhe verwenden, werden Breite und Höhe überhaupt nicht festgelegt unter IE.
Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun:
.box
{
Breite: 80px;
Höhe: 35px;
}

html>body .box
{
Breite: automatisch;
Höhe: automatisch;
Mindestbreite: 80px;
Mindesthöhe: 35px;
}

Alle Browser können die erste Box-Einstellung verwenden, aber der IE erkennt den zweiten Absatz der Einstellung nicht, da er einen Unterauswahlbefehl verwendet. Die zweite Einstellung ist spezifischer und überschreibt daher die erste Einstellung.
5. Befehl zur Schriftarttransformation
Der Texttransformationsbefehl ist nützlich, er hat drei Werte: Texttransformation: Großbuchstaben, Texttransformation: Kleinbuchstaben und Texttransformation: Großbuchstaben. Der erste ändert den Text in Großbuchstaben, der zweite in Kleinbuchstaben und der dritte in die Großschreibung des ersten Buchstabens. Dies ist sehr nützlich für Pinyin-Text. Auch wenn bei der Eingabe Fehler in der Groß- und Kleinschreibung auftreten, sind diese auf der Webseite nicht sichtbar.
16. Das Problem des Verschwindens von Text in Bildern im IE
Manchmal tritt das Problem auf, dass Text oder Hintergrundbilder nach dem Aktualisieren plötzlich verschwinden und wieder auftauchen. Dies ist wahrscheinlicher, wenn Sie sich in der Nähe schwebender Elemente befinden (Hinweis: Ich habe das noch nie gesehen). An dieser Stelle können Sie Folgendes festlegen: position: relative für die verschwindenden Elemente. Wenn das nicht funktioniert, sollten Sie erwägen, eine Breite für diese Elemente anzugeben.
17. Unsichtbarer Text
Ganz gleich, warum Sie möchten, dass der Text einer Webseite nicht im Browser angezeigt wird, z. B. zum Drucken oder auf einem kleinen Bildschirm, Sie können display: none verwenden. Das ist sehr einfach, aber manchmal ist es für manche Leute etwas nutzlos, und sie können dieses Steuerelement entfernen und dann Folgendes verwenden: position: absolute left: -9000px .
Dies gibt tatsächlich den Text an, der außerhalb der Seite angezeigt werden soll.
18. Entwerfen Sie spezielles CSS für Handheld-Geräte
Das heißt, Benutzer mit kleinen Bildschirmen wie Mobiltelefonen/PDAs können speziell ein CSS entwerfen, um die Anzeige der Webseite komfortabler zu gestalten. Dazu können Sie das Browserfenster auf eine Breite von 150 Punkten einstellen, um den Effekt zu sehen. Die Syntax zur Angabe von Handheld-spezifischem CSS lautet:
Die Verfügbarkeit exklusiver Handheld-Geräte kann ebenfalls nachgelesen werden.
19. 3D-Effekt-Taste
Wenn Sie früher eine Schaltfläche mit einem 3D-Effekt erstellen wollten, der sich beim Klicken änderte, mussten Sie die Bildersetzung verwenden:

ein
{
Anzeige: blockieren;
Rand: 1 Pixel durchgehend;
Rahmenfarbe: #aaa #000 #000 #aaa;
Breite: 8em;
Hintergrund: #fc0;
}
a:hover
{
Position: relativ;
oben: 1px;
links: 1px;
Rahmenfarbe: #000 #aaa #aaa #000;
}

Was den Effekt betrifft, können Sie ihn auch selbst anpassen.
20. Verwenden Sie den gleichen Navigationscode auf verschiedenen Seiten
Viele Webseiten verfügen über Navigationsmenüs. Beim Aufrufen einer bestimmten Seite sollte das entsprechende Element im Menü grau werden, während andere Seiten aufleuchten sollten. Um diesen Effekt zu erzielen, müssen Sie im Allgemeinen ein Programm oder Design speziell für jede Seite schreiben. Jetzt können Sie diesen Effekt mit CSS erzielen.
Verwenden Sie zunächst CSS-Klassen in Ihrem Navigationscode:



• Home


• Über uns


• Kontaktieren Sie uns




Geben Sie dann eine ID für den Hauptteil jeder Seite an, die denselben Namen wie die obige Klasse hat. Zum Beispiel .
Dann entwerfen Sie das CSS wie folgt:

#home .home, #about .about, #about .about
{
Befehle für die hervorgehobene Navigation finden Sie hier
}

Wenn hier die ID auf „Home“ gesetzt ist, wird .home wirksam, d. h. in der Zeile der Navigationsleiste mit der auf „Home“ eingestellten Klasse werden Spezialeffekte angezeigt. Das Gleiche gilt auch für andere Seiten.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie und wann man sIFR_CSS/HTML verwendetNächster Artikel：Wie und wann man sIFR_CSS/HTML verwendet

In Verbindung stehende Artikel

Mehr sehen

• Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
• Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
• Reine CSS3-Vollbild-Diashow-Effekte
• Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
• Atemberaubende sechseckige CSS3-Menüanimationseffekte

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über unsHaftungsausschlussSitemap

© php.cn All rights reserved