Jak tylko zaczniesz budować strony za pomocą HTML, zaczniesz pracę z wielkością. Aby strona wyglądała tak, jak chcesz, prawdopodobnie dopasowując się do projektu, który stworzyłeś lub zaprojektował inny projektant, będziesz chciał zmienić rozmiar tekstu w tej witrynie, a także inne elementy na stronie. Aby to zrobić, możesz zacząć szukać tagu "size" HTML, ale szybko go znajdziesz.
Znacznik rozmiaru HTML nie istnieje w HTML. Zamiast tego, aby ustawić rozmiar czcionek, obrazów lub układu, należy użyć Kaskadowych Arkuszy Stylów. W rzeczywistości każda zmiana wizualna, którą musisz wprowadzić do tekstu strony lub innego elementu, powinna być obsługiwana przez CSS! HTML jest tylko dla struktury.
Najbliższym znacznikiem znacznika rozmiaru HTML jest stary znacznik czcionki, który rzeczywiście zawierał atrybut wielkości. Ostrzegamy, że ten tag został wycofany z aktualnych wersji HTML i może nie być obsługiwany przez przeglądarki w przyszłości! Nie chcesz używać znacznika czcionki w kodzie HTML! Zamiast tego powinieneś nauczyć się CSS, aby dopasować elementy HTML i odpowiednio stylizować swoją stronę.
Rozmiary czcionek
Czcionki są prawdopodobnie najłatwiejsze do zmienienia przy użyciu CSS. Moreso niż tylko zmierzenie rozmiaru tego tekstu, dzięki CSS możesz bardziej szczegółowo opisać swoją typografię witryny. Możesz zdefiniować rozmiar czcionki, kolor, obudowę, wagę, prowadzenie i inne. Za pomocą znacznika czcionki można zdefiniować tylko rozmiar, a następnie tylko liczbę w stosunku do domyślnego rozmiaru czcionki przeglądarki, który różni się dla każdego klienta.
Aby ustawić akapit na czcionkę o wielkości 12 punktów, użyj właściwości stylu rozmiaru czcionki:
h3 {rozmiar-czcionki = 24px; }
Ten styl ustawi rozmiar czcionki headiing3 elementów na 24 piksele. Możesz dodać to do zewnętrznego arkusza stylów, a wszystkie H3 Twojej witryny będą używać tego stylu.
Jeśli chcesz dodać do tekstu dodatkowe style typograficzne, możesz dodać je do tej reguły CSS:
h3 {rozmiar czcionki: 24px; kolor: # 000; font-weight: normal; }
To nie tylko ustawiłoby ten rozmiar czcionki dla H3, ale również ustawiłoby kolor na czarny (co oznacza, że kod heksadecymalny oznacza # 000) i ustawiłoby wagę na "normalny". Domyślnie w przeglądarkach nagłówki 1-6 są pogrubione, więc ten styl zastąpi domyślny tekst i zasadniczo "pogrubi" tekst.
Rozmiary obrazu
Obrazy mogą być trudne do zdefiniowania, ponieważ w rzeczywistości można użyć przeglądarki do zmiany rozmiaru obrazu. Oczywiście zmiana rozmiaru obrazów w przeglądarce jest złym pomysłem, ponieważ powoduje wolniejsze ładowanie stron, a przeglądarki często nie radzą sobie ze zmianą rozmiaru, co sprawia, że obrazy wyglądają źle. Zamiast tego należy użyć oprogramowania graficznego do zmiany rozmiaru obrazów, a następnie zapisać ich rzeczywiste rozmiary w kodzie HTML strony.
W przeciwieństwie do czcionek, obrazy mogą wykorzystywać HTML lub CSS do definiowania rozmiaru. Określasz szerokość obrazu i wysokość. Gdy używasz HTML, możesz zdefiniować rozmiar obrazu w pikselach. Jeśli używasz CSS, możesz użyć innych pomiarów, w tym cale, centymetry i procenty. Ta ostatnia wartość, wartości procentowe, jest bardzo przydatna, gdy obrazy muszą być płynne, jak w responsywnej witrynie internetowej.
Aby zdefiniować rozmiar obrazu za pomocą HTML, użyj atrybutów wysokości i szerokości tagu img. Na przykład ten obraz ma rozmiar 400 x 400 pikseli:
height = "400" width = "400" alt = "image" />
Aby zdefiniować rozmiar obrazu za pomocą CSS, użyj właściwości stylu wysokości i szerokości. Oto ten sam obraz, używając CSS do zdefiniowania rozmiaru:
style = "height: 400px; width: 400px;" alt = "image" />
Rozmiary układu
Najczęściej stosowanym rozmiarem w układzie jest szerokość, a pierwszą rzeczą, którą musisz zdecydować, jest użycie układu o stałej szerokości lub responsywnej witryny. Innymi słowy, czy zamierzasz zdefiniować szerokość jako dokładną liczbę pikseli, cali lub punktów? A może chcesz ustawić szerokość układu tak, aby był elastyczny przy użyciu ems lub procentów? Aby zdefiniować rozmiar układu, użyj właściwości CSS szerokości i wysokości, tak jak w obrazie.
Naprawiono szerokość:
style = "width: 600px;">
Szerokość cieczy:
style = "width: 80%;">
Decydując się na szerokość układu, należy pamiętać o różnych szerokościach przeglądarek, z których korzystają twoi czytelnicy, oraz o różnych urządzeniach, z których będą korzystać. Właśnie dlatego strony responsywne, które mogą zmieniać swój układ i rozmiar na podstawie różnych urządzeń i rozmiarów ekranu, są dziś najlepszym standardem.
