Dowiedz się więcej o arkuszu CSS
Przyjrzyjmy się bardziej sposobom, w jaki arkusz CSS może ułatwić zarządzanie zawartością, a zawartość będzie bardziej interesująca dla czytelników.
Komentarze
Podobnie jak w przypadku dowolnego języka komputerowego, arkusz CSS obsługuje komentarze. Aby dodać komentarz w sekcji CSS, użyj polecenia /* comment */. Element /* identyfikuje początek komentarza i */ oznacza koniec. Komentarz CSS może obejmować wiele wierszy tekstu. Komentarze to doskonały sposób na pozostawienie notatek dla siebie lub innych deweloperów lub tworzenie notatek podczas nauki języka.
Ważne
Komentarze CSS są publiczne i dostępne zarówno przez przeglądarkę, jak i użytkowników witryny internetowej. Nie przechowuj poufnych informacji w komentarzach.
Komentarze CSS są formatowane inaczej niż komentarze HTML. Komentarze w kodzie HTML używają <!--comment--> składni .
Ustawianie czcionek
Możesz użyć css, aby poinformować przeglądarkę, jakiej czcionki chcesz użyć dla określonego tekstu. Czasami chcesz użyć arial do czytelności lub czegoś fantazyjnego dla stylu. Na poniższej ilustracji przedstawiono tekst w arial i inny tekst w czcionki o nazwie "Impact".
Najczęstszą opcją ustawienia czcionki do użycia na stronie jest font-family.
font-family Zazwyczaj jest ustawiona na listę czcionek, co pozwala przeglądarce na używanie pierwszej wyświetlonej czcionki, która może obsługiwać. Na przykład ustawienie Tahoma, Verdana, sans-serif prób użycia czcionki Tahoma, następnie Verdana, a na końcu ogólnej czcionki bezszeryfowej.
Możesz również użyć innych opcji, takich jak styl, waga i dekoracja.
font-style służy do italizowania tekstu przez ustawienie wartości na italic.
font-weight program obsługuje różne ustawienia pogrubienia, a bold najczęściej spotykane. I wreszcie, text-decoration jest używany do underline, overlinelub line-through tekstu.
| CSS | Wynik |
|---|---|
font-weight: bold; |
Demo |
font-style: italic; |
Demo |
text-decoration: line-through; |
|
text-decoration może się różnić od innych opcji używanych do modyfikowania wyświetlania czcionki. Kluczowa różnica polega text-decoration na zastosowaniu stylu wokół lub na tekście, ale nie modyfikuje samej czcionki. Pogrubienie i kursywa modyfikują czcionkę.
Uwaga
Zazwyczaj należy unikać używania podkreślenia na stronie internetowej, ponieważ tekst może wyglądać jak hiperłącze.
Zmienianie rozmiaru czcionek
Element font-size umożliwia wskazanie rozmiaru czcionki, którego chcesz użyć. Arkusz CSS oferuje możliwość używania rozmiaru bezwzględnego lub względnego. Rozmiar bezwzględny jest zwykle ustawiany w pikselach i zawsze używa określonego rozmiaru. Względne ustalanie rozmiaru może być oparte na domyślnym rozmiarze przeglądarki i mierzone w procentach lub na podstawie rozmiaru elementu referencyjnego.
Uwaga
Domyślny rozmiar czcionki dla wielu przeglądarek to 16 pikseli.
Bezwzględne ustalanie rozmiaru można zmierzyć w pikselach i jest wskazywane w arkuszu CSS przy użyciu polecenia px. Aby ustawić czcionkę na 14 pikseli, możesz użyć dyrektywy font-size: 14px;.
Względne ustalanie rozmiaru czcionek jest zwykle mierzone przy użyciu metody em lub rem.
em jest skrótem dla elementu i jest względny względem elementu nadrzędnego (em) lub głównego (rem). Katalog główny jest elementem html .
1em lub 1rem jest równy rozmiarowi elementu nadrzędnego lub głównego, podczas gdy 2em lub 2em byłby dwukrotnie większy. Ponieważ rozmiary ekranu mogą się różnić, najlepiej jest używać względnego rozmiaru zawsze, gdy jest to możliwe.
Rozważmy następujący kod HTML i CSS jako przykład:
<html>
<body>
<div>Sample text</div>
</body>
</html>
html {
font-size: 18px;
}
div {
font-size: 14px;
}
Jeśli element div ma 14 pikseli, ponieważ element nadrzędny jest 1em ustawiony na divi , podczas gdy 14px będzie miał 18 pikseli, ponieważ pierwiastek 1rem jest ustawiony na html.18px
1.5em
div dla elementu będzie to 21 pikseli (14 * 1,5 = 21) i 1.5rem będzie to 27 pikseli (18 * 1,5 = 27). Możesz użyć funkcji em i rem , aby zapewnić skalowanie pozostałej części strony podczas aktualizowania rozmiarów nadrzędnych lub głównych.
Kolory
Kolor czcionki można ustawić za pomocą color właściwości .
color Można ustawić wartość RGB (czerwony, zielony, niebieski) lub na jedną z wielu nazwanych kolorów, takich jak black lub lightgray.
Wartości RGB w arkuszu CSS mogą być wartościami szesnastkowymi poprzedzonymi wartościami #, lub wartościami od 0 do 255 wewnątrz rgb funkcji. Aby ustawić kolor na domyślny odcień brązowego, użyj polecenia color: brown;. W przypadku niestandardowego odcienia purpury możesz użyć polecenia color: #7462e0.
/* named value */
div {
color: brown;
}
/* RGB hex value */
h1 {
color: #7462e0;
}
/* RGB function */
h2 {
color: rgb(105, 6, 19);
}
Ważne
Wybór kolorów powinien zawsze brać pod uwagę tych, którzy mają niedobór widzenia kolorów. Możesz użyć narzędzi, takich jak Color Safe , aby ułatwić wybór kontrastujących kolorów, aby upewnić się, że witryna jest dostępna dla wszystkich użytkowników.
Jak można podejrzewać, istnieje dziesiątki dostępnych nazwanych kolorów, a wartości RGB oferują nieskończony zestaw opcji. Edytory, takie jak vscode.dev lub Visual Studio Code , mogą pomóc zidentyfikować dostępne wartości kolorów. Oba edytory wyświetlają podgląd próbki koloru w arkuszu CSS. Jeśli najedziesz kursorem myszy na próbkę, pojawi się selektor kolorów, którego możesz użyć do ustawienia żądanego koloru.
