Введение в 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.
