Классы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Тег.Имя класса < свойство1: значение; свойство2: значение; . >
Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»Имя класса» (пример 8.1).
Пример 8.1. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Классы Для искусственного освещения помещения применяются люминесцентные лампы. Они отличаются высокой световой отдачей, продолжительным сроком службы, малой яркостью светящейся поверхности, близким к естественному спектральным составом излучаемого света, что обеспечивает хорошую цветопередачу.
Результат данного примера показан на рис. 8.1.
Рис. 8.1. Вид текста, оформленного с помощью стилевых классов
Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.
Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.
.Имя класса < свойство1: значение; свойство2: значение; . >
При такой записи класс можно применять к любому тегу (пример 8.2).
Пример 8.2. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Классы Согласно , шумовой характеристикой рабочих мест при постоянном шуме являются уровни звуковых давлений в децибелах в октавных полосах. Совокупность таких уровней называется , номер которого численно равен уровню звукового давления в октавной полосе со среднегеометрической частотой 1000 Гц.
Результат применения классов к тегам и показан на рис. 8.2.
Рис. 8.2. Вид тегов, оформленных с помощью классов
Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».
Пример 8.3. Использование классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Камни Название Цвет Твердость по Моосу АлмазБелый 10 Рубин Красный 9 АметистГолубой 7 Изумруд Зеленый 8 СапфирГолубой 9
Рис. 8.3. Результат применения классов
Одновременное использование разных классов
К любому тегу одновременно можно добавить несколько классов, перечисляя их в атрибуте class через пробел. В этом случае к элементу применяется стиль, описанный в правилах для каждого класса. Поскольку при добавлении нескольких классов они могут содержать одинаковые стилевые свойства, но с разными значениями, то берётся значение у класса, который описан в коде ниже.
В примере 8.4 показано использование разных классов для создания облака тегов.
Пример 8.4. Сочетание разных классов
HTML5 CSS 2.1 IE Cr Op Sa Fx
Облако тегов Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент Результат данного примера показан на рис. 8.4.
Рис. 8.4. Облако тегов
В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .
Вопросы для проверки
1. Какое имя класса написано правильно?
- 2layer1
- 1layer
- Яndex
- pink-floyd
- 28_days_later
2. Какой цвет будет у слова «потока» в коде?
При использовании следующего стиля?
- Зелёный.
- Синий.
- Жёлтый.
- Оранжевый.
- Чёрный.
- div[iddqd]
- div.iddqd
- iddqd.div
- div#iddqd
- div=iddqd
4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?
Шпаргалка по работе с таблицами
Если на одной странице или на сайте присутствует несколько таблиц и для них требуется установить разное стилевое оформление, то для таких таблиц добавляется атрибут class или id с соответствующим значением, например:
Comedy Adventure Action Scary Movie Indiana Jones The Punisher Epic Movie Star Wars Bad Boys
Company Q1 Q2 Q3 Microsoft 20.3 30.5 23.5 Google 50.2 40.63 45.23
При этом class=»list» можно будет использовать для оформления других таблиц (элементов), а id=»company» — только для одной таблицы.
2. Как добавить ссылки в таблицу
Ячейки таблицы могут содержать практически любые элементы. Чтобы вставить ссылку в ячейку, нужно добавить в нее элемент с текстом ссылки, например:
Comedy Adventure Action Scary Movie Indiana Jones The Punisher Epic Movie Star Wars Bad Boys
Стилизовать такие ссылки можно при помощи определения table a <> , или же задав класс непосредственно для ссылки.
3. Как создать ссылки на ячейки таблицы
Ссылка на ячейку таблицы создается при помощи якоря. Для этого нужной ячейке добавляется атрибут id со значением, например:
.
Чтобы обеспечить переход со ссылки на эту ячейку, задаём ей соответствующее значение пути
Если переход осуществляется с одной страницы сайта на другую, якорь добавляется после адреса страницы, например:
Для наглядности результат перехода можно выделить, например, сменить цвет фона ячейки, цвет текста ячейки, добавить подчеркивание и т.д.
td:target td:target td:target
Пример
Таблица составлена на основе рейтинга зрителей. Перейдя по этой ссылке, вы узнаете какой фильм мой самый любимый.
| Фантастика | Комедия | Приключения |
|---|---|---|
| Марсианин | Самый лучший день | Миссия невыполнима: Племя изгоев |
| Мстители: Эра Альтрона | Пиксели | Агенты А.Н.К.Л. |
| Голодные игры: Сойка-пересмешница | Барашек Шон | Последние рыцари |
4. Одинаковая ширина колонок таблицы
По умолчанию ширина таблицы определяется содержимым ее ячеек. Управлять шириной столбцов (ячеек) можно следующими способами:
- Если для таблицы задана ширина, то table сделает все ячейки одинаковой ширины, исходя из ширины самой длинной ячейки.
- Если для таблицы задана ширина table , и ширина ячеек вычисляется в % , например, td , то ширина всех ячеек будет равной.
- Задав фиксированную ширину с помощью единиц длины, например, th .
При этом не забывайте, что к ширине таблицы будет добавлена ширина границы ячеек и таблицы и внутренние отступы ячеек padding (если не установлено свойство ).
5. Оформление заголовка таблицы
Управлять положением заголовка можно свойством caption-side , например, caption поместит заголовок после таблицы.
По сути заголовок является ячейкой таблицы, поэтому для него можно задавать те же свойства, что и для ячеек таблицы, т.е.
caption
6. Создание вложенных таблиц
Чтобы вложить одну таблицу в другую, нужно поместить код вложенной таблицы в выбранную ячейку основной таблицы, например:
ячейка заголовка таблицы ячейка заголовка таблицы ячейка таблицы ячейка заголовка вложенной таблицы ячейка вложенной таблицы
| ячейка заголовка вложенной таблицы |
|---|
| ячейка вложенной таблицы |
Вложенные таблицы могут содержать любое количество строк и ячеек. Для них можно устанавливать любые свойства, отличные от значений основной таблицы, размещать в ячейках изображения, а также другие таблицы.
Классы в CSS
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
Что ж, конспект мы снова раскрасили, но какой ценой. Давайте признаем, что добавлять внутрь абзацев дополнительные теги и раскрашивать текст с их помощью, не самое лучшее решение. Ну, а какое решение хорошее?
Такое решение есть и оно называется «классы»!
Вспомните шаг, когда мы пытались стилизовать абзацы с помощью внешних стилей, но все они получились одинакового цвета.
Нужно было сделать следующее: добавить абзацам разные классы, а в CSS использовать селекторы не по тегу, а по классам.
Класс — это всего лишь один из атрибутов HTML-тегов, например:
В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса , например:
.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"Классы гибкие, их можно создавать много и называть понятными именами. Например, можно создать класс, который отмечает раздел курса, который сейчас изучается.
Имя класса может содержать в себе латинские символы, цифры, символ дефиса — и подчёркивания _ и начинаться оно должно с латинского символа.
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Конспект курса
Парные теги.
Одиночные теги.
Атрибуты тегов.
Инлайновые (встроенные) стили.
Внешние стили.
Стилизация по классам.
body < font-family: "Tahoma", serif; >h1 < color: #999999; >strong < color: green; >em < color: red; >.learned-ok < color: green; >.learning-in-progress < color: orange; >.not-learned < color: red; >
Проверить на сервере Проверка проводилась слишком много времени, попробуйте ещё разок Показать ответ
Спасибо! Мы скоро всё исправим)
Автозапуск
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
Увеличить 100% Уменьшить
Задачи Выполнено
Переделываем всё c нормальными классами:
- Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
- Первым четырём абзацам добавьте класс learned-ok .
- Пятому абзацу добавьте класс learning-in-progress .
- Шестому абзацу добавьте класс not-learned .
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
- Наша группа в VK
- Наш канал на YouTube
- Наша страница в Twitter
- Наш канал в Telegram
Атрибут class
Самый частый атрибут, который вы будете использовать. Задаёт класс элементу.
Время чтения: 6 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 23 марта 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Универсальный атрибут тега, с помощью которого можно задать имя любому элементу на странице. Имя элемента в дальнейшем используется в качестве селектора в CSS и позволяет управлять стилями элемента. К тому же по имени класса удобно искать и манипулировать элементами на странице при помощи JavaScript.
Пример
Скопировать ссылку «Пример» Скопировано
На странице может быть множество одинаковых тегов. Например, несколько заголовков второго уровня.
.В Санкт-Петербурге
Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.
В России
«Умом Россию не понять. »
В мире
На Брайтон Бич опять идут дожди.
.. h2>В Санкт-Петербургеh2> p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.p> h2>В Россииh2> p>«Умом Россию не понять. »p> h2>В миреh2> p>На Брайтон Бич опять идут дожди.p> .
�� Как при текущей разметке можно изменить цвет текста первого заголовка? Можно обернуть все заголовки в разные дополнительные теги. И использовать их комбинации в качестве селекторов для написания стилей. Но это решение будет неверным. Разметка распухнет, её сложно будет читать. Так делать не нужно.
Чтобы выделить какой-то отдельный элемент или набор элементов и применить стили выборочно можно использовать атрибут class .
.В Санкт-Петербурге
Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.
В России
«Умом Россию не понять. »
В мире
На Брайтон Бич опять идут дожди.
.. h2 class="news__local">В Санкт-Петербургеh2> p>Ветер, по Питерскому обыкновению, дул сразу со всех четырёх сторон.p> h2 class="news__country">В Россииh2> p>«Умом Россию не понять. »p> h2 class="news__world">В миреh2> p>На Брайтон Бич опять идут дожди.p> .
В коде выше каждому заголовку второго уровня заданы разные имена классов. Это позволит без особых проблем написать стили только для первого заголовка.
.news__local color: #ed6742;>.news__local color: #ed6742; >
Цель достигнута, при этом стили остальных заголовков второго уровня остались прежними.
Как понять
Скопировать ссылку «Как понять» Скопировано
Имя класса может быть произвольным. Вы самостоятельно придумываете это название и задаёте его элементу при помощи атрибута class . Чтобы использовать имя класса в качестве селектора достаточно написать его в CSS, поставив перед именем точку. По точке браузер поймёт, что ему нужно искать не тег, а именно класс.
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Атрибут класса можно задать любому тегу в HTML-разметке. Как и любой другой атрибут, класс прописывается внутри треугольных скобок открывающего тега.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
При выборе имени класса следует придерживаться нескольких правил:
- В именах классов используй только английские слова.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="osnovnoy-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Имена классов пишутся маленькими буквами.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="Main-Text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Для разделения двух слов используются тире ( — ) или знак подчёркивания ( _ ). Не используй camelCase ��
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="mainText"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main__text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Лучше не использовать больше трёх слов в имени класса.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="daily-news__main-alert-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="news__main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Не используй в названиях классов цифры или числительные. Завтра порядок блоков может измениться и нумерация будет сбивать с толку.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
p class="text1"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="text-two">Экзистенциализм сложен.p> p class="text3">Художественное переживание последовательно.p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="sub-text">Экзистенциализм сложен.p> p class="note-text">Художественное переживание последовательно.p>
- Не задавайте имя класса по контенту или по тегу. Контент — вещь живая. Если он изменится, то класс потеряет свою актуальность, что осложнит чтение и понимание кода. Теги также могут измениться в процессе жизни сайта.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.Экзистенциализм сложен.
Художественное переживание последовательно.
p class="p-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="difficult">Экзистенциализм сложен.p> p class="perezhivanie">Художественное переживание последовательно.p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="sub-text">Экзистенциализм сложен.p> p class="note-text">Художественное переживание последовательно.p>
- Не опирайтесь на внешний вид элемента при выборе имени класса. В разработке есть тенденция к быстрым изменениям. Поэтому завтра внешний вид сайта может полностью измениться. При подборе имён классов по смыслу элемента позволит избежать изменения HTML-разметки.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="green-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p> p class="main-text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
- Не используйте пробел для разделения слов внутри одного имени класса.
В примере ниже main и text будут восприниматься браузером как два отдельных класса, а не один, состоящий из двух слов.
Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм.p class="main text"> Его экзистенциальная тоска выступает как побудительный мотив творчества, однако символизм начинает импрессионизм. p>
Есть несколько методологий именования классов. Самой популярной на сегодня является БЭМ. Методология призвана определить дополнительные правила именования классов и облегчить процесс придумывания имён.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� У элемента может быть несколько классов. Перечисляй классы, разделяя их пробелом.
Экзистенциализм сложен.
p class="sub-text news-text">Экзистенциализм сложен.p>
�� Поскольку стили принято задавать только селекторам по классу, пиши классы всем элементам сразу в процессе создания HTML-разметки.
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Раньше в вёрстке довольно часто использовались идентификаторы — атрибут id . Теперь их лучше не использовать и заменить на класс. Точно не стоит использовать идентификаторы для стилизации элементов.
Причина в том, что идентификатор должен быть уникальным. В разметке может быть только один идентификатор с определённым именем. Это крайне неудобно для написания стилей, поскольку придётся многократно повторять одни и те же стили, но для разных идентификаторов. С классами эта проблема решается просто. Пропиши всем элементам, для которых нужно задать определённый внешний вид, один и тот же класс.
У многих начинающих разработчиков существует представление, что идентификаторы требуются для связи JavaScript и HTML, но это не так. В современном виде JavaScript предоставляет удобные инструменты поиска и манипуляции элементами по их классу. Так что и здесь классы пригодятся!
�� После того, как разметка и стили написаны, посмотри на них внимательно. Высока вероятность, что написано несколько одинаковых блоков стилей для разных классов. Имеет смысл оптимизировать код и вынести повторяющиеся стили в отдельный блок и задать всем похожим элементам один класс.
�� Представляй каждый блок, из которого состоит страница, как самостоятельный элемент, который можно будет убрать с текущей страницы и перенести на другую. Задавай такие имена классов, которые не будут привязаны к странице. Думай компонентами ��