Как сделать css: Введение в CSS | htmlbook.ru

Добавлено 23.07.199324.03.2022 автор alexxlab

Содержание

Введение в CSS | htmlbook.ru

После знакомства с HTML разработчики сайтов разделяются на две основные категории. Одна часть считает, что с помощью HTML на сайте можно создавать всё или практически всё, другая же понимает, что в целом средств разметки недостаточно для оформления веб-документов. Действительно, HTML лишь первый этап в процессе обучения созданию сайтов. Следующим шагом является изучение стилей или CSS (Cascading Style Sheets, каскадные таблицы стилей).

Стили представляют собой набор параметров, управляющих видом и положением элементов веб-страницы. Чтобы стало понятно, о чем идет речь, посмотрим на рис. 1.1.

Рис. 1.1. Веб-страница, созданная только на HTML

Это обычная веб-страница, оформленная без всяких изысков. Тот же самый документ, но уже с добавлением стилей приобретает совершенно иной вид (рис. 1.2).

Рис. 1.2. Веб-страница, созданная на HTML и CSS

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

Пример 1.1. Исходный код документа

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <title>Флексагон</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h2>Флексагон</h2>
  <p>Флексагон представляет собой бумажную фигуру, которая имеет 
   три и более стороны. Поначалу кажется, что это невозможно, но вспомните 
   ленту Мёбиуса, она ведь имеет всего одну сторону, в отличие от листа  бумаги, 
   и, тем не менее, реальна. Так же реален и флексагон, который легко сделать и 
   склеить в домашних условиях. Он выглядит как двухсторонний шестиугольник, но 
   стоит согнуть его особым образом, и мы увидим третью сторону. Легко убедиться, 
   что мы имеем дело именно с тремя сторонами, если раскрасить их в разные цвета. 
   Перегибая флексагон, по очереди будем наблюдать все его поверхности.</p>
 </body>
</html>

Сам код HTML никаких изменений не претерпел и единственное добавление — это строка <link rel=»stylesheet» href=»style.css»>. Она ссылается на внешний файл с описанием стилей под именем style.css. Содержимое этого файла показано в примере 1.2.

Пример 1.2. Содержимое стилевого файла style.css

body {
  font-family: Arial, Verdana,  sans-serif; /* Семейство шрифтов */
  font-size: 11pt; /* Размер основного шрифта в пунктах  */
  background-color: #f0f0f0; /* Цвет фона веб-страницы */
  color: #333; /* Цвет основного текста */ 
}
h2 {
  color: #a52a2a; /* Цвет заголовка */
  font-size: 24pt; /* Размер шрифта в пунктах */
  font-family: Georgia, Times, serif; /* Семейство шрифтов */
  font-weight: normal; /* Нормальное начертание текста  */
}
p {
  text-align: justify; /* Выравнивание по ширине */
  margin-left: 60px; /* Отступ слева в пикселах */
  margin-right: 10px; /* Отступ справа в пикселах */
  border-left: 1px solid #999; /* Параметры линии слева */
  border-bottom: 1px solid #999; /* Параметры линии снизу */
  padding-left: 10px; /* Отступ от линии слева до текста  */
  padding-bottom: 10px; /* Отступ от линии снизу до текста  */
}

В файле style.css как раз и описаны все параметры оформления таких тегов как <body>, <h2> и <p>. Заметьте, что сами теги в коде HTML пишутся как обычно.

Поскольку на файл со стилем можно ссылаться из любого веб-документа, это приводит в итоге к сокращению объёма повторяющихся данных. А благодаря разделению кода и оформления повышается гибкость управления видом документа и скорость работы над сайтом.

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

Типы стилей

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

Стиль браузера

Оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей. Например, заголовок страницы, формируемый тегом <h2>, в большинстве браузеров выводится шрифтом с засечками размером 24 пункта.

Стиль автора

Стиль, который добавляет к документу его разработчик. В примере 1.2 показан один из возможных способов подключения авторского стиля.

Стиль пользователя

Это стиль, который может включить пользователь сайта через настройки браузера. Такой стиль имеет более высокий приоритет и переопределяет исходное оформление документа. В браузере Internet Explorer подключение стиля пользователя делается через меню , как показано на рис. 1.3.

Рис. 1.3. Подключение стиля пользователя в браузере Internet Explorer

В браузере Opera аналогичное действие происходит через команду (рис. 1.4).

Рис. 1.4. Подключение стиля пользователя в браузере Opera

Указанные типы стилей могут спокойно существовать друг с другом, если они не пытаются изменить вид одного элемента. В случае возникновения противоречия вначале имеет приоритет стиль пользователя, затем стиль автора и последним идёт стиль браузера.

Вопросы для проверки

1. Требуется задать цвет заголовка зелёным. Какое стилевое свойство подойдёт для этой цели?

font-color
color
font-family
text
font-size

2. Что такое стиль?

Способ сокращения HTML-кода за счёт переноса части данных в другой файл.
Язык разметки гипертекстовых документов.
Набор правил форматирования элементов веб-страницы.
Метод преобразований текстовых документов в HTML.
Технология, представляющая собой разные приёмы для вёрстки HTML-кода.

3. Как расшифровывается аббревиатура CSS?

Colorful Style Sheets
Cascading Style Sheets
Computer Style Sheets
Creative Style Sheets
Common Style Sheets

Ответы

1. color

2. Набор правил форматирования элементов веб-страницы.

3. Cascading Style Sheets

Как создать файл стилей CSS?

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

Первым делом нужно разобраться, что вообще собой представляет этот файл. Нужно понимать, что файл стилей CSS – это обычный текстовый файл, точно такой же, какой вы можете создать в любом текстовом редакторе «Блокнот», «Microsoft Word» и.т.д.

Единственное, что отличает файл стилей от других текстовых документов – это его расширение, которое имеет вид *.css.

Таким образом, можно сделать вывод, что создать файл стилей CSS мы можем просто изменив расширение текстового файла.

Для тех, кто любит видео:

<center><ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="8813674614"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></center>

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

Способ 1. Создание файла CSS меняя расширение текстового файла.

Откройте любой текстовый редактор, например, редактор «Блокнот», который входит в состав операционной системы Windows. Найти эту программу можно через главное меню Пуск -> Все программы ->Стандартные -> Блокнот.

В главном меню программы выбираем «Файл-Сохранить как».

И сохраняем текстовый файл с расширением *.txt.

Теперь нужно поменять расширение этого файла с *.txt на *.css.

Если у Вас не отображается расширение файлов, вот заметка:

Как включить отображение расширений файлов в Windows.

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

Теперь для создания файла CSS нужно просто переименовать файл, изменив его расширение на css.

После данной операции вы получите файл стилей css.

Способ 2. Создание файла стилей с помощью редакторов кода (на примере Dreamweaver).

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

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

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

После того, как файл будет создан, его можно будет сохранить через главное меню «Файл-сохранить как…».

Аналогичный процесс создания файлов CSS есть и в других редакторов кода.

На сегодня все. Подготовьте все необходимые программы, о которых сегодня говорилось и создайте файл стилей style.css. Завтра мы начнем наполнять его содержимым.

Все мои уроки по CSS (каскадным таблицам стилей) здесь.

CSS HTML уроки для начинающих академия

Манипулировать текстом

Цвета, Коробки

Стилизация HTML с CSS

CSS означает каскадные таблицы стилей.

CSS описывает, как HTML-элементы должны отображаться на экране, бумаге или на других носителя

х.

CSS экономит много работы. Он может контролировать расположение нескольких веб-страниц все сразу.

CSS можно добавлять к элементам HTML тремя способами:

Встроенный — с помощью атрибута Style в элементах HTML
Internal -с помощью <style> элемента в <head> разделе
Внешний — с помощью внешнего CSS-файла

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

Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.

Встроенный CSS

Встроенный CSS используется для применения уникального стиля к одному элементу HTML.

Встроенный CSS использует атрибут style элемента HTML.

В этом примере устанавливается цвет текста элемента <h2> синим цветом:

Пример

<h2>This is a Blue Heading</h2>

Внутренняя CSS

Внутренний CSS используется для определения стиля для одной HTML-страницы.

Внутренняя таблица CSS определена в разделе <head> HTML-страницы в элементе <style> :

Пример

body {background-color: powderblue;}
h2 {color: blue;}
p {color: red;}

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Внешние CSS

Внешняя таблица стилей используется для определения стиля для многих HTML-страниц.

С помощью внешней таблицы стилей можно изменить внешний вид всего веб-узла, изменив один файл!

Чтобы использовать внешнюю таблицу стилей, добавьте ссылку на нее в разделе <head> страницы HTML:

Пример

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>

</html>

Внешняя таблица стилей может быть написана в любом текстовом редакторе. Файл не должен содержать HTML-код и должен быть сохранен с расширением. CSS.

Вот как выглядит «styles.css»:

body {
    background-color: powderblue;
}
h2 {
    color: blue;
}
p {
    color: red;
}

Шрифты CSS

Свойство CSS color определяет используемый цвет текста.

Свойство CSS font-family определяет используемый шрифт.

Свойство CSS font-size определяет размер текста, который будет использоваться.

Пример

h2 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p {
    color: red;
    font-family: courier;
    font-size: 160%;
}

<h2>This is a heading</h2>
<p>This is a paragraph.</p>

</body>
</html>

Граница CSS

Свойство CSS border определяет границу вокруг элемента HTML:

Пример

p {
border: 1px solid powderblue;
}

CSS заполнение

Свойство CSS padding определяет отступ (пробел) между текстом и границей:

Пример

p {
border: 1px solid powderblue;
padding: 30px;
}

CSS маржа

Свойство CSS margin определяет поле (пробел) за пределами границы:

Пример

p {
border: 1px solid powderblue;
margin: 50px;
}

Атрибут ID

Чтобы определить конкретный стиль для одного специального элемента, добавьте атрибут id к элементу:

<p>I am different</p>

then define a style for the element with the specific id:

Пример

#p01 {
color: blue;
}

Примечание: Идентификатор элемента должен быть уникальным в пределах страницы, поэтому селектор ID используется для выбора одного уникального элемента!

Атрибут class

Чтобы определить стиль для специального типа элементов, добавьте атрибут class к элементу:

<p>I am different</p>

Затем определите стиль для элементов с определенным классом:

Пример

p.error {
color: red;
}

Внешние ссылки

Внешние таблицы стилей можно ссылаться с полным URL-адресом или с помощью пути относительно текущей веб-страницы.

В этом примере используется полный URL-адрес для связывания с таблицей стилей:

Пример

Этот пример связывается с таблицей стилей, расположенной в папке HTML на текущем веб-узле:

Пример

Этот пример связывается с таблицей стилей, расположенной в той же папке, что и текущая страница:

Примере

Дополнительные сведения о путях к файлам можно прочитать в разделе пути к файлам HTML.

Справка

Использование атрибута HTML style для встроенного стиля
Используйте элемент HTML <style> для определения внутреннего CSS
Используйте элемент HTML <link> для ссылки на внешний файл CSS
Используйте элемент HTML <head> для хранения <Style> и <Link> элементов
Используйте свойство CSS color для текстовых цветов
Используйте свойство CSS font-family для текстовых шрифтов
Используйте свойство CSS font-size для размеров текста
Использовать свойство CSS border для границ
Используйте свойство CSS padding для пространства внутри границы
Использование свойства CSS margin для пространства за пределами границы

Теги стиля HTML

Тег	Описание
<style>	Определяет сведения о стиле для документа HTML
<link>	Определяет связь между документом и внешним ресурсом

Учебник CSS3. Статья «создание первой таблицы стилей»

В этом учебнике для создания HTML и CSS файлов мы будем использовать редактор Notepad ++, он предназначен для пользователей Microsoft Windows и все примеры будут выполнены именно в нем.

Если же у вас Mac, то вы можете выполнять примеры в редакторе Brackets, он как и Notepad ++ абсолютно бесплатен. Что касается редактора Brackets, то он подходит и для пользователей Microsoft Windows, вы можете впоследствии выбрать, что вам ближе.

Создание внутренней таблицы стилей

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

Шаг 1: Откройте текстовый редактор

Нажмите кнопки WIN + R одновременно (аналог Пуск — Выполнить) при этом откроется диалог «Выполнить» впишите notepad++ и нажмите Enter (откроется программа Notepad++), либо запустите программу Notepad++ через её ярлык.

Перед Вами откроется основное окно программы:

Рис. 2 Текстовый редактор Notepad++.

Шаг 2: Создайте структуру документа

Скопируйте или впишите в редактор следующий HTML код:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8"> <!-- указываем кодировку документа -->
	<title>Внутренняя таблица стилей</title>
<style> 
</style>
</head>
<body>
	<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
	<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>

В коде примеров этого учебника я буду давать дополнительные комментарии, выделенные светло-зеленым цветом. В HTML для создания комментариев в вашем коде используется специальный тег <!— … —>, текст внутри такого элемента не отображается браузером. В CSS коде для добавления комментария необходимо текст комментария поместить в следующую конструкцию: /* текст комментария */. Комментарии в CSS коде вы можете делать как внутри встроенных стилей, так и во внешних (в отдельном файле).

Шаг 3: Добавьте встроенные стили

Следующим шагом добавьте к вашей странице встроенные стили: для заголовка первого уровня цвет текста красный (color: red), а для абзацев голубой (color: blue). Кроме того, для заголовка первого уровня мы сделаем выравнивание текста по центру (text-align: center). Проверьте, чтобы каждое CSS свойство и его значение было разделено двоеточием, а в конце каждого объявления стояла точка с запятой.

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Внутренняя таблица стилей</title>
<style> 
h2 {
text-align: center; /* горизонтальное выравнивание текста по центру */
color: red; /* изменяем цвет текста */
}
p {
color: blue; /* изменяем цвет текста */
}
</style>
</head>
<body>
	<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
	<p>Я выучу CSS за месяц, а то и быстрее</p>
</body>
</html>

Шаг 4: Просмотр HTML страницы в браузере

Откройте пример в браузере и убедитесь, что результат нашего примера соответствует изображению:

Рис. 2.1 Пример создания внутренней таблицы стилей в документе.

Подключение внешней таблицы стилей

Сейчас мы с Вами создадим отдельный файл, который будет содержать таблицу стилей и подключим его к нашему HTML документу.

В программе Notepad++ создайте новый пустой файл и сохраните его под именем page.css (при сохранении файла необходимо выбрать Cascade Style Sheets *.css) в той же папке, где вы создавали HTML документ.
Перенесите из предыдущего примера код CSS (содержимое тега <style>) в файл, который мы создали. Обратите внимание, что сам тег <style> необходимо удалить из документа (зачем нам пустые неиспользуемые теги в документе). Файл css у Вас должен содержать следующий код:

h2 {
text-align: center;
color: red;
}
p {
color: blue;
}

Добавьте к вашей таблице стилей следующий CSS код для элемента <body>, который определяет видимое содержимое страницы:

body { 
margin-top: 50px; 
border: 5px solid green;
font-family: courier;
}

Для элемента <body> мы указали следующие новые для Вас CSS свойства:

50 пикселям

solid

5 пикселям зеленого

«Courier»

Нам осталось только элементом <link> определить связь между документом и внешним ресурсом (таблицами стилей). Обратите внимание, что тег <link> необходимо разместить перед закрывающим элементом </head>:

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8">
		<title>Внутренняя таблица стилей</title>
		<link href = "page.css"  rel = "stylesheet">  <!-- подключаем нашу таблицу стилей -->
	</head>
	<body>
		<h2>Как хорошо, что я занимаюсь саморазвитием.</h2>
		<p>Я выучу CSS за месяц, а то и быстрее.</p>
	</body>
</html>

Сохраните ваши файлы и проверьте результат в браузере.

Рис.3 Пример использования внешней таблицы стилей в документе.Не беспокойтесь, если Вам на этом этапе непонятно как работают какие-либо новые для вас CSS свойства, позднее мы ещё не раз будем прибегать к использованию данных свойств в примерах, и подробно остановимся на каждом из них в отдельных статьях, например:

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива в любую папку на вашем жестком диске:

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

Практическое задание № 1.

Подсказка: на странице использованы цвета: dimgray, gray, aliceblue, orange.

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

Пишем CSS лучше и красивее. Не будем ходить вокруг да около, скажем… | by Nikita | WebbDEV

Не будем ходить вокруг да около, скажем прямо: процесс написания хорошего CSS-кода может быть очень и очень тяжёлым. Многие разработчики не хотят связываться со стилями. Они готовы заниматься всем, чем угодно, но только не CSS. От этого никуда не деться. В наши дни огромное внимание уделяется дизайну, и тому, что называют «UX», а без CSS тут никак не обойтись. Цель этого материала — помочь всем желающим улучшить свои навыки в разработке и применении стилей веб-страниц.

В самом начале нового проекта стили обычно выглядят просто и понятно. Скажем, имеется совсем мало CSS-селекторов, вроде .title, input, #app, работа с которыми никому не покажется трудной.

Но, по мере роста приложения, стили превращаются в кошмар. Разработчик начинает путаться в CSS-селекторах. Он обнаруживает, что пишет нечто вроде div#app .list li.item a. Однако работу останавливать нельзя, поэтому программист продолжает использовать подобные конструкции, CSS-код запихивают куда-нибудь в конец файла. И правда — кого интересуют стили? Да и сам по себе CSS — это такая ерунда… В результате получается 500 строк совершенно неподдерживаемого, ужасного CSS.

Мне хочется, чтобы дочитав эту статью, вы взглянули бы на свои предыдущие проекты и подумали: «Ну ничего ж себе, как же я мог такое написать?».

Возможно, вы думаете сейчас, что «писать CSS» — это значит пользоваться CSS-фреймворками. Ведь предназначены они именно для того, чтобы облегчить работу со стилями, и именно с их использованием пишут хороший CSS-код. Всё это так, но у CSS-фреймворков есть определённые недостатки:

Часто их использование ведёт к появлению скучного, однообразного, банального дизайна.
Стили фреймворков трудно настраивать, сложности может вызывать и необходимость сделать что-то такое, что выходит за рамки фреймворка.
Фреймворки, перед их использованием, необходимо изучать.

И, в конце концов, вы ведь читаете это не для того, чтобы ознакомиться с неким фреймворком? Поэтому займёмся CSS. Сразу хотелось бы отметить, что материал это не о том, как создавать красивые дизайны для приложений. Он — о том, как писать качественный CSS-код, который легко поддерживать, и о том, как правильно его организовывать.

В своих примерах я буду использовать SCSS. Это — CSS-препроцессор. Фактически, SCSS является надмножеством CSS. В нём имеются некоторые весьма интересные возможности, такие, как переменные, вложенные конструкции, импорт файлов, миксины. Обсудим возможности SCSS, которыми мы будем пользоваться.

Переменные

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

И вот вы, вдруг, решаете поменять голубой на зелёный. Если выполнять такую замену без использования переменных — придётся отредактировать весь код, все строки, где используется старый цвет. Если же воспользоваться переменной, то поменять придётся лишь её значение. Вот как выглядит использование переменных:

Вложенные конструкции

SCSS поддерживает вложенные конструкции. Вот обычный CSS:

Его, благодаря поддержке вложенных конструкций, можно преобразовать так:

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

Фрагментирование и импорт

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

Файлы, содержащие фрагменты описаний стилей, можно создавать, добавляя в начале их имён знак подчёркивания: _animations.scss, _base.scss, _variables.scss, и так далее.

Для импорта этих файлов используется директива @import. Вот как пользоваться этим механизмом:

Возможно, вам покажется, что в этом коде имеется ошибка. Действительно, ведь файл, который мы хотим импортировать, называется _animations.scss, а мы, в файле header.scss, используем команду @import "animations". Однако ошибки здесь нет. SCSS — система достаточно интеллектуальная для того, чтобы понять, что в подобной ситуации разработчик имеет в виду соответствующий файл.

Это — всё, что нам надо знать о переменных, о вложенных конструкциях, о фрагментировании стилей, и об импорте. В SCSS есть и другие возможности, вроде миксинов, наследования, и других директив (среди них — @for, @if и ещё некоторые), но мы тут о них говорить не будем.

Если вы хотите познакомиться с SCSS поближе — взгляните на соответствующую документацию.

Я уже и не помню, сколько раз я использовал универсальные термины для именования CSS-классов. В результате у меня получались такие имена, думаю, знакомые всем: .button, .page-1, .page-2, .custom-input.

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

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

Блоки

Блоки можно рассматривать как компоненты. Наверняка, вы играли в детстве в Lego. Поэтому включим машину времени.

Как вы строили, скажем, обычный домик? Тут понадобится окно, крыша, дверь, стены, и, в общем-то, этого достаточно. Всё это — наши блоки. Они значимы сами по себе.

Именование: имя блока — .block

Примеры: .card, .form, .post, .user-navigation

Элементы

Как сделать из Lego окно? Вероятно, некоторые кубики выглядят как рамки, поэтому, если соединить четыре таких кубика, получится красивое окно. Это — элементы. Они являются частями блоков, они нам нужны для того, чтобы создавать блоки. Однако, элементы, вне блоков, бесполезны.

Именование: имя блока + __ + имя элемента — .block__element

Примеры: .post__author, .post__date, .post__text

Модификаторы

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

Именование: имя блока ИЛИ имя элемента + -- + имя модификатора — .block__element--modifier, .block--modifier
Примеры: .post--important, .post__btn--disabled

Примечания

При использовании БЭМ имена дают исключительно классам. Никаких ID или тегов — только классы.
Блоки или элементы могут быть вложены в другие блоки или элементы, но они должны быть полностью независимыми. Это очень важно. Поэтому, например, не надо назначать кнопке поля из-за того, что вы хотите поместить её под заголовком, в противном случае кнопка окажется связанной с заголовком. Используйте вместо этого вспомогательные классы.
При применении методологии БЭМ HTML-файлы будут перегружены именами, но это — небольшая плата за те возможности, которые даёт нам БЭМ.

Упражнение

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

Например, вот что у меня получилось в результате анализа Google Store.

Анализ сайта

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

Примеры

Вот пример, подготовленный средствами Codepen, демонстрирующий возможности БЭМ. Тут мы по-разному оформляем нечто вроде публикаций в некоем блоге. Вот HTML-код этого примера.

Вот SCSS-стили:

А вот то, что в итоге получилось.

Оформление «публикаций» с использованием БЭМ

Рассмотрим ещё один пример. Тут, пользуясь БЭМ, мы оформляем кнопки. Вот HTML-код этого примера.

Вот SCSS-стили.

А вот — результат.

Оформление кнопок с использованием методологии БЭМ

Давайте поговорим об организации CSS-файлов. То, что вы узнаете из этой части нашего разговора, позволит вам работать продуктивнее, и поможет, в соответствующих ситуациях, мгновенно находить CSS-код, который надо изменить. Для того чтобы всего этого добиться, нам понадобится изучить шаблон «7–1».

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

Все файлы с SCSS-фрагментами надо разместить в 7 разных папках.
Все эти файлы нужно импортировать в один файл, main.scss, расположенный в корневой директории, в которой лежат все эти папки.

Название шаблона, в результате, можно расшифровать, как «7 папок — 1 файл». Как видите, всё не так уж и сложно. Поговорим об этом шаблоне подробнее.

7 папок

Вот папки, о которых идёт речь:

base: в этой папке надо разместить весь, так сказать, «шаблонный» код. Под «шаблонным» кодом здесь понимается весь тот CSS-код, который приходится писать при создании нового проекта. Например: типографские правила, анимации, утилиты (то есть — классы вроде margin-right-large, text-center), и так далее.
components: название этой папки явно указывает на то, что в ней будет храниться. Речь идёт о стилях компонентов, используемых для сборки страниц. Это — кнопки, формы, всяческие слайдеры, всплывающие окна, и так далее.
layout: эта папка применяется для хранения стилей элементов макетов страниц. Это — шапка и подвал страницы, навигационная область, различные разделы страницы, сетка, и так далее.
pages: иногда в проекте нужны страницы, обладающие собственным специфическим стилем, который отличается от стиля остальных страниц. Описания стилей для таких вот особенных страниц и попадают в эту папку.
themes: если веб-проект предусматривает использование различных тем оформления (скажем, нечто вроде «dark mode», или «admin»), стили для них надо положить сюда.
abstracts: в эту папку попадают всяческие вспомогательные вещи — функции, переменные, миксины.
vendors: редкий сайт обходится без внешних зависимостей. В этой папке хранятся стили, которые созданы не тем, кто разрабатывает конкретный сайт. Сюда, например, можно сохранить файлы проекта Font Awesome, стили Bootstrap и прочее подобное.

Файл main.scss

Именно в этот файл импортируются все те фрагменты стилей, которые разложены по вышеописанным семи папкам. Выглядеть некоторая часть этого файла может так:

Не могу не согласиться с тем, что выглядит вся эта конструкция из семи папок довольно масштабной. Однако тут надо отметить, что эта архитектура рассчитана на большие проекты. Для маленьких проектов можно использовать адаптированную версию шаблона «7–1». Особенности этой версии заключаются в том, что в ней можно обойтись без некоторых папок. Так, тут можно отказаться от папки vendors, поместив ссылки на внешние по отношению к проекту файлы стилей в тег link. Далее, можно обойтись без папки themes, так как, вероятно, в небольшом веб-приложении темы оформления использоваться не будут. И, наконец, можно избавиться от папки pages, так как в этом проекте, скорее всего, не будет страниц, стиль которых сильно отличается от общего стиля. В результате из семи папок остаётся всего четыре.

Далее, занимаясь маленьким проектом, можно пойти одним из двух путей:

Если вы предпочитаете воспользоваться тем, что осталось от шаблона «7–1», то у вас сохраняются папки abstracts, components, layout и base.
Если вы решаете обойтись одной большой папкой, то все файлы с фрагментами стилей, вместе с файлом main.scss, попадают в эту папку. Выглядеть это может примерно так:

Что именно выбрать — зависит от ваших предпочтений.

Тут, если вы прониклись идеей применения SCSS, у вас может возникнуть вопрос о том, как пользоваться такими стилями, так как браузеры их не поддерживают. На самом деле — это хороший вопрос, который ведёт нас к финальному этапу нашего разговора, к компиляции SCSS в CSS.

Для того чтобы преобразовать SCSS-код в CSS, вам понадобится платформа Node.js и менеджер пакетов NPM (или Yarn).

Мы будем использовать пакет node-sass, который позволяет компилировать .scss-файлы в .css-файлы. Это — инструмент командной строки, пользоваться им несложно. А именно вызов node-sassвыглядит так:

Здесь доступно множество опций. Мы остановимся на двух:

Опция -w позволяет организовать наблюдение за папкой или файлом. То есть, node-sass будет следить за изменениями в коде, и, когда они происходят, автоматически компилировать файлы в CSS. Эта возможность весьма полезна в процессе разработки.
Опция --output-style определяет стиль выходного CSS-файла. Тут доступно несколько вариантов: nested, expanded, compact, compressed. Эту опцию мы будем использовать для сборки готового CSS-файла.

Если вы — человек любопытный (надеюсь — так оно и есть, ведь разработчику любопытство только на пользу), то вам, скорее всего, интересно будет взглянуть на документацию к пакету node-sass.

Итак, с инструментами мы определились, теперь осталось самое простое. Для того чтобы преобразовать SCSS в CSS, надо выполнить следующие шаги:

Создайте папку проекта и перейдите в неё: mkdir my-app && cd my-app

Инициализируйте проект: npm init

Добавьте в проект пакет node-sass: npm install node-sass — save-dev

Создайте файл index.html, папки со стилями, файл main.scss:

Добавьте в файл package.json следующее:

Добавьте ссылку, ведущую к скомпилированному CSS-файлу, в тег head файла index.html:

Вот и всё. Теперь, когда вы занимаетесь работой над проектом, выполните команду npm run watch и откройте в браузере файл index.html. Для того, чтобы минифицировать CSS, выполните команду npm run build.

Интерактивная перезагрузка страницы

Возможно вам, для повышения производительности труда, захочется организовать интерактивную перезагрузку страницы. Это удобнее ручной перезагрузки index.html. Вот как это сделать:

Установите пакет live-server (обратите внимание на то, что его устанавливают глобально):

npm install -g live-server

Добавьте в зависимости проекта пакет npm-run-all, который позволит одновременно запускать несколько скриптов:

npm install npm-run-all — save-dev

Добавьте следующее в package.json:

Теперь, выполнив команду npm run start, вы, в процессе работы над проектом, мгновенно будете видеть изменения, вносимые в него, не перезагружая страницу вручную.

Пакет autoprefixer

На данном этапе у вас имеется настроенная среда разработки, что очень хорошо. Теперь поговорим об инструментах для сборки проекта, и, в частности, о пакете autoprefixer. Это — инструмент (речь идёт о postcss-плагине), который парсит CSS-код и добавляет префиксы производителей браузеров к CSS-правилам, используя данные с Can I Use.

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

Код с префиксами браузеров выглядит примерно так:

Несложно заметить, что писать такой код весьма утомительно. Для того чтобы облегчить задачу обеспечения совместимости нашего CSS-кода с различными браузерами, не переусложняя проект, мы и воспользуемся пакетом autoprefixer. Тут понадобится выполнить следующие действия:

Скомпилируем все SCSS-файлы в один основной CSS-файл.
Добавим в этот файл префиксы браузеров с помощью autoprefixer.
Сожмём этот CSS-файл.

Это, в общем-то, завершающий этап работы над проектом. Итак, вот что надо сделать для использования autoprefixer:

Добавьте в проект две зависимости — postcss-cli и autoprefixer:

npm install autoprefixer postcss-cli — save-dev

Добавьте в package.json следующий код и модифицируйте скрипт build:

Теперь осталось лишь выполнить команду npm run build, и вы получите сжатый CSS-файл, в который будут добавлены префиксы браузеров. Вот репозиторий, в котором вы найдёте шаблонный проект, построенный с использованием рассмотренных здесь технологий. А вот — ещё один репозиторий с моими учебными проектами, при разработке которых я пользовался описанными здесь приёмами, и страница с рабочими примерами.

Вполне возможно, что анализ этих материалов поможет вам лучше разобраться в том, о чём мы сегодня говорили.

Перевод статьи How to get better at writing CSS.

Каскадность CSS. Как определяется приоритет стилей — учебник CSS

В данной главе подробно объясняется, почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными. Для начала давайте вспомним, какими способами можно добавить стиль на веб-страницу:

подключить внешнюю таблицу стилей;
добавить внутреннюю таблицу стилей в HTML-документ через тег <style>;
определить стиль элемента, применив к тегу атрибут style с необходимыми значениями (inline-стиль).

Эти способы добавления стилей могут быть использованы одновременно. К примеру, для тегов <p> может быть одновременно задан стиль как во внешней таблице стилей, так и во внутренней. Кроме того, в одной таблице стилей может быть записано несколько вариантов форматирования тегов <p>. Например:


p {color: green;}
.your_class p {color: yellow;}
#your_id p {color: red;}

В этом примере для тегов <p> указано три варианта форматирования. Но каким образом браузер расставляет приоритеты между стилями? Какой стиль из вышеприведенных будет выбран и по какому принципу? Это нам и предстоит выяснить.

Приоритеты стилей

Каскадность CSS – это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS. Правила могут исходить из различных источников: из внешней и внутренней таблицы стилей, от механизма наследования, от родительских элементов, от классов и ID, от селектора тега, от атрибута style и т. д. Поскольку в этих случаях часто происходит конфликт стилей, была создана система приоритетов: в конечном итоге применяется тот стиль, который исходит от источника с более высоким приоритетом.

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора. Чем больше вес, тем выше приоритет:

Селектор тега:	1
Селектор класса:	10
Селектор ID:	100
Inline-стиль:	1000

Когда селектор состоит из нескольких других селекторов, необходимо посчитать их общий вес. Вот как вычисляется приоритет: за каждый селектор добавляется 1 в соответствующую ячейку. В остальных ячейках стоят нули. Чтобы получить общий вес, необходимо «склеить» все числа в ячейках.

Селектор	ID	Класс	Тег	Общий вес
p	0	0	1	1
.your_class	0	1	0	10
p.your_class	0	1	1	11
#your_id	1	0	0	100
#your_id p	1	0	1	101
#your_id .your_class	1	1	0	110
p a	0	0	2	2
#your_id #my_id .your_class p a	2	1	2	212

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

Пример: во внутренней таблице стилей задан красный цвет для тегов <p>, а во внешней – зеленый цвет для этих же тегов. В HTML-документе вы первым делом подключили внешнюю таблицу стилей, а затем добавили внутреннюю таблицу с помощью тега <style></style>. В итоге цвет тегов <p> будет красным.

Это – один из способов управлять значимостью стилей. Еще один способ повысить приоритет – специально увеличить вес селектора, например, добавив к нему ID или класс.

Объявление !important

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important:


p {color: red !important;}
p {color: green;}

Также !important перекрывает inline-стили. Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

Сброс стилей с помощью reset.css

В предыдущей главе мы уже упоминали о том, что у каждого браузера есть свои встроенные стили HTML-документов, созданные для улучшения читабельности. Вы наверняка уже видели, как выглядит «голая» веб-страница в браузере: синие подчеркнутые ссылки, черный шрифт, полужирное начертание заголовков и т. д.

Каждый браузер имеет свои отличия во встроенных стилях: например, в IE нет отступа от верхнего края окна, а в Firefox есть. Таких отличий существует много. Чтобы они не создавали помех для кроссбраузерности при написании собственного стиля CSS, можно воспользоваться методом сброса встроенных стилей.

Инструмент для сброса стилей – это, по сути, та же самая таблица CSS, где описаны правила, которые сбрасывают встроенные стили браузеров, устанавливая базовые значения свойств. Называется такая таблица reset.css и служит для того, чтобы вы могли начать создавать стиль «с нуля». Вот пример стандартной таблицы сброса:


html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Этот вариант таблицы Reset.css разработал известный опытный специалист по стандартам HTML и CSS Эрик Мейер. Он работает в области веб-технологий с 1993 года и является автором многих книг по CSS.

Конечно же, существуют и другие вариации Reset CSS, например, более популярный сейчас Normalize.css, который, в отличие от Reset CSS, сохраняет много полезных стилей по умолчанию, а не стирает их начисто. Это удобно, поскольку избавляет от необходимости вновь объявлять стили для многих стандартных элементов.
Если требуется, вы и сами можете создать свой файл сброса стилей, исходя из ваших потребностей.

А сейчас вкратце о том, что делает вышеприведенная таблица сброса стилей:

в первом селекторе собраны наиболее популярные теги, для которых удаляются все отступы, рамки и поля, а также назначается размер шрифта 100%;
второй групповой селектор предназначен для правильного отображения тегов HTML5 в старых браузерах;
с помощью свойства line-height селектора body устанавливается одинаковый интерлиньяж (межстрочный интервал) для текста;
для списков ol, ul убраны маркеры;
отменены кавычки и другой контент перед и после содержимого тегов blockquote, q;
упрощено добавление рамок для ячеек таблиц.

Файл сброса стилей необходимо подключать раньше, чем собственные стили. Если вы внимательно читали абзац о приоритетах, то уже поняли, почему reset.css должен находиться перед другими стилями: потому что правила, указанные ниже в коде, перезаписывают правила, объявленные ранее.

Итоги

Каскадность в CSS – это способность стилевых правил накладываться друг на друга, перезаписывать и смешиваться. Итоговый стиль элемента, который виден в браузере – это комбинация нескольких последовательно примененных стилей.

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

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

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

Работа с таблицами стилей CSS в приложении HTML5

В этом учебном курсе будет выполняться запуск приложений в браузере Chrome с установленным расширением NetBeans Connector. Когда расширение будет установлено, пользователи смогут использовать меню NetBeans в браузере, чтобы легко изменить размер окна браузера для просмотра приложения так, как оно будет отображаться на некоторых распространенных устройствах.

Примечания. В этом учебном курсе мы рекомендуем использовать браузер Chrome и установить расширение NetBeans для Chrome. Подробнее об устаноке расширения NetBeans Connector см. Начало работы с приложениями HTML5.

Чтобы запустить приложение в браузере Chrome, выполните следующие шаги.

Убедитесь, что Chrome с интеграцией NetBeans выбран в раскрывающемся списке на панели инструментов.
Нажмите кнопку ‘Выполнить’ на панели инструментов, чтобы запустить проект в браузере Chrome.

В браузере отобразится простое расширяемое меню.

Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.

При закрытии желтой полосы или щелчка ‘Отмена’ разрывается соединение между IDE и браузером. В случае разрыва соединения необходимо запустить приложение HTML5 из IDE.

Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере, и для включения режима проверки в режиме NetBeans.

Щелкните значок ‘Открыть действие NetBeans’ в адресной строке браузера URL, чтобы открыть меню NetBeans и выбрать в меню ‘Планшет — портрет’.

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

Figure 2. Размер отображения планшетного портрета в браузере

Если выбрать одно из заданных по умолчанию устройств в меню, окно браузера изменится до размеров устройства. Это позволит увидеть, как приложение будет выглядеть на выбранном устройстве. Приложения HTML5 обычно реагируют на размер экрана устройства, на котором они просматриваются. Можно использовать правила JavaScript и CSS, которые реагируют на размер экрана, а также изменять способ отображения приложений так, чтобы макет был оптимизирован для устройства.

Щелкните значок NetBeans еще раз и выберите ‘Смартфон — пейзаж’ в меню NetBeans.

Figure 3. Выберите ‘Смартфон — пейзаж’ в меню NetBeans в браузере

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

Figure 4. Размер окна браузера изменяется на ‘Смартфон — пейзаж’

В следующем разделе пользователи смогут изменить таблицу стилей, что позволит просматривать все меню без прокрутки на смартфоне в горизонтальной ориентации.

CSS Урок 2: Как создать свой первый файл CSS

Сегодня мы напишем и сохраним наш первый файл CSS. Начнем с открытия программы редактирования текста. Если вы работаете на ПК с Microsoft Windows, откройте программу «Блокнот» (удерживайте нажатой клавишу Windows на клавиатуре и нажмите R, затем введите notepad и нажмите Enter). Если вы используете компьютер Macintosh, запустите приложение под названием «TextEdit» (которое можно найти в папке «Приложения»).

Давайте напишем наш первый бит CSS

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

 ч2 {
оранжевый цвет;
выравнивание текста: по центру;
}

Надеюсь, вы помните этот код из нашего предыдущего урока. Задача на сегодня — сохранить наш файл CSS и связать его с HTML-страницей.

Шаг 1. Сохранение файла CSS

Создайте новую папку на рабочем столе (или в другом удобном для вас месте) и назовите ее CSS-Test . Теперь, вернувшись в программу редактирования текста, сохраните документ как «style.CSS».

Связывание файла CSS со страницей HTML

Наш новый файл CSS бесполезен, если мы не применим его к веб-странице. Давайте создадим быструю HTML-страницу для этого урока. Создайте новый пустой файл в Блокноте (или TextEdit) и добавьте следующий код:

 


<голова>
<мета-кодировка="utf-8">
CSS-тест

<тело>

 CSS-тест 

<дел>
Это первая коробка.

<дел>

Это поле два.

Если вы читали несколько моих первых уроков HTML, то этот код вам хоть немного знаком. Я объясню это по мере продолжения урока; пока сохраните этот документ в нашей папке «CSS-Test» и назовите его «index.htm».

Связывание двух файлов вместе

Нам все еще нужно сообщить веб-браузеру, чтобы он загрузил наш файл «style.css» при просмотре страницы «index.htm». Добавьте следующий код в index.htm прямо над закрывающим тегом :

 <ссылка rel="stylesheet" href="style.css">

Эта строка кода сообщает нашему браузеру, что мы хотим связать таблицу стилей, что она находится в той же папке, что и наша HTML-страница, и что она называется «style.css».

Теперь, когда вы просматриваете страницу «index.htm» в веб-браузере, вы должны увидеть оранжевый заголовок по центру:

Давайте стилизуем эти две коробки

Если вы посмотрите на код нашей HTML-страницы, вы увидите два элемента

.Мы добавили HTML-атрибут «id» для этих двух элементов и присвоили им значения «box-one» и «box-two». Мы можем использовать «id» элемента, чтобы выбрать и стилизовать его с помощью CSS. Например, давайте сделаем первую коробку серой, а вторую — желтой. Добавьте следующий код в свой файл CSS, непосредственно под нашим исходным правилом

:

 #коробка-один {
цвет фона: серый;
}

#коробка-два {
цвет фона: желтый;
отступ: 10 пикселей;
}

Когда элемент имеет идентификатор, мы можем получить к нему доступ с помощью селектора CSS, поместив знак решетки (#) перед значением идентификатора.Итак, чтобы выбрать первый элемент

, мы просто набираем «#box-one», а затем запускаем наше правило CSS.

Наши новые модные коробки

Когда вы сохраняете файл CSS и обновляете нашу HTML-страницу в веб-браузере, вы должны увидеть что-то очень похожее на это:

Ура для стиля

Возможно, это некрасиво, но мы создали нашу первую HTML-страницу с помощью CSS! Давайте подытожим ваши знания CSS. Вы знаете:

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

Если вы предпочитаете смотреть видеоуроки, а не читать письменные уроки, ознакомьтесь с моим 8-часовым видеокурсом и присоединитесь к более чем 4000 других людей, которые изучили HTML, CSS и адаптивный дизайн на профессиональном уровне.

Как создавать классы с помощью CSS

Введение

В этом руководстве вы создадите селектор класса CSS , который позволит вам применять правила CSS только к элементам HTML, которым присвоен класс. Селекторы классов CSS полезны, когда вы хотите применить разные правила стиля для разных экземпляров одного и того же HTML-элемента.

Предпосылки

Чтобы следовать этому учебному пособию, убедитесь, что вы настроили необходимые файлы и папки, как указано в предыдущем учебном пособии из этой серии «Как настроить учебный проект CSS и HTML».

Как работают селекторы классов CSS

Селектор класса CSS позволяет назначать правила стиля для элементов HTML, которые вы определяете с помощью этого класса, вместо всех экземпляров определенного элемента. В отличие от элементов HTML (таких как
,

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

Правило CSS для селектора класса написано так же, как правило для селектора тега, за исключением . добавлено к имени класса:

.красный текст { красный цвет; }

Чтобы использовать класс при добавлении HTML-контента на вашу веб-страницу, вы должны указать его в открывающем теге HTML-элемента, используя атрибут class в вашем HTML-документе, например:

класс=".красный текст" >Содержимое.

Создание класса CSS с помощью селектора классов

Давайте приступим к изучению классов CSS на практике. Сотрите все в файле styles.css и добавьте следующий фрагмент кода, чтобы указать правило для класса red-text :

стили.css

.красный текст { красный цвет; }

После добавления фрагмента кода в файл styles.css сохраните файл.

Вернитесь к индексу .html и сотрите все, кроме первой строки кода , которая ссылается на вашу таблицу стилей CSS. Затем добавьте следующий фрагмент кода HTML:
.
index.html

class="red-text" >Вот первый образец текста абзаца.

Обратите внимание, что имя класса не начинается здесь с . , как если бы он использовался в качестве селектора для правила CSS. Весь ваш индекс .html должен иметь следующее содержимое:

index.html

. . .

В этот фрагмент кода вы добавили текст с помощью тега HTML
. Но вы также указали класс red-text , добавив выделенный атрибут класса class="red-text" внутри открывающего тега HTML.

Сохраните индекс .html и загрузите его в браузере. (Для получения инструкций по загрузке HTML-файла, пожалуйста, посетите наш шаг руководства Как просмотреть автономный HTML-файл в вашем браузере).

Вы должны получить веб-страницу с красным текстом:

Давайте добавим дополнительный класс CSS, чтобы изучить стили различных частей
текстового содержимого с помощью разных классов. Добавьте следующий фрагмент кода в файл styles.css (после правила CSS для «красного текста»):

стиля.CSS

.желтый фон-текст { цвет фона: желтый; }

Это правило CSS объявляет, что классу yellow-background-text присвоено значение yellow для свойства background-color . Любой текстовый элемент HTML, которому присвоен этот класс, будет иметь желтый фон. Обратите внимание, что использование слова text в классе yellow-background-*text* предназначено только для удобочитаемости. Вам не нужно включать слово text в имена классов для классов, назначенных тексту HTML.

Чтобы применить этот новый класс CSS, вернитесь к файлу index.html и добавьте следующую строку кода внизу:

index.html

Вот второй образец текста абзаца.

В этом фрагменте кода вы добавили текстовое содержимое с помощью элемента
и указали класс yellow-background-text . Сохраните файл и перезагрузите его в браузере. У вас должна быть веб-страница с двумя разными предложениями, первое красное, а второе с желтым фоном:
.

Обратите внимание, что к тегу HTML можно добавить более одного класса.Попробуйте добавить оба класса в один текстовый элемент, добавив в файл index.html следующую строку:
.
index.html

Вот третий образец текста.

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

Теперь ваша третья строка текста должна быть оформлена в соответствии со значениями свойств, установленными в классе red-text и классе yellow-background-text , и иметь красный шрифт и желтый фон.

Добавление классов CSS к изображениям

Классы CSS также можно применять к другим элементам HTML, например к изображениям. Чтобы изучить использование классов CSS для изображений, сотрите содержимое файла styles.css и добавьте следующий фрагмент кода:
.
стили.css

.black-img { граница: 5 пикселей с черными точками; радиус границы: 10%; } .yellow-img { граница: 25 пикселей сплошного желтого цвета; радиус границы: 50%; } .red-img { граница: 15px двойная красная; }

Здесь вы создали правила CSS для трех разных классов, которые можно применить к тегу HTML .Прежде чем двигаться дальше, давайте кратко изучим, что мы объявили в каждом наборе правил:
.

Первое правило CSS объявляет, что класс black-img должен иметь black , точечную границу шириной пять пикселей и border-radius размером 10%, что придает элементу закругленные углы.

Второе правило CSS объявляет, что класс yellow-img должен иметь yellow , сплошную границу шириной 25 пикселей и border-radius размером 50%, что придает элементу круглую форму.

Третье правило CSS объявляет, что класс red-img должен иметь red , double границу шириной 15 пикселей. Вы не установили радиус границы, поэтому граница будет соответствовать форме элемента.

Сохраните файл styles.css . Затем сотрите все из файла index.html (кроме первой строки кода: ) и добавьте следующий фрагмент кода:
индекс
.html

Каждая из этих трех строк кода HTML добавляет изображение в документ HTML и назначает ему один из трех классов, которые вы только что добавили в файл styles.css . Обратите внимание, что вы получаете изображение из Интернета. Вы также можете использовать свое собственное изображение, указав путь к файлу, как указано в нашем руководстве «Как добавить изображения на веб-страницу с помощью HTML».

Сохраните файл index.html и загрузите его в браузере. Вы должны получить что-то вроде этого:

Теперь ваша веб-страница должна отображать три изображения, каждое из которых оформлено в соответствии с различными характеристиками назначенного им класса.

Чтобы продолжить изучение классов CSS, попробуйте создать новые классы с другими наборами правил и применить их к различным типам содержимого HTML. Обратите внимание, что свойства и значения, указанные в блоках объявления класса, будут работать только с элементами, для которых они предназначены.Например, объявление font-color не изменит цвет границы изображения. Точно так же объявление height не изменит размер шрифта.

Заключение

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

В следующем руководстве вы создадите селекторы CSS ID , которые работают так же, как селекторы классов, за исключением некоторых уникальных функций.

Создание, редактирование и прикрепление файлов CSS для оформления вашего сайта

CSS (каскадные таблицы стилей) — это закодированные файлы, которые выбирают элементы вашей страницы и управляют их представлением. Думайте о HTML вашего пользовательского шаблона как о кости вашего веб-сайта, а о CSS — как об оболочке вашего сайта.

В этой статье рассказывается о создании, публикации и прикреплении файла CSS в HubSpot. Здесь вы можете узнать, как внести простые изменения в дизайн конкретной страницы. Если вы используете шаблон темы, узнайте, как изменить настройки темы.

Создать новый файл CSS

В своей учетной записи HubSpot перейдите к Маркетинг > Файлы и шаблоны > Инструменты дизайна .

Щелкните значок папки в левом верхнем углу, чтобы развернуть боковое меню. Затем нажмите Файл > Новый файл .

В диалоговом окне щелкните Таблица стилей CSS . Затем введите имя для таблицы стилей CSS и нажмите Create .

Редактировать файл CSS

Создав или открыв существующий файл CSS, внесите изменения в редакторе кода. Помимо стандартного CSS, редактор кода поддерживает переменные и макросы HubL, чтобы упростить работу с CSS. Чтобы просмотреть, как будет отображаться ваш HubL, щелкните, чтобы включить переключатель Show output в верхней части редактора. Справа откроется панель с отрендеренным предварительным просмотром.

Список стандартных селекторов CSS для шаблонов HubSpot см. в Boilerplate CSS.

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

В консоли ошибок в нижней части редактора кода.

В области ошибок в левой части редактора кода.

На полосе прокрутки в правой части редактора.

Ошибки, препятствующие публикации, будут выделены красным, а общие предупреждения — желтым. В нижней части редактора кода нажмите Показать подробности , чтобы просмотреть дополнительные сведения об ошибках в консоли ошибок, и Скрыть подробности , чтобы свернуть консоль ошибок.

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

Вы также можете щелкнуть номер строки в редакторе кода и соответствующим образом обновить URL-адрес файла.Это позволяет вам поделиться ссылкой на свой код с другими и направить их именно туда, где вы работаете в файле.

После редактирования файла нажмите Опубликовать изменения в правом верхнем углу. Если вы хотите вызвать эту таблицу стилей в другом закодированном шаблоне, скопируйте URL-адрес листа, нажав Действия > Копировать общедоступный URL-адрес в меню левой боковой панели.

Прикрепить к шаблону

В HubSpot вы можете прикреплять таблицы стилей к своему контенту несколькими различными способами.Ниже приведен порядок, в котором прикрепленные таблицы стилей связаны на вашем сайте:

public_common.css * — таблица стилей, в основном используемая приложением HubSpot, но также и для некоторых функций сайта.

Заголовок HTML в настройках под Веб-сайт > Страницы — теги ссылок добавлены в глобальный сайта.

Layout.css ** — адаптивный CSS-файл по умолчанию, прикрепленный ко всем макетам шаблонов с возможностью перетаскивания.

Прикрепленные таблицы стилей в настройках под Веб-сайт > Страницы — таблицы стилей прикреплены ко всему вашему сайту.

Прикрепленные таблицы стилей в настройках в разделе Веб-сайт > Блог — таблицы стилей, прикрепленные к вашему блогу (переопределяют глобальные таблицы сайта).

Связанные таблицы стилей *** — таблицы стилей, присоединенные к макету шаблона.

Дополнительная разметка в шаблоне — теги ссылок, добавленные в определенного макета шаблона.

Таблицы стилей для конкретных страниц — таблицы стилей, прикрепленные к настройкам страницы.

Заголовок страницы HTML — теги ссылок добавляются в определенной страницы в настройках страницы.

* Требуется

** Требуется для макетов перетаскивания

*** Рекомендуемый способ прикрепления таблиц стилей для макетов шаблонов

Чтобы прикрепить таблицы стилей к шаблону, откройте шаблон в менеджере дизайна. В меню правой боковой панели в разделе Параметры заголовка и основного текста выберите файл из раскрывающегося меню Добавить рядом с Связанные таблицы стилей .

Вы можете отредактировать или удалить уже прикрепленную таблицу стилей, наведя на нее указатель мыши и нажав Изменить , чтобы внести в нее изменения, или X , чтобы ее удалить.

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

Прикрепите или удалите таблицы стилей на определенной странице

Обратите внимание: этот параметр недоступен для шаблонов тем.Узнайте, как изменить настройки темы.

Чтобы добавить или удалить таблицу стилей для конкретной страницы из раздела настроек редактора страниц:

Переход к страницам веб-сайта или целевым страницам.

Наведите указатель мыши на свою страницу и нажмите Изменить .

В редакторе страниц нажмите Настройки вверху.

Прокрутите вниз и щелкните Дополнительные параметры .

В разделе Таблицы стилей страницы щелкните раскрывающееся меню Прикрепить таблицу стилей и выберите лист, который вы хотите прикрепить.Нажмите X рядом с таблицей стилей, которую вы хотите удалить.

Щелкните Сохранить и Опубликовать в правом верхнем углу.

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

На той же вкладке Настройки в редакторе страниц выберите Отключено в раскрывающемся меню рядом с включенными таблицами стилей.

Щелкните Сохранить и Опубликовать в правом верхнем углу.

Присоединение или удаление таблиц стилей на уровне домена (только
Marketing Hub Enterprise )
Обратите внимание: шаблоны тем должны включать аннотацию enableDomainStylesheets: true , чтобы можно было использовать таблицы стилей на уровне домена. Узнайте больше об аннотациях шаблонов.

Чтобы добавить или удалить таблицу стилей из всего контента в домене:

В своей учетной записи HubSpot щелкните значок настроек настроек на главной панели навигации.

В боковом меню нажмите Веб-сайт > Страницы .

Щелкните раскрывающееся меню , чтобы выбрать домен , для которого вы хотите обновить настройки.

На вкладке Templates прокрутите до CSS & Stylesheets . Чтобы добавить таблицу стилей, нажмите + Добавить таблицу стилей . Нажмите X рядом с прикрепленной таблицей стилей, чтобы удалить ее.

Нажмите Сохранить .

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

MyLayout.ascx

MyLayout.css

MyLayout.doctype.xml

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

default.css (~/Portals/_default/default.css) — CSS по умолчанию для веб-сайта.

module.css (~/DesktopModules/mymodulename/module.css) — CSS для каждого типа модуля, отображаемого на странице.

skin.css (~/Portals/PortalID/Skins/SkinPackageName/skin.css) — главный CSS для темы должен называться skin.css.

MyThemeTemplate.css (~/Portals/_default/Skins/SkinPackageName/MyThemeTemplate.css) — CSS для конкретного шаблона макета.

container.css (~/Portals/PortalID/Containers/ContainerPackageName/container.css) — основной CSS для всех контейнеров в вашей теме.

portal.css (~/Portals/PortalID/portal.css) — CSS, который может переопределять элементы в установленных темах. Администраторы веб-сайтов могут использовать это для переопределения любых стилей в теме или контейнерах.

Примечание. Эти таблицы стилей не требуются. Вы также можете хранить все свои стили в одной таблице стилей главной темы (skin.css). Однако, если вы объедините стили контейнера и стили темы в одном файле CSS, контейнер будет правильно отображаться только при использовании с вашей темой.

Ступени

Создайте основную таблицу стилей для своей темы (skin.css). Включать:

Общие стили для всех шаблонов макетов в вашей теме.

стилей для объектов темы используемых во всех ваших шаблонах макетов.

(Необязательно) Создайте отдельную таблицу стилей для каждого шаблона макета в вашей теме (MyThemeLayout.css). Включать:

Стили, относящиеся к шаблону макета.

Стили для объектов темы, которые используются только в определенном шаблоне макета.

(Рекомендуется) Создайте основную таблицу стилей для всех контейнеров в вашей теме (container.css). Включать:

Общие стили для всех контейнеров в вашей теме.

стилей для объектов темы используемых во всех ваших контейнерах.

(Необязательно) Создайте отдельную таблицу стилей для каждого типа контейнера в вашей теме (MyThemeLayout.css). Включать:

Стили, специфичные для контейнера.

Стили для объектов темы, которые используются только в определенном контейнере.

Пример

Шаблон макета

<дел>