http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Главная › Новости

CSS-селекторы для начинающих

Опубликовано: 06.09.2018

видео CSS-селекторы для начинающих

Все CSS Селекторы в одном уроке, Видео курс по CSS, Урок №2

Окей, скажут некоторые мои подписчики и отпишутся от обновлений. Конечно, я понимаю, что во-первых статья для совсем начинающих, во-вторых, довольно много информации есть по этой теме… но тем не менее у многих людей, которые ко мне обращаются, возникают с этим проблемы. А я даже и не знаю, на какую статью им ссылку дать, смотрю одно руководство, смотрю второе, и что-то ни одно из них мне не нравится.



Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even). Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

Предлагаю вам на каждый из последующих примеров создать HTML-файл и пробовать все варианты сразу же по ходу дела. Тогда точно всё будет просто и понятно.


CSS3 для начинающих | #18 Селектор атрибута

Пример 1. Селекторы по ID элемента

Ну это на мой взгляд самое простое и с этого нужно начинать, тут самое важное, что нужно помнить — это что какой-либо конкретный ID может встречаться только один раз на странице, ну и конечно же для вашего удобства будет лучше, если на других страницах сайта этот же ID не будет обозначать абсолютно другой элемент.


QA Automation: Урок #3 Находим и применяем селекторы в тесте

1 2 < em id= "misha_em" >Текст курсивом.</ em > < strong id= "misha_strong" >Жирный текст.</ strong >

HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */ #misha_em { color : #888 ; /* серый цвет для курсива */ } #misha_strong { color : #fe0000 ; /* красный для жирного текста */ }

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em , #misha_strong { text-tansform : uppercase ; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */ }

Подытожу: как видите с ID всё предельно просто — добавляем соответствующий атрибут к любому HTML-элементу, этот атрибут должен быть уникальным и не повторяться больше на странице, а затем мы просто обращаемся к нему напрямую через CSS. Всё.

Пример 2. Селекторы по классам

Первое отличие классов от ID — это то, что их может быть на странице сколько угодно. Например для того, чтобы не перечислять все ID элементов через запятую, как в предыдущем примере, используем классы.

1 2 < em id= "misha_em" class= "misha_text" >Текст курсивом.</ em > < strong id= "misha_strong" class= "misha_text" >Жирный текст.</ strong >

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */ .misha_text { text-tansform : uppercase ; /* оба элемента <em> и <strong> будут переведены в верхний регистр */ }

Также мы можем обратиться ко всем элементам жирного текста <strong> с классом .misha_text, добавив перед точкой название тега элемента:

/* обращаемся ко всем <strong> класса misha_text */ strong .misha_text { color : #fe0000 ; }

Очень кратко про приоритеты

Обычно если одному и тому же элементу присваиваются разные стили несколько раз, то задействуются те, которые указаны в CSS-файле в последнюю очередь (на самом деле тут полно правил, это однозначно тема отдельного поста). Однако у разных селекторов различный приоритет, и в примере я покажу, что имею ввиду.

Тут может показаться, что элементу должен быть присвоен цвет #fe0000, так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text { color : #fff !important ; /* если после значения свойства указать !important - это самый высочайший приоритет */ } #misha_strong { color : #eee ; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */ } .misha_text { color : #fe0000 ; }

Подытожу: если абсолютно разным элементам нужно присвоить одинаковые стили, вы можете объединить их по классу.

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

Я предположу, что вы уже знаете парочку HTML-тегов, например то, что <div> — это просто блок, <ul> и <li> — элементы списка, <strong> — жирный текст, <p> — абзац.

1 2 3 4 5 6 7 8 < div > < ul > < li >Элемент списка 1</ li > < li >Элемент списка 2</ li > < li >< strong >Жирный</ strong > элемент списка 3</ li > </ ul > </ div > < p>< strong >Жирный текст внутри абзаца</ strong ></ p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div { background-color : #eee ; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */ } li { color : green ; /* текст элементов списка станет зелёного о_О цвета */ } strong { background-color : #ff0000 ; /* фон всех элементов strong станет красного цвета */ }

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

А что если мы хотим изменить стиль только того жирного текста, который находится внутри абзаца? Или вдруг нам нужно, чтобы жирный текст внутри абзаца и внутри списка отличались по стилям?

Тут нам поможет наследственность. В CSS мы можем указать полный путь к нужному нам элементу от самого начала документа, да хоть от самого <body>! Чтобы понять, о чем я говорю, смотрите пример:

/* это означает, что стили будут применяться ко всему жирному тексту, который находится внутри элемента <ul>, который в свою очередь находится внутри элемента <li>, который в свою очередь находится внутри элемента <div>, и необязательно, чтобы эти элементы шли друг за другом последовательно!!! то есть может быть и так: div p ol li ul li p strong */ div ul li strong { background-color : #ff0000 ; } /* ситуация точно такая же, необязательно элемент <strong> должен сразу идти после элемента <p>, это может быть и: p span strong */ p strong { background-color : #aaa ; }

В принципе всё правильно и вы можете так и оставить и перейти к следующей главе, но я пока что попробую этот пример упростить.

Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:

div strong { background-color : #ff0000 ; } p strong { background-color : #aaa ; }

Ну а теперь важное правило, если приоритет впереди стоящего селектора не выше, чем последующего, то к элементам применяются правила последующих селекторов.

/* сначала для всех <strong> делаем красный фон */ strong { background-color : #ff0000 ; } /* а потом перезаписываем правила для тех <strong>, которые находятся внутри абзацов <p> */ p strong { background-color : #aaa ; }

Вот и всё, в принципе информации из этого поста должно быть достаточно для создания верстки практически любой сложности. Тем не менее, я также выпущу вторую часть поста «Селекторы CSS для продвинутых» на следующей неделе.

Смотрите также
Карта
rss