Jaunie radioamatieri

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

Pilnībā
Aptauja

Посоветуйте тему для будущего видеокурса

Селекторы CSS

Селекторы CSS

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

1) Обычный селектор.

2) Контекстный селектор.

3) Селектор ID.

4) Селектор CLASS.

5) Селектор параметров.

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

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

<div><h2>Заголовок в контейнере</h2></div>

Элемент, в данном случае - это текст "заголовок в контейнере" лежит в теге <h2>, который в свою очередь лежит в теге <div>. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:

тег1 тег2 {
  свойство1: значение1;
  свойство2: значение2;
}

И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.

div h2 {
  font-weight: bold;
}

Такой стиль будет применён к примеру выше и "заголовок в контейнере" станет жирным. А если будет написано просто:

<h2>Заголовок</h2>

То стиль применён к этому элементу не будет, ведь он не находится внутри тега <div>.

Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (<div>, <p>, <tr>, <td>, <table> и прочие), и, разумеется, Вы захотите, чтобы у них был далеко не всегда одинаковый внешний вид. И вот тут и придут на помощь контекстные селекторы.

Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:

имятега#имя {
  свойство1: значение1;
  свойство2: значение2;
}

Теперь если тегу "имятега" имеет атрибут "id" со значением "имя", то к элементам внутри тега "имятега" будет применён стиль.

Если "имятега" отсутствует (то есть селектор начинается с символа "#"), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут "id" в значении "имя".

А теперь пример:

#red {
  color: red;
}

И теперь HTML-код, к которому будет применён данный стиль:

<p id = "red">Красный текст</p>

Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:

<p id = "red">Красный текст</p>
<p id = "red">Ещё один красный текст</p>

В таких случаях надо создавать два идентификатора вот так:

#red1, #red2 {
  color: red;
}

И HTML-код:

<p id = "red1">Красный текст</p>
<p id = "red2">Ещё один красный текст</p>

Вот теперь будет правильно. Кстати, обратите внимание на "запятую" в описании селектора. Это частый приём для сокращения количества строк в стиле. Если у Вас два или более элемента имеют один и тот же стиль, то Вы можете через запятую перечислить все селекторы, а потом сразу для всех написать соответствующий стиль, как в примере выше.

Теперь о селекторе CLASS. Он очень похож на селектор ID, но его "имя" может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:

имятега.имя {
  свойство1: значение1;
  свойство2: значение2;
}

Таким образом, если у тега "имятега" стоит атрибут "class" со значением "имя", то к элементам внутри будет применён данный стиль.

Аналогично, с селектором ID, если "имятега" не задано (то есть описание селектора начинается с символа "."), то данный стиль может быть присвоен любым элементам.

А теперь пример:

.red {
  color: red;
}

И HTML-код под этот стиль:

<p class = "red">Красный текст</p>
<p class = "red">Ещё один красный текст</p>

Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.

И последний тип селекторов CSS - это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег <input>, который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий

имятега[имяатрибута="значениеатрибута"] {
  свойство1: значение1;
  свойство2: значение2;
}

Применяется данный стиль в следующем случае: если в теге "имятега" значение "имяатрубита" равно "значениеатрибута" то будет применён стиль, в противном случае стиль не применяется.

Чтобы стало ещё понятнее, привожу пример:

input[type="submit"] {
  border: 2px double black;
}

И HTML:

<input type = "submit" value = "Кнопка с двойной чёрной рамкой">
<input type = "button" value = "Другая кнопка">

Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:

#header li a {
  font-size: 150%;
}

И HTML-код, который вызовет этот стиль:

<ul id = "header">
  <li>
    <a href = "http://myrusakov.ru">Текст с размером 150%</a>
  </li>
</ul>

Думаю, что и здесь вопросов не возникнет.

Напоследок хочется сказать, что селекторы - это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы - это уже зависит только от Ваших дизайнерских навыков.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://sacensibas.xyz)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.