Formatowanie tekstu na stronie internetowej [podsumowanie]

Kategoria wpisu Kursy, PHP, HTML, CSS Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 4 minutes

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.

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ą?

font-weight

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.


font-style

Jest to właściwość dzięki, której możemy uzyskać efekt pochylonego tekstu (italic).


text-decoration

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.


color

Jak sama nazwa już wskazuje z pomocą tej właściwości możemy zmieniać kolor tekstu.


font-size

Właściwość ta przyda się nam w sytuacji kiedy będziemy chcieli zmienić rozmiar fontu na stronie.


text-align, text-justyfy

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

padding, margin

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.


line-height 

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.


text-align-last

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)


text-shadow

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.


text-indent

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.


text-overflow

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).


word-spacing

Właściwość ta wpływa na odstępy między pojedynczymi wyrazami. Odstępy możemy więc zmieszać lub powiększać.


letter-spacing 

Działa podobnie jak poprzedniczka tyle, że wpływa odstępy między literami w słowie.


word-wrap

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.


white-space

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.


text-transform

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.  


direction

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

:selection

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.


:firstletter

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ą. 


:first-line

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]

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *