Standardisierung der Benennung und des Schreibens von CSS

CSS-Namenskonvention

eins. Dateibenennungskonvention

Globaler Stil: global.css; Rahmenlayout: layout.css; Schriftstil: font.css; Linkstil: link.css; Druckstil: print.css;

zwei. Gemeinsame Klassen-/ID-Namenskonvention

Kopfzeile: Kopfzeile

Inhalt: Inhalt

Behälter: Behälter

Fußzeile: Fußzeile

Urheberrecht: Urheberrecht　
Navigation: Menü
Hauptnavigation: mainMenu
Unternavigation: subMenu
Logo: Logo
Motto: Banner
Titel: Titel
Seitenleiste: Seitenleiste
Symbol: Symbol
Hinweis: Hinweis
Suche: Suche
Schaltfläche: btn
Anmelden: Anmelden
Link: Link
Informationsfeld: verwalten
……

Die Benennung häufig verwendeter Klassen sollte so weit wie möglich auf gebräuchlichen englischen Wörtern basieren, damit sie leicht verständlich sind, und an geeigneten Stellen mit Anmerkungen versehen werden. Für die Benennung sekundärer Klassen/IDs wird der kombinierte Schreibmodus übernommen und der erste Buchstabe des letzten Wortes sollte großgeschrieben werden: Beispielsweise sollte „Suchfeld“ den Namen „searchInput“ und „Suchsymbol“ den Namen „searchIcon“ erhalten. „Suchschaltfläche“ „Mit Namen „searchBtn“...

CSS-Schreibspezifikationen und -methoden

1. Konventionelle Schreibstandards und -methoden

1. Wählen Sie DOCTYPE:

XHTML 1.0 bietet drei DTD-Deklarationen zur Auswahl: Übergangsweise: Eine DTD mit sehr lockeren Anforderungen, die es Ihnen ermöglicht, weiterhin das HTML4.01-Logo zu verwenden (muss jedoch der xhtml-Schreibmethode entsprechen). Der vollständige Code lautet wie folgt:

Streng: Für eine strikte DTD können Sie keine Bezeichner und Attribute der Präsentationsebene verwenden, z. B.
. Der vollständige Code lautet wie folgt:

Frameset: Eine DTD, die speziell für Frame-Seiten entwickelt wurde. Wenn Ihre Seite einen Frame enthält, müssen Sie diese DTD verwenden. Der vollständige Code lautet wie folgt:

Die ideale Situation ist natürlich eine strikte DTD, aber für die meisten von uns Designern, die mit Webstandards noch nicht vertraut sind, ist die Übergangs-DTD (XHTML 1.0 Transitional) derzeit die ideale Wahl (einschließlich dieser Website, die ebenfalls Übergangs-DTD verwendet). Da diese DTD es uns auch ermöglicht, Bezeichner, Elemente und Attribute der Präsentationsschicht zu verwenden, ist es auch einfacher, die W3C-Codeüberprüfung zu bestehen.

2. Sprache und Zeichensatz angeben:

Geben Sie die Sprache für das Dokument an:

Um von Browsern korrekt interpretiert zu werden und die W3C-Codeüberprüfung zu bestehen, müssen alle XHTML-Dokumente die von ihnen verwendete Codierungssprache deklarieren, wie zum Beispiel:

Häufig verwendete Sprachdefinitionen:

Standarddefinition der XML-Dokumentsprache:

Sprachdefinition für ältere Browser:

Zur Verbesserung des Zeichensatzes empfiehlt sich die Verwendung von „utf-8“.


3. Aufruf-Stylesheet:

Externer Stylesheet-Aufruf: Seiten-Inline-Methode: Das Stylesheet wird direkt in den Kopfbereich des Seitencodes geschrieben. Zum Beispiel:

Externe Aufrufmethode: Schreiben Sie das Stylesheet in eine unabhängige CSS-Datei und rufen Sie es dann mit einem Code ähnlich dem folgenden im Kopfbereich der Seite auf.

In einem Design, das den Webstandards entspricht, wird empfohlen, die externe Aufrufmethode zu verwenden, die den Stil der Seite ändern kann, ohne die Seite zu ändern und nur die CSS-Datei zu ändern. Wenn alle Seiten dieselbe Stylesheet-Datei aufrufen, kann die Änderung einer Stylesheet-Datei die Stile aller Dateien ändern.

4. Wählen Sie geeignete Elemente:

Wählen Sie HTML-Elemente basierend auf der Struktur des Dokuments aus, nicht auf der Grundlage des Stils der HTML-Elemente. Verwenden Sie beispielsweise das P-Element, um Textabsätze einzuschließen, nicht für Zeilenumbrüche. Wenn Sie beim Erstellen des Dokuments nicht das entsprechende Element finden, können Sie das generische p oder span verwenden Vermeiden Sie die übermäßige Verwendung von p und span. Durch die geeignete Verwendung von p- und span-Elementen in geringem Umfang kann die Struktur des Dokuments klarer und sinnvoller und benutzerfreundlicher gestaltet werden Verwenden Sie so wenig Tags und strukturelle Verschachtelungen wie möglich. Dadurch wird nicht nur die Struktur des Dokuments klarer, sondern auch die Datei klein gehalten. Gleichzeitig wird die Download-Geschwindigkeit für den Benutzer verbessert und es wird auch für den Browser einfacher, das Dokument zu interpretieren und anzuzeigen.

5. Abgeleiteter Selektor:

Sie können abgeleitete Selektoren verwenden, um Stile für untergeordnete Elemente innerhalb eines Elements zu definieren, was die Benennung vereinfacht und die Struktur klarer macht, wie zum Beispiel:

.mainMenu ul li {background:url(images/bg.gif;)}

6. Verwenden Sie die Rückbildverarbeitung für Hilfsbilder:

Die „Hilfsbilder“ beziehen sich hier auf Bilder, die nicht Teil des auf der Seite auszudrückenden Inhalts sind, sondern nur der Dekoration, der Pause und der Erinnerung dienen. Verarbeiten Sie es als Hintergrundbild, das über CSS-Stile geändert werden kann, ohne die Seite zu ändern, wie zum Beispiel:

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat rechts unten;}

7. Trennung von Struktur und Stil:

Nur die Struktur des Dokuments wird in die Seite geschrieben und der Stil wird in die CSS-Datei geschrieben. Die Trennung von Struktur und Stil wird durch externen Aufruf des CSS-Stylesheets erreicht.

8. Strukturiertes Schreiben von Dokumenten:

Die CSS-Dokumente auf der Seite sollten strukturiert, mit klarer Logik und leicht lesbar geschrieben sein. Zum Beispiel:

• Homepage


• Einführung


• Service

/*=====Hauptnavigation=====*/
#mainMenu {
Breite: 100 %;
Höhe:30px;
Hintergrund:url(images/mainMenu_bg.jpg) wiederholen-x;
}
#mainMenu ul li {
float:left;
Zeilenhöhe:30px;
margin-right:1px;
Cursor:Zeiger;
}
/*=====Ende der Hauptnavigation=====*/

9. Mausgesten:

Im XHTML-Standard wird die Hand nur vom IE erkannt. Wenn Sie die Mausgeste in eine „Handform“ umwandeln müssen, ersetzen Sie „Hand“ durch „Zeiger“, also „cursor:pointer;“.

Das obige ist der detaillierte Inhalt vonStandardisierung der Benennung und des Schreibens von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!