Formatowanie tekstu
Wstęp
Pora przejść do kolejnych ciekawych tematów. W tej lekcji zajmiemy się tekstem, poznasz podstawowe formatowanie tekstu, dowiesz się między innymi jak go wyśrodkować, nadać mu odpowiedni styl, jak i również zmienić odstępy pomiędzy literami, słowami, czy liniami.
text-align
Dzięki tej właściwość ustalamy czy tekst ma być wyrównany do lewej, prawej, do środka czy wyjustowany. Nazwa właściwości totext-align, a jej dozwolone wartości to:
left- wyrównuje tekst do lewej, to jest jednocześnie domyślna wartość;right- wyrównuje tekst do prawej;center- wyrównuje tekst do środka;justify- justuje tekst czyli wyrównuje tekst jednocześnie do lewej i prawej.
| 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="text-align: center;"><span>Text-align: center;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</div><divstyle="text-align: right;"><span>Text-align: right;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</div><divstyle="text-align: left;"><span>Text-align: left;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</div><divstyle="text-align: justify"><span>Text-align: justify;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker.</div></body></html> |
|---|---|
text-decoration
Właściwość ta ustala jak udekorować tekst. Aby go udekorować należy użyć właściwościtext-decorationz odpowiednią właściwością. Dozwolone właściwości to:
none- brak dekoracji, wartość domyślna;underline- podkreślenie tekstu;overline- linia pojawia się nad tekstem;line-through- przekreślenie tekstu (często używane np. przy aktualizacjach artykułu i przekreśleniu nieaktualnej treści).
| 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="text-decoration: none;"><span>text-decoration: none;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div><divstyle="text-decoration: underline;"><span>text-decoration: underline;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div><divstyle="text-decoration: overline;"><span>text-decoration: overline;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div><divstyle="text-decoration: line-through;"><span>text-decoration: line-through;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div></body></html> |
|---|---|
Zadanie 1
W tym zadaniu Twoim celem jest nadanie odpowiedniego formatu tekstu dwóm akapitom. Akapit pierwszy powinien zostać wyjustowany, a tekst ma posiadać podkreślenie. Tekst drugiego akapitu powinien zostać wycentrowany oraz przekreślony.
W zadaniu skorzystaj z selektorów klas oraz stylów zewnętrznych.
text-transform
Dzięki tej właściwości możemy ustalić jak będzie tekst pisany: małymi literami, dużymi, czy kapitalikami. Aby skorzystać z tej właściwości należy oczywiście użyćtext-transformwraz z odpowiednią wartością.
Wartości jakie przyjmujetext-transformto:
none- tekst jest wyświetlany tak jak został napisany w HTML;capitalize- każde słowo pisane z dużej litery;uppercase- tekst jest wyświetlany tylko dużymi literami;lowercase- tekst jest wyświetlany tylko małymi literami.
| 1 2 3 4 5 6 7 8 9101112131415161718192021222324252627282930 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><divstyle="text-transform: none;"><span>text-transform: none;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div><divstyle="text-transform: capitalize;"><span>text-transform: capitalize;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div><divstyle="text-transform: uppercase;"><span>text-transform: uppercase;</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div><divstyle="text-transform: lowercase"><span>text-transform: lowercase</span><br> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz.</div></body></html> |
|---|---|
text-indent
Właściwośćtext-indentokreśla wcięcie w tekście. W szczególności przydatne gdy piszemy artykuł na stronie i np. zaczynamy nowy rozdział. W dokumencie elektronicznym dalibyśmy najczęściej tabulację, a w CSS służy do tego właśnietext-indent. Domyślną wartością jest0. Przyjmuje wartości w postaci wszystkich jednostek miary dostępnych w CSS.
| 1 2 3 4 5 6 7 8 9101112131415161718 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><span>text-indent: 0;</span><divstyle="text-indent: 0;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div><span>text-indent: 40px;</span><divstyle="text-indent: 40px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div></body></html> |
|---|---|
letter-spacing
Właściwośćletter-spacingokreśla odstęp pomiędzy każdymi literami w tekście. Jako wartość przyjmuje wszystkie jednostki dostępne w CSS.
Co ciekawe, możemy również użyć jednostek ujemnych, aby np. zwęzić tekst.
| 1 2 3 4 5 6 7 8 9101112131415161718 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><span>letter-spacing: 5px;</span><divstyle="letter-spacing: 5px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div><span>letter-spacing: -1px;</span><divstyle="letter-spacing: -1px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div></body></html> |
|---|---|
line-height
Właściwośćline-heightokreśla wielkość linii (w tym odstęp pomiędzy nimi). W programie Word jest to tak zwanainterlinia. Dozwolone wartości, to jednostki miary dostępne w CSS.
Warto wiedzieć, że w tym przypadku dość często stosuje się liczby z częścią ułamkową, które odpowiadają procentowej wartości podstawowej wielkości. Np.1to standardowa wielkość linii,2to linia dwa razy większa, a0.5to linia posiadająca połowę standardowej wysokości.
| 1 2 3 4 5 6 7 8 9101112131415161718 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><span>line-height: 2;</span><divstyle="line-height: 2;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div><span>line-height: 0.8;</span><divstyle="line-height: 0.8;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div></body></html> |
|---|---|
word-spacing
Właściwośćword-spacingokreśla odstęp pomiędzy każdym słowem. Wartością mogą być wszystkie jednostki miary dostępne w CSS.
| 1 2 3 4 5 6 7 8 91011121314 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><span>word-spacing: 15px;</span><divstyle="word-spacing: 15px;"> Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.</div></body></html> |
|---|---|
Podsumowanie
W tej lekcji zajęliśmy się formatowaniem tekstu. Miałeś okazję dowiedzieć się w jaki sposób wyrównać tekst, jak nadać mu określony styl oraz w jaki sposób określić różnego rodzaju odstępy w tekście.