JAK DODAĆ NOWĄ CZCIONKĘ NA STRONĘ INTERNETOWĄ?
Aby dodać nową czcionkę na swoją stronę musisz:
- Wkleić tę czcionkę na serwer.
- 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;
}