Wenn du eine Website von Grund auf neu erstellen, ist es sinnvoll, mit den definierten grundlegenden Stilen zu beginnen. Es ist, als ob Sie mit einer sauberen Leinwand und frischen Pinseln beginnen. Eines der ersten Probleme, mit denen Webdesigner konfrontiert sind, ist das Internetbrowser sind alle unterschiedlich. Die Standardschriftgröße ist von Plattform zu Plattform unterschiedlich, die Standardschriftfamilie ist unterschiedlich, einige Browser definieren Ränder und Abstände im Body-Tag, andere nicht und so weiter. Umgehen Sie diese Inkonsistenzen, indem Sie die Standardstile für Ihre Webseiten definieren.
CSS und der Zeichensatz
Stellen Sie als erstes den Zeichensatz Ihrer CSS-Dokumente auf utf-8. Es ist wahrscheinlich, dass die meisten der von Ihnen gestalteten Seiten in Englisch verfasst sind, einige sind jedoch möglicherweise lokalisiert – angepasst an unterschiedliche sprachliche und kulturelle Kontexte. Wenn dies der Fall ist, vereinfacht utf-8 den Prozess. Einstellen des Zeichensatzes im
externes Stylesheet hat keinen Vorrang vor einem HTTP Header, aber in allen anderen Situationen wird dies der Fall sein.Es ist einfach, den Zeichensatz einzustellen. Schreiben Sie für die erste Zeile des CSS-Dokuments:
@charset "utf-8";
Auf diese Weise, wenn Sie internationale Zeichen in der Inhaltseigenschaft oder als Klassen- und ID-Namen, wird das Stylesheet weiterhin korrekt funktionieren.
Den Seitenkörper gestalten
Das nächste, was ein Standard-Stylesheet benötigt, sind Stile, die Ränder, Auffüllungen und Ränder auf Null setzen. Dadurch wird sichergestellt, dass alle Browser den Inhalt an derselben Stelle platzieren und es keine versteckten Leerzeichen zwischen dem Browser und dem Inhalt gibt. Bei den meisten Webseiten ist dies zu nah am Rand für Text, aber es ist wichtig, dort anzufangen, damit Hintergrundbilder und Layout-Unterteilungen richtig ausgerichtet werden.
html, Körper {
Rand: 0px;
Füllung: 0px;
Rahmen: 0px;
}
Setzen Sie die Standardvordergrund- oder Schriftfarbe auf Schwarz und die Standardhintergrundfarbe auf Weiß. Während sich dies höchstwahrscheinlich für die meisten Webseiten-Designs ändern wird, werden diese Standardfarben für den Körper und HTML-Tag macht die Seite zunächst einfacher zu lesen und zu bearbeiten.
html, Körper {
Farbe: #000;
Hintergrund: #fff;
}
Standardschriftarten
Die Schriftgröße und Schriftfamilie ändern sich unweigerlich, sobald das Design Einzug hält, aber beginnen Sie mit einer Standardschriftgröße von 1 em und eine Vorgabe Schriftfamilie von Arial, Genf oder einem anderen serifenlose Schrift. Die Verwendung von ems hält die Seite so zugänglich wie möglich und eine serifenlose Schrift ist auf dem Bildschirm besser lesbar.
html, Körper, p, d, td, li, dd, dt {
Schriftart: 1em Arial, Helvetica, serifenlos;
}
Es kann andere Orte geben, an denen Sie Text finden könnten, aber p, das, td, li, dd, und dt sind ein guter Anfang, um die Basisschriftart zu definieren. Einschließen HTML und Körper Nur für den Fall, aber viele Browser überschreiben die Schriftartenauswahl wenn Sie Ihre Schriftarten nur für den HTML- oder Body definieren.
Schlagzeilen
HTML-Überschriften sind wichtig, um Ihre Site zu skizzieren und Suchmaschinen tiefer in Ihre Site eintauchen zu lassen. Ohne Stile sind sie alle ziemlich hässlich, also legen Sie für alle Standardstile fest und definieren Sie die Schriftfamilie und die Schriftgrößen für jeden.
h1, h2, h3, h4, h5, h6 {
Schriftfamilie: Arial, Helvetica, serifenlos;
}
h1 { Schriftgröße: 2em; }
h2 { Schriftgröße: 1.5em; }
h3 { Schriftgröße: 1.2em; }
h4 { Schriftgröße: 1.0em; }
h5 { Schriftgröße: 0,9em; }
h6 { Schriftgröße: 0.8em; }
Vergiss die Links nicht
Das Gestalten der Linkfarben ist fast immer ein kritischer Teil des Designs, aber wenn Sie sie nicht in den Standardstilen definieren, besteht die Möglichkeit, dass Sie mindestens eine der Pseudoklassen vergessen. Definieren Sie sie mit einer kleinen Variation von Blau und ändern Sie sie dann, sobald Sie die Farbpalette für die Site definiert haben.
Um die einzustellen Links in Blautönen, Set:
- Links als blau
- besuchte Links als dunkelblau
- Hover-Links als hellblau
- aktive Links als noch blasseres Blau
Wie in diesem Beispiel gezeigt:
a: link { color: #00f; }
a: besucht { color: #009; }
a: schweben { color: #06f; }
a: aktiv { Farbe: #0cf; }
Durch die Gestaltung der Links mit einem ziemlich harmlosen Farbschema stellt es sicher, dass Sie keine der Klassen vergessen, und macht sie auch etwas leiser als die Standardfarben Blau, Rot und Lila.
Vollständiges Stylesheet
Hier ist das vollständige Stylesheet:
@charset "utf-8";
html, Körper {
Rand: 0px;
Füllung: 0px;
Rahmen: 0px;
Farbe: #000;
Hintergrund: #fff;
}
html, Körper, p, d, td, li, dd, dt {
Schriftart: 1em Arial, Helvetica, serifenlos;
}
h1, h2, h3, h4, h5, h6 {
Schriftfamilie: Arial, Helvetica, serifenlos;
}
h1 { Schriftgröße: 2em; }
h2 { Schriftgröße: 1.5em; }
h3 { Schriftgröße: 1.2em; }
h4 { Schriftgröße: 1.0em; }
h5 { Schriftgröße: 0,9em; }
h6 { Schriftgröße: 0.8em; }
a: link { color: #00f; }
a: besucht { color: #009; }
a: schweben { color: #06f; }
a: aktiv { Farbe: #0cf; }