Классы в CSS – удобный путеводитель для новичков

CSS классы — когда их использовать

Когда у вас есть повторяющиеся элементы на вашей странице, которые должны быть стилизованы одинаково, вам необходимо использовать классы CSS. Для этого нужно выполнить два шага:

Шаг 1 — добавить класс в HTML

Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала пометить элементы атрибутом class = «class-name». Вот пример:

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

Посмотрим, что нужно сделать в нашем CSS:

div.box {высота: 200 пикселей; ширина: 200 пикселей; выравнивание текста: по центру; размер шрифта: 14 пикселей; цвет: # 090; цвет фона: #ddd; правое поле: 10 пикселей; }

Чтобы определить правило для определенного тега с помощью класса CSS, вместо простого определения тега {} мы используем tagname.classname {}. Точка между тэгом и именем класса определяет правило как класс CSS. Также обратите внимание, что внутри нет пробелов. Если вы поставите пробел в правиле, оно не будет работать должным образом.

В этом примере используется свойство margin-right: 10px. Эта линия гарантирует, что между тремя контейнерами будет расстояние 10 пикселей. Свойство float, установленное на left, гарантирует, что все контейнеры будут перемещены влево.

Подобная комбинация должна дать вам что-то вроде этого:

Если вы не укажете класс

Чтобы показать вам, что ваш класс изображения блока CSS применяется только там, где вы хотите, вставьте дополнительный элемент

Использование более чем одного класса

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

Чтобы указать, что вы хотите использовать несколько классов в CSS, вам необходимо добавить следующий класс, разделенный пробелом. Как здесь:

Расположение каскадом

Поскольку стили CSS используют каскадную сортировку, вы размещаете свои классы в порядке важности. В этом случае мы хотим, чтобы class = «box» применялся перед class = «red». В противном случае class = «red» будет применен перед class = «box». Надеюсь, это ясно!

Давайте изменим наш код CSS:

div.box {высота: 200 пикселей; ширина: 200 пикселей; выравнивание текста: по центру; размер шрифта: 14 пикселей; цвет: # 090; цвет фона: #dddddd; правое поле: 10 пикселей; } div.red {цвет фона: #ffcccc; } div.green {цвет фона: #ccffcc; } div.blue {цвет фона: #ccccff; } Поскольку каждый из трех контейнеров имеет CSS-класс .box, свойства, установленные в div.box, применяются ко всем из них. Но все

CSS классы при создании макета сайта

Подумайте, какие элементы вам нужно использовать классы CSS для кодирования макета страницы. Вот несколько мыслей в качестве подсказки:

• Все изображения, которые вы хотите превратить в значки или изображения продуктов, должны быть квадратными: например, img.thumbnail {width: 200px; высота: 200 пикселей; };
• Стили ссылок для кнопок необходимо определять отдельно от обычных стилей ссылок. Например, a.button {};
• Вам нужно применить другой цвет при наведении курсора на ссылки в навигации. Например, a.nav: hover {} a.nav: hover {}.

Атрибут contenteditable

Очень интересный, но contenteditable атрибут необходим, если вы знаете JavaScript. Например, он используется при быстром редактировании текста и его сохранении, в общем, для этого есть много применений. Атрибут contenteditable имеет два значения: true и false. True — разрешить редактирование, false — выключить редактирование. Ложь используется редко, если не указать этот атрибут, по умолчанию будет Ложь. Чтобы разрешить редактирование, чаще всего пишут contenteditable или contenteditable = «», параметр true является необязательным. Вот пример:

HTML код

Привет!

Спецификация

Каждая спецификация проходит несколько этапов утверждения.

• Рекомендация — эта спецификация одобрена W3C и рекомендуется в качестве стандарта.
• Кандидат в рекомендацию: стандартная группа удовлетворена тем, что соответствует своим целям, но сообществу разработчиков нужна помощь во внедрении стандарта.
• Предлагаемая рекомендация — на этом этапе документ передается в Консультативный совет W3C для окончательного утверждения.
• Рабочий проект — более зрелая версия проекта после обсуждения и рассмотрения для рассмотрения сообществом.
• Черновик редакции — Черновик доработанной версии редакции проекта.
• Проект — это первый вариант стандарта.

Особняком стоит стандарт Living (Living) HTML: он не придерживается традиционной нумерации версий, так как находится в постоянном развитии и регулярно обновляется.

Атрибут hidden

Владелец (тег) этого атрибута скрыт от просмотра, и страница отображается так, как будто его там нет. Но в то же время это доступно через скрипт JavaScript. Вот пример:

HTML код

Ты не можешь меня видеть!

Атрибут class

Задает класс стиля для связи определенного тега и стиля CSS. В HTML вы можете указать много классов и разделить их пробелом. Классы могут состоять из латинских букв, обоих регистров, цифр, тире и подчеркивания. Запрещено использовать русские буквы. Вот пример:

HTML код

Пункт

Значения

В HTML4 имена классов могут содержать латинские буквы (A — Z, a — z), числа (0–9), дефис (-) и подчеркивание (_) и не должны начинаться с числа. Использование русских букв на уроках недопустимо. HTML5 снял эти ограничения, но для совместимости со старыми браузерами и JavaScript мы рекомендуем вам следовать этим рекомендациям.

Атрибут id

Уникальный идентификатор. Он может быть только по одному на странице, поэтому он уникален. Чаще всего используются уникальные идентификаторы для дальнейшей ссылки на них с помощью сценариев JavaScript. Идентификатор может состоять из латинских букв, обоих регистров, цифр, тире и подчеркивания. В названии уникального идентификатора запрещено использовать русские буквы. Кстати, его еще называют «идентификатор стиля», «уникальное имя элемента». Вот пример:

HTML код

Атрибут title

Описание команды. Когда вы наводите курсор на элемент, если у него есть заголовок, он отображает содержимое этого атрибута в качестве подсказки. Полезно написать заголовок для ссылок и изображений. Помогите SEO оптимизировать ваш сайт. То есть поисковики сочтут его более актуальным. Например, если у вас есть какое-то изображение кнопки, чтобы пользователь понимал, для чего эта кнопка, вы можете добавить всплывающую подсказку к заголовку. Стиль этой всплывающей подсказки зависит от браузера и операционной системы и не может быть изменен с помощью HTML и CSS, но атрибут заголовка можно изменить с помощью сценариев JavaScript. Вот пример:

Ссылка на HTML-код

Пример

 

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

Чтобы исключить засветку экрана световыми потоками, оконные проемы оборудуют светорассеивающими шторами.

Атрибут style

Это третий способ моделирования элемента. Его значение — это стили, которые вы хотите применить. Вот пример:

HTML кодNSзаклепка

Значение по умолчанию

Нет.

Идентификаторы

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

В файле CSS имя указывается с хешем в начале.

Таким образом, например:

# блок {цвет: # ff00ff; font: italic 16px Arial}

И к нужному элементу добавляется атрибут id = «block», например

id = «block»> Абзац с идентификатором

Вот пример:

Это нормальный абзац

id = «rosa»> Этот абзац уникален

Так в чем разница между классом и идентификатором?

Позвольте показать вам на примере:

id = «block» style = «display: none»>

А вот и я!!

Нажми на меня!!

---

 

id = «block1» style = «display: none»>

А здесь я!!

И нажмите на меня!!

В этом примере курсивом выделен сценарий, способный динамически обрабатывать блоки

с уникальными именами «блок» и «блок1» (скрыть и показать, щелкнув ссылку), и хотя я думаю, что вам пока недостаточно того, что ясно из вышеизложенного, цель этого примера — показать как сценарий может получить доступ к блоку через идентификатор атрибута. Но с помощью классов мы бы не добились такого результата.

Ну, я думаю, он объяснил что-то вроде этого..

Атрибут dir

Редко используемый, но полезный атрибут. Установите направление текста: слева направо и справа налево. Атрибут dir принимает два значения: ltr — слева направо и rtl — справа налево. Вот пример:

HTML код

— Суббота