Zmiana typu i koloru czcionki wyświetlanej na stronie internetowej

Uwaga: ta strona jest związana ze zmianą typu, rozmiaru i koloru czcionki na stronie internetowej. W przypadku programu Microsoft Word zapoznaj się z naszą stroną dotyczącą zmiany koloru czcionki, rozmiaru lub typu w programie Word.

Ten dokument zawiera instrukcje dotyczące zmiany czcionki i jej koloru na stronie internetowej. Odpowiednia składnia do przodu polega na użyciu kaskadowych arkuszy stylów wraz z selektorami klas lub identyfikatorów, a nie atrybutem stylu wbudowanego lub znacznikiem czcionki, które są przestarzałe. Warto jednak zauważyć, że te dwie metody nadal działają z większością przeglądarek internetowych.

Aby kontynuować, wybierz metodę, z której chcesz się uczyć lub przeczytaj każdą sekcję.

Jeśli planujesz zmienić twarz czcionki i jej kolor tylko raz na stronie internetowej, musisz zmienić jej atrybuty w znaczniku elementu. Używając atrybutu stylu, możesz określić czcionkę i kolor czcionki z rodziną czcionek, kolorem i rozmiarem czcionki z rozmiarem czcionki, jak pokazano w poniższym przykładzie.

Przykładowy kod

Ten tekst ma czcionkę Courier, jest niebieski i 20px.

Wynik

Ten tekst ma czcionkę Courier, jest niebieski i ma rozmiar 20 pikseli.

Używanie CSS dla jednej lub więcej stron

Niestandardowa czcionka na jednej stronie

W głównej części strony możesz wstawić kod między kartami, aby zmienić wygląd tekstu w różnych elementach. Następne niebieskie pole zawiera przykładowy kod, który po wywołaniu zmieniłby czcionkę na Courier i pokolorował ją na czerwono. Jak widać, zdefiniowaliśmy nazwę klasy jako „niestandardową”.

 .custom {font-family: Courier; kolor czerwony; rozmiar czcionki: 20px; } 

Po zdefiniowaniu ta stylizacja może zostać zastosowana do większości elementów na stronie, dołączając do nich „niestandardowe” klasy. Poniższa ramka pokazuje dwie linie kodu i ich odpowiednie wyniki.

Przykład

To całe zdanie jest czerwone i Courier

Tylko słowo TEST jest czerwone i Courier.

Wynik

To całe zdanie jest czerwone i Courier.

Tylko słowo TEST jest czerwone i Courier.

Niestandardowa czcionka na wiele stron

Importowanie zewnętrznego pliku CSS może być bardzo korzystne, ponieważ umożliwia użytkownikom zmianę reguł dla wielu stron jednocześnie. W poniższej sekcji przedstawiono przykład tworzenia podstawowego pliku CSS, który zmienia czcionkę i jej kolor dla większości elementów. Ten plik może zostać załadowany do więcej niż jednej strony internetowej, nawet całej witryny.

Używając dowolnego podstawowego edytora tekstu, zapisanie następującego tekstu jako pliku .css przygotuje go do importu.

 @charset „utf-8”;

.courier {font-family: Courier; kolor: # 005CB9; }

Gdy poprzedni tekst zostanie umieszczony w pliku .css (nazwaliśmy nasze_systemy.css ), możesz połączyć się z nim z dowolnej innej strony, używając linii podobnej do poniższego przykładu.

Wskazówka: Użytkownicy mogą zmieniać atrybuty elementów na stronie, zmieniając kod w importowanym pliku .css.

Rozwiązanie znacznika czcionki

Mimo że jest nieaktualny, znacznik HTML może być nadal używany i może być niezbędny do korzystania z niektórych usług online. Używając znacznika FONT, musisz dołączyć atrybut twarzy, który opisuje używaną czcionkę. W poniższym przykładzie używamy czcionki Courier i szesnastkowego kodu koloru # 005CB9, który jest ciemnoniebieski.

Przykładowy kod

 Specjalny przykład czcionki. 

Wynik