<MyRusakov.ru />

Joomla 3 с Нуля до Гуру

Joomla 3 с Нуля до Гуру

Видеокурс «Joomla 3 с Нуля до Гуру» поможет Вам повысить свой уровень в веб-разработке и научит создавать удобные и эффективные сайты на Joomla 3. Курс подходит как для опытных вебмастеров, так и для новичков, кто ещё только начинает.

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

После планирования начинается техническая реализация и создание собственного адаптивного шаблона.

Далее рассмотрен процесс переноса и настройки на хостинге, оптимизация под поисковые системы и защита от хакерских атак.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

CSS селекторы выбирают стиль

CSS селекторы выбирают стиль

С помощью CSS селекторов мы выбираем какие конкретно элементы на сайте стилизовать. О чем нам говорит эта запись?

h1 { color: red; } = селектор { свойство: значение }

Заголовку h1 присвоить красный цвет.

На этом уроке мы разберем основные виды CSS селекторов:

  1. Селектор тегов
  2. Селектор-идентификатор
  3. Селектор классов
  4. Селектор атрибутов
  5. Универсальный селектор
  6. Комбинированные селекторы

1.Селектор тегов

Пишется название тега без угловых кавычек.

h1 { ..
}

Давайте заглянем в консоль инструментов для разработчика какого-нибудь сайта.

CSS селекторы выбирают стиль

На скриншоте отчетливо видно, что для селектора тега h1 задано свойство с конкретным значением (font-size: 34px;) по размеру шрифта. Те или иные значения свойств можно задать любому тегу на веб-сайте. Однако, проблема заключается в том, что теперь на сайте все заголовки h1 будет размером в 34 пикселя. Если мы так и задумали, то все ОК, а если нет, например на другой странице по задумке дизайнера, заголовок h1 должен быть 40 пикселей. Тогда переходим к следующему виду CSS селекторов.

2.Селектор классов

Вот этому особенному заголовку h1 размером в 40 пикселей присваиваем свой класс с произвольным название, например: "big".

В HTML-документе:

<h1 class="big">Заголовок</h1>

Мы помечаем на HTML-странице только заголовки размером 40 пикселей классом "big".

В файле CSS стилях:

.big { font-size: 40px; }

Перед названием класса всегда ставится точка, .big – селектор класса. Может применяться на сайте много раз. В случае, если мы точно знаем, что заголовок h1 размером 40 пикселей будет в единственном экземпляре. Переходим к следующему типу CSS селекторов.

3.Селектор-идентификатор

В отличии от классов применяется на сайте всего один раз и вместо точки ставится решетка #.

В HTML-документе:

<h1 id="big">Заголовок</h1>

В файле CSS стилях:

#big { font-size: 40px; }

Просто запомните, что id должно быть уникально на весь документ и не может повторяться.

Важно! По негласному правилу не рекомендуется использовать идентификаторы при верстке сайтов.

Желательно id использовать для якорей или для скриптов. Старайтесь при верстке использовать только классы.

4.Селекторы атрибутов

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

В HTML-документе:

 <form class="login" action="" method="post">
 <label for="login">Логин</label>
 <input type="text" id="login" name="login" >
 <label for="password">Пароль</label>
 <input type="password" id="password" name="password">
 <input type="submit" value="Войти">
 </form>

В файле CSS стилях:

/* Зададим фоновый цвет #fcf8e3; полю для ввода логина */
input[type="text"] {
    background-color: #fcf8e3;
}
/* Зададим фоновый цвет #f2dede; полю для ввода пароля */
input[type="password"] {
    background-color: #f2dede;
}

У нашей формочки поле для логина покрасится в желтый цвет, а поле для пароля – в розовый. Селекторы атрибутов записываются в квадратные скобки элемент [атрибут].

5.Универсальный селектор

В общем случае синтаксис универсального селектора будет такой. Суть его состоит в том, что он применяет стили сразу ко всем элементам сайта. Раньше он использовался для того, чтобы обнулить все стили для элементов сайта. Например отступы, поля для того, чтобы в каждом браузере сайт изначально смотрелся одинаково. Верстальщик ставил универсальный селектор, обнулял маржины и паддинги, это устаревший уже способ.

* { margin: 0;
  padding: 0;
}

Но сейчас все используют normalize.css с GitHub.

6.Комбинированные селекторы

Это CSS селекторы состоящие из нескольких селекторов. Рассмотрим самые распространенные типы комбинированных селекторов.

Мультиклассы

К тегу можно одновременно добавить несколько классов. Берется значение класса, стоящего в коде ниже.

В HTML-документе:

<h1 class="big1 big2">Заголовок</h1>

В файле CSS стилях:

 .big1 { font-size: 34px;}
 .big2 { font-size: 40px;}

К заголовку h1 применится значение класса big2, он стоит ниже.

Вложенный селектор

Задаются через пробел. Очень знакома ситуация, когда внутри абзаца выделяется какое-нибудь слово курсивом.

Пример <i>такого варианта</i> выделения

p i {
    font-style: italic; /* курсив */
  }

Здесь <p> это родительский тег, а <i> — дочерний тег, расположенный в контейнере <p>. В этом случае стиль будет применяться к тегу <i>.

Дочерний селектор

div > span {..}

Тег span является ребенком, а div – родителем. Значение стиля всегда применяется к ребенку, если он прямой потомок и непосредственно расположен в контейнере родителя.

Соседний селектор

Соседними называются элементы страницы, когда они идут друг за другом.

b + i { color: gray; }

Тебе так идет <b>серый</b> цвет, <i>особенно</i> в сочетании с розовым.

А чтобы научиться применять ваши знания на практике, рекомендую ознакомиться с моим курсом Вёрстка сайта с нуля 2.0

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

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

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

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

  1. Кнопка:

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

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

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

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

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

romas_s romas_s 26.01.2018 14:16:17

за normalize.css с GitHub. спасибо. так же не мешало бы раскрыть следующую тему: Приоритеты стилей (перебивание блоков CSS стилями с более высокими приоритетами) - это самая важная тема в CSS - на все остальные темы CSS миллиарды готовых примеров на любой тег. Добавьте приоритеты стилей в последующие курсы - это очень важная тема, я б даже сказал - самая важная тема!!!.

Ответить

porsake porsake 27.01.2018 20:56:19

Хорошо, я напишу статью на эту тему.

Ответить

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