Программирование с нуля с чего начать? Web разработка Урок 24 Advanced selectors

Автор Ivan Samoilov
Программирование с нуля   с чего начать? Web разработка  Урок 24 Advanced selectors

мы уже научились с вами использовать три вида селекторов для применения CSS первый этап применение при помощи указания HTML элемента в данном случае.

Я указал элемент пи чтобы применить CSS ко всем параграфам страница далее мы изучили способ применения сиз при помощи ID и способ применения сиз при помощи класса, но действует ещё очень большое количество способов применения сиз с я создал вот такой вот html документ который выглядит вот таким образом на браузере и я хочу вам показать некоторые дополнительных способов применения сиз если мы наберём в. Гугле CSS selectors то 1 у меня выдаётся ссылка на w3schools. И если мы перейдём по этой ссылке то здесь описаны в селе при помощи которых можно применять SS описана довольно-таки большое количество этих селекторов если нажать на селектор то вы перейдете на страницу где есть пример использования и здесь написано троить Yourself.

Попробуйте сами если на неё нажать на эту кнопку то показывается какой-то html-документ и здесь использования класса указана для применения ссы.

Как вы видите указывать интро который прописан в элементе Def которые находятся два параграфа и в этом классе устанавливается атрибут background Color жёлтым цветом и отображение на веб-странице сразу показывается — это очень удобно видеть сразу здесь много полезной информации как я вам уже здесь наверху написано написано очень много тем которые вы можете здесь рассмотреть изучить по которому вы можете посмотреть справочную информацию, но этот сайт на английском языке и вам как разработчикам обязательно привыкать к этому языку потому, что свежайшая информацию в интернете о разработке именно на этом языке. Но я хочу вам показать. Некоторые из этих способов применения например давайте рассмотрим вот этот способ при помощи звёздочки здесь написано, что при помощи звёздочки. Мы выбираем все элементы на странице. Давайте попробуем — это сделать в нашем сес документе я напишу звездочку в качестве селектора и например укажу Border граница 2 пикселя толщину пусть будет салют то есть сплошные будет границы и Green цвета к примеру и теперь сохранил файл и обновлю страницу и вы видите ко всем совершенно ко всем элементам которые находятся в html-документе применён — это все свойства у каждого HTML элемента и даже у самого внешнего у. Бори выведите есть это. Зелёная граница мы можем немного ограничить действия этого селектора, но можем к примеру добавить здесь какой-то div и в него добавить какие-то параграфы да пусть будет ещё какой-то заголовок H1. Давайте ещё разместим здесь какой-то подарок лист к примеру с какими-нибудь элементами. И теперь мы можем задать этому div ID какой-то пусть будет примером айди педали CSS мы можем сослаться на этот It My Die и выбрать все элементы в этом элементе div при помощи звёздочки. Давайте сохраним оба файла и обнови страницу и теперь — это все свойства Border применена именно элементу сойди. Мальдив ко всем элементам которые находятся внутри него если бы мы указали просто без звездочки, тогда был бы сейчас применён только ко всему Def, а со звёздочкой каждому элементу в деве который находится в элементе под идентификатором My Life. Точно также мы тут можем использовать не только это, а также класс. То есть если мы здесь например укажем класс медив ты допустим в этом элементе пусть будет такой же класс и здесь мы, тогда сошлися при помощи точки на этот класс. Обнови сохраняемого файла и обнови страницу и теперь в этих двух элементов которые имеют класс меди в. Каждый элемент внутри имеет границу окантовку даже каждая ссылка которая находится внутри каждого элемента вы видите. Самуил элементы граница доля каждый и. Каждый элемент этого неупорядоченного списка имеет границу. Да и также каждая ссылка на внутри элемента лылы. Тоже имеет границу. Давайте уберём эти свойства и следующий способ который я хочу вам показать — это при помощи указания потомка и родителя например элементы которые находятся в элементе L и в этом случае элемент считается потомком элемента лылы считается родителям по отношению к и мы можем указать эту связь с при помощи в следующей записи пишем и здесь заказываем все например пусть будет background Yellow. Давайте сохраним. Обнови страницу и теперь какой видите только те ссылки которые находятся в элементах списка и они отобрази lisez до. Гранд желтого цвета. А ссылка которая находится не является потомком. Айдана вот эта. Верхняя она не является потом она не находится внутри элемента. Эллаи и к ней — это тебе не был применён следующий способ применения CSS указать соседство с каким-то элементом смотрите. Например у нас есть три элемента Will Android листы и два из них идут после элемента h4r вот этот вот и вот этот вот а. Первый элемент. Юль идёт после элемента h3r и мы можем указать, что тот элемент точнее те элементы все которые идут после элемента h3r должен быть каким-то особенным CSS — это делается следующим способом мы указываем NH3 + и после него идёт юлы к этому и который именно идёт kh3 мы применяем свойства CSS путь к примеру в цвет текста будет пример. И как вы видите только один из который идёт после элемента H3 отобрази лся цветовой текст отображался красным следующий способ применения. СМС по какому-то атрибуту на. У нас есть несколько элементов типа ссылка аи-2 ссылки у нас одинаковые ссылки на страницу моего сайта. Мистер Кот и мы хотим применить CSS к примеру которые направляются на эту страницу, что для этого нужно сделать для этого все спали мы указываем следующее мы указан элемент. Эй далее указан квадратные скобки и мы пишем атрибут.

0 комментариев
0

Читайте также