Prawie skomplikowane lub naucz się CSS3. Część 2. Typy selektorów CSS

Witajcie drodzy czytelnicy strony remontcompa.ru! Nazywam się Roman Nahvat i przedstawiam wam drugą część serii artykułów na temat języka CSS. W pierwszej części przyjrzeliśmy się trzem sposobom dodawania stylów do strony internetowej, a mianowicie zbadaliśmy style wewnętrzne, które są rozszerzeniami pojedynczego znacznika dokumentu HTML, style globalne, przy użyciu właściwości stylu zapisanych między znacznikami oraz stylów pokrewnych, które są zdefiniowane w oddzielnym pliku .css od dokumentu HTML. Bardzo ważnym pojęciem w CSS jest selektor. Selektor określa, do którego elementu (lub elementów) w dokumencie HTML zostanie zastosowany styl. W CSS istnieje kilka rodzajów selektorów, które omówimy w tym artykule..

Prawie skomplikowane lub naucz się CSS3. Część 2. Typy selektorów CSS


Utwórz następującą strukturę dokumentu HTML, z którym arkusz stylów selector_type.css () jest już podłączony

Zapisz ten dokument jako selecror.html na dysku flash w folderze CSS

W ten sam sposób utwórz i zapisz plik selector_type.css na dysku flash w folderze CSS

Dodaj do strony internetowej selecror.html nagłówek „Selektory CSS” i akapit „Selektor to ....”

Dodajemy również tabelę do strony internetowej selecror.html, w tym celu napiszemy tagi i

Wyrównamy utworzoną tabelę na środku strony internetowej (atrybut wyrównania ze środkiem wartości), a także ustawimy grubość obramowania tabeli na 1 piksel (border = „1”)

Pomiędzy tagami i wskaż nazwę tabeli (Rodzaje selektorów CSS)

Między tagami i
napisz tagi i , spowoduje to utworzenie jednego wiersza tabeli

Między tagami i napisz tagi dwa razy ... , ta akcja utworzy dwie kolumny w tabeli. Nazwy kolumn wskażemy jako „Selektor” i „Przykład zastosowania”

Podobnie dodaj siedem kolejnych wierszy do tabeli (tagi i ), aw każdym wierszu utworzymy dwie kolumny (tagi i )

W rezultacie strona internetowa selector.html przybierze następującą formę

Z utworzonej tabeli można zobaczyć, że istnieją następujące typy selektorów CSS: Selektor typu Selektor identyfikatora Selektor klasy Selektor uniwersalny Selektor potomny Selektor rodzeństwa Selektor ogólnych elementów pokrewnych Spójrzmy na każdy typ selektora na przykładowej stronie internetowej selector.html Selektor typu odpowiada nazwie elementu Dokument HTML. Na przykład strona internetowa selector.html ma otagowany nagłówek „Selektory CSS”

...

. Wyrównaj tekst tytułu na środku strony i ustaw go na czerwony

W pliku stylów selector_type.css określamy tag nagłówka jako selektor typu

, dalej w nawiasach klamrowych wskazujemy właściwość stylu i jej wartość, którą chcemy zastosować do nagłówka tekstem „Selektory w CSS”

Jak widać, tekst tytułu znajduje się na środku strony i jest czerwony

Selektor elementu rodzeństwa odpowiada elementowi rodzeństwa w stosunku do innego elementu. Na przykład tag

(akapit „Selektor to ....”) jest siostrzany w stosunku do tagu

(nagłówek „Selektory w CSS”).

Zmień kolor tekstu w akapicie („Selektor jest ...”) po nagłówku („Selektory w CSS”) na niebiesko-fioletowy za pomocą selektora rodzeństwa. W pliku stylów selector_type.css dodaj linię h1 + p color: blueviolet

Jak widać, kolor tekstu akapitu zmienił się na niebiesko-fioletowy

Dodaj jeszcze dwa identyczne akapity do strony za nagłówkiem „Selektory CSS”

Otrzymujemy następujące: tekst pierwszego akapitu jest niebiesko-fioletowy, a kolor pozostałych dwóch akapitów pozostaje domyślnie.

Zmień kolor tekstu wszystkich trzech akapitów po nagłówku „Selektory CSS” na niebiesko-fioletowy, używając selektora ogólnych elementów pokrewnych. Selektor uogólnionych powiązanych elementów odpowiada elementowi, który jest siostrzany z innym elementem. Na przykład kilka tagów

(trzy akapity „Selektor to ....”) są siostrą tagu

(nagłówek „Selektory w CSS”). W pliku selector_type.css wpisz następujący wiersz h1 ~ p color: blueviolet

W wyniku użycia selektora uogólnionych powiązanych elementów kolor tekstu wszystkich trzech akapitów po nagłówku „Selektory w CSS” zmienił się na niebiesko-fioletowy

Rozważ inny typ selektora CSS, taki jak selektor identyfikatora. Selektor identyfikatora odpowiada elementowi, którego atrybut id ma wartość zgodną z wartością wskazaną przez symbol # Zwiększ rozmiar czcionki i zmień kolor tekstu w nazwie tabeli (tagi ...) za pomocą selektora identyfikatora. Wewnątrz tagu wpisz identyfikator o nazwie „capt”, jak pokazano poniżej ()

W pliku selector_type.css dodaj następujący wiersz #capt color: red; font-size: 20px, gdzie identyfikator „capt” jest wskazany po symbolu #

Jak widać, rozmiar czcionki i kolor tekstu w nazwie tabeli zmieniły się zgodnie z właściwością stylu opisaną w pliku selector_type.css

Możesz utworzyć wiele identyfikatorów w dokumencie HTML, ale tylko pod warunkiem, że ich nazwy nigdy się nie powtórzą. Napiszmy kolejny identyfikator o nazwie „tr1” wewnątrz znacznika , jak pokazano poniżej ()

Używając identyfikatora „tr1”, wyrównamy tekst w nazwach kolumn tabel w środku, ustawimy je na zielone, a także pogrubimy czcionkę w nazwach kolumn. W pliku selector_type.css napisz # tr1 text-align: center; font-weight: pogrubiony; kolor: zielony

Otrzymujemy następujące

Kolejnym rodzajem selektora, który rozważamy, jest selektor klasy. Selektor klas odpowiada elementowi, którego atrybut klasy ma wartość zgodną z wartością określoną po kropce. Zmień kolor obramowania tabeli na stronie internetowej selector.html na niebieski za pomocą selektora klasy. Do tego w tagu napisz nazwę klasy w następujący sposób: tabela, gdzie klasa1 to nazwa klasy

W pliku stylów selector_type.css dodaj następujący wiersz .class1 border-color: blue

Jak widać, kolor ramki tabeli zmienił się na niebieski

Zmień kolor tekstu w tabeli na zielony. W pliku selector_type.css wpisz wiersz .class1 color: green

Widzimy, że kolor tekstu w tabeli zmienił się na zielony

Dodaj obraz tła do strony internetowej za pomocą wybieraka uniwersalnego. Na dysku flash w folderze CSS mamy plik obrazu z nazwą obrazu i rozszerzeniem .jpg

W pliku stylów selector_type.css dodaj wiersz * background-image: url (image.jpg)

W rezultacie strona internetowa przyjmie następującą formę

Rozważ drugi rodzaj selektora, taki jak selektor potomny. Selektor potomny dopasowuje element, który jest potomkiem innego elementu. Na przykład we wszystkich trzech akapitach (tagi

i

) zawierają między tagami wyrażenie „dokument HTML” i „reguła CSS” ... , jak pokazano poniżej. W tym przypadku tag będzie potomkiem tagu

. Tag zmień czcionkę wyrażeń „dokument HTML” i „reguła CSS” na kursywę

Kombinacje „dokumentu HTML” i „reguł CSS” kursywą

Zmień kolor tekstu fraz „Dokument HTML” i „Reguła CSS” na czerwony za pomocą selektora potomka. Aby to zrobić, w pliku stylów selector_type.css dodaj wiersz p I color: red

W rezultacie strona internetowa przyjmie następującą formę

Ciąg dalszy w artykule: Prawie skomplikowany lub naucz się CSS3. Część 3. Sposoby ustawiania kolorów w CSS. Ustaw przezroczystość elementu w dokumencie HTML

Kategoria