Введение в CSS

CSS означает каскадные таблицы стилей, используемые для определения стиля элементов HTML на веб-странице. CSS указывает браузеру, как элементы разметки должны отображаться на веб-странице, отображаемой для пользователей. Основная цель CSS – определить макет и украсить элементы. Все спецификации CSS поддерживаются Консорциумом World Wide Web (W3C).

CSS был первоначально предложен Хоконом Виум Ли вместе со многими другими языками таблиц стилей в октябре 1994 года. Затем W3C принял его рекомендованные стандарты вместе с рекомендациями Берта Боса в 1996 году и выпустил CSS1.

Синтаксис CSS

Синтаксис CSS состоит из трех частей – селектора, свойства и значения. Это определяется следующим образом:

селектор {свойство: значение;}

Селектор – это тег html, для которого вы хотите добавить стили.

Свойство – это атрибут, который нужно изменить.

Стоимость – это фактическая стоимость имущества.

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

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

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

<head> <link rel="stylesheet" type="text/css" href="https://www.webnots.com/introduction-to-css/location of CSS file"> </head>

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

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

.headtext { text-align: center; } #id1 { color: red; }

Помните, что класс CSS должен использоваться с точкой впереди, а селектор ID должен иметь # спереди. Селекторы элементов HTML не обязательно должны иметь префиксы.

Вышеупомянутый селектор классов и идентификаторов можно использовать в HTML, как показано ниже:

/* Start of CSS Class Selector Example */ <h3 class="headtext"> This is a center aligned heading. </h3> /* Start of CSS ID Selector Example */ <p id="id1"> This text will be displayed in red. </p>

Комментарии между / * и * / не отображаются в выходных данных, но используются для структурирования и понимания кода CSS разными людьми, кроме разработчика. Узнайте больше об использовании комментариев в CSS.

Различные способы использования CSS в HTML

Стили можно добавить к элементу HTML одним из следующих трех способов:

Встроенный стиль

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

Внешний стиль

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

Преимущества использования CSS

Ниже приведены некоторые преимущества использования CSS:

CSS экономит огромное количество времени на определение стилей каждого элемента индивидуально.

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

Совместимость с несколькими устройствами.

Отделите основной HTML от элементов стиля.

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

Модель коробки CSS

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

Элемент модели CSS Box

Узнайте больше о блочной модели CSS.

CSS и скорость страницы

Хотя меньшие стили CSS могут не влиять на скорость загрузки страницы, использование больших таблиц стилей повлияет на скорость загрузки. Есть два типа проблем, которые вы можете заметить в Инструмент Google PageSpeed Insights:

Проблемы CSS с Google PageSpeed

Устранение JavaScript и CSS, блокирующих рендеринг, в верхней части страницы

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

Минимизировать CSS

Таблицы стилей можно сжать и доставить. Вы можете загрузить оптимизированную версию таблицы стилей из Google PageSpeed Tool и заменить ее на своем сайте. Как правило, минифицированные файлы CSS имеют расширение .min.css.