Najlepszy samouczek Fundacja CSS W 2024 r. W tym samouczku możesz dowiedzieć się domyślnie Foundation,tekst,Wyrównanie tekstu,Wyrównaj różnych rozmiarów ekranu,inny,
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.
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ć |
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ć |
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ć |
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ć |