CSS-технологии

УРОК «CSS: структура и код. Преимущества использования»

Дорогие друзья!

Этим уроком начинается цикл статей по CSS - каскадным таблицам стилей - и их применению в веб-дизайне. Мы уже знаем, что контент сайта структурируется с помощью HTML: с помощью тегов мы задаём документам и частям контента значение и структуру. Используя эту структуру, мы можем оформить внешний вид страниц и задать расположение элементов на странице с помощью CSS и "привязать" отдельным элементам разметки определённое поведение с помощью языков JavaScript и PHP. Таким образом, если HTML структурирует документ и собщает браузеру, какую функцию он несёт (будет ли это параграф, ссылка или заголовок), то CSS передаёт ему инструкции, как нужно вывести этот элемент: описывает оформление, размешение пробелов и отступов и позиционирование.

Сравните 2 параграфа текста. Первый создан с использованием только HTML, а второй оформлен с помощью CSS. Приёмы, использованные во втором случае, нельзя реализовать только через HTML.

Почему же в настоящее время преимущество в оформлении отдаётся именно CSS?

1. Разграничение кода и оформления - при этом в документе содержатся только теги логического форматирования, а всё оформление (вид, цвет, размер) выносится в таблицу стилей. При этом, если сайт разрабатывается командой, разные люди могут заниматься дизайном и вёрсткой.
2. Разное оформление для разных устройств - через CSS можно задать различное отображение страниц сайта для разных устройст вывода: компьютера, смартфона, печати и т.д. При этом есть возможность исключить определённые объекты для отображения на определённом устройстве, изменить шрифты и их размер для печати и др.
3. Расширенные способы оформления элементов - в отличие от HTML у CSS гораздо больше возможностей для оформления и презентации материалов страниц.
4. Ускорение загрузки сайта - это связано с явлением кэширования, при этом страница со стилями сохраняется в памяти компьютера и при последующем обращении к этому сайту запросы идут именно в кэш, избегая повторной загрузки. Это значительно ускоряет работу устройств.
5. Единое стилевое оформление множества документов - это значит, что задавая один стиль для страниц сайта (расположение и оформление блоков), мы создаём преемственность и даём знать посетителям, что они находятся всё ещё на этом сайте, и облегчаем им восприятие информации. Кроме того, разработка единого стиля существенно облегчает работу разработчикам сайта.
6. Централизованное хранение - как правило, для одного сайта используется одна или несколько таблиц стилей, путь к которым задаётся в начале документа. Поэтому очень удобно изменять стиль элементов в одном файле, а не модифицировать десятки и сотни отдельных страниц.

Теперь перейдём непосредственно к CSS. Как реализуется CSS?

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

Рассмотрим синтаксис CSS и расшифруем, что это всё значит:

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

• селектор определяет элементы HTML, к которым будет применяться это правило. Они определяются реальным названием тега (body, h1, p) или другими средствами (значением класса и др.).
• фигурные скобки заключают в себе пары свойство-значение, которые разделяются между собой точкой с запятой. Все свойства отделяются от соответствующих значений двоеточием.
• свойства определяют, что вы хотите сделать с этими элементами, они очень разнообразны и могут задавать цвет, фон, отступы, шрифты и т.д.
• значения - это значения, которые вы задаёте для каждого свойства выделенного элемента. Свойств могут измеряться в пикселях, em, процентах (или других единицах), обозначаться словами-символами.

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

.lesResult {
border: 1px solid black;
background-color: #ffffe0;
padding: 5px 5px 0 10px;
}

Это правило будет применяться ко всем элементам HTML, которым присвоен класс lesResult (об этом подробно в другом уроке). При этом блок с этим классом будет иметь границу чёрного цвета в 1 пиксель, её стиль - сплошная линия. Фон этого блока имеет код #ffffe0, а содержимое будет отступать от границ блока на указанное в свойстве padding расстояние (о том, как задать отступ, будет написано в отдельном уроке).

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

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

До встречи в следующем уроке!