CSS ist die derzeit gängige Form des Webseitenlayouts und auch der Kerninhalt, den Ihnen 52CSS.com vorstellt. Da CSS auf fast allen Websites weit verbreitet ist, nehmen wir uns etwas Zeit, um ein Stylesheet zu erstellen und sicherzustellen, dass es den Anforderungen entspricht gute Standards. Die folgenden Tipps werden CSS-Anfängern im Entwicklungsprozess eine große Hilfe sein. Sie können mehr über die zehn Fähigkeiten erfahren, die DivCSS-Anfänger kennen sollten, und über ihr Verständnis von Webstandards.
1. Index Die Definitionen hier helfen Ihnen und anderen Entwicklern, Websites und CSS-Dateien zu verstehen. Sie helfen Ihnen auch zu verstehen, was in CSS-Dateien enthalten ist. Der Indexabschnitt enthält einen formatierten CSS-Kommentarabsatz.
1. Geben Sie dem Autor Informationen zur CSS-Datei. 2. Definieren Sie das Design der Website (Anzahl der Spalten, statisch/dynamisch) [Spalten, statisch/flüssig]
3. Dateiversionen kontinuierlich verfolgen (sehr nützlich, wenn die Datei mehrere Autoren hat oder in Zukunft aktualisiert werden muss)
2. Ankerpunkt Anker sind wie Lesezeichen innerhalb derselben CSS-Datei. Anker ermöglichen es Ihnen, die gesamte CSS-Datei übersichtlich anzuzeigen und zu organisieren.
Anker müssen im CSS-Index definiert werden (oben erwähnt), und da CSS kein eigenes Ankersystem hat, habe ich einen einfachen Trick verwendet, um die Anker im Dokument zu definieren.
Die Methode besteht darin, ein relativ seltenes Zeichen zum Definieren des Kommentars zu verwenden. Wenn Sie einen Ankerpunkt finden möchten, können Sie den Definierer des Ankerpunkts aus dem Index kopieren und durchsuchen und den Ankerpunkt finden.
3. Neudefinition Bei der Neudefinition handelt es sich um eine Methode, mit der die Standard-Tag-Stile von HTML überschrieben und neu definiert werden. Haben Sie jemals CSS-Code wie diesen gesehen, der nur dieses bestimmte Element formatieren möchte?
Eine sehr schöne Verwendung in CSS sind kontextbezogene Selektoren. Verwenden wir sie:
4. Namensregeln Ein Schlüsselfaktor ist die Angabe präziser und klarer Namen für Elemente. Dies vermeidet Verwirrung und erleichtert und beschleunigt das Lesen Ihres CSS.
5. Abkürzung Die Abkürzungsfunktion in CSS ist eine Eigenschaft, mit der Sie viele Eigenschaften desselben Typs zu einer kombinieren können.
CSS-Abkürzungen erleichtern den Entwicklungsprozess und halten Ihre CSS-Dateien sauber, kurz und lesbar. Hier einige Beispiele:
6. Sprites Die Übersetzung ins Englische scheint das Wahrnehmungsverständnis des Artikels nicht zu vertiefen. Im Gegenteil, als ich ihn tatsächlich auf Englisch las, verstand ich ihn nicht, also habe ich ihn einfach nicht übersetzt. Das Kombinieren aller Hintergrundbilder zu einem und die Verwendung der Hintergrundpositionierung zur Anzeige verschiedener Teile nennen wir CSS-Sprites.
CSS-Sprites können die Anzahl der HTTP-Anfragen reduzieren, Bandbreite sparen und das Lesen beschleunigen. Gleichzeitig kann dadurch auch Bildinstabilität vermieden werden (wenn die Maus beispielsweise über ein Bild fährt, kann der Effekt eines anderen Bildes angezeigt werden, und das letztere Bild wartet bei einer langsamen Internetverbindung einen halben Tag, bis es angezeigt wird). .
Das beste und beliebteste Beispiel für CSS Sprites ist das Menüsystem auf der Website von Apple:
7. Klarstellung Bei der Selektorexplikation handelt es sich um den Prozess der Priorisierung, welche verwendet werden soll, wenn mehrere Regeln für dasselbe Element verwendet werden können.
Einfach ausgedrückt hat jeder CSS-Selektor eine Gewichtung. Die Summe aller Gewichte eines Selektors bestimmt seine Eigenschaften im Dokument. Explizitheit kann eine große Hilfe sein, wenn das CSS-Dokument so groß ist, dass Sie nicht wissen, welches Element das größere Gewicht hat.
Nun, Klarheit ist ein so großer Bereich in CSS, dass es schwierig ist, ihn in nur wenigen Sätzen zu erklären:
8. Attribut-Reset Durch das Zurücksetzen globaler Eigenschaften wird sichergestellt, dass eine Website in allen Browsern nahezu identisch angezeigt wird. In jedem Fall verwenden verschiedene Browser ihre eigenen Standardstileinstellungen für alle Websites, was dazu führt, dass unsere Website in verschiedenen Browsern unterschiedlich angezeigt wird. Durch ein globales Zurücksetzen der Eigenschaften wird diese Situation behoben und Sie können Ihre Website auf einer absolut konsistenten Basis aufbauen.
Ich empfehle nicht immer, CSS-Frameworks zu verwenden, aber Sie müssen trotzdem CSS-Reset verwenden. Es gibt viele verschiedene Reset-Methoden, von einfach bis komplex.
9. CSS-Hacks Selbst wenn es sich um ein perfektes CSS handelt, kann es nicht in allen Browsern genau die gleiche Anzeige erzeugen. Jeder Browser hat eine andere Art, CSS zu interpretieren. Alles in allem müssen Sie CSS-Hacks verwenden, wenn Sie möchten, dass Ihre Website in allen Browsern konsistent ist.
Ich stimme zu, dass die Verwendung von CSS-Hacks Fehler bei der CSS-Validierung reduziert. Eine alternative Möglichkeit, dies zu erreichen, besteht darin, für jeden Browser eine einzelne unterschiedliche CSS-Datei zu verwenden und dem Browser mitzuteilen, welches spezifische CSS verwendet werden soll, indem browserspezifische Tags in den HTML-Code eingefügt werden. Ich erstelle in all meinen Projekten immer eine „fuck-ie.css“ :) (Anmerkung des Übersetzers: Der Autor verwendet hier Schimpfwörter, um seine Wut gegenüber dem IE auszudrücken. Wenn er als „Paarung mit IE.css“ übersetzt würde, würde die Welt Geht es nicht harmonischer?)
Nach Verwendung dieser Methode wird Ihre „Haupt-CSS-Datei“ überprüft. Gleichzeitig wird auch die Datei „fuck-ie.css“ überprüft, aber sie überschreibt nur die „Haupt-CSS-Datei“ im IE-Browser.
10. Überprüfung Es ist immer wichtig, Ihr CSS beim Erstellen zu validieren. Dadurch wird sichergestellt, dass Ihr CSS fehlerfrei ist und von allen Browsern korrekt interpretiert werden kann.
W3C Validator ist ein sehr beliebtes Online-CSS-Validierungstool.
