Wprowadzenie do selektorów

1. Tag <style>

Jeśli element HTML ma za dużo stylów, można je przenieść do specjalnego elementu — tagu style. Zwykle umieszcza się go w tagu <head> i wygląda to tak:

          
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Przykład CSS</title>
    <style>
        body {
            background-color: lightgray;
        }
        p {
            color: blue;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>To jest przykład użycia stylów w tagu <style>.</p>
</body>
</html>
          
        

Teraz nie trzeba pisać długiej linii stylów dla tagu <body> w jego atrybucie style, można je przenieść do tagu style. To jest bardzo wygodne.

To samo dotyczy tagu <p> (paragraf). Co więcej, styl zapisany w tagu <style> w <head>, będzie stosowany do wszystkich paragrafów w dokumencie, nawet jeśli będzie ich kilka tysięcy. Dzieje się tak, ponieważ w tagu <style> style są zapisane w ramach selekcji.

5.2 Selektory

Selektory — to sposób wyboru elementów HTML, do których będą stosowane właściwości CSS. Istnieją różne typy selektorów:

Selektor tagu

Stosuje styl do wszystkich elementów określonego typu. Po prostu podajesz nazwę tagu i nawiasy klamrowe po niej.

tagname {
    // style
}

tagname może być dowolne: body, image, a, p, … dowolne

Selektor klasy

Można też przypisać właściwości CSS nie do konkretnego tagu, ale po prostu nadać grupie właściwości CSS jakąś nazwę. Taka grupa w CSS nazywa się klasą. Styl taki stosuje się do wszystkich elementów o określonej klasie. Klasy określa się za pomocą atrybutu class w HTML.

      
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p.important {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p class="important">To jest ważny tekst.</p>
<p>To jest zwykły tekst.</p>
</body>
</html>
      
    

W powyższym przykładzie pogrubiony zostanie tylko tekst pierwszego paragrafu, do którego zastosowano styl/klasę „important”. Drugi paragraf takiego stylu nie ma.

Przy opisywaniu stylów w tagu <style> można je określić na 3 sposoby:

• tagname { …}
• tagname.classname { …}
• .classname { …}

Szczegółowo temat selektorów omówimy podczas nauki CSS. Teraz mówię Wam o tym, ponieważ w przykładach HTML będzie pojawiać się CSS, i często będę przenosił go do tagu style i używał selektorów do przypisania stylu konkretnemu elementowi HTML.

1

Zadanie

Frontend SELF PL, poziom 2, lekcja 4

Niedostępne

Wewnętrzne style

Wewnętrzne style

Otwórz