CSS-технологии
УРОК «CSS: структура и код. Преимущества использования»
Дорогие друзья!
Этим уроком начинается цикл статей по CSS - каскадным таблицам стилей - и их применению в
веб-дизайне. Мы уже знаем, что контент сайта структурируется с помощью HTML: с помощью тегов мы задаём
документам и частям контента значение и структуру. Используя эту структуру, мы можем оформить внешний вид
страниц и задать расположение элементов на странице с помощью CSS и "привязать" отдельным элементам
разметки определённое поведение с помощью языков JavaScript и PHP. Таким образом, если HTML структурирует
документ и собщает браузеру, какую функцию он несёт (будет ли это параграф, ссылка или заголовок), то CSS
передаёт ему инструкции, как нужно вывести этот элемент: описывает оформление, размешение пробелов и
отступов и позиционирование.
Сравните 2 параграфа текста. Первый создан с использованием только HTML, а второй оформлен с помощью CSS.
Приёмы, использованные во втором случае, нельзя реализовать только через HTML.
Этот текст оформлен с использованием HTML. |
А этот текст оформлен с использованием CSS. |
Почему же в настоящее время преимущество в оформлении отдаётся именно CSS?
- Разграничение кода и оформления - при этом в документе содержатся только теги логического форматирования,
а всё оформление (вид, цвет, размер) выносится в таблицу стилей. При этом, если сайт разрабатывается командой,
разные люди могут заниматься дизайном и вёрсткой.
- Разное оформление для разных устройств - через CSS можно задать различное отображение страниц
сайта для разных устройст вывода: компьютера, смартфона, печати и т.д. При этом есть возможность исключить
определённые объекты для отображения на определённом устройстве, изменить шрифты и их размер для печати и др.
- Расширенные способы оформления элементов - в отличие от HTML у CSS гораздо больше возможностей для оформления
и презентации материалов страниц.
- Ускорение загрузки сайта - это связано с явлением кэширования, при этом страница со стилями сохраняется в памяти
компьютера и при последующем обращении к этому сайту запросы идут именно в кэш, избегая повторной загрузки. Это
значительно ускоряет работу устройств.
- Единое стилевое оформление множества документов - это значит, что задавая один стиль для страниц
сайта (расположение и оформление блоков), мы создаём преемственность и даём знать посетителям, что они
находятся всё ещё на этом сайте, и облегчаем им восприятие информации. Кроме того, разработка единого
стиля существенно облегчает работу разработчикам сайта.
- Централизованное хранение - как правило, для одного сайта используется одна или несколько таблиц стилей,
путь к которым задаётся в начале документа. Поэтому очень удобно изменять стиль элементов в одном файле,
а не модифицировать десятки и сотни отдельных страниц.
Теперь перейдём непосредственно к 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, чтобы, например, проверить, как будет выглядеть элемент без
их использования.
До встречи в следующем уроке!