CSS Профессор Хомоненко А. Д. ПГУПС, 1. 12.

CSS Профессор Хомоненко А.Д. ПГУПС, 1.12.2010

Вопросы: Общие сведения о CSS Состав таблицы стилей Пример таблицы стилей CSS-вёрстка CSS Framework Включение в HTML Слои

Литература: Кристофер Шмитт. CSS. Рецепты программирования = CSS. Cookbook. — СПб.: БХВ-Петербург, 2007. — 592 с. . Энди Бадд, Камерон Молл, Саймон Коллизон. Мастерская CSS: профессиональное применение Web-стандартов = CSS Mastery: Advanced Web Standards Solutions. — М.: Вильямс, 2007. — 272 с. http://ru.html.net/tutorials/css/

Общие сведения о CSS CSS (Cascading Style Sheets −каскадные таблицы стилей) — это язык стилей, определяющий отображение HTML-документов. CSS работает с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов и др. HTML служит для структурирования содержимого страницы. CSS используется для форматирования этого структурированного содержимого.

Общие сведения о CSS CSS создан для предоставления web-дизайнерам возможностей точного дизайна, поддерживаемых всеми браузерами. Достоинства CSS: управление отображением множества документов с помощью одной таблицы стилей; точный контроль над внешним видом страниц; различные представления для разных носителей информации (экран, печать, и т. д.); проработанная техника дизайна.

Общие сведения о CSS CSS может быть взята из различных источников: Авторские стили задают в виде: Внешних таблиц стилей, то есть файла .css, на который делается ссылка в документе. Встроенных стилей — блоков CSS внутри HTML-документа. Inline-стилей, когда в HTML-документе стиль для элемента указывается в его атрибуте style.

Общие сведения о CSS Пользовательские стили: Локальный CSS-файл, указанный пользователем в настройках браузера, переопределяющий авторские стили, и применяемый ко всем документам. Стиль браузера: Стандартный стиль, используемый браузером по умолчанию для представления элементов.

Состав таблицы стилей Таблица стилей состоит из набора правил. Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений обрамляется фигурными скобками, и состоит из набора свойств и их значений: селектор, селектор { свойство: значение; свойство: значение; }

Состав таблицы стилей Стандарт CSS определяет приоритеты правил от большего к меньшему: свойство задано при помощи !important; стиль прописан напрямую в теге; количество идентификаторов (#id) в селекторе (чем больше, тем больше приоритет); количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе; количество имён тегов в селекторе. Свойство, указанное позже, имеет приоритет.

Пример таблицы стилей p { font-family: "Garamond", serif; } h2 { font-size: 110 %; color: red; background: white; }

Пример таблицы стилей .note { color: red; background: yellow; font-weight: bold; } p#paragraph1 { margin: 0; } a:hover { text-decoration: none; }

Пример таблицы стилей #news p { color: blue; } Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p. В первых двух правилах HTML-элементам p (абзацу) и h2 (заголовку второго уровня) назначаются стили. Абзацы будут отображаться шрифтом Garamond, или, если шрифт недоступен, другим шрифтом с засечками («serif»).

Верстка CSS Достоинства верстки CSS: лёгкое применение единого стиля оформления для множества документов; быстрое изменение этого оформления; несколько дизайнов страницы для разных устройств просмотра; уменьшение времени загрузки страниц за счет переноса правил представления данных в CSS-файл; простота изменения дизайна.

Верстка CSS Недостатки: Различное отображение вёрстки в различных браузерах, которые по разному интерпретируют одни и те же данные CSS. Часто встречающаяся необходимость на практике исправлять не только один CSS-файл, но и теги HTML и код PHP, которые сложным и ненаглядным способом связаны с селекторами CSS.

Фрэймворк CSS CSS Framework (Web design framework) — заранее подготовленная css-библиотека, созданная для упрощения работы верстальщика, быстроты разработки и исключения ошибок вёрстки (проблемы совместимости браузеров и т. д.). CSS-фреймвёрки, обычно имеющие вид внешнего .css-файла, «подключаются» к проекту (добавляются в заголовок веб-страницы), позволяя не искушенному в вёрстке программисту правильно создать xhtml-макет.

Включение в HTML Способы включения CSS в HTML : Ссылка в HTML, а сами CSS в файле: Подключаем CSS в файле:

body { color: red; } Непосредственно" src="https://present5.com/customparser/814836_174118588 --- 11_css.ppt/slide_17.jpg" alt=">Включение HTML Непосредственно в HTML-документе: Непосредственно" /> Включение HTML Непосредственно в HTML-документе: Непосредственно в элемент:

Рассказ о вреде курения

" src="https://present5.com/customparser/814836_174118588 --- 11_css.ppt/slide_18.jpg" alt=">Включение в XML Способ включения CSS в XML : " /> Включение в XML Способ включения CSS в XML :

Слои CSS оперирует в трёх измерениях - высота, ширина и глубина. Слои/layers позволяют упорядочивать элементы так, чтобы они перекрывались. Для этого можно присвоить каждому элементу номер (z-index). Элемент с бóльшим номером перекрывает элемент с меньшим номером.

Слои

Слои. Код примера #ten_of_diamonds { position: absolute; left: 100px; top: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; top: 115px; z-index: 2; }

Слои. Код примера #queen_of_diamonds { position: absolute; left: 130px; top: 130px; z-index: 3; } #king_of_diamonds { position: absolute; left: 145px; top: 145px; z-index: 4; }

Слои. Код примера #ace_of_diamonds { position: absolute; left: 160px; top: 160px; z-index: 5; }

Спасибо за внимание ! ПГУПС, каф. «ИВС» Зав. кафедрой Хомоненко Анатолий Дмитриевич [email protected] 2010 г.