Классы в CSS

Заныриваем глубже html academy ответ

Здесь тег используется для отображения CSS-стиля с сохранением форматирования и отображением в моноширинном шрифте.

 
/* Комментарий к CSS-стилю */ body 
 
А это пример неправильного использования, здесь тег добавлен для отображения HTML-кода с сохранением пробелов и переносов строк. Содержимое не должно включать HTML-теги.
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
 Для чего использовать тег
 
 
Отображение кода программ на веб-страницах.
 
Отображение CSS-стилей для примера кода.
 
Отображение отформатированного текста: логов, сообщений об ошибках и так далее.
 
Отображение HTML-кода для демонстрации или обучения.
 
Отображение содержимого тега , которое должно быть показано без изменений.
 
Отображение предварительно отформатированного текста для сохранения визуального форматирования
 
Отображение ASCII-артов.
 
 
Глобальные атрибуты
 
Ограничения
 
 
Тег не должен использоваться для вёрстки, так как может нарушить адаптивность сайта.
 
При использовании атрибутов width или height следует учитывать, что их значения могут привести к обрезанию текста или к неожиданным переносам строк.
 
 
Чем заменить тег
 
Если необходимо отображать отформатированный текст, можно использовать тег , а если необходимо выделить код на странице, можно использовать тег в сочетании с другими тегами, например, и .
 
🔠 Другие теги для создания текстовых блоков
 
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
 
Источник
 
a1ip / script.js 
 
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters 
 
 
 
const submitButton = document . querySelector ( '.submit-button' ) ;
 
 
 
const error = document . querySelector ( '.error' ) ;
 
 
 
const reviews = document . querySelectorAll ( '.review' ) ;
 
 
 
for ( let review of reviews ) 
 
 
review . onchange = function ( ) 
 
 
if ( review . dataset . evaluation === 'bad' ) 
 
 
submitButton . disabled = true ;
 
 
 
error . classList . add ( 'shown' ) ;
 
 
 
> else 
 
 
submitButton . disabled = false ;
 
 
 
error . classList . remove ( 'shown' ) ;
 
 
 
> ;
 
 
 
> ;
 
 
 
> ;
 
 
 
/*
 
 
 
1. У всех радиокнопок есть класс review.
 
 
 
2. Чтобы отслеживать переключение радиокнопок, нужно добавить обработчик событий onchange
 
 
 
каждой радиокнопке.
 
 
 
3. У каждой радиокнопки есть атрибут data-evaluation. Если отзыв хороший,
 
 
 
значение этого атрибута – 'good', а если плохой - 'bad'.
 
 
 
4. Кнопка отправки имеет класс submit-button. Если пользователь выбрал плохой отзыв,
 
 
 
кнопку нужно заблокировать, а если хороший — разблокировать.
 
 
 
5. Чтобы показать сигнал об ошибке, элементу с классом error нужно добавить класс shown.
 
 
 
Сигнал нужно показывать, если пользователь выбрал плохой отзыв. Если выбран хороший отзыв,
 
 
 
сигнал об ошибке нужно спрятать.
 
 
 
*/
 
 
 
Источник
 
a1ip / script.js 
 
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters 
 
 
 
let keys = document . querySelectorAll ( '.key' ) ;
 
 
 
let display = document . querySelector ( '.display' ) ;
 
 
 
let clear = document . querySelector ( '.clear' ) ;
 
 
 
for ( let key of keys ) 
 
 
key . onclick = function ( ) 
 
 
display . textContent += key . textContent ;
 
 
 
>
 
 
 
> ;
 
 
 
clear . onclick = function ( ) 
 
 
display . textContent = '' ;
 
 
 
> ;
 
 
 
/*
 
 
 
Кнопки с буквами и «пробел» имеют класс key, а дисплей — класс display.
 
 
 
При клике на кнопку с буквой или пробелом текстовое содержимое этой кнопки должно добавляться к текстовому
 
 
 
содержимому дисплея.
 
 
 
Кнопка очистки имеет класс clear. При клике на неё весь текст внутри дисплея должен удаляться, для этого
 
 
 
в текстовое содержимое дисплея нужно записать пустую строку.
 
 
 
*/
 
 
 
Источник
 
Классы в CSS
 
Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.
 
Что ж, конспект мы снова раскрасили, но какой ценой. Давайте признаем, что добавлять внутрь абзацев дополнительные теги и раскрашивать текст с их помощью, не самое лучшее решение. Ну, а какое решение хорошее?
 
Такое решение есть и оно называется «классы»!
 
Вспомните шаг, когда мы пытались стилизовать абзацы с помощью внешних стилей, но все они получились одинакового цвета.
 
Нужно было сделать следующее: добавить абзацам разные классы, а в CSS использовать селекторы не по тегу, а по классам.
 
Класс — это всего лишь один из атрибутов HTML-тегов, например:
 
В CSS можно задавать стили только для элементов с определённым классом. Для этого используется селектор по классу, который пишется так .имя-класса , например:
 
.important < color: red; >— выберет все теги с классом "important" .help < color: green; >— выберет все теги с классом "help"
 
Классы гибкие, их можно создавать много и называть понятными именами. Например, можно создать класс, который отмечает раздел курса, который сейчас изучается.
 
Имя класса может содержать в себе латинские символы, цифры, символ дефиса - и подчёркивания _ и начинаться оно должно с латинского символа.
 
  
 
Конспект курса
 
Парные теги.
 
Одиночные теги.
 
Атрибуты тегов.
 
Инлайновые (встроенные) стили.
 
Внешние стили.
 
Стилизация по классам.
 
   
 
Спасибо! Мы скоро всё исправим)
 
Код изменился, нажмите «Обновить» или включите автозапуск.
 
Вы перешли на другую страницу
 
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
 
Переделываем всё c нормальными классами:
 
 
Для начала удалите из HTML-кода все strong и em , чтобы внутри p остался только текст .
 
Первым четырём абзацам добавьте класс learned-ok .
 
Пятому абзацу добавьте класс learning-in-progress .
 
Шестому абзацу добавьте класс not-learned .
 
 
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.
 
Практикум
 
Профессии
 
 
HTML и CSS. 
Профессиональная вёрстка сайтов
 
HTML и CSS. 
Адаптивная вёрстка и автоматизация
 
JavaScript. 
Профессиональная разработка веб-интерфейсов
 
JavaScript. 
Архитектура клиентских приложений
 
React. 
Разработка сложных клиентских приложений
 
Node.js. 
Профессиональная разработка REST API
 
Node.js и Nest.js. 
Микросервисная архитектура
 
TypeScript. Теория типов
 
Алгоритмы и структуры данных
 
Паттерны проектирования
 
Webpack
 
Vue.js 3. Разработка клиентских приложений
 
Git и GitHub
 
Анимация для фронтендеров
 
 
Информация
 
Источник
 
Флексы для начинающих
 
Flexbox — инструмент построения крупных сеток и микросеток.
 
Чтобы превратить блок во флекс-контейнер, ему задают свойство display: flex . Непосредственные потомки такого контейнера — флекс-элементы — становятся гибкими. Они легко сжимаются или растягиваются, меняют порядок, поддаются выравниванию по главной и поперечной осям.
 
 
Благодаря таким свойствам мы можем создавать на флексах меню сайта, раздел с карточками товаров, пагинацию или любые другие блоки, в которых нужно предусмотреть переполнение контентом. При правильном использовании Flexbox вы получите отзывчивый сайт, который легко адаптируется к различным размерам экрана и устройствам.
 
 
Главная и поперечная оси
 
Элементы флекс-контейнера выравниваются вдоль двух осей: главной и поперечной.
 
Главная ось указывает направление потока флекс-элементов. По умолчанию он течёт по горизонтали слева направо, от начала к концу оси:
 
 
Направлением главной оси можно управлять, меняя значения свойства flex-direction :
 
 
flex-direction: row — ось направлена слева направо, элементы располагаются в ряд. Это значение по умолчанию.
 
flex-direction: row-reverse — элементы идут в обратном направлении — справа налево.
 
flex-direction: column — элементы располагаются в столбец сверху вниз.
 
flex-direction: column-reverse — элементы идут снизу вверх.
 
 
Чаще всего используется значение по умолчанию — row , чуть реже — column . x-reverse применяют редко.
 
 
Поперечная ось всегда находится под углом 90 градусов к главной. Если главная ось горизонтальна, поперечная идёт сверху вниз, а если главная вертикальна, то поперечная направлена слева направо.
 
 
justify-content
 
Флекс-элементами можно управлять, меняя их положение относительно каждой оси. CSS-свойство justify-content распределяет элементы по главной оси. Оно принимает следующие значения:
 
 
 
flex-start — элементы стоят в начале оси.
 
flex-end — элементы стоят в конце оси.
 
center — элементы по центру оси.
 
space-between — элементы равномерно распределены вдоль главной оси, при этом первый элемент располагается в начале, а последний — в конце. Между крайними элементами и флекс-контейнером отступа нет.
 
space-around — элементы равномерно распределены вдоль оси. Расстояние между крайними элементами и флекс-контейнером равно половине отступа между соседними флекс-элементами.
 
space-evenly — элементы равномерно размещены вдоль оси. Отступы между соседними элементами и краями флекс-контейнера равны.
 
 
align-items
 
За выравнивание элементов по поперечной оси отвечает свойство align-items . По умолчанию у него значение stretch , то есть элементы растягиваются вдоль всей оси.
 
 
flex-start — элементы идут в начале оси;
 
flex-end — элементы идут в конце оси;
 
center — элементы в центре оси;
 
baseline — элементы размещены по базовой линии.
 
 
Базовая линия — невидимая линия, которая проходит по нижней части букв.
 
 
Порой в макете отдельные элементы располагаются выше или ниже, правее или левее. На такие случаи во флексах есть свойство align-self . Оно выравнивает отдельный элемент по поперечной оси.
 
Значения align-self такие же, как у align-items.
 
 
align-content
 
Вдоль поперечной оси можно выравнивать не только элементы, но и ряды флекс-элементов — это делается с помощью свойства align-content .
 
align-content немного похож на свойства justify-content и align-items . От первого он взял значения:
 
 
flex-start
 
flex-end
 
center
 
space-between
 
space-around
 
space-evenly
 
 
От align-items достались свойства: stretch и baseline .
 
С align-content мы можем расположить ряды элементов более гибко — например, задав одинаковые расстояния между ними или растянув на всю возможную высоту.
 
Отличие align-content от align-items
 
align-items выравнивает элементы внутри флекс-контейнера, а align-content — ряды.
 
По умолчанию у align-content значение stretch — то есть ряды флекс-элементов растягиваются, и свободное пространство делится между ними пополам. В таких случаях отображение зависит от значения align-items . Если это тоже stretch , то элементы в строке растянутся на всю высоту. Если нет — элементы сожмутся до размеров содержимого и выровняются согласно значению align-items .
 
Когда align-content задано другое значение (не stretch ), оно перекрывает значения align-items и align-self . Например, здесь ряды элементов окажутся в конце поперечной оси:
 
flex-wrap
 
В коде выше есть свойство flex-wrap — оно отвечает за перенос строк во флекс-контейнере. По умолчанию у свойства стоит значение no-wrap , то есть перенос запрещён. При добавлении новых элементов все элементы станут сжиматься до минимально возможной ширины — даже если явно указано значение width . Когда элементы перестанут помещаться в контейнере, то выйдут за его пределы.
 
Чтобы элементы при заполнении ряда переносились на новый, нужно указать flex-wrap: wrap . Наглядный пример — гифка в начале статьи.
 
 
Ещё без переноса рядов не работает свойство align-content . Например, в таком случае элементы выровняются по началу поперечной оси.
 
Игры и курсы для практики
 
Флексы — очень гибкий инструмент, с его помощью можно создавать сложные микросетки и даже менять элементы местами. Основу теории вы теперь знаете — дальше дело за закреплением материала и углублением знаний.
 
Где практиковаться и что изучить:
 
 
Flexbox froggy — игра на русском языке, где вы с помощью флексов размещаете лягушат на кувшинках.
 
Flexbox Defense — англоязычная игра в стиле Tower Defense. Вы на флексах располагаете башни, чтобы защититься от врагов.
 
Навык «Построение сеток на флексах по макету». Изучаете 50 страниц углублённой теории о flexbox и выполняете задания — строите сетки для сайта. В навыке 10 кейсов разной сложности с макетом в формате Figma и готовым решением.
 
Курс «HTML и CSS. Профессиональная вёрстка сайтов». Научитесь верстать сайты и писать для них стили. Изучите не только флексы, но и гриды — ещё один современный механизм построения сеток.
 
 
Материалы по теме
 
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
 
Источник
 
Читайте также:  Test