Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

CSS

Стили CSS

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»
Все термины в глоссарии

X | Закрыть