Продвинутый CSS: работаем с селекторами атрибутов
Недавно мы разбирали родственные и соседние селекторы — они нужны для того, чтобы элементы сайта выглядели по-разному в разных ситуациях. Сегодня продолжим тему и поговорим о селекторах атрибутов — они позволяют настроить стили ещё тоньше и сделать много разной магии. Их много, поэтому покажем на примере основных.
- По умолчанию все элементы одного типа на странице выглядят одинаково. Если у нас есть заголовок второго уровня, он будет выглядеть одинаково в любом месте страницы.
- Чтобы поменять внешний вид конкретного элемента, можно использовать классы, а можно — селекторы.
- Класс — это дополнительная бирка к тегу. Нужно прямо в HTML сказать: «Ты особо важный текст, вот тебе соответствующий класс».
- Селектор работает по-другому. Он позволяет задавать разные условия, и если они выполняются, то применяется другой стиль оформления. Например, можно сделать так, чтобы первый абзац под заголовком всегда был набран курсивом, — и благодаря селекторам это будет работать в любом месте страницы.
Получается, что селектор — это способ выбрать какой-то элемент на странице и как-то его особенным образом покрасить, но при этом не трогать сам HTML-код.
Что такое атрибуты
Атрибуты у тегов — это параметры, которые идут внутри угловых скобок. Например, для вставки картинок используется тег , который может выглядеть так:
У этого тега два атрибута:
src=»https://thecode.media/wp-content/uploads/2023/03/1-7.jpg» ← адрес картинки
alt=»Передача эстафетной палочки» ← текст, если картинка не прогрузится
У каждого тега свои атрибуты, но суть одна: они относятся к конкретному элементу. Вот с такими атрибутами и работают селекторы.
Селекторы атрибутов — это инструмент в языке CSS (каскадные таблицы стилей), который позволяет выбирать элементы HTML на основании их атрибутов. Это даёт возможность точно настроить стили для конкретных элементов на странице в зависимости от определённых условий.
Примеры селекторов атрибутов:
[attribute] — выбор всех элементов, которые имеют определённый атрибут. [attribute=value] — выбор элементов, которые имеют определённое значение заданного атрибута. [attribute^=value] — выбор элементов, у которых значение заданного атрибута начинается с определённого значения. [attribute$=value] — выбор элементов, у которых значение заданного атрибута заканчивается на определённое значение. [attribute*=value] — выбор элементов, у которых значение заданного атрибута содержит определённое значение.С помощью селекторов атрибутов можно, например, выбирать все ссылки, которые ведут на внешние ресурсы, и задавать для них специальный стиль. Они также полезны при работе с формами, т. к. можно настроить различные стили для элементов форм на основании их атрибутов, например для кнопок отправки или поля ввода email.
Простой селектор атрибута
Самое простое, что можно сделать в этом плане с атрибутами, — это прописать такую логику:
если у тега есть такой-то атрибут → применяем вот такой стиль оформления.
Допустим, мы хотим выделить тегом ключевые слова и мысли в статье — и для пользователей, и для поисковиков. К некоторым из них мы напишем подсказки, что они означают, или добавим деталей. Чтобы не городить классы, используем селектор атрибута:
- если у тега нет подсказки — просто делаем красным;
- если подсказка есть — добавляем прерывистое подчёркивание, чтобы было понятно, что там есть подсказка.
Для этого используем селектор атрибута span[title] :
span color: red;
>
span[title] border-bottom: 1px dashed #000080;
>
Возьмём за основу статью про рейтрейсинг и добавим туда селектор:
body < font-family: Arial; font-size: 16px; line-height: 20px; >span < color: red; >span[title] Рейтрейсинг: что это такое и зачем нужно
Тренд компьютерных игр последних лет — добавлять в них поддержку рейтрейсинга. Считается, что благодаря ему игры становятся более реалистичными и поэтому — интересными. Мы собрали самые популярные вопросы про рейтрейсинг — что это такое, как работает и где применяется, кроме игр. Чисто для общего айтишного кругозора.
Селектор значения атрибута
Представим такое: на странице есть много ссылок, и часть из них ведёт на главную страницу сайта. Мы хотим сделать заметнее ссылку на главную, и для этого используем селектор значения атрибута, который работает так:
если у атрибута значение совпадает с указанным → применяем вот такой стиль оформления
В нашем случае поможет селектор значения атрибута href — если значение ссылки совпадает с адресом главной страницы, то делаем её жирной:
a[href=»https://thecode.media/»] font-weight: 900;
>
Теперь добавим блок с новым разделом на страницу и сделаем там две ссылки — на внешний ресурс и на главную страницу «Кода»:
Что такое рейтрейсинг
Рейтрейсинг — это русский вариант английского термина «ray tracing», что означает отслеживание лучей. Перевод: рейтрейсинг — это когда компьютер считает, как летят лучи света, от чего отражаются и какие отбрасывают тени.
Википедия про рейтрейсинг
Изначально рейтрейсинг появился как способ сделать более реалистичную трёхмерную графику: сначала в фильмах, потом в играх. Благодаря рейтрейсингу свет в виртуальных сценах ведёт себя близко к настоящему.
Вернуться на главную
Селектор любого значения атрибута
Почти у любого тега в качестве атрибута может использоваться класс — это удобно, когда нам нужно детально настроить внешний вид и поведение элементов на странице. Но иногда нам может понадобиться такое:
найти все классы или другие атрибуты, в названии которых есть определённое слово.
Для этого используется селектор атрибута, который срабатывает, если в атрибуте есть указанный текст. Например, мы знаем, что на всех абзацах стоит класс с названием details- , за которым идёт своя тема, например details-new или details-card . Если мы хотим поменять стили у таких детальных абзацев, то используем звёздочку:
p[class *= «details»] font-family: monospace;
>
body < font-family: Arial; font-size: 16px; line-height: 20px; >span < color: red; >span[title] < border-bottom: 1px dashed #000080; >a[href="https://thecode.media/"] < font-weight: 900; >p[class *= "details"] Рейтрейсинг: что это такое и зачем нужно
Тренд компьютерных игр последних лет — добавлять в них поддержку рейтрейсинга. Считается, что благодаря ему игры становятся более реалистичными и поэтому — интересными. Мы собрали самые популярные вопросы про рейтрейсинг — что это такое, как работает и где применяется, кроме игр. Чисто для общего айтишного кругозора.
Что такое рейтрейсинг
Рейтрейсинг — это русский вариант английского термина «ray tracing», что означает отслеживание лучей. Перевод: рейтрейсинг — это когда компьютер считает, как летят лучи света, от чего отражаются и какие отбрасывают тени.
Википедия про рейтрейсинг
Изначально рейтрейсинг появился как способ сделать более реалистичную трёхмерную графику: сначала в фильмах, потом в играх. Благодаря рейтрейсингу свет в виртуальных сценах ведёт себя близко к настоящему.
Вернуться на главную
У нас есть курсы по прокачке навыков до уровня middle и далее. Начать можно бесплатно. Посмотрите, интересно ли вам это.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Оформление html тегов атрибутом style (встроенные стили CSS)
Нам уже известно, что для того, чтобы веб-сайт выглядел красиво и стильно нам необходимо поработать с CSS-файлом. И чтобы наши стили применялись необходимо соединить HTML файл и файл CSS.
Существует несколько вариантов осуществления данной операции: использование таблиц вложенных стилей, таблиц внешних стилей и встроенный стиль.
Сегодня мы поговорим именно о последнем способе.
Внедрения стиля в тег HTML
Суть данного способа заключается в том, что необходимое оформление мы внедряем внутрь тега. Для этого создан отдельный атрибут — style. Данный атрибут может быть применен к любому тегу, однако только в рамках тела сайта, то есть в границах body. Значением этого атрибута выступают операторы тех стилей, которые необходимо применить к заданному элементу.
Для примера зададим разные размеры шрифта для двух разных абзацев текста:
p style="font-size:25px;">Задаем этому отрезку текста высоту букв в 25 пикселей.p> p style="font-size:15px; color:#2400ff;">А этот текст будет с буквами, высотой 15 пикселей, причем еще и подкрасим его синим, чтобы продемонстрировать применение нескольких стилей одновременно.p> Недостатки
Пример отлично демонстрирует, как такое навешивание стилей засоряет код страницы.
Также можно отметить еще парочку недостатков применения данной методики стилизации. Первым из них можно назвать разброс стиля по всему документу, что в перспективе редактирования усложнит процесс в разы.
Также возникнет трудность в оформлении больших объемов текста. Думаю, никого не радует перспектива прописывать для каждого абзаца размер шрифта, особенно если таких абзацев штук 40.
Еще при использовании встроенных стилей становится невозможным применение псевдоклассов, что в значительной степени связывает руки веб-дизайнера.
Стоит также отметить и путаницу, которая обязательно всплывет в использовании атрибута style. Эта путаница возникнет из-за использования разных кавычек при вписывании стилей.
Для наглядности посмотрим на пример ниже:
div style="font-family: 'Roboto Condensed', sans-serif">Запись корректна.div> div style='font-family: " Roboto Condensed ", sans-serif'>Так тоже правильно.div> div style="font-family: " Roboto Condensed ", sans-serif">Это не корректная запись.div> div style='font-family: ' Roboto Condensed ', sans-serif'>И это тоже не верноdiv> Глядя на выкладки, предоставленные выше, напрашивается логический вывод, что применение встроенных стилей связаны с рядом существенных осложнений и неудобств.
Когда стоит использовать встроенный стиль
Несмотря на все недостатки, встроенный стиль был выдуман не зря. Веб-мастера часто обращаются к ним в случае программного присвоения стиля. Для примера посмотрим на этот код
div id="productRate"> div style="width: 40%">div> div> Запись нужной ширины для этого блока будет простейшей операцией.
Аналогичная ситуация может возникнуть при необходимости замены фонового изображения(к примеру) пользователя под ролью администратора. В таком случае тег img может не подойти. Поэтому стоит обратится к атрибуту style:
div style="background:url(fon.jpg)">div> Также программисты частенько обращаются к встроенным стилям в процессе верстки всплывающих окон. Зачастую этот процесс проходит следующим образом: блоку, над оформлением которого идет работа, прописывается display:block, а остальные окна скрываются посредством display:none, чтобы они визуально не мешали работе программиста. Вот пример:
div class="element" style="display:block">Всплывающее окно, которое оформляется в данный моментdiv> Итог
Использование встроенных стилей связано с рядом трудностей и неудобств, однако в процессе оформления некоторых элементов веб-мастера часто обращаются к этому методу для оптимизации своей работы.