Selektor CSS, i jego rola w dokumencie HTML formatowania

click fraud protection

Stworzenie strony internetowej i wypełnienie go z niektórych elementów strony internetowej, każdy zetknie się z terminu, takie jak CSS wybieraka.Służy on do najbardziej dokładnie określić wszystkie elementy pliku HTML na swoją konstrukcję i usytuowanie na stronie.Aby to zrobić, należy utworzyć CSS-dokument, który precyzuje pewne selektorów i ich opcje formatowania: kolor, wielkość, położenie i inne.Każdy powinien wiedzieć, projektant stron internetowych i być w stanie prawidłowo wprowadzić daty selektorów.Są one podzielone według typu, z których głównego omówimy poniżej.

Rodzaje selektorów CSS

W zależności od tego co ma zastosowanie elementu html formatowanie CSS selektor może odnosić się do jednej z następujących grup:

  • tagów selektora;
  • selektor klasy;
  • id-selektor;Przełącznik
  • atrybutów.Przełącznik tag

To jest również nazywany "Selektor typu" i "na pozycję", jest najbardziej prosty i powszechne.W swoim dokumencie CSS-to nazwy elementów html-plików, które opisują.Na przykład, jeśli musimy ustawić styl akapitu, możemy określić właściwości i ich wartości dla elementu p {background: x;kolor: y;rozmiar: z}.W tym przypadku, wszystkie akapity strony internetowej będą miały ten sam format (kolor tła, rozmiar tekstu i tym podobne. D.).Selektor klasy

Ale co, jeśli trzeba zadać każdy twój pkt różni się od innych stylów?W tym celu nie jest selektor klasy.

CSS-dokument, w tym przypadku, będzie zawierać wpis podobny do poniższego: p.first {color: x;font-size: y}.W ten sposób możemy zdefiniować właściwości "kolor" i "wielkość" tylko dla pierwszego akapitu klasy.

w dokumencie HTML, w takim przypadku należy wprowadzić atrybut klasy do nazwy stylu pierwszy.Zajęcia mogą być nawet o stylu, który chcesz zastosować do elementów strony internetowej.

selektor id

Często istnieje potrzeba określenia stylu dokładniej, na przykład do jednego elementu na stronie lub ich próbki.W tej sytuacji pomoc pochodzi selektor id.Html przypisać żądaną nazwę elementu, który identyfikuje go wśród innych.Na przykład, element, który chcemy ustawić styl różni się od innych, nagłówek artykułu.

Następnie przypisać identyfikator dokumentu html nagłówek h1, takiego articlename.A w CSS-pliku, aby ustawić styl, dodając do kratki identyfikatora imię: #articlename {color: blue;text-align: center}.Teraz nasz nagłówek będzie kolor niebieski, a na środku.

Każdy z powyższych typów można nazwać "prosty selektor CSS."Określają one formatowania dla danego parametru HTML dokumentu: wraz podobne elementy (na przykład wszystkie paragrafy artykułu), jedna klasa (na przykład, tylko akapit pierwszy) lub konkretnego punktu (na przykład, tytuł artykułu).Przełącznik

atrybuty

Oprócz powyższych, istnieje w selektorów CSS-atrybutów - bardziej wyrafinowany sposób na wykorzystanie stylów.Pozwala to html elementy formatowania wybranego atrybutu lub wartości.Istnieje kilka odmian tego selektora:

  • przez obecność atrybutu;
  • na jego dokładnej wartości;
  • na częściową wartość atrybutu;
  • jego szczególną wartość.

Przyjrzyjmy się każdej z tych odmian:

  1. pierwszy przypadek.Formatowanie jest stosowane, jeśli nie ma konkretnego atrybutu w kodzie HTML (może to być p, div, nagłówek, itp).Jeśli tak nie jest, to wykorzystuje ogólny dla wszystkich elementów stylu.Na przykład, elementy, zatytułowanym (Szybka).
  2. drugi przypadek.Styl ma zastosowanie wyłącznie do elementów HTML, które są dokładne wartości atrybutów mecz.Na przykład do tych elementów wejściowych, a wartość jego typu równa złożenia.
  3. trzeci przypadek.Pod formacie będzie zawierać tylko elementy na liście wartości, która ma określone słowo.Na przykład, atrybut Sidebar "klasa" w elementach div.
  4. czwarty przypadek.Styl jest zdefiniowana tylko dla tych elementów html-dokument, w którym szczególności atrybut posiada określoną wartość i zaczyna z nim.Na przykład, zastosowanie określonego koloru wszystkich elementów, atrybutów, które w języku angielskim (może to być pl, pl-rus, en-au itd. D.).

Tak więc, przy użyciu jednego lub inny selektor CSS można najlepiej umieszczone w całej strony internetowej i opisać niektóre z jego elementów.