Możliwość stylizowania różnych aspektów strony HTML jest ważną umiejętnością dla projektantów stron internetowych i programistów. Aby stylizować strony internetowe HTML za pomocą kolorów i rozmiarów czcionek, musisz znać CSS. Aby określić konkretny rozmiar czcionki, możesz użyć CSS rozmiar czcionki własność.

Jeśli szukasz sposobu na zmianę rozmiaru czcionki HTML za pomocą CSS, mamy dla Ciebie rozwiązanie. Zanurzmy się, zaczynając od wprowadzenia do CSS rozmiar czcionki własność.

Zrozumienie właściwości CSS font-size

ten rozmiar czcionki właściwość w CSS jest przydatna, gdy musisz zmienić rozmiar tekstu HTML. Możesz użyć tej właściwości, aby zmienić rozmiar każdego fragmentu tekstu na stronie HTML lub zmienić wybrane elementy.

Kierowanie na określone elementy jest zwykle zalecane, ponieważ zazwyczaj nie chcesz, aby wszystko miało ten sam rozmiar. Tekst, który nie jest zgodny z hierarchią wizualną, jest trudny do przejrzenia i odróżnienia nagłówków wyższego poziomu od nagłówków niskiego poziomu.

Mówiąc prościej, nie nadużywaj rozmiar czcionki własność. Jeśli chcesz, aby nagłówek się wyróżniał, istnieją różne tagi nagłówka HTML. Sprawdź nasze Ściągawka z podstawowymi informacjami o HTML dla różnych tagów, atrybutów i nie tylko wraz z objaśnieniami.

CSS rozmiar czcionki właściwość przyjmuje dwa rodzaje wartości: bezwzględną i względną.

Bezwzględne wartości długości (tj. px) są stałe, podczas gdy względne (np. em oraz były) są elastyczne. Na przykład dla jednostki zależnej od czcionki, takiej jak em, rozmiar jest zwykle określany przez rozmiar czcionki elementu nadrzędnego. Jednak jednostki zależne od czcionki, takie jak Rem zależy od rozmiaru czcionki elementu głównego ().

Każdy ma swoje plusy i minusy, ale w istocie skupienia się na tym, nie będziemy ich omawiać w tym artykule.

Jak zmienić rozmiar czcionki elementu HTML w CSS?

Możesz zmienić rozmiar czcionki tekstu HTML, używając standardowej składni CSS.

Najpierw określ selektor (tekst, który chcesz zmodyfikować) i otwórz kilka nawiasów klamrowych. Następnie wprowadź rozmiar czcionki po której następuje dwukropek, określ konkretny rozmiar, w jakim chcesz prezentować tekst HTML, i zamknij go średnikiem.

Oto składnia:

Selektor CSS {
 rozmiar czcionki: wartość;
}

Aby lepiej zrozumieć tę koncepcję, przejrzyj następujący schemat HTML, który zawiera kilka dodatkowych linijek kodu (nagłówek i akapit):

To jest mój pierwszy nagłówek

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Jeśli chcesz zmienić rozmiar czcionki elementu akapitu, musisz go wybrać (za pomocą klasy, tagu lub identyfikatora) i za pomocą CSS rozmiar czcionki właściwość, ustaw niestandardową wartość z preferowanymi jednostkami. W naszym przykładzie użyjemy pikseli (px).

P {
 rozmiar czcionki: 18px;
}

Chociaż wbudowany CSS generalnie nie jest zalecany w dużych projektach, możesz go również użyć do zmiany rozmiaru tekstu HTML. Robiąc notatki z zewnętrznego kodu CSS powyżej, możemy zaimplementować to samo w linii, tak jak poniżej:

To jest mój pierwszy nagłówek

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tekst w P Tag HTML będzie miał teraz nowy rozmiar niestandardowy.

Związane z: Niezbędne porady i wskazówki dotyczące CSS, które powinien znać każdy programista

Rozwiązywanie problemów podczas zmiany rozmiaru czcionki HTML w CSS

Chociaż cały proces zmiany rozmiaru tekstu w CSS może wydawać się łatwy, może nie zawsze przebiegać dokładnie tak, jak tego oczekujesz. Jeśli wystąpią problemy, zacznij od sprawdzenia, czy zapisałeś zmiany w swoim pliku (również upewnij się, że łączysz arkusz CSS z plikiem HTML). Jeśli tak, spróbuj użyć metody wbudowanej, a następnie odśwież stronę.

Jeśli to działa, może to oznaczać problem z kodem CSS. Spróbuj użyć !ważny i jeśli to działa, musi istnieć jakiś sprzeczny kod. Przeanalizuj kod CSS linia po linii, aby spróbować wyłapać ten błąd.

10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Potrzebujesz pomocy z CSS? Wypróbuj te podstawowe przykłady kodu CSS na początek, a następnie zastosuj je na swoich stronach internetowych.

Czytaj dalej

O autorze