Zusammenfassung häufig verwendeter CSS-Kapselungsmethoden

/* normalisieren.css */

html {
  Zeilenhöhe: 1,15;
  /* 1 */
  -ms-text-size-adjust: 100 %;
  /* 2 */
  -Webkit-Textgrößenanpassung: 100 %;
  /* 2 */
}

Körper {
  Rand: 0;
}

Artikel,
beiseite,
Fußzeile,
Kopfzeile,
Navigation,
Abschnitt {
  Anzeige: Block;
}

h1 {
  Schriftgröße: 2em;
  Rand: 0,67em 0;
}

Bildunterschrift,
Figur,
hauptsächlich {
  /* 1 */
  Anzeige: Block;
}

Figur {
  Rand: 1em 40px;
}

hr {
  Box-Größe: Inhaltsbox;
  /* 1 */
  Höhe: 0;
  /* 1 */
  Überlauf: sichtbar;
  /* 2 */
}

vor {
  Schriftfamilie: Monospace, Monospace;
  /* 1 */
  Schriftgröße: 1em;
  /* 2 */
}

A {
  Hintergrundfarbe: transparent;
  /* 1 */
  -webkit-text-decoration-skip: Objekte;
  /* 2 */
}

abbr[Titel] {
  Rahmen unten: keiner;
  /* 1 */
  Textdekoration: Unterstreichen;
  /* 2 */
  Textdekoration: Unterstreichung, gepunktet;
  /* 2 */
}

B,
stark {
  Schriftstärke: erben;
}

B,
stark {
  Schriftstärke: fett;
}

Code,
kbd,
samp {
  Schriftfamilie: Monospace, Monospace;
  /* 1 */
  Schriftgröße: 1em;
  /* 2 */
}

dfn {
  Schriftstil: kursiv;
}

markieren {
  Hintergrundfarbe: #ff0;
  Farbe: #000;
}

klein
  Schriftgröße: 80 %;
}

Unter,
sup {
  Schriftgröße: 75 %;
  Zeilenhöhe: 0;
  Position: relativ;
  vertikale Ausrichtung: Grundlinie;
}

Unter {
  unten: -0,25em;
}

sup {
  oben: -0,5em;
}

Audio,
Video
  Anzeige: Inline-Block;
}

audio:nicht([Steuerung]) {
  Anzeige: keine;
  Höhe: 0;
}

img {
  Rahmenstil: keiner;
}

svg:nicht(:root) {
  Überlauf: versteckt;
}

Taste,
Eingang,
optgruppe,
wählen,
Textbereich {
  Schriftfamilie: serifenlos;
  /* 1 */
  Schriftgröße: 100 %;
  /* 1 */
  Zeilenhöhe: 1,15;
  /* 1 */
  Rand: 0;
  /* 2 */
}

Taste,
Eingabe {
  /* 1 */
  Überlauf: sichtbar;
}

Taste,
wählen {
  /* 1 */
  Texttransformation: keine;
}

Taste,
html [Typ="Schaltfläche"],

/* 1 */

[Typ="Zurücksetzen"],
[Typ="Senden"] {
  -webkit-erscheinungsbild: Schaltfläche;
  /* 2 */
}

Schaltfläche::-moz-focus-inner,
[Typ="Schaltfläche"]::-moz-focus-inner,
[Typ="Zurücksetzen"]::-moz-focus-inner,
[Typ="Senden"]::-moz-focus-inner {
  Rahmenstil: keiner;
  Polsterung: 0;
}

Schaltfläche: -moz-focusring,
[Typ = "Schaltfläche"]: -moz-Fokusring,
[Typ="Zurücksetzen"]:-moz-focusring,
[Typ="Senden"]:-moz-focusring {
  Umriss: 1px gepunkteter ButtonText;
}

Feldsatz {
  Polsterung: 0,35em 0,75em 0,625em;
}

Legende
  Box-Größe: Rahmenbox;
  /* 1 */
  Farbe: erben;
  /* 2 */
  Anzeige: Tabelle;
  /* 1 */
  maximale Breite: 100 %;
  /* 1 */
  Polsterung: 0;
  /* 3 */
  Leerzeichen: normal;
  /* 1 */
}

Fortschritt
  Anzeige: Inline-Block;
  /* 1 */
  vertikale Ausrichtung: Grundlinie;
  /* 2 */
}

Textbereich {
  Überlauf: automatisch;
}

[Typ="Kontrollkästchen"],
[Typ="Radio"]
  Box-Größe: Rahmenbox;
  /* 1 */
  Polsterung: 0;
  /* 2 */
}

[Typ="Nummer"]::-webkit-inner-spin-button,
[Typ="Nummer"]::-webkit-outer-spin-button {
  Höhe: automatisch;
}

[Typ="Suche"]
  -webkit-apperance: Textfeld;
  /* 1 */
  Umriss-Versatz: -2px;
  /* 2 */
}

[Typ="Suche"]::-webkit-search-cancel-button,
[Typ="Suche"]::-webkit-search-decoration {
  -webkit-auftritt: keines;
}

 ::-WebKit-Datei-Upload-Schaltfläche {
  -webkit-erscheinungsbild: Schaltfläche;
  /* 1 */
  Schriftart: erben;
  /* 2 */
}

Einzelheiten,

/* 1 */

Speisekarte {
  Anzeige: Block;
}

Zusammenfassung {
  Anzeige: Listenelement;
}

Leinwand {
  Anzeige: Inline-Block;
}

Vorlage {
  Anzeige: keine;
}

[versteckt]
  Anzeige: keine;
}

/* zurücksetzen */

html,
Körper,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
tt,
ul,
ol,
li,
P,
Blockzitat,
vor,
Std.
Figur,
Tisch,
Untertitel,
Mai,
td,
bilden,
Feldsatz,
Legende,
Eingang,
Taste,
Textbereich,
Speisekarte {
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}

2. Telefon-Reset

/* normalisieren.css */

html {
  Zeilenhöhe: 1,15;
  /* 1 */
  -ms-text-size-adjust: 100 %;
  /* 2 */
  -Webkit-Textgrößenanpassung: 100 %;
  /* 2 */
}

Körper {
  Rand: 0;
}

Artikel,
beiseite,
Fußzeile,
Kopfzeile,
Navigation,
Abschnitt {
  Anzeige: Block;
}

h1 {
  Schriftgröße: 2em;
  Rand: 0,67em 0;
}

Bildunterschrift,
Figur,
hauptsächlich {
  /* 1 */
  Anzeige: Block;
}

Figur {
  Rand: 1em 40px;
}

hr {
  Box-Größe: Inhaltsbox;
  /* 1 */
  Höhe: 0;
  /* 1 */
  Überlauf: sichtbar;
  /* 2 */
}

vor {
  Schriftfamilie: Monospace, Monospace;
  /* 1 */
  Schriftgröße: 1em;
  /* 2 */
}

A {
  Hintergrundfarbe: transparent;
  /* 1 */
  -webkit-text-decoration-skip: Objekte;
  /* 2 */
}

abbr[Titel] {
  Rahmen unten: keiner;
  /* 1 */
  Textdekoration: Unterstreichen;
  /* 2 */
  Textdekoration: Unterstreichung, gepunktet;
  /* 2 */
}

B,
stark {
  Schriftstärke: erben;
}

B,
stark {
  Schriftstärke: fett;
}

Code,
kbd,
Beispiel {
  Schriftfamilie: Monospace, Monospace;
  /* 1 */
  Schriftgröße: 1em;
  /* 2 */
}

dfn {
  Schriftstil: kursiv;
}

markieren {
  Hintergrundfarbe: #ff0;
  Farbe: #000;
}

klein
  Schriftgröße: 80 %;
}

Unter,
sup {
  Schriftgröße: 75 %;
  Zeilenhöhe: 0;
  Position: relativ;
  vertikale Ausrichtung: Grundlinie;
}

Unter {
  unten: -0,25em;
}

sup {
  oben: -0,5em;
}

Audio,
Video
  Anzeige: Inline-Block;
}

audio:nicht([Steuerung]) {
  Anzeige: keine;
  Höhe: 0;
}

img {
  Rahmenstil: keiner;
}

svg:nicht(:root) {
  Überlauf: versteckt;
}

Taste,
Eingang,
optgruppe,
wählen,
Textbereich {
  Schriftfamilie: serifenlos;
  /* 1 */
  Schriftgröße: 100 %;
  /* 1 */
  Zeilenhöhe: 1,15;
  /* 1 */
  Rand: 0;
  /* 2 */
}

Taste,
Eingabe {
  /* 1 */
  Überlauf: sichtbar;
}

Taste,
wählen {
  /* 1 */
  Texttransformation: keine;
}

Taste,
html [Typ="Schaltfläche"],

/* 1 */

[Typ="Zurücksetzen"],
[Typ="Senden"] {
  -webkit-erscheinungsbild: Schaltfläche;
  /* 2 */
}

Schaltfläche::-moz-focus-inner,
[Typ="Schaltfläche"]::-moz-focus-inner,
[Typ="Zurücksetzen"]::-moz-focus-inner,
[Typ="Senden"]::-moz-focus-inner {
  Rahmenstil: keiner;
  Polsterung: 0;
}

Schaltfläche: -moz-focusring,
[Typ = "Schaltfläche"]: -moz-Fokusring,
[Typ="Zurücksetzen"]:-moz-focusring,
[Typ="Senden"]:-moz-focusring {
  Umriss: 1px gepunkteter ButtonText;
}

Feldsatz {
  Polsterung: 0,35em 0,75em 0,625em;
}

Legende
  Box-Größe: Rahmenbox;
  /* 1 */
  Farbe: erben;
  /* 2 */
  Anzeige: Tabelle;
  /* 1 */
  maximale Breite: 100 %;
  /* 1 */
  Polsterung: 0;
  /* 3 */
  Leerzeichen: normal;
  /* 1 */
}

Fortschritt
  Anzeige: Inline-Block;
  /* 1 */
  vertikale Ausrichtung: Grundlinie;
  /* 2 */
}

Textbereich {
  Überlauf: automatisch;
}

[Typ="Kontrollkästchen"],
[Typ="Radio"]
  Box-Größe: Rahmenbox;
  /* 1 */
  Polsterung: 0;
  /* 2 */
}

[Typ="Nummer"]::-webkit-inner-spin-button,
[Typ="Nummer"]::-webkit-outer-spin-button {
  Höhe: automatisch;
}

[Typ="Suche"]
  -webkit-apperance: Textfeld;
  /* 1 */
  Umriss-Versatz: -2px;
  /* 2 */
}

[Typ="Suche"]::-webkit-search-cancel-button,
[Typ="Suche"]::-webkit-search-decoration {
  -webkit-auftritt: keines;
}

 ::-WebKit-Datei-Upload-Schaltfläche {
  -webkit-erscheinungsbild: Schaltfläche;
  /* 1 */
  Schriftart: erben;
  /* 2 */
}

Einzelheiten,

/* 1 */

Speisekarte {
  Anzeige: Block;
}

Zusammenfassung {
  Anzeige: Listenelement;
}

Leinwand {
  Anzeige: Inline-Block;
}

Vorlage {
  Anzeige: keine;
}

[versteckt]
  Anzeige: keine;
}

/* zurücksetzen */

html,
Körper,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
tt,
ul,
ol,
li,
P,
Blockzitat,
vor,
Std.
Figur,
Tisch,
Untertitel,
Mai,
td,
bilden,
Feldsatz,
Legende,
Eingang,
Taste,
Textbereich,
Speisekarte {
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}

html,
Körper {
  /* Textauswahl deaktivieren */
  -webkit-Benutzerauswahl: keine;
  Benutzerauswahl: keine;
  Schriftart: Oswald, „Open Sans“, Helvetica, Arial, serifenlos
}

/* Deaktivieren Sie langes Drücken auf Links und Bilder, um Menüs einzublenden*/

A,
img {
  -webkit-touch-callout: keine;
}

/*ios android entfernt den Stil des integrierten Schattens*/

A,
Eingabe {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Eingabe[Typ="Text"] {
  -webkit-auftritt: keines;
}

/* normalisieren.css */

html {
  Zeilenhöhe: 1,15;
  /* 1 */
  -ms-text-size-adjust: 100 %;
  /* 2 */
  -Webkit-Textgrößenanpassung: 100 %;
  /* 2 */
}

Körper {
  Rand: 0;
}

Artikel,
beiseite,
Fußzeile,
Kopfzeile,
Navigation,
Abschnitt {
  Anzeige: Block;
}

h1 {
  Schriftgröße: 2em;
  Rand: 0,67em 0;
}

Bildunterschrift,
Figur,
hauptsächlich {
  /* 1 */
  Anzeige: Block;
}

Figur {
  Rand: 1em 40px;
}

hr {
  Box-Größe: Inhaltsbox;
  /* 1 */
  Höhe: 0;
  /* 1 */
  Überlauf: sichtbar;
  /* 2 */
}

vor {
  Schriftfamilie: Monospace, Monospace;
  /* 1 */
  Schriftgröße: 1em;
  /* 2 */
}

A {
  Hintergrundfarbe: transparent;
  /* 1 */
  -webkit-text-decoration-skip: Objekte;
  /* 2 */
}

abbr[Titel] {
  Rahmen unten: keiner;
  /* 1 */
  Textdekoration: Unterstreichen;
  /* 2 */
  Textdekoration: Unterstreichung, gepunktet;
  /* 2 */
}

B,
stark {
  Schriftstärke: erben;
}

B,
stark {
  Schriftstärke: fett;
}

Code,
kbd,
Beispiel {
  Schriftfamilie: Monospace, Monospace;
  /* 1 */
  Schriftgröße: 1em;
  /* 2 */
}

dfn {
  Schriftstil: kursiv;
}

markieren {
  Hintergrundfarbe: #ff0;
  Farbe: #000;
}

klein
  Schriftgröße: 80 %;
}

Unter,
sup {
  Schriftgröße: 75 %;
  Zeilenhöhe: 0;
  Position: relativ;
  vertikale Ausrichtung: Grundlinie;
}

Unter {
  unten: -0,25em;
}

sup {
  oben: -0,5em;
}

Audio,
Video
  Anzeige: Inline-Block;
}

audio:nicht([Steuerung]) {
  Anzeige: keine;
  Höhe: 0;
}

img {
  Rahmenstil: keiner;
}

svg:nicht(:root) {
  Überlauf: versteckt;
}

Taste,
Eingang,
optgruppe,
wählen,
Textbereich {
  Schriftfamilie: serifenlos;
  /* 1 */
  Schriftgröße: 100 %;
  /* 1 */
  Zeilenhöhe: 1,15;
  /* 1 */
  Rand: 0;
  /* 2 */
}

Taste,
Eingabe {
  /* 1 */
  Überlauf: sichtbar;
}

Taste,
wählen {
  /* 1 */
  Texttransformation: keine;
}

Taste,
html [Typ="Schaltfläche"],

/* 1 */

[Typ="Zurücksetzen"],
[Typ="Senden"] {
  -webkit-apperance: Schaltfläche;
  /* 2 */
}

Schaltfläche::-moz-focus-inner,
[Typ="Schaltfläche"]::-moz-focus-inner,
[Typ="Zurücksetzen"]::-moz-focus-inner,
[Typ="Senden"]::-moz-focus-inner {
  Rahmenstil: keiner;
  Polsterung: 0;
}

Schaltfläche: -moz-focusring,
[Typ = "Schaltfläche"]: -moz-Fokusring,
[Typ="Zurücksetzen"]:-moz-focusring,
[Typ="Senden"]:-moz-focusring {
  Umriss: 1px gepunkteter ButtonText;
}

Feldsatz {
  Polsterung: 0,35em 0,75em 0,625em;
}

Legende
  Box-Größe: Rahmenbox;
  /* 1 */
  Farbe: erben;
  /* 2 */
  Anzeige: Tabelle;
  /* 1 */
  maximale Breite: 100 %;
  /* 1 */
  Polsterung: 0;
  /* 3 */
  Leerzeichen: normal;
  /* 1 */
}

Fortschritt
  Anzeige: Inline-Block;
  /* 1 */
  vertikale Ausrichtung: Grundlinie;
  /* 2 */
}

Textbereich {
  Überlauf: automatisch;
}

[Typ="Kontrollkästchen"],
[Typ="Radio"]
  Box-Größe: Rahmenbox;
  /* 1 */
  Polsterung: 0;
  /* 2 */
}

[Typ="Nummer"]::-webkit-inner-spin-button,
[Typ="Nummer"]::-webkit-outer-spin-button {
  Höhe: automatisch;
}

[Typ="Suche"]
  -webkit-apperance: Textfeld;
  /* 1 */
  Umriss-Versatz: -2px;
  /* 2 */
}

[Typ="Suche"]::-webkit-search-cancel-button,
[Typ="Suche"]::-webkit-search-decoration {
  -webkit-auftritt: keines;
}

 ::-WebKit-Datei-Upload-Schaltfläche {
  -webkit-erscheinungsbild: Schaltfläche;
  /* 1 */
  Schriftart: erben;
  /* 2 */
}

Einzelheiten,

/* 1 */

Speisekarte {
  Anzeige: Block;
}

Zusammenfassung {
  Anzeige: Listenelement;
}

Leinwand {
  Anzeige: Inline-Block;
}

Vorlage {
  Anzeige: keine;
}

[versteckt]
  Anzeige: keine;
}

/* zurücksetzen */

html,
Körper,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
tt,
ul,
ol,
li,
P,
Blockzitat,
vor,
Std.
Figur,
Tisch,
Untertitel,
Mai,
td,
bilden,
Feldsatz,
Legende,
Eingang,
Taste,
Textbereich,
Speisekarte {
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}

html,
Körper {
  /* Textauswahl deaktivieren */
  -webkit-Benutzerauswahl: keine;
  Benutzerauswahl: keine;
  Schriftart: Oswald, „Open Sans“, Helvetica, Arial, serifenlos
}

/* Deaktivieren Sie langes Drücken auf Links und Bilder, um Menüs einzublenden*/

A,
img {
  -webkit-touch-callout: keine;
}

/*ios android entfernt den Stil des integrierten Schattens*/

A,
Eingabe {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Eingabe[Typ="Text"] {
  -webkit-auftritt: keines;
}

/* Textauswahl deaktivieren */
.usn{
    -webkit-Benutzerauswahl: keine;
    -moz-Benutzerauswahl: keine;
    -ms-Benutzerauswahl: keine;
    -o-Benutzerauswahl: keine;
    Benutzerauswahl: keine;
}
/* Schweben */
.fl { float: links; }
.fr { float: rechts; }
.cf { Zoom: 1; }
.cf:nach {
    Inhalt:".";
    Anzeige:Block;
    klar: beides;
    Sichtbarkeit: versteckt;
    Höhe: 0;
    Überlauf: versteckt;
}

/* Elementtyp */
.db { Anzeige: Block; }
.dn { Anzeige: keine; }
.di { Anzeige: inline }
.dib {Anzeige: Inline-Block;}
.transparent { Deckkraft: 0 }

/*Textlayout, Farbe*/
.f12 { Schriftgröße:12px }
.f14 { Schriftgröße:14px }
.f16 { Schriftgröße:16px }
.f18 { Schriftgröße:18px }
.f20 { Schriftgröße:20px }
.fb { Schriftstärke:fett }
.fn { Schriftstärke:normal }
.t2 { Texteinzug: 2em }
.rot,a.rot { Farbe:#cc0031 }
.dunkelblau,a.dunkelblau { Farbe:#039 }
.grau,ein.grau { Farbe:#878787 }
.lh150 { Zeilenhöhe:150% }
.lh180 { Zeilenhöhe:180% }
.lh200 { Zeilenhöhe:200% }
.unl { Textdekoration:Unterstreichung; }
.no_unl { Textdekoration: keine; }
.tl { text-align: left; }
.tc { Textausrichtung: zentriert; }
.tr { Textausrichtung: rechts; }
.tj { Textausrichtung: Blocksatz; Textausrichtung: Zwischenideogramm; }
.wn { /* Kein Zeilenumbruch erzwingen */
    Zeilenumbruch: normal;
    Leerzeichen:nowrap;
}
.wb { /* Zeilenumbruch erzwingen */
    Leerzeichen: normal;
    Zeilenumbruch: Wortumbruch;
    Worttrennung:alles trennen;
}
.wp { /* Behalte die Leerzeichenfolge bei*/
    Überlauf: ausgeblendet; Textausrichtung: links; Leerzeichen: vorumbrechen; Zeilenumbruch: Wortumbruch; Wörterumbruch: alles umbrechen;
}
.wes { /* Zusätzliche Teile werden durch Auslassungspunkte gekennzeichnet und für eine Zeile verwendet*/
    Überlauf: versteckt;
    Zeilenumbruch: normal;
    Leerzeichen:nowrap;
    Textüberlauf: Auslassungspunkte;
}
.wes-2 { /* Gilt für WebKit-Kernel und mobile Endgeräte*/
    Anzeige: -webkit-box;
    -webkit-box-orient: vertikal;
    -Webkit-Leitungsklemme: 2;
    Überlauf: versteckt;
} 
.wes-3 {
    Anzeige: -webkit-box;
    -webkit-box-orient: vertikal;
    -Webkit-Leitungsklemme: 3;
    Überlauf: versteckt;
}
.wes-4 {
    Anzeige: -webkit-box;
    -webkit-box-orient: vertikal;
    -Webkit-Leitungsklemme: 4;
    Überlauf: versteckt;
}

/* Überlaufstil*/
.ofh { Überlauf: versteckt; }
.ofs {Überlauf: scrollen; }
.ofa {Überlauf: auto; }
.ofv {Überlauf: sichtbar; }

/* Positionierungsmethode */
.ps {position: statisch; }
.pr {position: relativ;zoom:1; }
.pa {position: absolute; }
.pf {position: fest; }

/* Vertikale Ausrichtung */
.vt {vertical-align: top; }
.vm {vertical-align: middle; }
.vb {vertical-align: unten; }

/* Mausstil*/
.csd { Cursor: Standard; }
.csp {cursor: Zeiger; }
.csh {cursor: Hilfe; }
.csm { Cursor: bewegen; }

/* flexibles Layout */
.df-sb {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: Abstand dazwischen;
}
.df-sa {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: Abstand herum;
}

/* Vertikale Mitte */
.df-c {
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
}
.tb-c {
    Textausrichtung: zentriert;
    Anzeige: Tabellenzelle;
    vertikale Ausrichtung: Mitte;
}
.ts-c {
    Position: absolut;
    links: 50 %; oben: 50 %;
    transformieren: übersetzen(-50 %, -50 %);
}
.ts-mc {
    Position: absolut;
    links: 0;rechts: 0;
    unten: 0; oben: 0;
    Rand: automatisch;
}