HTML- und CSS-Aspekte

Dieses Material enthält Aspekte, die nützlich sind, um den HTML-Entwickler zu kennen und sich daran zu erinnern. Einige der Fragen sind dem IE gewidmet - ich selbst habe mich geweigert, den IE6 zu unterstützen, aber zu wissen, dass die Merkmale seines Verhaltens nicht überflüssig sind.

1. Browser-Modi


Standard:
Standardmodus - Die im Dokument enthaltenen Stylesheets entsprechen der CSS 2.1-Spezifikation (neueste Versionen).

Nicht-Standardmodus (Abwärtskompatibilitätsmodus):
Quirks-Modus - Der Browser ignoriert einige CSS-Regeln und simuliert das Verhalten der alten Engine.

Annähernd an den
Standardmodus : Fast-Standardmodus - Opera, Firefox, Safari, in dem die Position der Bilder in den Tabellenzellen im Kompatibilitätsmodus angezeigt wird.

2. Selektoren, Pseudoklassen, Pseudoelemente


1) Selektoren:
  • Tag-Selektor - Jeder HTML-Tag, für den Formatierungsregeln definiert sind, kann als Selektor fungieren. Tag-Name - Groß- / Kleinschreibung spielt keine Rolle
    tagName {
    property1: value1;
    property2: value2;

    }



  • Der Selektor von Klassen - Selektoren im Dokument kann eine beliebige Anzahl sein. className - Groß- und Kleinschreibung beachten
    .className {

    }



  • ID-Selektor - Der Identifikator identifiziert den eindeutigen Namen des Elements. idName - Groß- und Kleinschreibung beachten
    #idName {

    }



  • Kontext-Selektoren - bestehen aus Tag-Selektoren, Klassen-Selektoren, ID-Selektoren usw., die durch Leerzeichen getrennt sind.
    sel1 sel2 … {

    }


  • Benachbarte Selektoren sind Elemente eines Dokuments, wenn sie im Code aufeinander folgen. In der CSS-Syntax werden Werte auf die Eigenschaften des Elements angewendet, das auf + b folgt , var ist benachbart

    Lorem ipsum dolor sit amet.



    sel1 + sel2 {

    }


  • Untergeordnete Selektoren - befinden sich direkt im übergeordneten Element. In der CSS-Syntax gelten Stilwerte nur für ein untergeordnetes Element.

    Ipsum dolor sit ein lorem amet , consectetuer adipiscing
    elit, sed die diem nonummy nibh euismod tincidunt ut lacreet dolore magna erat volutpat aliguam.


    em - child p sel1 - Elternselektor sel2 - Kindselektor
    sel1 > sel2 {

    }





  • Attributselektoren:
    [attribute] {

    }


  • Universeller Selektor - Definiert den Stil für alle Elemente des Dokuments.
    * {

    }


2) Pseudoklassen:

sel: pClass {
...
}

•: Link - Link nicht besucht (Sie können ihn weglassen)
•: besucht - Link besucht
• : Bewegen Sie den Mauszeiger über den Link
•: Aktiv - Klicken Sie auf den Link
•: Fokus - Weisen Sie dem Element den Fokus zu (a, Eingabe, Auswahl) , textarea)
•: first-child - wird auf das erste untergeordnete Element des Selektors angewendet
•: lang (lang)

3) Pseudoelemente:

Mit Pseudoelementen können Sie den Stil von Elementen festlegen, die nicht in der Elementstruktur definiert sind, und Inhalte generieren, die nicht im Quellcode des Dokumententexts enthalten sind.

•: erste Zeile - Stil der ersten Zeile
•: erster Buchstabe - Stil des ersten Zeichens
•: nach {content: “...”; } - wird verwendet, um den zugewiesenen Inhalt nach dem Element einzufügen.
•: before {content: “...”; } - verwendet, um den zugewiesenen Inhalt vor dem Element einzufügen

3. Kaskadierung und Spezifität


Cascading Regeln bestimmen die folgenden Prioritäten:
! 1) Benutzerdefinierte Stile gekennzeichnet wichtig
2) den Stil des Autors, von einer Flagge markiert wichtig!
3) Die Autoren Stil
4) Benutzerdefinierte Stile
5) Stilarten Standardbrowser

Spezifität:
Für die Berechnung der einzelnen Arten von Selektor ist ein Zahlenwert zugeordnet. Die Spezifität wird berechnet, indem der Wert jedes Selektors summiert wird. Die Berechnung erfolgt in einem System mit unbegrenzt hoher Basis.

abcd

1) Wenn der Stil inline ist, ist a = 1
2) b ist gleich der Gesamtzahl der Identifikator-Selektoren
3) c ist gleich der Gesamtzahl der Klassen-, Pseudoklassen- und Attribut-Selektoren
4) d ist gleich der Anzahl der Typselektoren und Pseudoelemente

4. hasLayout


hasLayout ist eine IE-Eigenschaft, die bestimmt, wie ein Element in einem Stream platziert wird, wie groß es ist, wie es positioniert wird, wie es auf Ereignisse reagiert und wie es sich auf andere Elemente auswirkt. Grundsätzlich sind Elemente im Internet Explorer nicht für die Organisation selbst verantwortlich. Ein Tag oder kann eine Position haben, wie im Quellcode und im Dokumentenfluss, aber ihr Inhalt organisiert den nächsten Vorfahren mit einem Layout (normalerweise). Solche Elemente sind darauf angewiesen, dass der Ahne den ganzen schwierigen Teil für sie bei der Bestimmung der Größe und der Maßeinheiten leistet.

Elemente, die standardmäßig über hasLayout verfügen:
• html, body
• table, tr, th, td
• img
• hr
• Eingabe, Schaltfläche, Auswahl, Textbereich, Feldsatz, Legende
• iframe, Einbettung, Objekt, Applet
• Laufschrift
Die folgenden Werte der aufgelisteten Eigenschaften ergeben das Layout-Element (hasLayout = true):
• Position: absolut
• Float: links oder rechts
• Höhe, Breite: jeder andere Wert als auto
• Anzeige: Inline-Block
• Zoom: jeder andere Wert als normal (ungültige Eigenschaft) )
• Schreibmodus: tb-rl
• Überlauf, Überlauf-x, Überlauf-y: auto | scroll | hidden (nur in IE7)
• Position: fest (nur in IE7)
• min-width, min-height: beliebiger Wert (nur in IE7)
• max-width, max-height: ein beliebiger Wert außer none (nur in IE7)

Um hasLayout zu deaktivieren, müssen Sie einen anderen als den oben aufgeführten Wert angeben (z. B. width: auto oder float: none).
Mögliche Probleme:
• Floating-Elemente werden automatisch von Elementen mit hasLayout gelöscht.
• Relativ positionierte Elemente erhalten kein hasLayout.
• Außenränder benachbarter Elemente mit hasLayout werden nicht zusammengeführt.
• Der Klickbereich eines Block-Hyperlinks ohne hasLayout ist auf den Textbereich beschränkt

5. IE-Fehler und ihre Lösungen


1) Bedingte Kommentare: 2) Fehler mit doppeltem Rand von Floating-Elementen: Problem: In IE 6 wird ein doppelter Rand für Floating-Elemente erstellt. Lösung: Anzeige hinzufügen: Inline. 3) Absolute Positionierung in einem Container, der relativ zu Folgendem positioniert ist: Problem: Absolut positionierte Elemente befinden sich in einem Container, der relativ zu Folgendem positioniert ist. Folglich hat der übergeordnete Container kein hasLayout und absolut positionierte Container werden relativ zum Ansichtsfenster platziert. Lösung: Legen Sie den übergeordneten Container hasLayout fest. Beispiel: Höhe: 1%. 4) Absolut positionierte Behälter in absolut / relativ positionierten Behältern:


















Problem: Im IE werden absolut positionierte Container in relativ positionierten Containern bei Überlagerung nicht gemäß dem Z-Index ausgerichtet.
Lösung: Fügen Sie den übergeordneten absolut / relativ positionierten Elementen den Z-Index hinzu.

Jetzt auch beliebt: