HTML и CSS

html css… В этой статье, мы с вами научимся связывать HTML и CSS так, чтобы они работали из разных файлов. Приведу ряд примеров, чтобы вам было понятно, как это работает (хотя такие уже были), ну и дам вам какое-нибудь задание, которое вы мне потом опишите в комментариях, если возымеете такое желание. Ну а что, во-первых это разнообразит ваше закрепление материала. Во-вторых положительный результат замотивирует вас двигаться дальше. В третьих это интерактив!

Итак, html — разметка, css — стили. Это две простые истины, которые стоить запомнить раз и навсегда. Механизм связки html и css весьма прост. Давайте начнем с сайтов, с движками. Допустим есть у вас какая-разметка и блок с контентом:

Значимость этих проблем настолько очевидна, что реализация намеченного плана развития напрямую зависит от ключевых компонентов планируемого обновления? С другой стороны начало повседневной работы по формированию позиции способствует повышению актуальности всесторонне сбалансированных нововведений. Равным образом выбранный нами инновационный путь способствует повышению актуальности всесторонне сбалансированных нововведений?

Выглядит не очень и вы хотите его переделать. Вам нужно найти файл стилей. Обычно он называется styles.css. В WordPress например, для того, чтобы редактировать стили можно перейти на главную страницу вашего сайта и нажать кнопку «Настроить», а внутри нажать кнопку «Дополнительные стили». Ситуация выглядит так: вы нажали правой кнопкой по ненавистному блоку и выбрали в меню «Просмотреть код». В итоге выяснилось, что имя класса у данного блока — content. Отлично, это уже половина дела. Именно по имени класса мы свяжем наш html с css. Находим файл, где хранятся стили и начинаем наводить порядок. Пишем туда следующее:

.content {
   background-color: #f0f0f0;
   color: #303030;
   border: 1px solid #000;
   border-radius: 5px;
   padding: 5px;
   max-width: 80%;
   text-align: center;
}

.content {

background-color: #f0f0f0;

color: #303030;

border: 1px solid #000;

border-radius: 5px;

padding: 5px;

max-width: 80%;

text-align: center;

}

Ну а теперь как изменился наш блок:

Согласитесь, так выглядит гораздо лучше. Все дело в том, что мы написали для класса content свои собственные стили. Но это в случае, когда мы переписываем уже имеющиеся стили. А что, если стилей нет совсем? Есть 2 варианта решения задачи при связывании html и css.

HTML и CSS — Связанные стили

При использовании связанных стилей все селекторы и их описания находятся в отдельном файле. Соответственно для того, чтобы подключить этот файл к общему файлу с html достаточно в теге <head> указать тег <link rel=«stylesheet» href=«ссылка_на_файл.css»>. В таком случае html файл получит доступ к файлу со стилями по ссылке.

Глобальные стили

Стили можно хранить в том же файле, где располагается ваш html. Это не очень хорошо, так как увеличивает ваш код, делает его трудночитаемым, ну и в целом его становиться неудобно редактировать. Тем не менее, для того, чтобы описать глобальные стили необходимо в теге <head> добавить тег <style></style> и внутри описать стили для нужных вам селекторов.

Внутренние стили

Внутренние стили, это стили, которые описаны непосредственно в каком-то блоке, будь то абзац, div, картинка и т.п. Такие стили являются уникальными и работают в рамках селектора, в котором они прописаны. Выглядит в коде это так:

<div class="example" style="background: grey; font-size: 14px; height: 30px;"> Это пример блока с текстом, имеющий внутренние стили</div>

1	<div class="example" style="background: grey; font-size: 14px; height: 30px;"> Это пример блока с текстом, имеющий внутренние стили</div>

Реализуем 2 блока, чтобы вам была понятна разница. Один блок с таким же именем, обернем просто бордером:

Это пример блока с текстом, имеющий внутренние стили

У обоих div-ов одинаковое название, но внутренние стили работают только в рамках элемента, в котором они описаны. Внутренние стили — это гиблое дело. Они увеличивают скорость загрузки вашего сайта, поэтому от них желательно отказаться.

Импорт CSS

Вы можете так же просто импортировать файл со своими стилями, прописав в теге <style> следующий код:

@import url("header.css");

1	@import url("header.css");

Где style — папка где лежит ваш css файл, а header.css — его название.

Задание!

Необходимо написать css класс, у которого будет розовый фон, бардовый текст, рамка шириной от 1 до 10 пикселей, и внутренний отступ в 5 пикселей.

Примечание: все цвета пишем хексом, например: #343434.

Дополнительно: Можете написать полноценный div или span (или что-либо другое) в комментариях, используя внутренние стили.

Поиграйтесь с рамками и отступами, попробуйте подставить разные значения.

Только для зарегистрированных: кто пройдет задание получает 0,01 в карму от меня.

Итог

Глобальные, внутренние и связанные стили можно комбинировать как душе угодно. Конечно есть определенные правила хорошего тона, css должен лежать отдельно, но всегда только вам решать как писать код. На этом все! Я рассказал вам все известные мне способы связать html и css воедино, даже не смотря на то, что ранее мы разобрали работу с селекторами (горю пиндец…). Ну или подклассами, кто со мной солидарен. С вас лайк, подписка на группу в ВК и ютубчик! Спасибо!

HTML и CSS — Учимся связывать