Как работать с css

Основы работы с языком CSS

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Блок . Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки <>, внутри которых следует писать CSS свойства.

CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство — это цвет, а "красный" — это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте покрасим все абзацы в красный цвет:

Так код будет выглядеть в браузере:

Абзац с текстом.

А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:

Так код будет выглядеть в браузере:

Абзац с текстом.

Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.

Блок . Способы подключения CSS к HTML коду

Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами.

Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.

Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.

Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.

Давайте разберемся с этими способами более подробно.

Способ 1. Отдельный CSS файл

Самый распространенный способ подключения CSS — это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.

Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.

Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel="stylesheet" href="путь к CSS файлу">.

Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.

В следующем примере к нашему HTML файлу подключается CSS файл style.css:

Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:

Способ 2. CSS внутри тега style

Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.

Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.

Правило такое: если что-то можно сделать первым способом, то использовать второй способ — дурной тон.

Способ 3. CSS внутри атрибута style

Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:

Третий способ, так же, как и второй, не сильно рекомендуется к использованию, потому что он захламляет HTML код. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам — в одном файле мы пишем на языке HTML, а в другом — на CSS.

Впрочем, иногда без второго и третьего способа не обойтись.

Блок . Комментарии CSS

Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария , потом звездочка и слеш */. Смотрите пример:

Видео про CSS

Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).

Урок 2: Как работает CSS?

Вы этом уроке вы создадите свою первую таблицу стилей/style sheet. Вы узнаете об основах базовой модели CSS и о том, какие коды необходимо использовать для CSS в HTML-документе.

Многие свойства, используемые в Cascading Style Sheets (CSS), аналогичны свойствам HTML. Таким образом, если вы используете HTML для дизайна страниц, вы, наверняка узнáете многие коды. Посмотрим на конкретном примере.

Базовый синтаксис CSS

Скажем, нам нужен красный цвет фона web-страницы:

В HTML это можно сделать так:

С помощью CSS того же самого результата можно добиться так:

Как видите, эти коды более или менее идентичны в HTML и CSS. Этот пример также демонстрирует фундаментальную модель CSS:

модель CSS

Но где размещать CSS-код? Именно этим вопросом мы и займёмся сейчас.

Применение CSS к HTML-документу

Есть три способа применить правила CSS к HTML-документу. Ниже мы рассмотри эти три метода. Мы рекомендуем сосредоточиться на третьем — то есть внешней/external таблице стилей.

Метод 1: Инлайн/In-line (атрибут style)

Можно применять CSS к HTML с помощью HTML-атрибута style . Красный цвет фона можно установить так:

Метод 2: Внутренний (тэг style)

Второй способ вставки CSS-кодов — HTML-тэг <style> . Например:

Метод 3: Внешний (ссылка на таблицу стилей)

Рекомендуемый метод — создание ссылки на так называемую внешнюю таблицу стилей. В данном учебнике мы будем использовать именно этот метод во всех примерах.

Внешняя таблица стилей это просто текстовый файл с расширением .css. Вы можете поместить таблицу стилей на ваш web-сервер или на жёсткий диск, как и другие файлы.

Например, скажем, ваша таблица стилей называется style.css и находится в папке style. Это можно проиллюстрировать так:

The folder "style" containing the file "style.css"

Весь фокус состоит в том, чтобы создать ссылку из HTML-документа (default.htm) на таблицу стилей (style.css). Это можно сделать одной строчкой HTML-кода:

Обратите внимание, как указан путь к вашей таблице стилей атрибутом href .

Эту строку кода нужно вставлять в разделе header HTML, то есть между тэгами <head> и </head> . Например, так:

Эта ссылка указывает браузеру, что он должен использовать правила отображения HTML-файла из CSS-файла.
Самое важное здесь то, что несколько HTML-документов могут ссылаться на одну таблицу стилей. Иначе говоря, один CSS-файл можно использовать для управления отображением множества HTML-документов.

Figure showing how many HTML documents can link to the same style sheet

Это поможет вам сэкономить уйму времени и сил. Если вы, например, хотите изменить цвет фона web-сайта из 100 страниц, таблица стилей избавит вас от необходимости вручную изменять все сто HTML-документов. Используя CSS, эти изменения можно сделать за несколько секунд, просто изменив один код в центральной таблице стилей.

Давайте посмотрим, как это сделать.

Попытайтесь сделать это сами

Откройте Notepad (или другой ваш текстовый редактор) и создайте два файла — HTML-файл и CSS-файл — такого содержания:

default.htm

style.css

Разместите эти файлы в одной папке. Не забудьте сохранить файлы с правильными расширениями (".css" и ".htm")

Как работать с CSS-препроцессорами и БЭМ

Список рекомендаций по неусложнению жизни себе и другим участникам проекта по вёрстке.

Содержание

Sass, LESS, stylus, PostCSS.

Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub или форкните репозиторий и пришлите pull request.

Все нижеследующие соглашения выработаны автором на основании опыта веб-разработки с 2000 г., призваны максимально облегчить и ускорить чтение, понимание и модификацию вёрстки.

Золотые правила

Cоблюдайте предложенные здесь или свои собственные соглашения.

Есть ситуации, когда правила нужно нарушить. Причина должна быть действительно серьезной, не предположительной.

  1. Весь код проекта должен выглядеть так, словно он написан одним человеком, вне зависимости от количества разработчиков.
  2. Делать нужно настолько просто, насколько возможно. Но не проще.
  3. Любой инструмент при бездумном использовании может выстрелить в ногу.

БЭМ (как метод именования селекторов)

Зачем

  • Самодокументируемость.
  • Имитация пространства имён (простота и безопасность модификации).
  • Отсутствие зависимости от DOM-структуры.
  • Проектное реиспользование блоков.
  • Кросспроектное реиспользование блоков.

Само понятие БЭМ — не только метод именования селекторов, но парадигма восприятия проекта как набора сущностей (блоки, элементы, модификаторы). Полный стек БЭМ подразумевает двойную шаблонизацию и имеет относительно высокий порог входа. Используйте БЭМ хотя бы как способ именования селекторов.

Блок — это самостоятельная часть страницы

  • Название класса должно быть простым и коротким.
  • Название класса должно отвечать на вопрос «Что это?»
  • Не используйте сокращения кроме наиболее частых
  • Название не должно отвечать на вопрос «Как выглядит?»

Блоки можно и нужно вкладывать друг в друга

  • Нет ограничений на вложения блоков, помимо здравого смысла.
  • Никакой дополнительной специфики вложенные блоки не имеют.

Элемент — часть БЭМ-блока

  • Название класса формируется из названия блока с добавлением __ и названия элемента.
  • Название класса должно быть простым и коротким.
  • Название класса должно отвечать на вопрос «Что это?»
  • Избегайте сокращений, кроме наиболее частых.
  • Название не должно отвечать на вопрос «Как выглядит?»

Элемент можно использовать вне его блока только в исключительных случаях

Элемент — часть блока, но, поскольку, БЭМ-дерево независимо от HTML-дерева, элемент можно использовать и вне его блока в некоторых исключительных условиях (сам блок должен быть на странице).

Пример: расположение попапа-элемента не внутри блока-родителя, а в самом конце DOM (дабы показывать попап независимо от ограничения видимости родителей).

Если Вы используете БЭМ только как метод именования селекторов, при написании разметки никогда не используйте элемент вне блока.

Почему нельзя просто так располагать элемент вне блока:

  • теряется логика разметки,
  • сложно стилизовать элементы, которые могут оказаться где угодно (float, абс. позиционирование и некоторые другие стили такого элемента могут «сломать» верстку).

Элементов может не быть

Не у всех блоков должны быть элементы: кнопка — всегда БЭМ-блок, но БЭМ-элементы у неё внутри встречаются относительно редко.

Как отличить БЭМ-блок и БЭМ-элемент

Просто задайте себе вопрос: «Эта сущность может потребоваться мне отдельно, сама по себе? Или она нужна только внутри её родителя?» Если нужна отдельно — это БЭМ-блок, если мыслима только внутри родителя — это БЭМ-элемент.

В действительно сомнительных случаях делайте выбор в пользу БЭМ-блока.

Не забывайте о миксовании (возможности иметь на одном теге и класс уровня БЭМ-элемента какого-то родительского блока, и свой класс уровня БЭМ-блока).

На всех проектах (кроме совсем уж крошечных или имеющих гарантировано нулевую возможность модификации) есть фрагменты дизайна, которые мудро всегда делать БЭМ-блоками по причине высокой вероятности повторения.

Некоторые фрагменты дизайна — всегда БЭМ-блоки

  • Кнопка (любые кнопки)
  • Блоки внутри форм (блок для текстового поля, блок для радиокнопки и т.п.)
  • Пагинация
  • Табы
  • Лейблы (метки)
  • Социальные ссылки
  • «Лайк» со счётчиком

Модификатор — дополнительный класс для смены оформления или поведения

  • Название класса формируется из названия блока/элемента с добавлением — и названия модификатора.
  • Название должно быть простым и коротким.
  • Название класса может отвечать на вопросы «Что это?», «Что меняется?», «Чем отличается от прочих?»
  • Избегайте сокращений, кроме наиболее частых.

Модификатор нельзя использовать самостоятельно

Класс модификатор никогда не должен использоваться самостоятельно, но всегда только с тем классом, который он модифицирует.

Миксование — комбинирование на одном теге классов БЭМ-блока и БЭМ-элемента

Комбинация возможна в любом сочетании: БЭМ-блок + БЭМ-элемент, БЭМ-блок + БЭМ-блок, БЭМ-элемент + БЭМ-элемент. Этот подход позволяет:

  • Добавить некоторые стилевые свойства, необходимые только в месте добавления (использование модификатора нерационально). Пример: для .btn внутри .page-header необходим внешний левый отступ в 37 пикс. Можно дописать для тега с .btn дополнительный класс .page-header__btn и дать отступ с помощью этого селектора. Это нормальная практика, её можно спокойно использовать.
  • Объединить стилизацию 2-х и более блоков. Пример: для .article и для .page-footer__section шрифтовые свойства одинаковы. Можно вынести определение шрифтовых свойств в новый блок .text и дописать этот класс на .article и .page-footer__section . Этот подход излишне связывет части страницы (напоминает OOCSS и класс-хелпер), не делайте так.
  • Обойтись без тега-обёртки с добавляемым селектором. Пример: страница каталога, 7+ товаров в потоке, каждый товар — .product , но каждому элементу потока нужны стилевые свойства ячеек модульной сетки (по которой выстроен потоковый вывод). Можно добавить для .product класс ячейки модульной сетки, что бы не делать обертку с этим классом. Это чревато конфликтом отступов/размеров, не смешивайте на одном теге классы обёртки и содержимого.

Классы БЭМ-блоков следует писать первыми.

Миксование несколько ухудшает восприятие кода и увеличивает вероятность ошибки смешения стилей, при которой вы пишите стилевое правило в контексте не того селектора, где оно реально нужно.

Один БЭМ-блок = один файл

В файловой системе при работе с CSS-препроцессорами каждый БЭМ-блок должен быть описан в своём отдельном файле.

БЭМ-дерево плоское, в отличие от DOM

В классах БЭМ-элементов нельзя прописывать иерархию (два и более сегмента __ недопустимы).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *