Гвасалия Д.А.. Определение Каскадные таблицы стилей (Cascade Style Sheets, CSS) Каскадные таблицы стилей (Cascade Style Sheets, CSS) – технология описания. - презентация

1 Гвасалия Д.А.

2 Определение Каскадные таблицы стилей (Cascade Style Sheets, CSS) Каскадные таблицы стилей (Cascade Style Sheets, CSS) – технология описания внешнего вида документа, написанного языком разметки. CSS используется преимущественно для оформления HTML- и XHTML-документов

3 Назначение каскадных таблиц стилей Позволяют задать единый стиль оформления разных страниц документа и быстро поменять его, путем изменения нужного определения в таблице стилей. В сочетании с программами сценариев (JavaScript или VBScript) позволяют динамически изменять стиль отображения документа в окне браузера в зависимости от каких-либо действий пользователя (щелчок мышью, перемещение указателя и т.п.)

4 Типы каскадных страниц Встроенный стиль Внедренный стиль Связанный стильИмпортирован- ный стиль стиль, который определяется непосредствен- но в элементе и применяется с использованием атрибута STYLE. Такой подход полезен только сели стиль, единовременно применяется элементу. этот стиль управляет представле- нием одного документа и размещается внутри элемента STYLE HTML- документа это таблица стилей, которая связана с HTML-документом при помощи тега LINK, размещенного в разделе документа HEAD. Любой документ, связанный с данным типом таблицы стилей, получает все стили, определенные в ней, в чем и заключается преимущество управления языка CSS. этот тип похож на связанные стили, однако позволяет импортировать стили в связанную таблицу стилей или непосредственно в документ. Он полезен для реализации обходных путей и для управления множеством документов.

5 Встроенный стиль Каждый тег может иметь параметр STYLE который определяет свойства тега. Например: Пример В данном случае текст только одного абзаца будет желтым и 48 кегля. Такой способ задает максимальный приоритет значениям свойств тега по отношению к другим способам определения стиля. Недостаток такого способа трудоемкость создания и коррекции документа, целесообразно использовать только для ограниченного числа элементов.

6 Внедренный стиль Таблица стилей непосредственно размешается в разделе HEAD документа, внутри блока, отмеченного метками …. Например: P {font-size : 48pt; color : red; background-color : blue }

7 Связанный стиль. Внешняя таблица CSS отдельном текстовом файле с расширением CSS Таблица стилей может находится в отдельном текстовом файле с расширением CSS (желательно, чтобы он находился в той же папке что и web-документ). Тогда таблица стилей подключается с помощью тега в разделе : Параметра href определяем путь к файлу CSS, если таблица находится в той же папке что и web- документ, то это просто href="styles.css", где styles.css – имя файла CSS

8 Создание файла СSS Документ CSS - этот отдельный документ, который создается с помощью текстового редактора и сохраняется как стандартный текстовый файл, с расширением файла.css (например Styles.css). В текстовый документ вводится информация следующим образом: Имя тега, свойства которого надо изменить : Свойство : значение свойства ; Например: body {background-color: silver;} Определяет серебристый фон страницы

9 Задание 1 Создайте в блокноте файл CSS Присоедините его в web-странице созданной в предыдущем задании. Задайте в таблице стилей (в файле СSS) цвет фона страницы серебристый Посмотрите получившийся результат в браузере.

10 Свойства цвета и фона обозначениеописаниевозможные значения color цвет тексталюбое соответствующее стандарту значение цвета. background-color цвет фоналюбое соответствующее стандарту значение цвета. background-image рисунок в качестве фонауказывается имя файла background-image: url(имя файла) background-repeat повторяемость для фона заданного изображением по горизонтали: repeat-x ; по вертикали: repeat-y не повторяется: no-repeat по умолчанию повторение и по горизонтали и по вертикали. background- attachment неподвижность фона при прокрутке fixed background- position положение изображения относительно верхнего левого угла элемента задается в процентах от размера элемента (первое число – смещение по горизонтали, второе по вертикали)

11 Задание 2 Задайте свойства страницы: 1.Выберите фоновый рисунок, определите повторение рисунка по вертикали. 2.Укажите цвет фона страницы подходящего к фоновому рисунку.

12 Свойства стиля оформления полей Существуют свойства, которые определяют величину свободного пространства между внешними границами элемента и любым окружающим содержимым. Например, при использовании в теге они задают величину свободного пространства вокруг выводимого содержимого страницы. margin-top margin-right margin-bottom margin-left Например, задает нулевое расстояние от верхней границы до тела документа: body {margin-top:0em} Стили полей применимы для многих тегов XHTML, а не только для тега.

13 Задание 3 Определить свойства тегов так чтобы получился следующий результат:

14 Ссылки: 1.Каскадная таблица стилей. (Wikipedia)Wikipedia 2.Людмила Бандурина. Каскадные таблицы стилей, или CSS для начинающих (практикум "правильного" HTML). 10 (49) октябрь 2000 Журнал "Мир Internet" читать. читать.

15 Стратегии оформления Используйте встроенную таблицу стилей как основной метод оформления. Это позволит объединить стили в одном разделе страницы, облегчая поиск и изменение стилей, а также преобразование встроенных стилей во внешние таблицы стилей для приложений уровня сайта. Во встроенной таблице стилей используйте простые селекторные теги для применения общего оформления уровня страницы ко всем тегам одного типа. Определите классы стилей, чтобы выполнять оформление через теги общего назначения, - например, теги и. Используйте также классы стилей, когда два или несколько тегов требуют форматирования, отличающегося или дополняющего то, что задано их простыми селекторами тегов. Для единичных тегов, требующих уникального оформления, присвойте тегу значение id и задавайте его оформление с помощью селектора ID во встроенной таблице стилей. Используйте линейные таблицы стилей там, где требуется одноразовое оформление и удобно переопределить оформление с помощью таблицы стилей, закодированной внутри тега. Слишком большое количество линейных таблиц стилей трудно отслеживать в случае изменений; к тому же, одинаковые линейные стили необходимо изменять в нескольких местах, что ведет к возможным пропускам и ошибкам.