Selektor CSS i jego rola w formatowaniu dokumentów html

Poprzez utworzenie witryny i wypełnienie jej pewnymi elementami strony internetowej każdy z pewnością natrafi na koncepcję, na przykład selektora CSS. Służy do dokładnego określenia wszystkich elementów pliku html, ich projektu i miejsca na stronie. W tym celu utwórz dokument CSS, który zaleca te lub inne selektory i parametry ich formatowania: kolor, rozmiar, pozycję i inne. Każdy projektant stron internetowych powinien wiedzieć i móc prawidłowo wpisać wybrane selektory. Są podzielone przez typy, z których główne rozważymybyśmy poniżej.

Typy selektorów w CSS

W zależności od tego, które element html ma formatowanie, selektor CSS może odwoływać się do jednej z następujących grup:

• Selektor znaczników;
• Selektor klasy;
• Id-selektor;
• Selektor atrybutów.

Selector Tag

Jest również nazywany "selektorem typu" lub "według elementu", jest to najprostszy i najczęstszy. Jak sama nazwa w dokumencie CSS to nazwy tych elementów opisanego pliku html. Na przykład, jeśli musimy określić styl akapitu, określamy właściwości i ich wartości dla p (tło: x; Kolor: y; Rozmiar: z}. W tym przypadku wszystkie akapity strony będą miały takie same formatowanie (kolor tła, tekst, rozmiar itp.).

Wybór klasy

A co jeśli musisz ustalić własny styl dla innych za każdy akapit? W tym celu znajduje się selektor klasy.

Dokument CSS w tym przypadku będzie zawierać następujący wpis: p.first {color: x; Rozmiar czcionki: y}. W ten sposób ustalamy właściwości "kolor" i "rozmiar" tylko dla akapitu klasy pierwszej.

W dokumencie html w tym przypadku należy najpierw wpisać atrybut class z nazwą stylu. Klasy mogą być takie, jak style, które chcesz zastosować do elementów strony internetowej.

Selektor według identyfikatora

Często istnieje potrzeba bardziej precyzyjnego określenia stylu, na przykład do pojedynczego elementu strony lub do ich próbki. W tej sytuacji id-selektor przychodzi do akcji ratowniczej. W pliku html przypisujemy nazwę wybranemu elementowi, identyfikując go między innymi. Na przykład element, który chcemy ustawić różni się od innego stylu, będzie tytułem artykułu.

Następnie w dokumencie html przypisujemy identyfikator h1 do nagłówka, na przykład artykul. W pliku CSS ustaw styl, dodając siatkę przed nazwą identyfikatora: #articlename {color: blue; Wyrównaj tekst: środek}. Teraz nasz nagłówek będzie miał kolor niebieski i środek wyrównania.

Każdy z powyższych typów można nazwać "prostym selektorem CSS". Określają formatowanie określonego parametru dokumentu html: zbiór podobnych elementów (na przykład wszystkie akapity artykułu), jedną klasę (na przykład tylko akapit pierwszy) lub konkretny element (na przykład tytuł artykułu).

Selektor atrybutów

Oprócz powyższych, istnieją selektory atrybutów CSS – bardziej złożony sposób stosowania stylów. Umożliwia formatowanie elementów html przez wybrany atrybut lub jego wartość. Istnieje kilka odmian tego selektora:

• Przez obecność atrybutu;
• Dzięki swojej dokładnej wartości;
• Według częściowej wartości atrybutu;
• Poprzez jego specyficzne znaczenie.

Rozważmy szczegółowo każdą z tych odmian:

1. Pierwszy przypadek. Formatowanie jest używane, jeśli w kodzie html znajduje się określony atrybut (mogą to być p, div, nagłówek itp.). Jeśli brakuje, stosuje się uniwersalny styl dla wszystkich elementów. Na przykład w przypadku elementów z tytułem (podpunkt).
2. Drugi przypadek. Styl dotyczy tylko tych elementów html, które mają dokładne dopasowanie wartości atrybutów. Na przykład dla tych elementów wejściowych, których wartość atrybutu type jest równa przesłaniu.
3. Trzeci przypadek. Formatowanie jest ograniczone do elementów z określonym słowem na liście wartości. Na przykład sideBar w atrybucie "class" elementów div.
4. Czwarty przypadek. Styl jest określony tylko dla tych elementów dokumentu html, dla których określony atrybut ma określoną wartość i zaczyna się od niego. Na przykład użycie określonego koloru do wszystkich elementów, których językiem atrybutów jest angielski (może to być en, en-rus, en-au, itd.).

Dzięki temu za pomocą konkretnego selektora CSS można najlepiej zaprojektować całą stronę internetową i opisać poszczególne elementy.