CSS (Cascading Style Sheets — каскадная таблица стилей) — язык формирования внешнего вида элементов HTML. Если сама разметка HTML выстраивает структуру сайта, то CSS-стили отвечают за параметры её отображения и эстетическую составляющую.
Свойства CSS:
- цвет, прозрачность, эффекты заливки;
- параметры шрифтов;
- высота и ширина объектов;
- радиус отступов;
- свойства текстовых блоков;
- параметры изображения;
- свойства ссылок и пр.
Правила CSS назначаются также для обеспечения интерактивного отклика сайта во время действий пользователя: при клике, наведении, перемещении объекта и т. д.
Стандарты CSS
Известно 2 стандарта: CSS и CSS3. Практически все современные сайты используют CSS3, который более ориентирован на разработку мобильных приложений и подстройку сайтов под отображение на компактных портативных устройствах. В том числе стандарт поддерживает больше возможностей работы с медиаконтентом и персонализации текста (больше шрифтов, эффектов).
Код CSS3 модульный, что упрощает его чтение и трансформацию.
Синтаксис CSS
Каждый тип объектов в HTML выделяется тегами:
<p>строка</p>
<a href=” “>ссылка</a>
Для одного и того же тега в разных областях страницы могут назначаться разные правила, чтобы обособить которые, используются классы. Имя класса выбирается в соответствии с функцией элемента, чтобы облегчить читаемость кода.
Иногда используется id — уникальный идентификатор элемента, который может использоваться на странице только единожды.
Формат записи: (<h2 id ="about">...</h2>)
Имя элемента в формате тег.стиль — это селектор. Селекторы — метки, которые дают понять браузеру, к какому объекту необходимо применить указанное правило.
Если для одного элемента назначается несколько правил CSS, вступает в действие приоритизация: самым важными являются правила, указанные на странице в рамках атрибута <style>, далее следует id, все классы и псевдоклассы.
Если было создано несколько одинаковых селекторов, предпочтение отдаётся тому, что указан в style.css или блоке на странице последним.
Стилистическое правило имеет вид:
тег.класс {
свойство 1: (значение);
свойство 2: (значение);
}
Свойства могут быть перечислены в строку, это не нарушит правил синтаксиса. Также CSS нечувствителен к регистру букв.
Адаптивность и совместимость с браузерами
Стили CSS помогают адаптировать страницу для отображения на разных типах устройств и корректного представления в браузерах. Для этого вводится отдельный массив правил, ориентированных на те или иные условия отображения. Примеры:
- Ввод в блок стилей для экранов шириной от 600 пикселей с помощью медиазапроса в CSS3:
- Подключение дочернего CSS-файла через jQuery:
// Если ширина меньше 600 px, используется таблица стилей для мобильного
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
} else if(newWindowWidth > 600){
// Если ширина больше 600 px, используется таблица стилей для десктопа
$("link[rel=stylesheet]").attr({href : "style.css"});
Как добавить стили на страницу
CSS-правила могут вводиться непосредственно в файл HTML:
- внутри тега объекта через атрибут style=”свойства”;
- с помощью служебного тега <style> с атрибутом type=”text/css”, внутри которого будут перечислены все необходимые параметры;
Эти методы допустимы, когда необходимо внедрить небольшое количество строк CSS, в ином случае используется третий вариант:
- через подключение внешнего файла стилей style.css: <link rel="stylesheet" href="путь до style.css" type="text/css"/>. Таким образом, разметка останется чистой и читаемой и ресурсная нагрузка при отображении страницы будет распределена равномерно
style.css — стандартное, общепринятое, пусть и необязательное название для таблицы стилей, объединяющей общие правила оформления сайта. Когда необходимо использовать дополнительные наборы свойств, активируемые ситуационно или подключенные к определенным скриптам, файл может иметь абсолютно любое название. Видите файл с расширением .css — знайте, что это набор стилистических параметров сайта, определённой страницы или блока.
Как посмотреть стили страницы в браузере?
Необходимо проинспектировать код: кликнуть на правую кнопку при наведении на интересующую область страницы и выбрать функцию «просмотреть код». Появится сервисная панель, разделённая на 2 зоны: структура HTML и свойства, где и будет вкладка со стилями.
Для более удобного взаимодействия с контентом разработчики и дизайнеры используют плагины, такие как Firebug.
Во вкладке стилей можно вручную изменить атрибуты страницы, «примерив» другие параметры отображения.
Похожие темы:
нет
Синонимы:
нет
Все термины на букву «C»
Все термины в глоссарии
