Fundacja CSS
domyślnie Foundation
Fundacja stosować domyślną przeglądarką rozmiar czcionki ( font-size:100% ). Dla większości urządzenia przeglądarki pulpit, domyślny rozmiar czcionki jest 16px. Dla przeglądarki dla urządzeń mobilnych, domyślny rozmiar czcionki jest 12px. Domyślną czcionką jest "Helvetica Neue" , domyślnie line-height do 1.5 .
Ustawienia te są stosowane do <body> elementu wewnątrz elementu.
Ponadto <p> element zewnętrzny i dno odległości (margin-bottom) jest 1.25rem, line-height 1,6.
tekst
Następujące elementy HTML, Fundacja utworzyła odrębny styl renderowania nie użyje domyślnego stylu w przeglądarce. Kliknij "spróbować", aby wyświetlić instancję online.
| element | opis | przykłady Online |
|---|---|---|
| <H1> - <h6> | h1 - h6 Nagłówki | próbować |
| <a> | Jasnoniebieskie linki, przesuń kursor myszy na linku zostaną podkreślone | próbować |
| <Small> | Jasnoszary tekstu napisów | próbować |
| <Blockquote> | moduł Odniesienie | próbować |
| <Strong> | tekst pogrubiony | próbować |
| <Em> | kursywa | próbować |
| <Abbr> | Określ skrót słów użyć element pojawia się przerywana tekstu podkreślenie, przesuń mysz w górę poprosi | próbować |
| <Kbd> | Otrzymuj poleceń wejściowych klawiszowych: CTRL + P | próbować |
| <Hr> | poziom | próbować |
| <Code> | fragment | próbować |
| <Ul> | lista nieuporządkowana | próbować |
| <Ol> | Lista numerowana | próbować |
| <Dl> | Lista opisowa | próbować |
Wyrównanie tekstu
Użyj klasę CSS zmodyfikować wyrównanie tekstu:
| kategoria | opis | Przykłady |
|---|---|---|
| .text lewej | Tekst wyrównany do lewej | próbować |
| .text prawym | Tekst wyrównany do prawej | próbować |
| .text-center | centrum | próbować |
| .text-uzasadnić | uzasadnione | próbować |
Wyrównaj różnych rozmiarów ekranu
Użyj klasę CSS zmodyfikować wyrównanie tekstu w różnych rozmiarach ekranu:
| kategoria | opis | Przykłady |
|---|---|---|
| lewo | ||
| .small-text-lewy | Wszystko wielkość ekranu z lewej | próbować |
| .small tylko tekstu lewej | Mały ekran w lewo (szerokość mniejszą niż 40em) | próbować |
| .medium-text-lewy | Szerokość jest większa niż rozmiar ekranu 40.0625em Lewicy | próbować |
| .medium tylko tekstu lewej | Szerokość 40.0625em wyrównany do lewej strony ekranu wielkość 64em | próbować |
| .large-text-lewy | Szerokość jest większa niż rozmiar ekranu 64.0625em Lewicy | próbować |
| .large tylko tekstu lewej | Szerokość 64.0625em wyrównany do lewej strony ekranu wielkość 90em | próbować |
| .xlarge-text-lewy | Szerokość jest większa niż rozmiar ekranu 90.0625em Lewicy | próbować |
| .xlarge tylko tekstu lewej | Szerokość 90.0625em wyrównany do lewej strony ekranu wielkość 120em | próbować |
| .xxlarge-text-lewy | Szerokość jest większa niż rozmiar ekranu Left 120em | próbować |
| align Right | ||
| .small-text-tuż | Wszystkie wymiary ekranu prawym uzasadnione | próbować |
| .small tylko tekstu prawym | Mały ekran w prawo wyrównania (szerokość mniejszą niż 40em) | próbować |
| .medium-text-tuż | Szerokość większa, niż wielkość ekranu prawej wyrównany 40.0625em | próbować |
| .medium tylko tekstu prawym | Szerokość 40.0625em dostosowane do wielkości 64em prawym ekranie | próbować |
| .large-text-tuż | Szerokość większa, niż wielkość ekranu prawej wyrównany 64.0625em | próbować |
| .large tylko tekstu prawym | Szerokość 64.0625em dostosowane do wielkości 90em prawym ekranie | próbować |
| .xlarge-text-tuż | Szerokość większa, niż wielkość ekranu prawej wyrównany 90.0625em | próbować |
| .xlarge tylko tekstu prawym | Szerokość 90.0625em dostosowane do wielkości 120em prawym ekranie | próbować |
| .xxlarge-text-tuż | Szerokość większa, niż wielkość ekranu prawej wyrównany 120em | próbować |
| wyrównać | ||
| .small-text-center | Dopasuj wszystkie rozmiary ekranu | próbować |
| .small-only-text-center | Niewielki rozmiar ekranu środku (szerokość mniejszą niż 40em) | próbować |
| .medium-text-center | Szerokość większa, niż wielkość ekranu wyśrodkowany 40.0625em | próbować |
| .medium-only-text-center | Szerokość 40.0625em do 64em rozmiarach ekranu centered | próbować |
| .large-text-center | Szerokość większa, niż wielkość ekranu wyśrodkowany 64.0625em | próbować |
| .large-only-text-center | Szerokość 64.0625em do 90em rozmiarach ekranu centered | próbować |
| .xlarge-text-center | Szerokość większa, niż wielkość ekranu wyśrodkowany 90.0625em | próbować |
| .xlarge-only-text-center | Szerokość 90.0625em do 120em rozmiarów ekranu centered | próbować |
| .xxlarge-text-center | Szerokość większa, niż wielkość ekranu wyśrodkowany 120em | próbować |
| uzasadnione | ||
| .small-text-uzasadnić | Wszystkie rozmiary ekranu są uzasadnione | próbować |
| .small-only-text-uzasadnić | Uzasadnij niewielki rozmiar ekranu (szerokość mniejszą niż 40em) | próbować |
| .medium-text-uzasadnić | Szerokość jest większa niż rozmiar ekranu 40.0625em Justify | próbować |
| .medium-only-text-uzasadnić | Wyrównaj oba końce szerokości ekranu do 64em wielkości 40.0625em | próbować |
| .large-text-uzasadnić | Szerokość jest większa niż rozmiar ekranu 64.0625em Justify | próbować |
| .large-only-text-uzasadnić | Wyrównaj oba końce szerokości ekranu do 90em wielkości 64.0625em | próbować |
| .xlarge-text-uzasadnić | Szerokość jest większa niż rozmiar ekranu 90.0625em Justify | próbować |
| .xlarge-only-text-uzasadnić | Wyrównaj oba końce szerokości 90.0625em rozmiaru ekranu 120em | próbować |
| .xxlarge-text-uzasadnić | Szerokość jest większa niż rozmiar ekranu 120em Justify | próbować |
inny
| kategoria | opis | Przykłady |
|---|---|---|
| .left | Element pływający do lewej | próbować |
| .right | Prawym elementy pływające | próbować |
| .clearfix | Jasne float - należy dodać do elementu pływającego elementu nadrzędnego | |
| .hide | Element ukryty (CSS display: none ) | próbować |
| .list-inline | Wszystkie elementy rozmieszczone w jednym rzędzie | próbować |
| .lead | Niech <p> Element jest bardziej widoczne | próbować |
| .subheader | Ustawianie jasnymi <h1> - <H6> elementy | próbować |