HTML/CSS, Poradniki webdevelopera

Czym są klasy i identyfikatory w HTML?

0

Jeżeli jesteś początkującym projektantem stron internetowych to na pewno powinieneś zapoznać się z naszym artykułem. Poruszymy dzisiaj temat klas i identyfikatorów w HTML. Zaczynajmy 🙂

Czym jest klasa HTML?

Klasa to nic innego jak pewna deklaracja w kodzie odwołująca się do odpowiedniego selektora stylów. Przedstawmy to na krótkim przykładzie:

W HTML istnieją dwie metody nadawania stylów tagom:

  • liniowa
  • poprzez klasy i identyfikatory

Przykład stylowania liniowego:


<p style="font-size:15px; color:red; font-weight:600;">Ala ma kota</p>
<p style="font-size:15px; color:red; font-weight:600;">Kot ma ale</p>

Jak widzimy całe stylowanie liniowe polega na dodaniu do każdego tagu HTML jego własnych atrybutów. Praktycznie nie jest to błędem nie mniej jednak generuje szereg problemów. Załóżmy, że w kodzie mamy 50 wystąpień takich samych akapitów, gdzie chcemy zmienić kolor i wielkość czcionki – praktycznie bez znajomości wyrażeń regularnych kosztuje nas to 50 operacji zmiany, co jest czasochłonne, męczące i nieefektywne.

Z pomocą przychodzi nam właśnie druga metoda nadawania stylów czyli klasy i identyfikatory

Rozważmy podobny przykład:

<p class="style1">Ala ma kota</p>
<p class="style1">Kot ma ale</p>

W zasadzie taki zapis wystarczy nam, aby uzyskać identyczny efekt wizualny i pozwoli wprowadzać szybko zmiany. Potrzebujemy jednak zgodnie z definicją pewnego selektora, który będzie zbiorem naszych atrybutów, napiszmy go:


.style1 {
font-size:15px;
color:red;
font-weight:600;
}

Jak widzimy nasz selektor to tak naprawdę nazwa naszej klasy, którą wywołujemy w tagach HTML.

Pozostaje tylko go dodać, pytanie gdzie trzeba go umieścić i jak to zrobić.

Podobnie jak z wariantami nadawania stylów istnieją 2 warianty dodawania selektorów.

1. Dodawanie selektorów w sekcji head strony np.:

Jak widzimy, wystarczy dodać specjalny tag <style></style> w sekcji head a następnie wpisać nasz selektor z atrybutami. Co ważne pomiędzy tagami <style></style> można dodawać nieskończoną ilość selektorów. Dodajmy drugi i trzeci selektor:

Klasy w sekcji head

Problem takiego stylowania jest taki, że tag <style></style> obejmuje tylko jeden dokument. Z pomocą przychodzi drugie rozwiązanie czyli:

2. Dodanie selektorów w zewnętrznym pliku Css

Jest to aktualnie najlepsze podejście, jeżeli chodzi o nadawanie stylów. Główne zalety to:

  • oddzielenie stylów od tagów HTML, dzięki czemu kod jest czytelniejszy
  • uzyskanie możliwości przyłączania konkretnych plików .css do wybranych przez nas podstron – unikamy w ten sposób duplikowania stylów, których nie używamy.

Plik .css tworzy się bardzo prosto, wystarczy stworzyć nowy plik tekstowy:

Nowy plik tekstowy

Następnie go otwieramy, wybieramy plik → zapisz jako..

Plik tekstowy zapisz jako

i wpisujemy naszą nazwę style.css (z rozszerzeniem .css jak na zdjęciu poniżej):

Zapis pliku css

I jak widzimy, system utworzy nam nowy plik z rozszerzeniem .css

W tym momencie możemy go otworzyć i przenieść do niego nasze selektory bez <style></style>:

Migracja stylów css  do zewnętrznego pliku

Wszystkie nasze selektory znajdują się już w zewnętrznym pliku .css. Pozostaje tylko jeden problem – nasz plik .html nie wie skąd ma je pobrać. W tym celu musimy dodać w sekcji head specjalną klauzulę ze ścieżką do naszego pliku ze stylami:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

Podłączenie stylów .css

Jak otworzymy nasz plik .html zobaczymy, że wszystkie style załadowały się poprawnie.

Efekty stylów

Ważne!

W ramach jednego tagu HTML możemy wdrażać wiele klas np.

nasz akapit z przykładu powyżej może wyglądać następująco:

<p class="style1 nowyselektor">Ala ma kota</p>

a jego odzwierciedlenie w kodzie:

.style1 {
font-size:15px;
color:red;
font-weight:600;
}
.nowyselektor{
text-decoration:underline;
}

W tym momencie nasze style się połączą i uzyskamy akapit, który jest czerwony(color:red;) ma wielkość czcionki 15px(font-size:15px;), jest pogrubiony(font-weight:600) i podkreślony(text-decoration:underline;)

Czym są identyfikatory HTML?

Identyfikatory jak nazwa wskazuje to unikatowe elementy tagu, w odróżnieniu od klas można go wywołać tylko raz w ramach tagu (kolejne wywołania będą ignorowane). Posiada takie same własności jak klasa tylko wywołujemy go z prefixem (znacznikiem) # np.

Klasa:

.style1 {font-size:15px;}

Identyfikator:

#style1{font-size:15px;}

Podczas stylowania tagów, dobrą praktyką jest używanie w przewadze klas.

Przydatne linki:

Css tutorial: https://www.w3schools.com/css/
HTML tutorial: https://www.w3schools.com/html/default.asp

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *