Знакомство с HTML и CSS. Часть 4: Основы CSS — Тренажёр HTML Academy
Добрались до CSS! Начинаем штурмовать более детально основы CSS. В этой части немного повторим то, что уже было в первом блоке, рассмотрим некоторые свойства и их значения, а самое главное затронем тему каскадирования.
Сразу про встраивание стилей – оно вообще в конце этой части было, но мы его уже разобрали и в первом блоке и в предыдущих частях, в третий раз я писать подробно не буду. Используем <link>
для внешнего файла и атрибут style=""
для стиля одного отдельно взятого элемента.
Селекторы
Как мы помним, CSS по большей части состоит из CSS-правил (CSS-rules), которые имеют вид:
селектор { свойство: значение; свойство: значение; }
Селектор – это по сути указатель определяющий к каким элементам будет применятся стиль, то есть свойства и их значения указанные в фигурных скобках.
Самые популярные селекторы мы уже тоже разбирали – по тегам, в CSS указываются без символов <
и >
, и по классам тегов, в CSS указывается начиная с точки:
h1 { color: red; } /* по тегу <h1> */ .info { color: blue; } /* по классу info */
Мы точно уже знаем, что существуют и другие селекторы, но дойдем мы до них, видимо, сильно позже. И используются они сильно реже, в основном всё строится на классах.
Если у каких-либо селекторов свойства и значения одинаковые, то их можно записать через запятую в одно правило:
h1, .warning { color: red; }
Также селекторы можно вкладывать друг в друга, такие селекторы называются контекстными, «дословно» читаются справа налево:
/* применится к тегу <a> в теге <nav> */ nav a {…} /* применится к тегу <ul> в теге с классом menu */ .menu ul {…} /* применится к тегу с классом title в теге с классом post */ .post .title {…}
Свойства и значения
В фигурных скобках указывается список свойств и через двоеточие их значения. Список свойств обширный, нет смысла их все сразу запоминать, что важнее — это правило наследования свойств — вложенные элементы наследуют значение свойств родительского, в случае когда они не переопределены.
Свойства могут быть обычными, управляющие одним параметром, и составными, в значение которых одновременно записано несколько параметров. У составных свойств есть определенный порядок записи значений:
/* список обычных свойств */ .menu { padding-top: 10px; /* поле сверху */ padding-right: 15px; /* поле справа */ padding-bottom: 20px; /* поле снизу */ padding-left: 25px; /* поле слева */ } /* эквивалентный пример с составным свойством */ .menu { padding: 10px 15px 20px 25px; /* порядок направления (верх, низ...) соответствует по значениям */ }
Это, на мой взгляд, простейший пример, но составных свойств тоже большое количество и порядок записи значений в них лучше сверять и проверять.
Типы значений
Есть два типа значений которые можно указать в свойствах – абсолютные единицы измерения, привязаны к фиксированным размерам, например, пиксели px
, и относительные единицы измерения, значение которого зависят от каких-либо других значений (относительны их), например, ширины окна браузера.
Список значений тоже достаточно большой – у абсолютных есть явный фаворит в виде пикселей, но у относительных спектр выбора зависит как от конкретного случая так и от свойства к которому значение применяется.
В этом тренажёре про них упомянуто вскользь, но мне было интересно узнать про em
и rem
, которые есть во многих конструкторах, что я использовал, но для чего они и как их использовать я узнал только пройдя тренажёр.
Каскадирование
Если просто — браузер, показывая нам итоговый вид какого-то элемента, собирает и комбинирует стили из разных источников, в том числе из разных селекторов:
<p class="warning">Внимание! Спасибо за внимание!</p>
p {font-size: 18px;} /* размер текста тегов <p> */ .warning {color: red;} /* цвет текста в теге с классом warning */
Итоговый «каскад» свойств для этого элемента, включая дефолтный стиль элемента прописанный в браузере, будет такой:
margin: 1em 0; /* дефолтное свойство браузера для <p> */ color: red; font-size: 18px;
За счет каскадирования и правила наследования свойств, зачастую возникает ситуация, что к одному элементу может быть прописано несколько одинаковых свойств, но с разными значениями, вызывая тем самым конфликт свойств.
Чтобы избежать конфликта, браузер использует три простых шага для поиска приоритетного значения свойства:
- Сравнивается приоритет стилей – авторские, то есть написанные верстальщиком, приоритетнее дефолтных в браузере.
- Сравниваются селекторы у CSS-правил – например, селектор по классу приоритетней, чем селектор по тегу.
- Сравнивается позиция в коде – приоритетней то, что находится ниже, то есть переопределено в коде.
Таким образом конфликт практически невозможен, однако, за переопределением значений стоит следить.
Практика и Испытание
В Испытании меняем стили элементам, которые разбирали в предыдущем Испытании, в 3-й части.
В Практике, в первом задании, зачем-то вспоминаем, что стили можно прописать не только внешним файлом, но и в атрибуте style
.
Во втором и третьем заданиях наглядно показано как работает вложенность и каскадирование, здесь у меня возникла проблема, причем наконец «честная» — я ошибся в классах и вложенности элементов списка <li>
в сам список <ul>
.
Четвертое задание это опять карта, но в этот раз поинтересней. Пришлось опять подбирать значения, но в силу частоты таких заданий, начинаю догадываться, что верстальщикам частенько приходится таким образом, «в слепую» подбирать значения по макету. Штош.
Постарался нагнать, в итоге даже не догнал. Я пожалуй перестану оправдываться, буду писать как пойдет. Получится — втянусь и буду писать часто и периодически, не получится — буду писать по мере возможности и желания. Иначе сам же начинаю расстраиваться за такие «перерывы» в неделю.
Тому кто дочитал до конца — огромнейшее спасибо! Продолжу оставлять ссылки на предыдущие статьи, с надеждой, что такая перелинковка хоть кому-то кроме поисковых ботов нужна. :)
Привет, я фрилансер-самоучка – статья обо мне, почему я завел блог.
Веб-разработка, начну с самого начала – о выборе курса обучения.
Ссылки на другие статьи по тренажёрам HTML Academy:
Знакомство с Веб-разработкой
Знакомство с HTML и CSS. Часть 1: Структура HTML-документа
Знакомство с HTML и CSS. Часть 2: Разметка текста
Знакомство с HTML и CSS. Часть 3: Ссылки и изображения
Знакомство с HTML и CSS. Часть 4 <- Вы здесь
Знакомство с HTML и CSS. Часть 5: Оформление текста
Знакомство с JavaScript
Знакомство с PHP
Таблицы и подробно о формах
Наследование, каскады и селекторы
Блочная модель, поток и сетка на float
Гибкие флексбоксы display: flex
Удобные сетки на гридах display: grid
Пропуск блока «Погружение»
Позиционирование и двумерные трансформации
Теневое искусство и линейные градиенты
CSS-фильтры и Кекстаграм
Мастерские
Продвинутые Мастерские
...
Остальные статьи можно посмотреть у меня на главной странице блога.
Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!
Мой Twitter
Мой Telegram
Мой Паблик ВК
Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!