Знакомство с 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>.

Четвертое задание это опять карта, но в этот раз поинтересней. Пришлось опять подбирать значения, но в силу частоты таких заданий, начинаю догадываться, что верстальщикам частенько приходится таким образом, «в слепую» подбирать значения по макету. Штош.

Постарался нагнать, в итоге даже не догнал. Я пожалуй перестану оправдываться, буду писать как пойдет. Получится — втянусь и буду писать часто и периодически, не получится — буду писать по мере возможности и желания. Иначе сам же начинаю расстраиваться за такие «перерывы» в неделю.

Тому кто дочитал до конца — огромнейшее спасибо! Продолжу оставлять ссылки на предыдущие статьи, с надеждой, что такая перелинковка хоть кому-то кроме поисковых ботов нужна. :)

Привет, я фрилансер-самоучка – статья обо мне, почему я завел блог.

Веб-разработка, начну с самого начала – о выборе курса обучения.

Остальные статьи можно посмотреть у меня на главной странице блога.

Также я завел себе несколько соц. сеток, в надежде найти тех, кому это будет интересно и тех, кто также как и я занимается самообучением. Кстати, вполне не безрезультатно!

Мой Twitter
Мой Telegram
Мой Паблик ВК

Заходите куда удобно вам и подписывайтесь! Еще раз спасибо за внимание!

#обучение #html #css #фронтенд #веб_разработка