Дизайн HTML-страниц. Язык CSS (ч.2)

Итак, в предыдущей статье мы остановились на том, что прикрепили файл стилей к нашей html-странице.

На сегодня предлагаю вам рассмотреть другие виды селекторов (был рассмотрен только селектор по тэгу).

Существует еще два селектора - по классу и Id

Начнем с селектора по классу:

Вот такой простой синтаксис. Ставим точку и затем пишем любое название класса. Потом точно также фигурные скобки и параметры.

Применить этот класс в html странице очень просто - тому тэгу, который мы хотим задекорировать надо добавить атрибут class="имя_класса". В нашем случае это class="form_element"

Я сделал так:

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

Чем отличается селектор по тэгу и селектор по классу?

Они отличаются удобством применения. Если вы описываете селектор тэга в вашем файле стилей, то ваши параметры стилей будут применены ко всем тэгам с указанным вами названием (например ко всем тэгам form).

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

Селекторы по id:

Начинается с решётки и потом идет придуманное вами имя.

Далее точно такие же фигурные скобки и параметры внутри них.

Чтобы html-тэгу присвоить id, надо точно так же как и с классами добавить атрибут id="имя_id". У нас это будет так: id="element"

Тут я присвоил id первому полю в форму (поле для логина).

Теперь при обновлении страницы цвет фона первого поля для ввода должен стать синим.

Возникает закономерный и очевидный вопрос: селекторы по классу и по id ничем не отличаются, зачем нужны оба типа?

Все просто: нельзя нескольким тэгам на странице присвоить один и тот же id, в то время как класс можно добавить к неограниченному количеству элементов хоть по сто раз.

Зачем нужна такая уникальность вы поймете чуть позже. На этом этапе достаточно запомнить только то, что классов может быть много, а id всегда один.

P.S. Давно забываю вам написать про особенность языков HTML, CSS и JavaScript: если при написании кода вы допустили какую-либо ошибку, то ваша страница несмотря ни на что отобразится и вы не увидите никакой ошибки, хотя она будет. Некоторые считают это плюсом, т.к. эти языки прощают невнимательность и мелкие ошибки. Другим это наоборот не нравится, т.к. неплохо было бы увидеть почему не работает тот или иной скрипт (различные кнопки и тд.). Но понять это трудно, т.к. еще раз повторюсь - страница отображается нормально без оповещения вас об ошибке.

О том как отлавливать такие ошибки будем разговаривать в начале изучения разработки функциональной части. Да-да, такой способ есть, 21-й век всё-таки)

@honey_and_money - Если идеи не дают покоя голове, то надо незамедлительно действовать!