Основные комбинации HTML и CSS

Главное CSS свойство

Главное CSS свойство для любого тэга — это display. Оно определяет, как отображать тэг среди других тэгов. Это единственное свойство, которое есть у всех тэгов — оно обязательное. У большинства тэгов значение свойства display по умолчанию задано, как inline или block. Есть и другие значения, но они используются реже. Чтобы тэг не имел отображения значение свойства display, должно быть none.

Тэги можно называть HTML-элементами или просто элементами, потому что они являются самой маленькой — неделимой частью на HTML-страничке. Когда элементы на странице ведут себя не так, как хочет автор, то сначала выясняют значения для свойства display.

Inline-тэги

Тэги называют инлайновыми или строчными, если у них свойство display определнно, как inline. Самый чистый инлайн тэг — это span, потому что в браузерах поумолчанию у него только одно CSS свойство:

span { display: inline; }

Примеры инлайновых тэгов:

• ссылка: тэг a,
• жирный текст: тэг strong,
• курсивный текст: тэг i.

В отличие от чистого инлайн тэга, у этих по умолчанию в браузерах определенны не только display свойства:

a {
  color: #00e;
  cursor: pointer;
  text-decoration: underline;
  display: inline;
}
a:visited { color: #551a8b; } // посещенная ссылка
a:active { color: #f00; } // в момент клика

strong { font-weight: bold; display: inline; }

i { text-decoration: italic; display: inline; }

Поэтому для своих целей используют тэг span и расширяют его при помощи CSS классов:

<span class="red-strong-italic-text">Тут будет жирный красный текст с подчеркиванием</span>

.red-strong-italic-text {
  color: red;
  font-weight: bold;
  text-decoration: italic;
}

Интересное

Когда на странице элементы ведут себя не так, как хочет автор, то сначала выясняют значения для свойства display.

1. Значения для CSS свойства display
2. Инлай-элементы
3. Блок-элементы

---

 ДЗ: решить проблему с clerfix

1. Для выполнения ДЗ нужно склонировать этот репозиторий: git clone git@github.com:kompotik/html-css-combinations.git.
2. Создать и переключится на локально ветку «solution-kostya», которая будет клоном ветки «problem» с удаленного репозитория: git checkout -b solution-kostya origin/problem. Понятно же, что надо свои имена подставлять?
3. Поздравляю! Вы попали в нужное состояние репозитория, с этого состояния на встрече мы начинали решать проблему. Сделайте в папке src свою папку kostya, туда скопируйте файлик simple-clear.html.
4. Теперь можно делать ДЗ в файле src/simple-clear.html — создавайте коммиты, отправляйте пул реквесты в ветку master на проверку.

Чтобы поднять сервер, который будет автоматически обновлять страничку в браузере при изменениях, нужно установить Node.js. Запускается он командой npm start для этого нужно находится в корне проекта. Перед первым запуском выполните npm install, тоже из корня. Сервер поднимется и на него можно будет зайти по адресу http://localhost:8800.

Тот кто не может справиться с проблемой, даже при помощи видео, вот вам diff решения.