Jednostki CSS | Wyjaśnione
Wyniki tego bloga to:
- Jakie są jednostki CSS?
- Jakie są jednostki bezwzględnej długości w CSS?
- Jak używać jednostek bezwzględnych w CSS?
- Jakie są jednostki długości względnej w CSS?
- Jak używać względnych jednostek długości w CSS?
Jakie są jednostki CSS?
Istnieją różne jednostki w CSS, które są używane do wskazania długości lub do pomiaru właściwości CSS. Na przykład w pliku CSS „rozmiar czcionki„Własność ma wartość„25px”, Który reprezentuje liczbę z urządzeniem„piksel”(PX). Ponadto nie powinno być żadnej białej liczby i odpowiedniej jednostki pomiarowej. Jeśli jednak wartość długości wynosi 0, jednostki można wykluczyć.
Jednostki długości CSS są dwa typy: względne i absolutne.
Jakie są jednostki bezwzględnej długości w CSS?
Jednostki długości bezwzględnej zależą od rzeczywistej jednostki fizycznej. Zwykle mają ten sam rozmiar na różnych urządzeniach. Jednostki te nie są zalecane do wykorzystania na ekranach, ponieważ rozmiar ekranu jest różny. Jednak jednostki bezwzględnej długości są wykorzystywane tam, gdzie znany jest rozmiar ekranu. Tego rodzaju jednostki są również przydatne w zadaniach, w których reakcja nie ma znaczenia.
Jak używać jednostek bezwzględnych w CSS?
Istnieje kilka absolutnych jednostek używanych w CSS. Niektóre z nich pokazano poniżej:
| Jednostka | Opis |
| Pt | Określa pomiar w punktach. 1pt = 1/72 z 1 cala. |
| W | Określa pomiar w calach. 1in = 96px = 2.54 cm |
| px | Określa pomiar w pikselach. 1px = 1/96 cala. |
| cm | Określa pomiar w centymetrach. |
Przejdźmy do przykładu, w którym używane są jednostki bezwzględne.
Przykład: Używanie jednostek bezwzględnych w CSS
W HTML najpierw dodaj div z wbudowanym stylem CSS, używając „margines" I "wyściółka" nieruchomości. A później
Tag jest umieszczony, aby dodać nagłówek do strony. Kilka
Tagi są dodawane z odpowiednim „rozmiar czcionki„W liczbach mających różne jednostki:
Właściwość „wielkości czcionki”
Rozmiar czcionki: 20px
Rozmiar czcionki: 20pt
Rozmiar czcionki: 20 cali
Rozmiar czcionki: 20 cm
Rozmiar czcionki: 20 mm
Można zauważyć, że tekst z wartościami o różnych długościach CSS został wyświetlony na stronie internetowej:
Jakie są jednostki długości względnej w CSS?
W CSS jednostki długości względnej określają długość w stosunku do odpowiedniej właściwości długości. W porównaniu z bezwzględnymi długościami, jednostki względnej długości są znacznie lepsze, ponieważ zapewniają skalę między kilkoma mediami renderowania.
Jak używać względnych jednostek długości w CSS?
Tutaj zaciągnęliśmy niektóre z głównie wykorzystywanych jednostek względnej długości w CSS:
| Jednostka | Opis |
| VH | Widok Wysokość: w stosunku do 1% wysokości rzutni |
| VW | Widok szerokość: w stosunku do 1% szerokości rzutni |
| % | Procent: jest to rozmiar w procentach w stosunku do wielkości rodzica. |
| Vmin | Minimum rzutni: 1% najmniejszych wymiarów rzutni. |
| Vmax | Maksymalnie rzutek: 1% największych wymiarów rzutni. |
Przykład: Korzystanie z jednostek długości względnych w CSS
Korzystając z tego samego kodu HTML, teraz zmienimy tylko wartość „rozmiar czcionki”Własność z odpowiednimi względnymi jednostkami długości:
Właściwość „wielkości czcionki”
Rozmiar czcionki: 3vh
Rozmiar czcionki: 3ch
Rozmiar czcionki: 3%
Rozmiar czcionki: 3
Rozmiar czcionki: 3vw
Wyjście
W ten sposób możesz wykorzystać różne jednostki CSS w naszych plikach HTML.
Wniosek
Istnieją dwa rodzaje jednostek długości używane w CSS: jednostki długości bezwzględnej i jednostki długości względnej. Bezwzględne długości nie są względne niczego innego. Są zawsze takie same w każdym rozmiarze okna, ale jednostki względnej długości są zawsze w stosunku do czegoś, takiego jak element nadrzędny, czcionka lub rozmiar wyświetlania. Ten artykuł zawiera kompleksowy przewodnik na temat jednostek CSS, rodzaj jednostek długości CSS oraz sposób ich wykorzystania.