HTML
<<  Вставка изображений на сайт HTML  >>
Каскадные таблицы стилей
Каскадные таблицы стилей
Технология описания внешнего вида документа
Технология описания внешнего вида документа
Назначение каскадных таблиц стилей
Назначение каскадных таблиц стилей
Типы каскадных страниц
Типы каскадных страниц
Встроенный стиль
Встроенный стиль
Внедренный стиль
Внедренный стиль
Связанный стиль
Связанный стиль
Создание файла СSS
Создание файла СSS
Создайте в блокноте файл CSS
Создайте в блокноте файл CSS
Свойства цвета и фона
Свойства цвета и фона
Задайте свойства страницы
Задайте свойства страницы
Свойства стиля оформления полей
Свойства стиля оформления полей
Определить свойства тегов
Определить свойства тегов
Ссылки
Ссылки
Стратегии оформления
Стратегии оформления
Презентация «Каскадные таблицы стилей». Размер 1566 КБ. Автор: Дарья Гвасалия.

Загрузка...

Каскадные таблицы стилей

содержание презентации «Каскадные таблицы стилей.ppt»
СлайдТекст
1 Каскадные таблицы стилей

Каскадные таблицы стилей

Каскадные таблицы стилей. Часть 1. Гвасалия Д.А.

2 Технология описания внешнего вида документа

Технология описания внешнего вида документа

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

3 Назначение каскадных таблиц стилей

Назначение каскадных таблиц стилей

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

4 Типы каскадных страниц

Типы каскадных страниц

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

5 Встроенный стиль

Встроенный стиль

Встроенный стиль. Каждый тег может иметь параметр STYLE который определяет свойства тега. Например: <P STYLE=“font-size:48pt; color : yellow”> Пример </P> В данном случае текст только одного абзаца будет желтым и 48 кегля. Такой способ задает максимальный приоритет значениям свойств тега по отношению к другим способам определения стиля. Недостаток такого способа трудоемкость создания и коррекции документа, целесообразно использовать только для ограниченного числа элементов.

6 Внедренный стиль

Внедренный стиль

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

7 Связанный стиль

Связанный стиль

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

8 Создание файла СSS

Создание файла СSS

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

9 Создайте в блокноте файл CSS

Создайте в блокноте файл CSS

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

10 Свойства цвета и фона

Свойства цвета и фона

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

11 Задайте свойства страницы

Задайте свойства страницы

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

12 Свойства стиля оформления полей

Свойства стиля оформления полей

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

13 Определить свойства тегов

Определить свойства тегов

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

14 Ссылки

Ссылки

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

15 Стратегии оформления

Стратегии оформления

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

«Каскадные таблицы стилей»
Сайт

5informatika.net

115 тем
5informatika.net > HTML > Каскадные таблицы стилей.ppt