Создаем простой сайт. Часть 3. Оформление с использованием CSS ‹ Asterial Web. IT блог
4 февраля, 2013, Категория: Сайтостроение
В последней части урока по созданию html страницы рассмотрим использование каскадных таблиц стилей — Cascading Style Sheets, сокращенно CSS. Главным назначением css является отделение внешнего оформления страницы от ее структуры, поэтому css подключается отдельным файлом, а в основном файле, определяющем структуру (в нашем случае это файл index.html), остаются лишь html-теги, отвечающие за разметку страницы.
Создадим в папке Test новый файл под названием style.css. Сначала необходимо подключить css файл в нашем основном файле index.html. После указания ссылки на файл стилей, html-файл уже сможет брать стили оформления из него. Подключение css-файлов происходит в разделе <head></head>. В первом уроке уже упоминалось, что этот раздел невидимый, и необходим для подключения стилей, скриптов, а также указания заголовка страницы, мета-тегов и прочих элементов страницы.
Просто напишите между тегами <head> следующую строку:
<link rel="stylesheet" href="style.css">
Раздел <head> теперь будет выглядеть так:
<link rel="stylesheet" href="style.css"> <title>Заголовок страницы</title> </head>
Такой путь будет работать только если файл стилей лежит в папке вместе с файлом index.html, если же он лежит в другой папке, то в ссылке надо будет указать полный путь к нему.
Итак, css подключен, теперь перенесем уже имеющиеся стили в файл style.css. Index.html будет снова выглядеть практически как во второй части урока, за исключением одной строчки, которая подключает css.
Содержимое файла index.html:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <title>Заголовок страницы</title> </head> <body> <div> <a href="http://ссылка на сайт.ru"><img src="bird.png" alt="header"/>Шапка сайта. Добро пожаловать на мой сайт</a> </div> <div> <p>Контент. Здесь может быть абсолютно любая информация.</p> </div> <div> Футер. Подвал. Нижняя часть сайта </div> </body> </html>
Содержимое файла style.css. Как видим, все стили теперь объявляются в нем:
body {
margin: 0;
padding: 0;
}
#header {
height: 200px;
}
#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;
}
#footer {
height: 200px;
text-align: center;
font-size: 14pt;
}В начале файла идет обнуление тега <body>, так как многие элементы имеют предустановленные отступы, да и в разных браузерах могут отображаться по-разному.
Синтаксис css прост — сначала идет имя html-тега, для которого описывается оформление, а затем в фигурных скобках — непосредственно сам стиль оформления обязательно с точкой с запятой в конце каждого свойства.
Если сейчас сохранить оба файла и открыть файл index.html в браузере, то мы увидим, что он не изменился. Этого и следовало ожидать, так как оформление не изменилось, а просто было перенесено в отдельный файл. Чтобы немного освоиться с каскадными таблицами стилей зададим фон для шапки и футера. Пропишем для #header новое свойство внутри фигурных скобок:
background: url('header.jpg') repeat-x;Файл header.jpg можно скачать тут, после скачивания его следует положить в папку Test.
Также установим фон и для футера. В фигурных скобках #footer пишем:
background: url('footer.jpg') repeat-x;Файл footer.jpg качаем тут и тоже кладем в папку с проектом.
Рядом с путем к файлу находится параметр repeat-x, который означает, что фон будет повторяться по горизонтали.
В итоге файл style.css будет иметь следующий вид:
body {
margin: 0;
padding: 0;
}
#header {
height: 200px;
background: url('header.jpg') repeat-x;
}
#content {
height: 300px;
background-color: #B0E0E6;
border: 1px solid #999;
font-size: 12pt;
}
#footer {
height: 200px;
background: url('footer.jpg') repeat-x;
text-align: center;
font-size: 14pt;
}
Теперь страничка практически готова, но текст в блоке контента находится слишком близко к левой границе блока, поэтому лучше задать ему отступ. Так как текст заключен в тег <p>, значит и стиль надо прописывать тегу <p>. При этом тег <p> расположен внутри блока content, и описываться будет следующим образом:
#content p {
margin: 20px;
}Сохраним файл style.css, обновим страничку в браузере, и если все было сделано правильно, то вы увидите следующее:
Конечно, страница выглядит совсем простой, и ее структура примитивна, но при этом она уже может быть страницей сайта, так как имеет для этого все необходимое.
Если же продолжить усовершенствовать ее структуру и оформлять с помощью css, то может выйти что-то весьма неплохое.
В конце урока выкладываю архив со всеми файлами, нужными для его выполнения, для того чтобы можно было свериться с ними и при необходимости исправить допущенные ошибки.
Скачать архив
Первая часть урока — Перейти
Вторая часть урока — Перейти
Что такое HTML+CSS
С помощью языка CSS можно менять всё оформление HTML страницы, все свойства тегов. К примеру, изменять цвет текста или сам шрифт, делать цветные рамки таблицам и даже простейшую анимацию. В этой статье рассмотрим основы CSS. Затем перейдём к более сложным примерам.
К примеру, зададим особый стиль для тега <b>. Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:
b { color: red; }
Строчка «color: red;» называется свойством и его значением.
Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом <b>, будет автоматически становиться красным:
Часть текста выделена жирным шрифтом
Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой «
В CSS коде выше, в примере, b называется «селектором». Этот селектор соответствует тегу <b>. По аналогии вы можете использовать другие теги в качестве селекторов: «table«, «tr«, «i» и т.д.
Стили для элементов страницы задаются несколькими способами. Самый простой — это внутри тега <style> в любом месте страницы. В таком случае HTML код выглядит так:
<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
<style>
b {
color: green;
font-size: 120%;
}
i {
color: red;
font-size: 80%;
}
</style>
</body>
</html>
Свойство «font-size: 120%;» задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:
Тише, мыши, кот на крыше,
а котята ещё выше.
Кот пошёл за молоком,
а котята кувырком.
Кот пришёл без молока,
а котята ха-ха-ха.
В этом примере продемонстрировано как задавать несколько свойств для разных селекторов. Обратите внимание, что свойства применяются ко всем тегам на странице.
Тег <style>, внутри которого пишется CSS код, может быть где угодно на странице.
Часто этот тег ставят в раздел <head>.
CSS правила могут переопределять друг-друга. Если несколько раз написать один и тот же селектор с одним и тем же свойством, то применится только последний:
b {
color: red;
}
b {
color: green;
}— в таком случае текст внутри тега <b> будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.
Можно задать сколько угодно свойств. В том числе те свойства, которые будут переопределить родные свойства тегов. К примеру, тегу <b> можно задать свойство, при котором он перестанет выделять текст жирным.
При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее — в один отдельный файл, который загружается при загрузке страницы.
Такой файл можно подключить к HTML с помощью тега <link> внутри блока <head>:
<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
</body>
</html>
На пятой строчке примера видно, что в блоке <head> появился подключаемый файл со стилями:
<link rel="stylesheet" href="style.css">
По аналогии со ссылками в href=»…» можно писать как относитльный путь к файлу стилей, так и абсолютный.
Подключаемый файл стилей «style.css» будет содержать всё, что было внутри тега <style>.
..</style> из предыдущего примера. То есть:
b {
color: green;
font-size: 120%;
}
i {
color: red;
font-size: 80%;
}CSS файл «style.css» — это точно такой же текстовый файл, что и HTML. Для изменения этого файла вам понадобится любой текстовый редактор. Нет необходимости применять специальные программы.
Последний способ указать CSS свойство — это непосредственно внутри тега, в атрибуте style=»…». В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:
Часть текста <b>выделена</b> жирным шрифтом
Можно указать сразу несколько свойств через «;«. Результат на странице будет таким:
Часть текста выделена жирным шрифтом
Помните о том, что свойства перезаписываются. Самым важным является CSS, указанный непосредственно внутри атрибута тега style=».
..». Эти свойства будут применены в любом случае. А CSS в подключенном файле в секции <head>…</head> будет перезаписываться свойствами, которые находятся на странице ниже, внутри <style>…</style>.
9 причудливых дизайнов заголовков в CSS, которые нужно изучить прямо сейчас | автор JW | Frontend Weekly
Опубликовано в
·
Чтение: 9 мин.
·
22 июня 2020 г.
Узнайте, как ЛЕГКО создать красивый заголовок, используя только CSS
9001 4Типографика — важная часть веб-дизайна. Использование подходящего стиля текста может очень помочь передать сообщение вашему зрителю. Эта статья научит вас, как легко создавать различные стили текста на вашем веб-сайте, используя только CSS и ровно ОДИН html-элемент div!
Весь дизайн взят из изображения Google, я реализовал его в коде с помощью CSSЦитата, подобная этой, является чем-то дополнительным, например объяснением кода и предложением по улучшению
Всего я создал 9 различных стилей текста (идея дизайна из Google), окончательный результат:
Для поиска статьи: 1.
Строковый текст 2. Неоновый текст 3. S рубец текстДля поиска статьи: 4. Вырезанный текст 5. Кибертекст 6. Древесный текстДля поиска статьи: 7. C omic текст 8. H горизонтальный разрез- text 9. D ouble-border- textCodepen demo:
HTML, CSS и SCSS/SASS (любой препроцессор CSS)
JS не требуется , поэтому выберите любой фреймворк, который вам нравится
Стиль 1: Линейный текст
Первый стиль, который мы создадим, — это контурный текст с трехмерной текстовой формой позади него. Чтобы создать «контур» для текста, нам нужно использовать свойство CSS: -webkit-text-stroke-width и -webkit-text-stroke-color . Эти два свойства позволяют нам создать контур и придать ему нужный цвет.
Для трехмерной формы текста мы могли бы использовать несколько слоев свойства text-shadow . Поскольку text-shadow можно накладывать друг на друга, в этом примере мы могли бы добавить много слоев розовой тени, где каждый слой смещает предыдущий на 1 пиксель в направлении x и y.
Придание всей текстовой тени «3D» формы.
Давайте перейдем к коду.
HTML (как обещано, один div):
чужая терраса
SCSS:
Я создаю глобальную переменную для хранения цвета и размера, $extra-large — 110px. Чтобы узнать о цвете, проверьте мой codepen
Это довольно простой стиль, нам даже не нужно использовать псевдоэлементы «до» или «после». Это хорошее место для начала, поскольку оно учит нас двум очень важным свойствам в стилизации текста: text-stroke-width и text-shadow . Допустим, вы хотите, чтобы текст выглядел более «трехмерным», вы можете легко добавить к нему больше слоя тени, например:
Стиль 2: Неоновый текст
Следующий стиль, который мы создадим, — неоновый. Текст имитирует неоновую вывеску, создавая световой эффект, а также используя более «письменный» стиль шрифта.
Первое, что нужно сделать, это выбрать подходящий шрифт для неонового текста.
Я выбрал «Pacifico» (бесплатный шрифт в Google Font), так как он имеет красивую закругленную рамку и непрерывный стиль штриха. Очень похоже на вывеску из неоновой трубки.
Я думаю, вы уже догадались, мы будем применять -webkit-text-stroke-width и -webkit-text-stroke-color снова в качестве нашей основы для «неона», text-shadow снова будет использоваться для «светящегося» света вокруг неона. Если присмотреться, за неоном есть еще один набор «контурного текста» черного цвета. Это тень от неоновой лампы. И мы использовали бы псевдоэлемент :after для его создания.
HTML:
основной провод
SCSS:
раздражает одна вещь: нам нужно вручную установить содержимое псевдоэлемента. Я пытался использовать содержимое
: наследовать, но это кажется возможным только тогда, когда вы устанавливаете содержимое в своем родителе. Поскольку я хочу, чтобы в HTML был текст (для демонстрационных целей), это не очень полезно для меня.
В этот раз я не занимаюсь анимацией, но если вы хотите, вы могли бы сделать какой-нибудь классный трюк, например включить и выключить свет, градиентно изменить его цвет и так далее.
Стиль 3: полосатый текст
Этот стиль имеет много общего с первым стилем. Во-первых, он также имеет белую окантовку. А во-вторых, у него есть трехмерная текстовая тень. Мы уже знаем, как использовать -webkit-text-stroke-width , -webkit-text-stroke-color и text-shadow для создания такого шаблона. Одно отличие — это красочный полосатый рисунок текста.
Для текста нет «линейного градиента» (по состоянию на июнь 2020 года, дайте мне знать, если это актуально сейчас!), поэтому нам нужен обходной путь. Вместо того, чтобы сделать сам текст цветным, мы сначала создадим фон, а затем воспользуемся background-clip: text свойство. Это свойство «обрезает» div по форме вашего текста, в сочетании с прозрачным цветом текста вы получите текст, окрашенный любым фоном, который вы используете.
Мы также использовали бы другое семейство шрифтов, чтобы дополнить общий стиль. Я выбрал «Катамаран» (также бесплатный для шрифта Google).
HTML:
быстрый оборот
SCSS:
Вы могли заметить, что я поместил background и
background-clip: textв элемент :after вместо родителя. Причиной этого является клип «background-clip» ВСЕ внутри элемента , включая элементы :before и :after . Таким образом, применение его там приведет к обрезанию 3D-тени . На самом деле в HTML вообще не обязательно должен быть текст. Я просто добавляю его туда для лучшего размера (поскольку и после, и до элемента абсолютно позиционированы относительно родителя) и для демонстрационных целей.
Стиль 4: Вырезать текст
Из всех стилей этот мой любимый. Он сильно отличается от других стилей, и наш старый друг -webkit-text-stroke-width , -webkit-text-stroke-color и text-shadow на этот раз нам не поможет (извините за что).
В этом стиле у нас есть «разрез» в тексте, в результате чего верхняя часть текста скользит вниз под углом среза. Весь дизайн также очень чистый и резкий.
Концепция создания этого стиля очень проста: мы делаем два псевдоэлемента (до и после) и даем им два пути клипа , где два пути клипа вместе образуют полный прямоугольник:
И затем мы просто добавьте немного смещения для элемента верхней части вправо и вниз, чтобы текст скользил вниз в направлении «вырезания».
HTML:
Украденный час
SCSS:
По той же причине, упомянутой в последнем стиле, мы не можем напрямую обрезать путь к родителю. и вы также можете заметить, что в clip-path я использовал 110% вместо 100%. Причина в том, что текст обрезается в самом конце из-за использования «курсивного» стиля. это решается изменением границы клипа со 100% на большее число.
Стиль 5: Кибертекст
Несмотря на причудливое название, этот стиль самый простой.
Мы будем использовать псевдоэлементы :before и :after, а также наложение прозрачного цвета текста друг на друга, чтобы создать этот «причудливый» эффект. Текст выглядит немного размытым, но на самом деле он совершенно прямой, если присмотреться, это смесь цвета и небольшого смещения, придающая ему такое поведение.
HTML:
цифровое шоссе
SCSS:
Функция SCSS rgba() позволяет нам быстро получить менее непрозрачную версию вашего основного цвета и упрощает эксперименты с различными сочетаниями цветов. (Есть также darken()/lighten()/adjust-hue() и многое другое)
Стиль 6: Wood-text
Этот стиль в основном такой же, как стиль «полосатый текст», поскольку мы снова используем свойство background-clip: text . Как уже упоминалось, с помощью свойства background-clip вы можете легко создать любой шаблон и текстуру текста, если у вас есть фоновое изображение.
Маленькая особенность этого стиля — внутренняя «тень» текста.
На самом деле он создается с помощью элемента after со свойством (снова) -webkit-text-stroke-width , -webkit-text-stroke-color .
HTML:
подходящая вилла
SCSS:
Оглядываясь назад, я понимаю, что это мой наименее любимый вариант. В основном из-за того, что фоновое изображение, которое я выбрал, не очень похоже на дерево. (на самом деле подсветка и затенение делают его более похожим на металлический). Для этого типа стиля текста фоновое изображение является его душой и может довольно легко испортить его. Не совершайте ту же ошибку, что и я, и не торопитесь, чтобы выбрать идеальную картинку.
Стиль 7: Комический текст
Этот комический текст напоминает старомодный комический текст. Все сильно обведено, а штрихи чрезмерно украшены. Для начала нам понадобится шрифт для этого стиля. Я выбрал «Molle», снова (думаю, вы уже поняли шаблон) бесплатный шрифт Google.
Для самого стиля мы будем использовать наше старое знакомое свойство -webkit-text-stroke-width , -webkit-text-stroke-color (с возвращением!). Мы будем использовать все доступные элементы HTML. для стиля родительский элемент div, до и после псевдоэлемента.
HTML:
квадратная трубка!
SCSS:
Я ограничиваю себя тем, что делаю это только в одном div, но вы определенно можете добавить больше слоев, если хотите, просто сложите элементы друг над другом
Стиль 8: horizontal-cut-text
В этом стиле также есть слово cut, но мы не будем его вырезать. Вместо этого мы снова будем использовать фоновый градиент и свойство background-clip: text . Мы сложим два фона, один с цветом вверху 50%, прозрачный внизу 50%, а другой фон с белой и прозрачной полосой.
Поверх текста мы также добавили бы текстовую тень, чтобы придать ему больше формы.
Использование тени поверх текста с темным фоном, в результате чего получается фальшивая «изюминка», которая является исходным цветом текста.
HTML:
неопределенное меньшинство
SCSS:
Опять же, еще один без каких-либо элементов после и до. Если вы еще не знаете, вы можете складывать цвет фона столько, сколько хотите. Использование одного только свойства background уже может дать нам много потрясающих узоров. Если вам интересно и вы хотите узнать больше, вы можете просмотреть эту галерею шаблонов CSS3: https://leaverou.github.io/css3patterns/
Стиль 9: Double-border-text
Последний стиль, как вы уже догадались, представляет собой комбинацию -webkit-text-stroke-width и псевдоэлемента. Это в основном то же самое, что и стиль комиксов, только с другим шрифтом, более последовательным и выровненным текстом и цветовой темой.
Так как это очень похоже, я перейду к коду прямо сейчас.
HTML:
весь объем
SCSS:
край идет от средней черты буквы «Е»Одно примечание относительно
text-stroke-width, кажется всесильным, но имеет свои ограничения. Если шрифт, который вы используете, не имеет красивого и непрерывного штриха, вы получите «сломанный» штрих от свойства. Кроме того, имейте в виду, что если вы установите слишком большую ширину обводки, может появиться неожиданный «край» от обводки текста, как показано ниже:
У меня есть очень весело создавать этот стиль текста. Вы можете видеть, сколько стилей мы могли бы создать, просто используя какое-то базовое свойство CSS и только с одним div. Лучше всего использовать HTML и CSS для стилизации текста, а не просто создавать изображение, — это то, что вы можете легко изменить текстовое содержимое позже или сделать его интерактивным для пользователя, придав ему анимацию или эффект наведения.
Если вам понравилась эта статья, не стесняйтесь хлопнуть меня и оставить комментарий!
Простой подход к именованию классов CSS — SitePoint
Если вы похожи на меня, то вы тратите слишком много времени на придумывание идеального имени класса для элемента.
Вы можете поискать синонимы в Google или представить, каким был бы этот элемент, если бы он был реальным объектом. Вы знаете, что подойдет любое семантическое имя, но попытка придумать идеальное имя того стоит.
Честно говоря, идеальное имя не сильно поможет вашей таблице стилей, но использование методологии CSS может иметь большое значение.
Примеры методологий CSS
OOCSS — это экологически безопасный совет, который поможет вам создавать устойчивые классы с помощью стилей вторичной переработки.
SMACSS — это всеобъемлющий план игры CSS, который научит вас всем необходимым приемам.
Idiomatic CSS — это аналитическая уборщица, организующая все в едином стиле для легкого распознавания и душевного спокойствия.
А БЭМ? Что ж, БЭМ — это золотой стандарт именования классов CSS, по которому сравниваются все схемы именования классов CSS.
Так зачем еще говорить об именах классов?
Подход БЭМ заключается в написании масштабируемого CSS с упором на удобочитаемость и предотвращение коллизий.
Короче говоря, БЭМ означает Block__Element–Modifier. Блок — это элемент, который включает в себя небольшой фрагмент связанных элементов (в SMACSS он называется модулем). Элемент является потомком блока и обычно не существует без наличия блока. Модификатор управляет состоянием блока.
В БЭМ вы пишете обычное имя класса для блока, а для любого элемента копируете имя блока и добавляете имя элемента.
Обычный БЭМ выглядит так:
Это хорошо, потому что любой поймет, что «block__element» относится к «блоку», и маловероятно, что класс «block__element» использовался где-либо еще в проекте.
Но с этим подходом есть проблема. Вы пишете CSS весь день, и вы не хотите писать длинные имена классов, которые загрязняют вашу чистую разметку.
Title CSS дает вам преимущества БЭМ без добавления каких-либо префиксов или специальных символов к вашим именам классов.
Простой трюк с заголовком CSS
Используя заголовок CSS, вы должны сделать следующее: Для любого глобального класса CSS используйте имя с заглавной буквы (заголовок).
Для любого модификатора или класса-потомка используйте строчную букву в начале имени.
Это означает, что с заголовком CSS вы пишете с большой буквы любое имя класса, на которое будут ссылаться в таблице стилей без родительского класса. Это означает, что даже объекты в OOCSS начинаются с заглавных букв. Различие простое; все, что написано в таблице стилей с заглавной буквы, не должно использоваться снова.
Вот пример того, как будет выглядеть разметка при использовании Title CSS:
А вот как будет выглядеть соответствующий CSS:
.Title {}
.Title.isModified {}
.Title .descendant {} Почему Title CSS работает
Идентификаторы блоков или классы «Title» создают область действия для всех классов-потомков внутри блока. Классы-потомки могут повторяться в других основных заголовках без коллизии стилей.
Это не обязательно для работы методологии, но, поскольку имя класса HTML чувствительно к регистру, классы «Title» также могут свободно повторяться как классы-потомки.
Как помогает заголовок CSS?
Используя методологию Title CSS, вы увидите следующие преимущества:
- Создание классов CSS более естественным образом. Селекторы CSS
- напоминают письменный язык, например английские предложения, начинающиеся с заглавной буквы.
- Более короткие имена классов быстрее набираются и легче сканируются.
- Классы регистра заголовков легко заметить в разметке; чтобы увидеть, к какому классу-потомку принадлежит нижний регистр, просто пройдите вверх по узлам для класса Title.
Ловушка и обходной путь
Заголовок CSS может иметь проблемы при использовании блока заголовка для включения других блоков. Если содержащая основную надпись имеет тот же класс селектора потомков, что и та, которую она охватывает, возникнет конфликт, и в этом случае вы должны использовать дочерний комбинатор в основных заголовках, которые действуют как контейнеры.
Чтобы продемонстрировать проблему, ниже приведен пример разметки с присутствующей проблемой:
<заголовок> <основной> <раздел> <дел> <дел> <раздел> <дел> <дел>
И соответствующий CSS:
.Container {} .Контейнер .header {} .Контейнер .тело {} .Заголовок {} .Заголовок .header {} .Title .body {}
Container {}
.Контейнер .header {}
.Контейнер .тело {}
.Заголовок {}
.Заголовок .header {}
.Title .body {} Обратите внимание, что стили, примененные к элементам .header и .body внутри .Container , также будут применяться к другим элементам .header и .body , вложенным дальше. Чтобы этого избежать, вот решение:
.Container {}
.Контейнер > .header {}
.Container > .body {} С селектором, использующим дочерний комбинатор ( > ), стили будут применяться только к непосредственным дочерним элементам, а не к дополнительным вложенным элементам с теми же именами классов.
Несколько слов о Sass
Препроцессоры обеспечивают отличный способ написания CSS для заголовков. Возможность вложения позволяет легко идентифицировать блоки заголовков в таблице стилей.
Вот пример CSS-заголовка в SCSS:
.Title {
&.модификатор {}
.
