Dzisiaj chciałam się zająć tematyką formatowania tekstu na stronie internetowej z pomocą HTML i CSS.
Właściwości jakie są niezbędne do edycji tekstu na stronie opisałam już w innych wpisach. Dlatego w tym wpisie umieszczę do jedynie odnośnik. W ten sposób będziecie mogli przeczytać o nich w odpowiednich wpisach. Kilka właściwości CSS jednak do tej pory pominęłam.
Jeżeli macie co do nich jakieś pytania – możecie zadawać je w komentarzu. A ja postaram się o nich później napisać. Swoje uwagi i spostrzeżenia również zostawiajcie w komisarzach.
Dzisiejszy wpis pełni rolę podsumowania dlatego może się części z was nie spodobać (szczególnie tym, którzy nie lubią czytać). Postaram się w nim zebrać najważniejsze właściwości, z pomocą których można sformatować tekst.
Co znajdziesz w tym wpisie
Formatowanie fragmentów tekstu z pomocą CSS
Dzięki zastosowaniu na stronie styli CSS mamy całkiem spore pole do popisu jeśli chodzi o formatowanie tekstu. Możliwości te najłatwiej porównać do arkuszy MS Word (lub ich odpowiedników). Tyle, że tam wszystko wybieraliśmy z gotowych rozwiązań programistycznych tak tutaj musimy zrobić to sami.
Z jakie właściwości CSS możemy w takim razie skorzystać i jak one działają?
Powyższa właściwość CSS odpowiada za grubość fontu (czcionki). W zależności od wartości jaką ona przyjmuje tekst może być bardzo wąski, normalny lub bardzo szeroki (pogrubiony). To raczej lekkie uproszczenie ponieważ szerokość uzależniona jest też od tego z jakiego fontu korzystamy.
Jest to właściwość dzięki, której możemy uzyskać efekt pochylonego tekstu (italic).
Było już pogrubienie, pochylenie a teraz pora na przekreślenie i podkreślenie. Oba efekty otrzymamy z pomocą właśnie dzięki powyższej zmiennej.
Jak sama nazwa już wskazuje z pomocą tej właściwości możemy zmieniać kolor tekstu.
Właściwość ta przyda się nam w sytuacji kiedy będziemy chcieli zmienić rozmiar fontu na stronie.
Właściwość ta odpowiedzialna jest ułożenie tekstu na stronie lub tylko w danym elemencie. Czy ma być przesunięty do prawej, lewej, wyśrodkowany a może wyjustowany.
Powyższe właściwości dostępne są w większości edytorów treści systemów CMS. Zapewne więc większość z was się z nimi spotkała. Co innego z tymi, które znajdziecie poniżej.
Właściwości wpływające na cały akapit
Jak zapewne wiecie właściwości tą można wykorzystywać w rożnych miejscach. Dodają one bowiem odstęp pomiędzy blokami elementów. Padding odstęp wewnętrzny, a margin odstęp zewnętrzny.
Z pomocą tej właściwości zmienimy odstępy między wierszami tekstu. Doda to trochę przestrzeni między liniami przez co nie będą do siebie tak przylegać ale bez przesady.
Kto powiedział, że ostatni wiersz musi być ułożony w ten sam sposób co reszta tekstu. Z pomocą tej właściwości możemy go ustawić tak jak chcemy (do prawej, lewej czy na środku)
To jedna z moich ulubionych właściwości CSS. Umieszcza ona pod tekstem cień. Odpowiednie zastosowanie cienia pod tekstem może sprawić, że tekst wyda się bardziej przestrzenny lub czytelniejszy dla odbiorcy.
Właściwość odpowiada za wcięcia akapitowe. Chyba każdy z was kojarzy charakterystyczne wcięcie na początku akapitu. Takie przesunięcie możemy uzyskać właśnie z pomocą tej właściwości.
Z pomocą CSS możemy też manipulować długością tekstu poprzez ograniczenie dla niego przestrzeni. Właściwość przydała mnie się osobiście kilka razy przy budowie szablonu strony (test na dużym monitorze był w tedy dłuższy niż na komórce).
Właściwość ta wpływa na odstępy między pojedynczymi wyrazami. Odstępy możemy więc zmieszać lub powiększać.
Działa podobnie jak poprzedniczka tyle, że wpływa odstępy między literami w słowie.
Ta cecha przyda się w sytuacji gdy w tekście są zbyt długie słowa daje ona nam możliwość łamania zbyt długich słów nie mieszących się w jednej linii na części.
Ta funkcja zamienia sposób interpretacji tzw. białych znaków (np. spację). W efekcie z jej pomocą można zabronić łamana się tekstu w wierszu.
Jak sama nazwa mówi przekształcamy/ transformujemy tekst. Możemy np. zmienić wszystkie litery na wielkie, ustawić by każde słowo zaczynało się od dużej litery.
Zapewne zdajecie sobie sprawę, że nie wszyscy ludzie na świecie piszą i czytają teksty od lewej do prawej. Ta właściwość zmienia kierunek pisania tekstu.
Cechy nadawane całym blokom – pseudoelementy
Teraz pora na pseudoelement dzięki któremu będziemy mogli zmienić wygląd zaznaczonego tekstu. Normalnie zaznaczony tekst posiada niebieskie tło jednak dzięki tej właściwości możemy zmienić je np. na fioletowe lub zielone. Właściwość nie ogranicza nas jedynie do koloru tła manipulować możemy również np. kolorem fontu czy kształtem kursora.
Być może ta właściwość / pseudoelement was zainteresuje – ponieważ sprawia ona, że pierwsza litera akapitu może wyglądać inaczej. W efekcie z jej pomocą można tworzyć efekty zbliżone do starych książek gdzie tekst zaczynał się pierwszą dużą literą.
Ten pseudo element wpływa na na pierwszą linię tekstu. Z jego pomocą możemy np. zmienić kolor tekstu, krój fontu czy kolor tła.
Wypunktowane listy
O wypunktowanych listach pisałam już wcześniej. Z tego powodu odeślę was do tych wpisów:
Jak tworzyć wypunktowaną listę?
Jak zmienić kolor wypunktowania?
Nagłówki
Bardzo istotne na stronie jest również zastosowanie nagłówków. Monecie o nich poczytać tutaj.
Zmiana fontu dla tekstu na stronie
O zmianie rozmiaru jak i typu fontu zdecydowałam się napisać na samym końcu. Co nie oznacza wcale, że jest to mało ważne. Zarówno krój jak i rozmiar tekstu mają bardzo duży wpływ na to jak prezentuje się on na stronie. Mogą zmienić kompletnie wszystko.
O tym jak zmienić font (czcionkę) na stronie pisałam już wielokrotnie przy różnych okazjach. Dlatego nie będę specjalnie się rozpisywać na ten temat. Zostawiam wam jednak link do treści tego wpisu.
Podsumowanie – Czy czy to na pewno wszystko?
Z pewnością odpowiedz brzmi „NIE”. Myślę jednak, że w dużym skrócie omówiłam lub podałam wam odnośnik do tych najczęściej stosowanych. Z pewnością na tekście można przeprowadzać dużo więcej operacji. Jenak nie zawsze będą one potrzebne.
Jeżeli jednak uważacie, że pominęłam coś istotnego możecie o tym napisać w komentarzu.
[aktualizacja 05.05.2019]
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.