Eksplorowanie pojęć związanych z arkuszami CSS

  • 4 min

Struktura CSS

Jeśli chcesz, aby strona HTML wyświetlała cały tekst między tagami h1 z kolorem pomarańczowym, możesz użyć poniższego kodu CSS.

h1 {
    color: orange;
}

Powyższy kod CSS rozpoczyna się od (h1), który wybiera kod HTML, który chcesz stylować. Element h1 w przykładzie jest nazywany selektorem.

Zwróć uwagę na kod wewnątrz nawiasów klamrowych, t deklaruje, color: orange;jak powinien być stylizowany wybrany h1 tag. Kod CSS w nawiasach klamrowych { }, na przykład color: orange; jest nazywany deklaracją.

Przykładowa deklaracja zawiera właściwość , colorktóra jest oddzielona od wartości, orangez dwukropkiem (:), a koniec ustawienia jest oznaczony średnikiem (;).

Uwaga

Nie ma potrzeby zapamiętywania każdej dostępnej właściwości i wartości w CSS. Istnieje wiele stron internetowych, do których możesz się odwołać. Ponadto narzędzia, takie jak vscode.dev lub Visual Studio Code , oferują opcje autouzupełniania, które mogą pomóc w tworzeniu kodu CSS.

Osadzanie pliku CSS

Szybkim sposobem dodawania informacji o stylu jest umieszczenie ich w head tagach strony HTML przy użyciu atrybutu style . Ta metoda nie jest uważana za najlepszą praktykę, ale jest ok do użycia na potrzeby uczenia się i testowania.

Poniższy przykład dodaje <style> tag z informacjami styli dla każdego h1 , aby był wyświetlany szary. Ponieważ jest to jedyny styl, pozostała część kodu HTML jest wyświetlana z domyślnym stylem przeglądarki.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

Po wyświetleniu w przeglądarce tekst "Powitanie" w tagu <h1> jest szary.

Zrzut ekranu przedstawiający renderowaną stronę H T M L wyświetla nagłówek 1 w kolorze szarym.

Stosowanie stylów do języka HTML przy użyciu arkuszy CSS

Podczas dodawania stylów do języka Hypertext Markup Language (HTML) najlepiej jest wykonać styl w osobnym pliku CSS. Gdy kilka plików HTML korzysta z tego samego kodu CSS, mają one spójny wygląd. Ponadto aktualizowanie jednego pliku CSS jest łatwiejsze niż aktualizacja każdego pojedynczego pliku HTML.

Aby odwołać się do pliku CSS, należy użyć link elementu .

link ma dwa atrybuty i relhref. rel służy do identyfikowania typu zasobu, do którego odwołujesz się, arkusza stylów dla arkuszy stylów. href służy do identyfikowania ścieżki do pliku CSS. Jeśli plik CSS znajdował się w tym samym folderze co plik HTML i miał nazwę style.css, możesz użyć następującego polecenia, aby odwołać się do niego ze strony:

<link rel="stylesheet" href="style.css">

Teraz masz co najmniej dwa pliki, plik .html i .css plik. W poprzednim przykładzie byłby plik HTML, który łączy się z arkuszem CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>