Heim Web-Frontend CSS-Tutorial Zusammenfassung der CSS-Stylesheet-Kenntnisse in der Webseitenbearbeitung_Erfahrungsaustausch

Zusammenfassung der CSS-Stylesheet-Kenntnisse in der Webseitenbearbeitung_Erfahrungsaustausch

May 16, 2016 pm 12:07 PM

1. Über Kommentare

Beim Erstellen einer XHTML+CSS-Website sind Kommentare in CSS sehr wichtig. Beim Erstellen von CSS-Stilen sollten Sie die Gewohnheit beibehalten, beiläufig zu kommentieren. Im Allgemeinen bin ich es gewohnt, Kommentare im Format „/* Kommentarinhalt */“ zu schreiben, da in Editoren mit Hervorhebungsfunktionen wie EditPlus das in der C-Sprache häufig verwendete „/***************/“ verwendet wird. Kommentare wie dieser sind bedeutungslos und es besteht keine Notwendigkeit, als Trennung viele bedeutungslose Inhalte einzufügen. Dokumente mit Kommentaren dienen als ursprüngliche CSS-Dokumente der Website. Beim Veröffentlichen der Website können Sie ein CSS-Komprimierungstool verwenden, um das CSS zu komprimieren und Kommentare aus dem Ausgabe-CSS zu entfernen, um die Effizienz der Dateiübertragung zu verbessern.

2. Informationen zur Benennung

Bei der Benennung von CSS-Dateien bevorzuge ich die Verwendung semantischer englischer Namen oder Abkürzungen für ungewöhnliche Teile. Darüber hinaus verwende ich in einigen abhängigen Klassen möglicherweise einen Namen ähnlich wie „list_banner“, also den Namen des übergeordneten Elements plus „_“ plus den Namen des Elements.

Bezüglich der Namensgebung kann nach den Gewohnheiten der Teamgestalter ausgehandelt werden. Am besten fügen Sie jedoch nach dem Namen einen Kommentar hinzu, damit Sie eine Dokumentation zum späteren Nachschlagen erstellen können.

3. Über Vererbung

In CSS muss Vererbung sinnvoll genutzt werden. Beispielsweise definiert das übergeordnete Element in zwei verschachtelten Divs das Attribut „Hintergrundfarbe“ als Schwarz. Wenn der Hintergrund der untergeordneten Elemente ebenfalls schwarz ist, muss die Definition nicht wiederholt werden. Wenn Sie die CSS-Vererbung sinnvoll nutzen, können Sie Ihren Code effizienter und schlanker machen.

4. Bezüglich der Hierarchie von CSS-Definitionen

Bei der Definition von Klassen in CSS wird empfohlen, Anweisungen hierarchisch zu beschreiben.

Beispielstruktur:






Beispiel-CSS :

#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
Im obigen Beispiel aus dem end Aus Sicht der Wirkung besteht keine Notwendigkeit, dass #menu wiederholt angezeigt wird. Wenn jedoch #menu vorne hinzugefügt werden kann, wird die Dokumenthierarchie klarer und leichter lesbar.

5. Informationen zur Stilsortierung

Beim Entwerfen von CSS-Stylesheets schreiben wir Code meist von Hand, was leicht zu Verwirrung bei der Stilsortierung in Klassen führen kann. Beispielsweise verwenden mehrere Klassen Auffüllung, Rand, Hintergrund, Farbe und andere Stile. Beim Sortieren haben einige Klassen jedoch einen höheren Hintergrund und andere einen höheren Rand. Dies führt zu einer gewissen Verwirrung und kann Ihr Denken leicht frustrieren. Ich schlage vor, dass einzelne Designer oder Teamdesigner sich auf eine grobe Reihenfolge einigen, so dass es für jeden Einzelnen keinen großen Unterschied gibt, es aber insgesamt einfacher zu lesen und zu verwalten ist und die Gesamteffizienz erheblich verbessert wird.

Zum Beispiel setze ich standardmäßig Breite, Höhe, Abstand, Rand, Rahmen usw. an den Anfang, gefolgt von Hintergrund, dann Schriftart, Farbe, Textausrichtung usw., die den Text steuern, und dann einige Elemente, die nur von speziellen Tags verwendet werden können, wie z. B. Listenstil usw., und schließlich CSS-Filter. Bei besonderen Situationen (z. B. der Priorität bestimmter zu definierender CSS-Eigenschaften) kann flexibel damit umgegangen werden.

Das ist alles. Huode freut sich über alle Ergänzungen und Korrekturen.
Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Aufbau einer Ethereum -App mit Redwood.js und Fauna Aufbau einer Ethereum -App mit Redwood.js und Fauna Mar 28, 2025 am 09:18 AM

Mit dem jüngsten Aufstieg von Bitcoins Preis über 20.000 USD und kürzlich von 30.000, dachte ich, es lohnt

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

Es ist aus! Herzlichen Glückwunsch an das Vue -Team, dass es eine massive Anstrengung war und lange kommt. Alle neuen Dokumente auch.

Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Können Sie gültige CSS -Eigenschaftswerte aus dem Browser erhalten? Apr 02, 2025 pm 06:17 PM

Ich ließ jemanden mit dieser sehr legitimen Frage einschreiben. Lea hat gerade darüber gebloggt, wie Sie gültige CSS -Eigenschaften selbst aus dem Browser erhalten können. Das ist so.

Ein bisschen auf CI/CD Ein bisschen auf CI/CD Apr 02, 2025 pm 06:21 PM

Ich sage "Website" passt besser als "Mobile App", aber ich mag dieses Rahmen von Max Lynch:

Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Gestapelte Karten mit klebriger Positionierung und einem Schuss Sass Apr 03, 2025 am 10:30 AM

Neulich habe ich dieses besonders schöne Stück von der Website von Corey Ginnivan entdeckt, auf der eine Sammlung von Karten aufeinander stapelt.

Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Verwenden von Markdown und Lokalisierung im WordPress -Block -Editor Apr 02, 2025 am 04:27 AM

Wenn wir dem Benutzer direkt im WordPress -Editor Dokumentation anzeigen müssen, wie können Sie dies am besten tun?

Vergleich von Browsern für reaktionsschnelles Design Vergleich von Browsern für reaktionsschnelles Design Apr 02, 2025 pm 06:25 PM

Es gibt eine Reihe dieser Desktop -Apps, in denen das Ziel Ihre Website gleichzeitig in verschiedenen Dimensionen angezeigt wird. So können Sie zum Beispiel schreiben

Verwenden wir (x, x, x, x), um über Spezifität zu sprechen Verwenden wir (x, x, x, x), um über Spezifität zu sprechen Mar 24, 2025 am 10:37 AM

Ich habe mich neulich mit Eric Meyer unterhalten und erinnerte mich an eine Eric Meyer -Geschichte aus meinen prägenden Jahren. Ich habe einen Blog -Beitrag über CSS -Spezifität geschrieben, und

See all articles