Edycja tekstu na stronie – css

JAK DODAĆ NOWĄ CZCIONKĘ NA STRONĘ INTERNETOWĄ?

Aby dodać nową czcionkę na swoją stronę musisz:

1. Wkleić tę czcionkę na serwer.
2. Podać ścieżkę do czcionki w pliku .css.
   

   @font-face{
   	font-family: nav;
       src: url(../fonts/TrajanPro.ttf);
   }

   
   W pierwszej linii określasz jak będziesz nazywał swoją czcionkę w pliku. Jeżeli ma zostać użyta tylko w nawigacji Twojej strony, możesz ją nazwać nav. W drugiej linii podajesz informację, w jakim dokładnie miejscu się znajduje ta czcionka.

UWAGA! Czcionki mają dwa rodzaje rozszerzeń: otf i ttf. Zwróć na to uwagę podczas wpisywania nazwy czcionki.

JAK ZMIENIĆ RODZAJ CZCIONKI

Kiedy już zamieściłeś w pliku css odpowiednią czcionkę, przypisz ją do konkretnego selektora.

@font-face{
	font-family: nav;
    src: url(../fonts/TrajanPro.ttf);
}

h2 {
	font-family: nav;
}

Pamiętaj, że należy tu użyć nazwy, którą zdefiniowałeś wcześniej. W tym miejscu możesz wpisać także nazwy czcionek systemowych np. Arial, Verdana, Helvetica, których nie trzeba wcześniej definiować.

JAK ZMIENIĆ KOLOR CZCIONKI

Kolor zmieniamy używając cechy: color. Kolory wpisujemy w języku angielskim.

h2{
	font-family: nav;
	color: green;
}

JAK ZMIENIĆ ROZMIAR CZCIONKI

Aby zmienić rozmiar używamy cechy: font-size. Rozmiar podajemy np. w pikselach (px).

h2{
	font-size: 22px;
}

AK ZMIENIĆ GRUBOŚĆ / WAGĘ CZCIONKI

Kiedyś używało się znaczników <b></b> – od angielskiego słowa bold – pogrubienie. Pomiędzy nimi umieszczało się znaczniki <p>. Dziś nie określa się wyglądu strony w pliku html, służy do tego cecha: font-weight. Waga może być określana słownie jako: bold lub normal. Można też użyć wartości liczbowych: od 100 – 900. 400 oznacza normal, natomiast 700 oznacza bold.

h2{
	font-weight: 700;
}

JAK POCHYLIĆ CZCIONKĘ?

Pochylenie czcionki można uzyskać korzystając z cechy: font-style i ustalając wartość: italic.

h2{
	font-style: italic;
}

JAK USTAWIĆ KAPITALIKI / WIELKIE LITERY?

Można dowolnie manipulować rozmiarami liter. Jeżeli w pliku html napiszemy wszystko z małej litery i uznamy, że jednak wolimy wszystko kapitalikami,to nie musimy przepisywać wszystkiego od początku. Wystarczy użyć cechy: text-transform. Mamy trzy możliwości: uppercase, która powiększa wszystkie litery, lowercase, która pomniejsza wszystkie litery oraz capitalize, dzięki której każda pierwsza litera wyrazu będzie wielka.

h2{
	text-transform: uppercase;
}

JAK ZMIENIĆ ODSTĘPY MIĘDZY LITERAMI

W tym przypadku należy użyć cechy: letter-spacing. Tutaj wartości podajemy w pikselach.

h2{
	letter-spacing: 20px;
}

JAK ZMIENIĆ WYSOKOŚĆ WIERSZA?

Wysokość wiersza zmieniamy ufżywając: line-height. Możemy określić tę wysokość w centymetrach, pikselach, procentach lub słownie.

h2{
	line-height: 200%;
}

JAK WYŚRODKOWAĆ TEKST?

Tekst może być wyrównany do lewej, do środka, do prawej lub wyjustowany. Aby to określić używamy cechy: text-align. Mamy do wyboru: left, right, center oraz justify.

h2{
	text-align: right;
}

JAK DODAĆ PODKREŚLENIE DO TEKSTU?

Aby dodać podkreślenie używamy cechy: text-decoration. Mamy do wyboru linię nad tekstem, pod tekstem i przekreślenie tekstu: underline, overline oraz line-through. Czasami zdarza się, że link kliknięty już zostaje podkreślony. Wtedy należy określić wartość none jak poniżej: text-decoration: none.

h2{
	text-decoration: underline;
}

JAK DODAĆ CIEŃ DO TEKSTU?

Cień dodajemy używając cechy text-shadow. Tutaj sprawa jest bardziej skomplikowana. Na początku określamy jak daleko cień ma się znajdować od naszego tekstu w poziomie, następnie w pionie, potem określamy rozmycie i na końcu kolor. Wygląda to następująco: 2px 2px 10px black . Kiedy nie użyjemy trzeciego parametru „10px” wtedy cień będzie „twardy” i wyrazisty.

h2{
	text-shadow: 0px 0px 10px black;
}

PODSUMOWANIE

Tak wygląda h2 bez użycia powyższych parametrów:

A teraz ten sam tekst z użyciem tych stylów:

h2{
	font-family: Arial;
	font-size: 30px;
	color: green;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 200%;
	letter-spacing: 5px;
	font-style: italic;
	text-decoration: underline;
	text-shadow: 0px 0px 10px yellow;
	text-align: right;
}