Stiftung CSS Referenz
Stiftung defaults
Stiftung , um den Browser Standard - Schriftgröße verwenden ( font-size:100% ). Für die meisten Desktop-Browser-Gerät, ist die Standard-Schriftgröße 16px. Für Browser für mobile Geräte, ist die Standard-Schriftgröße 12px. Die Standardschriftart ist "Helvetica Neue" , line-height standardmäßig auf 1.5 .
Diese Einstellungen werden angewendet , um <body> Element innerhalb des Elements.
Zusätzlich <p> Außenelement und der Boden der Abstand (margin-bottom) ist 1.25rem, Zeilenhöhe von 1,6.
Text
Die folgenden HTML-Elemente, Set Stiftung einen eigenständigen Stil zu machen, um es nicht den Browser-Stil Standard zu verwenden. Klicken Sie auf "versuchen" Online-Instanz anzuzeigen.
| Element | Beschreibung | Online Beispiele |
|---|---|---|
| <H1> - <h6> | h1 - h6 Schriften | versuchen |
| <a> | Hellblau Links, bewegen Sie die Maus auf den Link wird unterstrichen | versuchen |
| <Small> | Hellgrau Text Untertitel | versuchen |
| <Blockquote> | Citation Modul | versuchen |
| <Strong> | Bold Text | versuchen |
| <Em> | Kursivschrift | versuchen |
| <Abbr> | Geben Sie das Wort Abkürzung, verwenden Sie das Element unterstrichener Text punktiert erscheint, die Maus nach oben bewegen wird aufgefordert, | versuchen |
| <Kbd> | Empfangen Sie Tastatureingabe Befehle: STRG + P | versuchen |
| <Hr> | Ebene | versuchen |
| <Code> | Fragment | versuchen |
| <Ul> | Ungeordnete Liste | versuchen |
| <Ol> | Sortierte Liste | versuchen |
| <Dl> | Beschreibende Liste | versuchen |
Textausrichtung
Verwenden Sie CSS-Klasse, die Ausrichtung des Textes zu ändern:
| Kategorie | Beschreibung | Beispiele |
|---|---|---|
| .text-links | Linksbündiger Text | versuchen |
| .text-Recht | Rechtsbündig Text | versuchen |
| .text-Zentrum | Center | versuchen |
| .text-rechtfertigen | gerechtfertigt | versuchen |
Richten Sie verschiedene Bildschirmgrößen
Verwenden Sie CSS-Klasse die Textausrichtung von unterschiedlichen Bildschirmgrößen zu ändern:
| Kategorie | Beschreibung | Beispiele |
|---|---|---|
| links | ||
| .small-Text-Links | Alle Bildschirmgröße Links | versuchen |
| .small-only-Text-Links | Kleiner Bildschirm links (Breite von weniger als 40em) | versuchen |
| .medium-Text-Links | Breite ist größer als die Bildschirmgröße 40.0625em Links | versuchen |
| .medium-only-Text-Links | 40.0625em Breite nach links von der Bildschirmgröße 64em ausgerichtet | versuchen |
| .Große-Text-Links | Breite ist größer als die Bildschirmgröße 64.0625em Links | versuchen |
| .Große-only-Text-Links | 64.0625em Breite nach links von der Bildschirmgröße 90em ausgerichtet | versuchen |
| .xlarge-Text-Links | Breite ist größer als die Bildschirmgröße 90.0625em Links | versuchen |
| .xlarge-only-Text-Links | 90.0625em Breite nach links von der Bildschirmgröße 120em ausgerichtet | versuchen |
| .xxlarge-Text-Links | Breite ist größer als die Bildschirmgröße 120em Links | versuchen |
| Rechts ausrichten | ||
| .small-Text-Recht | Alle Dimensionen des Bildschirms rechtsbündig | versuchen |
| .small-only-Text-Recht | Kleiner Bildschirm rechts Ausrichtung (Breite weniger als 40em) | versuchen |
| .medium-Text-Recht | Breite größer als die Größe des Bildschirms rechtsbündig 40.0625em | versuchen |
| .medium-only-Text-Recht | 40.0625em Breite auf der rechten Bildschirmgröße 64em ausgerichtet | versuchen |
| .Große-Text-Recht | Breite größer als die Größe des Bildschirms rechtsbündig 64.0625em | versuchen |
| .Große-only-Text-Recht | 64.0625em Breite auf der rechten Bildschirmgröße 90em ausgerichtet | versuchen |
| .xlarge-Text-Recht | Breite größer als die Größe des Bildschirms rechtsbündig 90.0625em | versuchen |
| .xlarge-only-Text-Recht | 90.0625em Breite auf der rechten Bildschirmgröße 120em ausgerichtet | versuchen |
| .xxlarge-Text-Recht | Breite größer als die Größe des Bildschirms rechtsbündig 120em | versuchen |
| ausrichten | ||
| .small-text-Zentrum | Richten Sie alle Bildschirmgrößen | versuchen |
| .small-only-text-Zentrum | Die geringe Größe des Bildschirms zentriert (Breite von weniger als 40em) | versuchen |
| .medium-text-Zentrum | Breite größer als die Größe des Bildschirms zentriert 40.0625em | versuchen |
| .medium-only-text-Zentrum | 40.0625em Breite Größen 64em Bildschirm zentriert | versuchen |
| .Große-text-Zentrum | Breite größer als die Größe des Bildschirms zentriert 64.0625em | versuchen |
| .Große-only-text-Zentrum | 64.0625em Breite Größen 90em Bildschirm zentriert | versuchen |
| .xlarge-text-Zentrum | Breite größer als die Größe des Bildschirms zentriert 90.0625em | versuchen |
| .xlarge-only-text-Zentrum | Breite 90.0625em zu 120em Bildschirmgrößen zentriert | versuchen |
| .xxlarge-text-Zentrum | Breite größer als die Größe des Bildschirms zentriert 120em | versuchen |
| gerechtfertigt | ||
| .small-text-rechtfertigen | Alle Bildschirmgrößen sind Justified | versuchen |
| .small-only-Text-rechtfertigen | Begründen Sie die geringe Größe des Bildschirms (Breite von weniger als 40em) | versuchen |
| .medium-text-rechtfertigen | Breite ist größer als die Bildschirmgröße 40.0625em Begründen | versuchen |
| .medium-only-Text-rechtfertigen | Richten Sie die beiden Enden des Bildschirmbreite 64em Größe 40.0625em | versuchen |
| .Große-text-rechtfertigen | Breite ist größer als die Bildschirmgröße 64.0625em Begründen | versuchen |
| .Große-only-Text-rechtfertigen | Richten Sie die beiden Enden des Bildschirmbreite 90em Größe 64.0625em | versuchen |
| .xlarge-text-rechtfertigen | Breite ist größer als die Bildschirmgröße 90.0625em Begründen | versuchen |
| .xlarge-only-Text-rechtfertigen | Richten Sie beide Enden der Breite der Bildschirmgröße 90.0625em zu 120em | versuchen |
| .xxlarge-text-rechtfertigen | Breite ist größer als die Bildschirmgröße 120em Begründen | versuchen |
andere
| Kategorie | Beschreibung | Beispiele |
|---|---|---|
| .Left | Links Floating Element | versuchen |
| .right | Rechts-Floating-Elemente | versuchen |
| .clearfix | Float - muss an das Mutterelement Floating Element hinzugefügt werden | |
| .Hide | Versteckte Element (die CSS display: none ) | versuchen |
| .list-inline | Alle Elemente in der gleichen Reihe angeordnet sind | versuchen |
| .Lead | Lassen Sie <p> Element mehr im Vordergrund | versuchen |
| .subheader | Einstellen hellfarbig <h1> - <h6> Elemente | versuchen |