Verschachtelte Regeln. Regeln zum Erstellen von HTML-Dokumenten. Regeln der allgemeinen HTML-Familie. Regeln 2
Hallo, liebe Leser der Blogseite. Heute schlage ich vor, das Gespräch fortzusetzen, das wir im obigen Artikel begonnen haben. Noch früher haben wir uns mit Cascading Style Sheets vertraut gemacht, gelernt, was sie bedeuten und vieles mehr.
Alle Materialien zu Cascading Style Sheets, die bereits auf diesem Blog veröffentlicht wurden, finden Sie in. Heute werden wir zunächst darüber sprechen, wie Sie Selektoren kombinieren und gruppieren können, und dann werden wir uns im Detail mit den Regeln befassen, die für dasselbe Element im HTML-Code gelten (Wichtig, Selektoren zählen und Regeln im Stilattribut schreiben).
Kombinationen und Gruppierung von Selektoren in CSS
In früheren Artikeln ist es uns also gelungen, 7 Typen zu berücksichtigen:
Von diesen sieben möglichen Ansichten können Sie in CSS Kombinationen erstellen. Alle Kombinationen, die wir vornehmen werden, stehen in direktem Zusammenhang mit (Vorfahren – Nachkommen, Eltern – Kinder, Brüder – Schwestern).
Die erste Art der Kombination heißt Kontextselektor. Es berücksichtigt die Beziehung von HTML-Codeelementen nach dem „Ancestor – Descendant“-Prinzip:
Separate Selektoren in Kombinationen werden durch ein Leerzeichen getrennt geschrieben, und Sie müssen es von rechts nach links lesen. Das. Die CSS-Regeln gelten nur für die letzte dieser Kombination (die ganz rechte), und alles, was davor steht, ermöglicht uns nur, eine genauere Anwendung (Targeting) für unsere Regeln anzugeben (hervorheben).
Das erste Beispiel besagt, dass alle B-Elemente (in Fettschrift), die Div-Elemente als Vorgänger haben, grün gefärbt werden.
Im obigen Code wird nur das unterstrichene Fragment grün gefärbt, weil Unter seinen Vorfahren gibt es ein Div, und das zweite Codefragment, hervorgehoben durch die B-Tags, behält die standardmäßig dafür ausgewählte Farbe, da der Div-Container nicht mehr zu seinen Vorfahren gehört (nur P und Body):
Solche Kombinationen funktionieren in jedem Browser.
Die nächste Art der Kombination wäre Kinderauswahl, das auf den Prinzipien der Beziehungen zwischen Codeelementen des Typs „Parent – Child“ basiert:
Sie werden mit einem Trennzeichen geschrieben bekannter (>):
Dieser Eintrag wird vom Browser wie folgt interpretiert: Für wird der „Elternteil“ (nächster Vorfahre), dessen Div-Container ist, rot hervorgehoben.
Im obigen Beispiel werden nur die umrandeten Absätze rot gefärbt, da sie direkt im Div-Container eingeschlossen sind, der ihr übergeordnetes Element (nächster Vorfahre) ist. Wenn Sie das obige Beispiel eines untergeordneten Selektors so ändern, dass es wie folgt aussieht:
Körper > p (Farbe:rot)
Dann wird nur der letzte Absatz rot hervorgehoben, weil... Sein übergeordnetes Element ist das Body-Tag, und die ersten beiden Absätze behalten ihre Standardfarbe (Body ist ihr übergeordnetes Element, aber nicht ihr übergeordnetes Element, nämlich Div). Untergeordnete Selektoren Funktioniert nicht im Browser Ie 6.
Wie und warum Selektoren im CSS-Code gruppiert werden
Die letzte Kombination wird aufgerufen benachbarte Selektoren und entspricht den Prinzipien der Beziehungen zwischen HTML-Codeelementen vom Typ „Schwestern – Brüder“. Sie können entweder „+“ oder „~“ als Trennzeichen verwenden:
Dieser Eintrag bedeutet, dass der Inhalt von Element I (kursiv) nur dann rot gefärbt wird, wenn sein nächster Nachbar links (oben im Code) Element B (fett) ist. Diese Bedingung wäre beispielsweise in diesem Beispiel erfüllt:
Wenn Sie den angrenzenden Selektor wie folgt in CSS-Code schreiben:
H1 ~ p (Farbe: rot)
Dies bedeutet, dass alle Absätze (P), an denen sich weiter oben im Code ein angrenzendes H1-Element (Überschrift) befindet, rot eingefärbt werden. Dies bezieht sich insbesondere auf benachbarte Elemente (Beziehungen vom Typ „Schwestern – Brüder“). Im folgenden Beispiel wird der angegebene Selektor mit den eingekreisten Absätzen abgeglichen:
Kombinationen benachbarter Selektoren im Ie 6-Browser werden leider ebenfalls nicht unterstützt. In Ie 6 wird nur der erste Kombinationstyp unterstützt, in Ie 7 und höher werden jedoch alle anderen unterstützt. In anderen Browsern sollte es keine Probleme geben.
Selektoren in CSS Sie können auch gruppieren. Wenn einige von ihnen beispielsweise eine oder mehrere identische Regeln verwenden, können sie zu einer Gruppe zusammengefasst werden, um die Menge an CSS-Code zu reduzieren.
In dem im Screenshot gezeigten Beispiel wird dies für jeden Header-Selektor (h1-3) wiederholt, was zu Komplexität (Mehrarbeit) führen kann, wenn Sie den Wert dieser Eigenschaft ändern möchten. Daher erscheint die zweite Option eines gruppierten Eintrags etwas vorzuziehen.
Bitte beachten Sie dies bei der Gruppierung Selektoren werden durch Kommas getrennt geschrieben. Wenn es mehr identische Regeln gibt, werden die Codeeinsparungen deutlicher spürbar. Und diejenigen Regeln, die einzigartig waren, müssen immer noch einzeln niedergeschrieben werden.
Prioritäten von CSS-Eigenschaften (mit und ohne wichtig)
Überlegen wir nun, welchen Stil der Browser verwenden wird, wenn für dieses HTML-Codeelement keine Stile angegeben sind. Und dazu gibt es eine entsprechende Spezifikation, in der das alles beschrieben ist.
Wie Sie sehen, ist die endgültige Trennung von HTML und CSS nun erfolgt. Diese. Selbst für reinen HTML-Code verwendet der Browser weiterhin die Standardeigenschaften von Stylesheets. Hier sind also die Standardeigenschaften: haben die niedrigste Priorität.
Die Eigenschaften, die der Benutzer in seinen Browsereinstellungen zuweist, haben eine höhere Priorität. Diese Stile werden auf alle Dokumente angewendet, die er in diesem Browser anzeigt.
Zwar verfügen nicht alle Browser über diese Funktion, aber zumindest Ie und Opera verfügen über sie. Diese. Auf Wunsch kann der Benutzer seine eigene CSS-Datei als Quelle für Stil-Markup einbinden.
In Ie müssen Sie dazu beispielsweise im Menü oben rechts „Extras“ – „Internetoptionen“ auswählen und dann auf der ersten Registerkarte „Allgemein“ auf die Schaltfläche „Darstellung“ unten klicken. Im sich öffnenden Fenster müssen Sie das Kontrollkästchen „Entwerfen mit einem benutzerdefinierten Stil“ aktivieren und über die Schaltfläche „Durchsuchen“ die CSS-Stil-Markup-Datei finden, die Sie auf Ihrem Computer benötigen:
Diese. Der Benutzer hat die Möglichkeit, jede im Browser geöffnete Website gemäß seinen in der CSS-Datei beschriebenen Anforderungen aussehen zu lassen. Das heißt „Benutzerdefinierte Stile“ und sie haben Vorrang vor den Stilen, die in der Standardspezifikation definiert sind. Noch größere Priorität werden aber die sogenannten Autorenstile haben.
Das heißt, wenn ich (der Website-Entwickler) beim Design eines HTML-Codeelements andere Stile als die Standardstile verwenden möchte (denken Sie daran, dass diese in der Spezifikation beschrieben sind), kann der Benutzer mein Design nicht damit überschreiben seine eigene CSS-Datei.
Wird der Benutzer gezwungen, dies zu akzeptieren? Nein. Er hat die Möglichkeit Erhöhen Sie die Priorität Ihrer CSS-Eigenschaften, indem Sie „Wichtig“ hinzufügen am Ende von jedem von ihnen. Dieses Wort wird durch ein Leerzeichen getrennt und mit einem vorangestellten Ausrufezeichen geschrieben:
P (Farbe:rot !wichtig;)
Wenn der Benutzer die gleiche Eigenschaft mit Important in seiner eigenen Style-Datei hat, die er mit dem Browser verbunden hat, dann werden ihm alle Absätze rot angezeigt. Der Autor (Entwickler) der Website könnte aber auch „Important“ für diese Eigenschaft verwenden. Wer wird dann gewinnen und wessen Priorität wird höher sein?
Das haben wir entschieden benutzerdefinierte Stile mit Wichtig wird in jedem Fall eine höhere Priorität haben als die Stile des Autors, egal ob mit oder ohne Wichtig.
Fassen wir alle präsentierten Informationen zu den Prioritäten der Stileigenschaften in Form einer Liste zusammen. Die Priorität nimmt von oben nach unten ab:
- Benutzerdefiniert mit Wichtig
- Urheberrecht bei Wichtig
- Urheberrechte ©
- Brauch
- Stile, die standardmäßig für HTML-Elemente in der Spezifikation akzeptiert werden (wenn weder der Autor noch der Benutzer etwas anderes angegeben haben)
Diese. Ohne „Wichtig“ sind die Stile des Autors wichtiger, und bei ihnen sind die Stile des Benutzers am wichtigsten und haben die höchste Priorität. Kommen wir nun zu den Tabellen des Autors, denn was der Benutzer tut, ist uns unbekannt und liegt im Dunkeln.
So erhöhen Sie die Prioritäten von CSS-Eigenschaften in Autorenstilen
Jetzt kommen wir zur Frage Kaskadierende CSS-Stylesheets. Schauen wir uns dies anhand eines Beispiels an, um es klarer zu machen. Nehmen wir an, wir haben einen Code mit den folgenden HTML-Elementen (einen Absatz in einem Div-Container):
Containerinhalt
Schreiben wir zunächst die folgenden Eigenschaften auf:
P (Farbe:rot) .sbox (Hintergrund:#f0f0f0)
Infolgedessen wird sowohl die erste davon auf den Absatz angewendet (da er durch das P-Tag gebildet wird) als auch die Eigenschaft, die den grauen Hintergrund für das Element mit der Klasse „sbox“ festlegt, die dieser Absatz wiederum hat:
Fügen wir nun dem zweiten Selektor (der Klasse) eine weitere Eigenschaft hinzu, die mit der ersten Zeile in Konflikt steht (beide setzen , verwenden aber unterschiedliche Werte):
P (Farbe:rot) .sbox (Hintergrund:#f0f0f0;Farbe:blau)
Dadurch ändert sich die Textfarbe des Absatzes in Blau statt in Rot.
Warum? Denn genau so lässt sich ein Konflikt lösen, wenn dasselbe HTML-Codeelement mehrere identische Regeln auf einmal erhält, jedoch mit unterschiedlichen Werten und von unterschiedlichen Stellen im CSS-Code. Um festzustellen, welche Regel die höhere Priorität hat, müssen Sie ihre Selektoren zählen.
Abgesehen davon selbst Selektoren haben eine Abstufung nach Prioritäten. Die ID hat die höchste Priorität. In diesem Beispiel ist die Textfarbe genau deshalb blau, weil die Priorität der Id (#out) höher ist als die des Tag-Selektors (p):
P (Farbe:rot) #out (Farbe:blau)
Weiter unten auf der Prioritätsleiter befinden sich Selektoren für Klassen, Pseudoklassen und Attribute. Im folgenden Beispiel wird das Tag (p) erneut abgespielt und die Farbe des Absatztextes ist blau, da es mit dem Selektor einer höheren Priorität (Klasse) konkurriert:
P (Farbe: rot) .sbox (Farbe: blau)
Nun, die niedrigste Priorität (ohne Berücksichtigung des universellen *, das das niedrigste Gewicht hat und keine Änderungen an solchen Aneinanderreihungen vornimmt) sind die Selektoren von Tags und Pseudoelementen.
Div p (Farbe:rot) p (Farbe:blau)
Welche Farbe wird der resultierende Absatztext haben? Das stimmt, es ist rot, weil... Diese Eigenschaft verfügt über mehr Tag-Selektoren (zwei gegenüber einem). Oh, wie. Diese. IDs werden zuerst berücksichtigt. Wenn der Gewinner nicht identifiziert wird, werden Klassen, Pseudoklassen und Attribute berücksichtigt. Nun, wenn dort nichts gelöst wurde oder keine solchen gefunden wurden, werden Selektoren von Tags und Pseudoelementen berücksichtigt.
Es ist jedoch durchaus möglich, dass kein Sieger hervorgeht und die Selektoren der konkurrierenden Klassen insgesamt die gleiche Priorität haben. Zum Beispiel für unseren leidgeprüften Absatz, der in einem Div-Container eingeschlossen ist:
Containerinhalt
Es wäre durchaus möglich, einen CSS-Code wie diesen zu schreiben:
Div.box #out(Farbe:rot) #in p.sbox(Farbe:blau)
Und welche Farbe soll der Absatztext haben? Beide Kombinationen beschreiben genau unseren Absatz. Das erste sollte wie üblich von rechts nach links gelesen werden: Wenden Sie diese Eigenschaften (Farbe: rot) auf ein Element mit der ID #out an, das sich irgendwo innerhalb (unter den „Vorfahren“) des Div-Containers mit dem befindet class.box (div.box ). Passt voll und ganz zu unserem Absatz.
Die zweite Kombination: Wenden Sie diese Eigenschaften (Farbe: Blau) auf ein Absatzelement mit der Sbox-Klasse (p.sbox) an, das sich in jedem Element mit der ID #in befindet. Auch hier wird unser Absatz vollständig beschrieben. Zählen wir die Selektoren.
IDs kommen in beiden Kombinationen einmal vor, und das Gleiche gilt auch für Klassen. Es müssen nur noch die Tag-Selektoren gezählt werden, diese werden aber auch in beiden Kombinationen gleich oft verwendet (eins). Hinterhalt.
Wir haben es gleiche Prioritäten die gleiche Eigenschaft mit unterschiedlichen Werten (Textfarbe Rot oder Blau). Wie wird der Browser dieses Dilemma lösen?
Hier gilt die Regel - wer ist der letzte, er hat recht. Daher ist in meinem Beispiel die Farbe des Absatztextes blau, da sich diese Eigenschaft (color:blue) weiter unten im Code befindet. Wenn diese Regeln umgekehrt sind:
#in p.sbox(Farbe:blau) div.box #out(Farbe:rot)
Dadurch ändert sich die Farbe des Absatztextes in Rot. Q.E.D. Sie können beispielsweise jeder Kombination einen weiteren Tag-Selektor hinzufügen und wir geben den Ausschlag zu seinen Gunsten, auch wenn er im Code nicht weiter unten steht:
Körper #in p.sbox(Farbe:blau) div.box #out(Farbe:rot)
In diesem Fall ändert sich die Farbe des Absatzes in Blau. Der universelle Selektor „*“ hat keinerlei Einfluss auf die Berechnung der Prioritäten. Übrigens haben wir oben eine Möglichkeit untersucht, die Priorität von CSS-Regeln durch Hinzufügen von Important zu erhöhen. In unserem Beispiel könnte es so aussehen:
P (Farbe: grün ! wichtig) #in p.sbox (Farbe: blau) div.box #out (Farbe: rot)
Welche Farbe wird in diesem Fall der Absatztext haben? Grün, natürlich. Und Sie müssen nicht einmal etwas zählen, denn Hinzufügen Wichtig auf eine Stileigenschaft löst dieses kontroverse Problem eindeutig, unabhängig davon, wo sie sich im Code befindet und wie viele Selektoren sie hat.
Aber Important ist nicht die einzige Möglichkeit, die Priorität einer Immobilie bedingungslos zu erhöhen. Die zweite Möglichkeit zur Steigerung könnte darin bestehen, Stil zu verwenden Eigenschaften im Style-Attribut das HTML-Element, das Sie benötigen.
Diese. Fügen Sie innerhalb desselben leidgeprüften P-Tags ein Style-Attribut hinzu, das eine beliebige Farbe angibt:
Containerinhalt
Das ist es. Unabhängig davon, welche Eigenschaften für dieses Element in einer externen Stylesheet-Datei oder in den Style-HTML-Code-Tags angegeben sind, ist die Textfarbe des Absatzes jetzt gelb.
Aber es wird nicht in der Lage sein, die Eigenschaften von Important zu übertreffen. Diese. Im letzten Beispiel, in dem wir die Regel „p (color:green !important)“ hinzugefügt haben, ist die Textfarbe immer noch grün, auch wenn style="color:gelb".
Tatsächlich ist die Priorität der beiden Regeln (mit Important in der externen Stylesheet-Datei und im Style-Attribut) gleich, was bedeutet, dass wir mit der Zählung der Selektoren fortfahren müssen. Können sie wirklich innerhalb des Stilattributs liegen?
Ja, es kann keine geben, was bedeutet, dass die im Attribut „style“ geschriebene Regel immer gegenüber der Regel mit „Wichtig“ verliert, nur aufgrund der geringeren Anzahl von Selektoren (Null ist kleiner als jede Zahl).
Na, was dann? gibt der CSS-Eigenschaft die höchste Priorität? Das ist richtig, es wird im Stilattribut geschrieben und sogar mit Wichtig:
Containerinhalt
In diesem Fall ist die Farbe des Absatztextes gelb und es ist unmöglich, ihn durch irgendetwas im Stil des Autors zu unterbrechen. Wir haben einen absoluten Weg gefunden, Stile festzulegen. Es kann nur von einem Benutzer mit einer eigenen Style-Datei und der dafür angegebenen Important-Eigenschaft unterbrochen werden.
Versuchen wir also zu komponieren Liste der Faktoren, die die Priorität beeinflussen Eigenschaften in Autorenstilen in absteigender Reihenfolge:
- Angabe der Eigenschaft im Style-Attribut des gewünschten Tags zusammen mit „Wichtig“.
- Hinzufügen von Important zu einer Eigenschaft in einer externen Stylesheet-Datei oder im Style-Tag direkt im HTML-Code
- Für das Element ist lediglich das Festlegen dieser Eigenschaft im Stilattribut erforderlich
- Verwenden einer größeren Anzahl von IDs für eine bestimmte Eigenschaft
- Verwendung weiterer Klassenselektoren, Pseudoklassen oder Attribute
- Verwendung weiterer Tag-Selektoren und Pseudoelemente
- Geringere Eigenschaftsplatzierung im CSS-Code, wenn alle anderen Dinge gleich bleiben
Tatsächlich werden Regeln im Stilattribut sehr selten verwendet (stellen Sie sich vor, wie schwierig es in diesem Fall wäre, Änderungen im gesamten Site-Code vorzunehmen, anstatt in einer separaten CSS-Datei).
Dieses Attribut wird hauptsächlich verwendet, wenn Sie nur schnell etwas testen müssen. Nun, es ist auch praktisch, wenn Sie Ihren Code in die HTML-Seiten anderer Leute einfügen, die ihren eigenen Stil haben und für Ihre eingefügten Elemente vererbt () werden können.
Warum und wie fügen Sie Ihren Code in die Seiten anderer Personen ein? Das ist vielleicht nicht nötig, aber Yandex und Google tun dies, wenn oder auf den Websites anderer Personen (unseren Websites).
Durch das Hinzufügen des Stilattributs zu allen Elementen des Anzeigenblockcodes mit den darin angegebenen Eigenschaften und dem hinzugefügten Wichtig müssen Sie sich keine Sorgen mehr machen, dass der Anzeigencode in irgendeiner Weise geändert wird (obwohl Yandex-Anzeigen weiterhin mithilfe von CSS geändert werden können). und Wichtig, anscheinend haben sie diese Methode nicht verwendet).
Viel Erfolg! Bis bald auf den Seiten der Blog-Site
Du könntest interessiert sein
Tag-, Klassen-, ID- und universelle Selektoren sowie Attributselektoren in modernem CSS 
Selektoren von Pseudoklassen und Pseudoelementen in CSS (Hover, First-Child, First-Line und andere), Beziehungen zwischen HTML-Code-Tags 
Listenstil (Typ, Bild, Position) – CSS-Regeln zum Anpassen der Darstellung von Listen im HTML-Code 
Wozu dient CSS, wie verbindet man Cascading Style Sheets mit einem HTML-Dokument und die grundlegende Syntax dieser Sprache? 
CSS – was ist das, wie werden Cascading Style Sheets mithilfe von Style und Link mit HTML-Code verbunden? 
Dimensionseinheiten (Pixel, Em und Ex) und Vererbungsregeln in CSS 
Hintergrund in CSS (Farbe, Position, Bild, Wiederholung, Anhang) – alles zum Festlegen der Hintergrundfarbe oder des Hintergrundbilds von Html-Elementen 
So finden und entfernen Sie ungenutzte Stilzeilen (zusätzliche Selektoren) in der CSS-Datei Ihrer Website Unterschiedliches Styling für interne und externe Links per CSS
Regeln sind Teil unserer Welt und bestimmen stets unser tägliches Handeln. In fast jedem Bereich unseres Lebens gibt es Regeln – Verhaltensregeln, Regeln der Etikette, Regeln beim Überqueren der Straße – die Liste kann endlos sein.
Wie lauten die Regeln? Es handelt sich um eine Reihe von Anweisungen, die befolgt oder befolgt werden müssen. Es gibt viele englische Wörter, die Regeln implizieren oder sich auf Regeln beziehen:
- Vorsichtsmaßnahmen – Warnung
- Gebote – Ordnung, Weisung
- Wegbeschreibung – Anleitung
- Vorwarnungen – Warnung
- Führer
- Richtlinien
- Anweisungen - Anweisungen
- Gesetze – Gesetze
- Richtlinien – Einstellungen
- Verfahren
- Vorschriften – Regeln
- Warnungen – Warnungen
Google-Shortcode
Regeln betreffen uns jeden Tag und sind selbst an den einfachsten Orten schwer zu umgehen. Selbst wenn wir nur die Straße entlanggehen, ist es unmöglich, alle Schilder um uns herum zu übersehen, die Warnungen und Anweisungen zu den zu befolgenden Regeln geben. Der einfachste Weg, eine Regel zu erklären, besteht darin, sie in einem Buch aufzuschreiben oder Schilder anzubringen, die jeder sehen kann. Hier sind einige Regeln, die in Form von Schildern angebracht sind, die wir oft auf der Straße und an öffentlichen Plätzen sehen können, sogenannte Warnschilder.
- kein Radfahren – man darf nicht Fahrrad fahren
- Kein Zutritt – der Zutritt ist verboten
- Es ist kein Skaten erlaubt – Rollschuhlaufen ist nicht gestattet
- Vorsicht vor entgegenkommenden Fahrrädern – Vorsicht vor entgegenkommenden Fahrrädern
- Freihalten = diesen Bereich nicht blockieren – diesen Bereich nicht besetzen
- Sie können Ihre Benzinkanister hier nicht füllen – Sie können keine Gasflaschen füllen
- Gift = iss es nicht – Gift = du kannst es nicht essen
- Rauchen verboten - Rauchen verboten
- Vorsicht vor Menschen, die die Straße überqueren – seien Sie vorsichtig, Fußgänger
- kein Parken erlaubt – Parken ist verboten
- Lassen Sie keinen Müll fallen – werfen Sie keinen Müll
- Keine Kinder erlaubt – Kinder sind nicht erlaubt
- Fotografieren verboten – Fotografieren ist verboten
- Bitte räumen Sie hinter Ihrem Hund auf – räumen Sie hinter Ihrem Hund auf
- Lebensgefahr – Gefahr, Hochspannungsstrom in der Nähe – gefährlich! – gefährlich, Hochspannung
- Kein Spucken erlaubt – man darf nicht spucken
Wie Sie sehen, gibt es um uns herum viele Regeln, und wir müssen sie befolgen, obwohl man sagen muss, dass Menschen manchmal die Regeln nicht befolgen, die Regeln brechen oder gegen die Regeln verstoßen. (die Regeln), manchmal sie werden „gefangen“ und bestraft (sie werden bestraft). Wenn Sie gegen eine Regel verstoßen, werden Sie möglicherweise zur Zahlung von Geld gezwungen, d. h. Eine Geldstrafe/Strafe oder noch schlimmer kann Sie dazu zwingen, zur Polizeistation zu gehen.
Haben Sie jemals gegen die Regeln verstoßen? Menschen, die sich immer an die Regeln halten, werden als „gesetzestreu“ bezeichnet, und Menschen, die gegen die Regeln verstoßen, werden als „Gesetzesbrecher“ bezeichnet.
Abschließend wünschen wir Ihnen „Sei brav!“ , „Befolgen Sie die Regeln!“, „Halten Sie sich aus Ärger heraus!“
Wie schreibe ich korrekten CSS-Code?
Ohne die Grundlagen zu kennen, ist es unmöglich, voranzukommen. Darüber hinaus müssen diese Grundlagen auf einer unterbewussten Ebene trainiert werden. Sie müssen alle Regeln zum Schreiben von sauberem, verständlichem Code auswendig kennen und überall anwenden. Beginnen Sie direkt mit Ihrem aktuellen oder bestenfalls Ihrem nächsten Projekt. Dies wird Ihre CSS-Bibel sein
Nachfolgend finden Sie 15 goldene Regeln zum Schreiben von benutzerfreundlichem und professionellem CSS-Code
1) Verwenden Sie CSS-Reset
CSS-Reset- Dies ist ein bestimmter Codeabschnitt, der am Anfang unserer Stildatei geschrieben wird, in dem alle Werte zurückgesetzt und alle grundlegenden Parameter für alle Stile festgelegt werden, die wir höchstwahrscheinlich für jede spezifische ID schreiben müssten /Klasse. Dadurch können Sie den Code später kürzen und Unterschiede in der Anzeige zwischen Browsern vermeiden.
Hier ist ein CSS-Reset-Beispiel von http://meyerweb.com/eric/tools/css/reset/index.html
/* v1.0 | 20080212 */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del , dfn, em, Schriftart, img, ins, kbd, q, s, samp, klein, Strike, stark, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul , li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td ( margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; Vertical-Align: Grundlinie; Hintergrund: transparent; ) Body ( Zeilenhöhe: 1; ) ol, ul ( Listenstil: keine; ) Blockquote, q ( Anführungszeichen: keine; ) Blockquote:before, Blockquote:after, q: before, q:after ( content: ""; content: none; ) /* Denken Sie daran, Fokusstile zu definieren! */:focus ( outline: 0; ) /* Denken Sie daran, Einfügungen irgendwie hervorzuheben! */ ins ( text-decoration: none; ) del ( text-decoration: line-through; ) /* Tabellen benötigen weiterhin „cellspacing="0"" im Markup */ table ( border-collapse: Collapse; border-spacing : 0; )
2) Verwenden Sie Abkürzungen
Zum Beispiel, um eine lange zu schreiben
Rand oben: 5px; Rand rechts: 10px; Rand unten: 15px; Rand links: 20px;
wir können kurz schreiben:
Rand: 5px 10px 15px 20px;
also im Uhrzeigersinn von oben beginnend.
Hauptsächlich abgekürzter Rand, Rand, Abstand, Schriftart und Hintergrund.
Weitere Details hierzu können Sie einsehen
Aber Farben können wie folgt reduziert werden:
Wenn der Farbcode aus 3 sich wiederholenden Ziffern besteht, können Sie diese drei Ziffern einfach aufschreiben.
Beispiel: #FFFFFF kann als #FFF geschrieben werden, oder #990055 kann als #905 geschrieben werden, aber #F091A4 kann nicht abgekürzt werden.
3) Verwenden Sie Kommentare
Verwenden Sie Kommentare, wo immer Sie sollten – sie helfen wirklich dabei, den Code zu organisieren und ihn für Sie selbst und diejenigen, die damit arbeiten, verständlicher zu machen
Es sieht ungefähr so aus:
/* Ihr Kommentar hier */
Kommentar:
a) Titel der Stilseite – schreiben Sie, wer der Autor des Codes ist und wann er geschrieben wurde
b) Markieren Sie Stilabschnitte – dadurch wird der gesamte Code in Abschnitte unterteilt.
Zum Beispiel:
c) Kommentieren Sie Problembereiche. Zum Beispiel solche, bei denen die Seite in verschiedenen Browsern Unterschiede aufweisen kann. Zum Beispiel:
Eingabe /* IE6-Problem */
d) Schreiben Sie kleine Kommentare an diejenigen, mit denen Sie zusammenarbeiten – zum Beispiel, wenn etwas verbessert werden muss.
4) Fügen Sie eine Blumenlegende hinzu
Mit kleinen CSS-Dateien ist es nicht schwer, alle Farben der Website zu verfolgen.
Aber was ist, wenn wir 5000 Codezeilen haben? - Sie dürfen nicht zulassen, dass die falschen Farben verwendet werden.
Zu diesem Zweck gibt es eine Farblegende – also eine Liste der Farben, die wir in unserer Datei verwenden. Zum Beispiel:
/* /* Hellblau: #4595be /* Dunkelblau: #367595 /* Rot für Links: #9F1212 ************************** ******/
5) Denken Sie daran, was Position:realtive und Position:absolute sind
Die meisten Layout-Neulinge sind durch diese Konzepte verwirrt, aber es gibt eine Regel, mit der Sie Verwirrung vermeiden können.
Position: absolut positioniert das Objekt relativ zur Seite – und es spielt keine Rolle, wo es sich im HTML-Stream befindet. Der Standardwert ist links 0 und oben 0.
Normalerweise wird diese Option nicht verwendet, da sie unpraktisch ist und nur begrenzte Optionen bietet. Aber was für Sie nützlich sein wird, ist, dass, wenn Sie das übergeordnete Element („Wrapper“) unseres Elements auf Position: realtive setzen, Position: absolute bereits ausgerichtet ist Relativ zur oberen linken Ecke des übergeordneten Elements. Sie können diese Eigenschaft also nach Bedarf hinzufügen. Deutlich auf dem Bild:
6) Vermeiden Sie den Einsatz von Hacks
Manchmal zwingen uns Browser wie IE6 und IE7 einfach dazu, Hacks zu verwenden. Khaki ist ein unmittelbarer Fehler für den Validator. Fügen Sie es also in spezielle CSS-Dateien für jeden Browser ein.
Sie können für jeden Browser spezielle Einträge für Hacks sehen und erfahren, wie Sie diese in separate Dateien einfügen
7) Verwenden Sie Ränder in Ihren Standortbeschreibungen
Das fällt nicht oft auf, hilft aber dabei, Probleme bei verschiedenen Browsern zu vermeiden.
Die Idee ist folgende: Anstatt Polsterung für das übergeordnete Element zu verwenden, verwenden wir einen Rand für die untergeordneten Elemente. Also statt
#main-content ( padding-left: 10px )
#main-content ( ) #main-content #left-column ( margin-left: 10px )
An der Verwendung von Polsterungen ist nichts auszusetzen, aber die Erfahrung zeigt, dass der Spielraum besser ist
8) Verwenden Sie Schwimmer
Wenn Sie einem Element einen Float zuweisen möchten, schreiben Sie in dessen übergeordnetes Element Überlauf versteckt
Ul (Überlauf: versteckt;) ul li (Float: links;)
Ohne diese Eigenschaft kann es zu einem unschönen Fließen des Elements kommen, außerdem kann es zu Problemen beim Festlegen von Rändern oder Umrandungen kommen.
Wenn Sie möchten, dass das Element nicht herumfließt, geben Sie dies an Lösche beide unterhalb des stromlinienförmigen Elements. Dies wird oft anstelle von overflow:hidden;
9) Fügen Sie display:inline für Float-Elemente hinzu
Ein ziemlich bekanntes Problem in IE6 mit der Verdoppelung der Margen bei Float-Elementen. Das heißt, wenn wir 20 Pixel benötigen, müssen wir 10 Pixel schreiben, da sich dieser Einzug verdoppelt. Obwohl IE6 bereits am Aussterben ist und viele Designer keine Zeit damit verbringen, die Site dafür zu optimieren, wird ein kleiner Codeausschnitt die Anzeige darin angenehmer machen. Also sagen wir mal
Anzeige: inline /* IE6 Problem */
für ein Element, auf das ein Float angewendet wird
10) Mit Sprites das Leben angenehmer gestalten
Sprite-Bilder sind eine sehr praktische Sache. Sie geben einen Überblick über die Grafiken der gesamten Seite und verkürzen die Ladezeiten.
Wenn Sie Englisch können, dann hier
11) Die Struktur der Site-Dateien sollte klar sein
Nehmen Sie sich die Zeit, die Site-Struktur klar zu machen. Stellen Sie alles in die Regale.
Zum Beispiel:
Hier "Webseiten-Name"- der Name der Website, mit der wir arbeiten. Dieser Ordner enthält die HTML-Dateien für die Site sowie die Ordner Vermögenswerte Und Stile.
Im Ordner Vermögenswerte enthalten Dateien, die von der Website heruntergeladen werden können, beispielsweise Archive oder PDF-Dateien. Im Ordner Stile enthalten wiederum die Ordner CSS, Bilder und Javascript.
- CSS- enthält alle CSS-Dateien wie reset.css, layout.css und main.css
- Bilder- alle Bilder der Website. Dieser Ordner kann auch in Abschnitte unterteilt werden.
- Javascript- alle Javascript-Dateien.
Dieses Diagramm ist ungefähr und kann auf verschiedene Arten angezeigt werden. Die Idee ist, dass es Ihnen hilft, schneller zu arbeiten und die Website klarer und übersichtlicher zu machen.
12) Stile erweitern
Optionaler Hinweis: Es ist besser, die Namen der Klassen und Stil-IDs baumartig zu schreiben, damit alles klar und visuell ist.
13) Verwenden Sie Pixel statt relativer Werte
Alles ist ganz einfach: Pixel belasten den Code weniger, da das Dokument keine Prozentsätze relativer Werte berechnen muss.
Das Problem bei relativen Größen ist die Übertragung dieser Relativität.
Zur Verdeutlichung erkläre ich es anhand eines Beispiels:
body (Schriftgröße: 62,5 %) bedeutet Schriftgröße: 1em, also 10 Pixel.
Wenn #blog-content 14px benötigt, schreiben Sie:
#Blog-Inhalt ( Schriftgröße: 1,4 em; )
Wenn nun das H3-Tag in #blog-content 20 Pixel benötigt, könnte es wie folgt festgelegt werden:
#Blog-Inhalt (Schriftgröße: 1,4em;) #Blog-Inhalt h3 (Schriftgröße: 2,0em)
Alles wäre gut, aber wir haben Relativität. Und diese 2.0em gilt für 1.4em
#Blog-Inhalt, und am Ende erhalten wir eine Größe von 28 Pixel.
Verwenden Sie daher feste Werte.
14) Beschränken Sie Pseudoklassen auf Ankertags
Neue Browser haben dieses Problem nicht; es liegt an einer Reihe älterer Browser, allen voran IE6.
Das Problem besteht darin, dass Pseudoklassen (wie :hover) in älteren Browsern nur funktionieren, wenn sie auf ein Tag angewendet werden A, also
#header ul li:hover (Hintergrundfarbe: #900)
funktioniert nicht im IE6
Dieses Problem wird mit jQuery behoben
15) Vermeiden Sie Probleme mit Selektoren
Verwenden Sie nach Möglichkeit Selektoren
Verwenden Sie beispielsweise stattdessen
#main-content.main-header
#Hauptinhalt h1
Seien Sie vorsichtig bei der Gruppierung von Selektoren
Denn hier können relative Werte schiefgehen, wenn man sie nutzt
Wenn in diesem Beispiel alles in Ordnung ist,
Hauptinhalt div,.main-content p ( Farbe: #000; )
Seien Sie in diesem Zusammenhang vorsichtig mit relativen Werten.
Main-content div,.main-content p ( line-height: 1.3em; )
Und schlussendlich
Um erfolgreichen Code zu schreiben, vermeiden Sie es, ständig eine Sache in eine andere zu verpacken und so weiter.
Lernen Sie die Tags h1, ul und p.
Der Schlüssel zum Erfolg ist einfach: üben, üben, üben
Viel Erfolg beim Training)
» »
Teilen ist Kümmern!
Attribut von „Was tut“.
