Zehn CSS-Tipps_CSS/HTML

1.CSS-Schriftabkürzungsregeln
Wenn Sie CSS zum Definieren von Schriftarten verwenden, können Sie Folgendes tun:
Schriftgröße: 1em;
Zeilenhöhe: 1,5em;
Schriftstärke: fett;
Schriftstil: kursiv;
Schriftart: Kapitälchen;
Schriftfamilie: verdana,serif;
Tatsächlich können Sie diese Eigenschaften abkürzen:
Schriftart: 1em/1,5em fett kursiv Kapitälchen verdana,serif
Es ist jetzt viel besser, aber eines ist zu beachten: Bei dieser Kurzschriftmethode müssen Sie mindestens die Attribute „font-size“ und „font-family“ sowie andere Attribute (wie z. B. „font-weight“, (font -style,font-varient) verwendet automatisch den Standardwert, wenn dieser nicht angegeben ist.


2. Verwenden Sie zwei Klassen gleichzeitig
Normalerweise geben wir nur eine Klasse für Attribute an, aber das bedeutet nicht, dass Sie nur eine angeben können. Tatsächlich können Sie so viele angeben wie Sie möchten, zum Beispiel:

...

Durch die gleichzeitige Verwendung zweier Klassen (getrennt durch Leerzeichen statt Kommas) werden in diesem Absatz die in beiden Klassen angegebenen Regeln angewendet gleichzeitig. Sollte sich eine der Regeln überschneiden, hat die letztere Vorrang.


Standardwert des Rahmens in 3.css
Beim Schreiben einer Rahmenregel geben Sie normalerweise Farbe, Breite und Stil an (jede Reihenfolge ist akzeptabel). Beispiel: border: 3px solid #000 (ein 3 Pixel breiter schwarzer solider Rahmen. Tatsächlich muss in diesem Beispiel nur der Stil angegeben werden). Wenn Sie den Stil als einfarbig festlegen, verwenden die übrigen Werte die Standardwerte: Die Standardbreite ist mittel (entspricht 3 bis 4 Pixel); die Standardfarbe ist die Farbe des Texts im Rahmen. Wenn dies genau das ist, was Sie möchten, müssen Sie es nicht im CSS angeben.


4.!important wird vom IE ignoriert
In CSS erhält normalerweise die zuletzt angegebene Regel Priorität. Bei anderen Browsern als IE erhält jedoch jede mit !important gekennzeichnete Anweisung absolute Priorität, zum Beispiel:
margin-top: 3.5em !important; Außer für IE Der obere Rand beträgt 3.5 em in allen Browsern außer 2em im IE Manchmal ist dies nützlich, insbesondere wenn relative Ränder verwendet werden (wie in diesem Beispiel), um die subtilen Unterschiede zwischen IE und anderen Browsern anzuzeigen.
(Viele Leute haben vielleicht auch bemerkt, dass CSS-Unterselektoren auch vom IE ignoriert werden)


5. Bildersetzungstechniken
Verwenden Sie Standard-HTML anstelle von Bildern, um Text anzuzeigen. Das ist oft klüger um neben schnelleren Downloads auch eine bessere Benutzerfreundlichkeit zu erreichen. Wenn Sie jedoch unbedingt eine Schriftart verwenden möchten, die auf dem Computer Ihres Besuchers möglicherweise nicht verfügbar ist, können Sie nur Bilder auswählen.
Wenn Sie zum Beispiel den Titel „Widgets kaufen“ oben auf jeder Seite verwenden möchten, aber auch möchten, dass er von Suchmaschinen entdeckt wird, und Sie aus Schönheitsgründen eine seltene Schriftart verwenden, dann ist dies der Fall verwenden müssen Das Bild zeigt:

Natürlich stimmt das, aber es gibt Hinweise darauf, dass Suchmaschinen echten Text viel mehr schätzen als Alt-Text (weil bereits zu viele Websites verwenden Alt-Text fungiert als Schlüsselwort), also müssen wir eine andere Methode verwenden:

Widgets kaufen , was ist mit Ihren schönen Schriftarten? Das folgende CSS kann helfen:

h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
Position: absolut;
links:-2000px;
}
Jetzt haben Sie ein schönes Bild und verbergen den echten Text gut – mit Hilfe von CSS wird der Text auf der linken Seite des Bildschirms positioniert – 2000 Pixel.


6. Eine weitere Option für den CSS-Box-Modell-Hack
Der CSS-Box-Modell-Hack wird verwendet, um Browser-Anzeigeprobleme zu lösen, bevor IE6.0 den Rahmen eines bestimmten Elements ändert und Füllwert werden in die Breite einbezogen (anstatt zum Breitenwert addiert). Sie können beispielsweise das folgende CSS verwenden, um die Größe eines Containers anzugeben:
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
Dann in HTML anwenden:
...

Die Gesamtbreite der Box beträgt in fast allen Browsern 150 Pixel (100 Pixel breit + zwei 5-Pixel-Ränder + zwei 20-Pixel-Abstände), Nur in Browsern vor IE6 sind es noch 100 Pixel (der Rahmenwert und der Füllwert sind im Breitenwert enthalten). Der Box-Modell-Hack soll dieses Problem lösen, wird aber auch Probleme verursachen. Die einfachere Methode ist wie folgt:
css:
#box
{
width: 150px;
}

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

...

Auf diese Weise beträgt die Gesamtbreite der Box in jedem Browser 150 Pixel.


7. Zentrieren Sie das Blockelement
Unter der Annahme, dass Ihre Website ein Layout mit fester Breite verwendet und alle Inhalte in der Mitte des Bildschirms platziert werden, können Sie das folgende CSS verwenden:
#content
{
width: 700px;
margin: 0 auto;
}
Sie können jedes Element im Hauptteil des HTML platzieren

, erhält das Element automatisch gleiche linke und rechte Randwerte, um eine zentrierte Anzeige sicherzustellen. Dies ist jedoch in Browsern vor IE6 immer noch ein Problem und wird nicht zentriert, daher muss es wie folgt geändert werden:
body
{
text-align: center;
}

#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
Durch das Festlegen des Körpers wird der Körperinhalt zentriert . Aber selbst der gesamte Text ist zentriert, was wahrscheinlich nicht der gewünschte Effekt ist. Aus diesem Grund muss das Div von #content auch einen Wert angeben: text-align: left

8 vertikale Zentrierung erreichen
Die vertikale Zentrierung ist für Tabellen ein Kinderspiel. Geben Sie einfach die Zelle als „vertikal-align: middle“ an, aber das funktioniert im CSS-Layout nicht. Angenommen, Sie stellen die Höhe eines Navigationsmenüs auf 2em ein und geben dann die vertikalen Ausrichtungsregeln in CSS an. Der Text wird weiterhin oben im Feld angeordnet, es gibt überhaupt keinen Unterschied.
Um dieses Problem zu lösen, stellen Sie einfach die Zeilenhöhe der Box so ein, dass sie mit der Höhe der Box übereinstimmt. In diesem Beispiel beträgt die Boxhöhe 2em, und fügen Sie dann einfach eine weitere Zeilenhöhe hinzu: 2em kann eine vertikale Zentrierung erreichen!

9. CSS-Positionierung innerhalb des Containers
Einer der größten Vorteile von CSS besteht darin, dass es Objekte an einer beliebigen Stelle im Dokument positionieren kann und Objekte auch innerhalb eines Containers positioniert werden können. Fügen Sie dem Container einfach eine CSS-Regel hinzu:
#container
{
position: relative;
}
Dann erfolgt die Positionierung jedes Elements im Container relativ zum Container. Angenommen, Sie verwenden die folgende HTML-Struktur:

...

Wenn Sie die Navigation innerhalb des Containers 30 Pixel vom linken Rand und 5 Pixel vom linken Rand positionieren möchten Oben können Sie die folgende CSS-Anweisung verwenden:
#navigation
{
position: absolute;
links: 30px;
oben: 5px;
}

10. Erweitern Sie den unteren Bildschirmrand. Einer der Nachteile von Hintergrundfarben
CSS ist die fehlende vertikale Kontrolle, was zu Problemen führt, die bei einem Tabellenlayout nicht auftreten. Angenommen, Sie richten auf der linken Seite der Seite eine Spalte ein, um die Navigation Ihrer Website zu platzieren. Die Seite hat einen weißen Hintergrund, aber wenn Sie möchten, dass die Navigationsspalte einen blauen Hintergrund hat, verwenden Sie das folgende CSS:
#navigation
{
background: blue;
width: 150px;
}
Das Problem besteht darin, dass das Navigationselement nicht bis zum Ende der Seite reicht und natürlich auch seine Hintergrundfarbe nicht bis zum Ende reicht. Dadurch wird der blaue Hintergrund der linken Spalte auf der Hälfte der Seite abgeschnitten, wodurch Ihr Design verschwendet wird. Was zu tun? Leider können wir nur Täuschung verwenden, das heißt, den Hintergrund des Körpers als Bild mit der gleichen Farbe und Breite wie die linke Spalte angeben. Das CSS lautet wie folgt:
Körper
{
Hintergrund: url(blue-image.gif ) 0 0 repeat-y;
}
Das Hintergrundbild sollte ein blaues Bild mit einer Breite von 150 Pixeln sein. Der Nachteil dieser Methode besteht darin, dass em nicht zum Festlegen der Breite der linken Spalte verwendet werden kann. Wenn der Benutzer die Größe des Texts ändert und die Breite des Inhalts erweitert wird, ändert sich die Breite der Hintergrundfarbe nicht entsprechend.
Zum jetzigen Zeitpunkt ist dies die einzige Lösung für diese Art von Problem. Sie können daher nur Pixelwerte für die linke Spalte verwenden, um eine andere Hintergrundfarbe zu erhalten, die automatisch gestreckt wird.