4.3 Каскадные таблицы стилей. Каскадные таблицы стилей (Cascading Style Sheets, CSS) способ оформления страниц HTML, позволяющий с помощью параметров.

Презентация:



Advertisements
Похожие презентации
Таблицы стилей Язык HTML. Каскадные таблицы стилей CSS CSS (от английского Cascading Style Sheets). Таблицы стилей позволяют разделить смысловое содержимое.
Advertisements

Введение в CSS. Базовый синтаксис CSS селектор { свойство1: значение; свойство2: значение; } селектор некоторое имя стиля, для которого добавляются параметры.
CSS Cascading Style Sheets. Структура css селектор { свойство1: значение1; свойство2: значение2; }
Каскадные таблицы стилей CSS. Стиль – набор параметров, задающий внешнее представление объекта. Таблица стилей – это инструмент языка html, предоставляющий.
CSS Cascading Style Sheet. CSS это правила как должен выглядеть HTML. Существуют три типа правил CSS 1. HTML селектор - текстовая часть HTML тэга. P селектор.
Работа с текстом в HTML. Размер и форма шрифта Тег - определяет выводимый шрифт, его размер и цвет. Атрибуты тега: FACE – определяет гарнитуры шрифтов.
Форматирование текста на Web- странице …- размер шрифта заголовков - шрифт текста - шрифт текста - горизонтальная линия - горизонтальная линия - разделение.
HTML Язык гипертекстовой разметки страниц. Web-страница Web-страница – это документ в формате HTML, содержащий текст и специальные инструкции – дескрипторы.
Стили в HTML Лекция по курсу «Компьютерный дизайн»
Основы HTML и CSS Каскадные таблицы стилей (CSS).
Лекция 9 Тема «Каскадные таблицы стилей » Преподаватель: Халелова Е. Н.
Каскадные таблицы стилей CSS Блоковая модель. Синтаксис CSS.
1 Cascading Style Sheets каскадные таблицы стилей 2.
Каскадные таблицы стилей Блочные и строковые элементы.
Cascading Style Sheets каскадные таблицы стилей CSS-код – это список инструкций для браузера, – как и где отображать элементы веб-страницы, написанный.
Автор: Пилишкина Надежда Васильевна. HTML (Hyper Text Markup Language) «Язык гипертекстовой разметки» «Многомерный» текстовый документ, в котором установлены.
(HyperText Markup Language) – язык гипертекстовой разметки.
CSS Cascading Style Sheets. Структура css селектор { свойство1: значение1; свойство2: значение2; }
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
Каскадные таблицы стилей Назначение и применение CSS.
Транксрипт:

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

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

Основные параметры стилей border - рамка вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (обычно пикселах: 1px), стиль границы (сплошная solid, точечная dotted, штриховая dashed, отсутствующая none), цвет границы (название цвета или RGB-код цвета). border - рамка вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (обычно пикселах: 1px), стиль границы (сплошная solid, точечная dotted, штриховая dashed, отсутствующая none), цвет границы (название цвета или RGB-код цвета). color - цвет текста. Возможные значения: название цвета (black, red, green, yellow) или RGB-код цвета (#00fac3). color - цвет текста. Возможные значения: название цвета (black, red, green, yellow) или RGB-код цвета (#00fac3).

Основные параметры стилей display - показ содержимого тега. Возможные значения: inline (содержимое тега отображается); none (содержимое тега не отображается и место на экране не резервируется). display - показ содержимого тега. Возможные значения: inline (содержимое тега отображается); none (содержимое тега не отображается и место на экране не резервируется). font-family - шрифт текста. Возможные значения: название шрифта (Arial, Times New Roman) или название семейства шрифтов (Times, Courier). font-family - шрифт текста. Возможные значения: название шрифта (Arial, Times New Roman) или название семейства шрифтов (Times, Courier).

Основные параметры стилей font-size - размер шрифта. Возможные значения: размер шрифта в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px), в абсолютных единицах (small, medium, large), в относительных единицах (smaller, larger). font-size - размер шрифта. Возможные значения: размер шрифта в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px), в абсолютных единицах (small, medium, large), в относительных единицах (smaller, larger). font-weight - полужирное начертание шрифта. Возможные значения: normal или bold. font-weight - полужирное начертание шрифта. Возможные значения: normal или bold.

Основные параметры стилей font-style - курсивное начертание шрифта. Возможные значения: normal или italic. font-style - курсивное начертание шрифта. Возможные значения: normal или italic. left - отступ слева содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px). left - отступ слева содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px).

Основные параметры стилей margin - граница вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px). margin - граница вокруг содержимого тега. Возможные значения: ширина границы в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px). padding - отступ между содержимым тега и рамкой вокруг содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px). padding - отступ между содержимым тега и рамкой вокруг содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px).

Основные параметры стилей position - тип позиционирования содержимого тега. Возможные значения: absolute (абсолютное позиционирование на экране с использованием параметров стиля top и left), relative (относительное позиционирование согласно обычным правилам HTML), static (какое-либо специальное позиционирование отсутствует и содержимое тега размещается согласно обычным правилам HTML). position - тип позиционирования содержимого тега. Возможные значения: absolute (абсолютное позиционирование на экране с использованием параметров стиля top и left), relative (относительное позиционирование согласно обычным правилам HTML), static (какое-либо специальное позиционирование отсутствует и содержимое тега размещается согласно обычным правилам HTML).

Основные параметры стилей text-align - выравнивание абзаца текста. Возможные значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине). text-align - выравнивание абзаца текста. Возможные значения: left (по левому краю), right (по правому краю), center (по центру), justify (по ширине). top - отступ сверху содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px). top - отступ сверху содержимого тега. Возможные значения: отступ в стандартных единицах (пунктах: 12pt, миллиметрах: 12mm, пикселах: 12px).

Способы определения стилей внешние таблицы стилей для нескольких страниц; внешние таблицы стилей для нескольких страниц; встраивание таблиц стилей в страницу HTML; встраивание таблиц стилей в страницу HTML; встраивание стилей в теги HTML; встраивание стилей в теги HTML;

Внешние таблицы стилей для нескольких страниц определение стилей размещается в отдельном текстовом файле с расширением css; определение стилей размещается в отдельном текстовом файле с расширением css; применяется для стилей, используемых на нескольких страницах. применяется для стилей, используемых на нескольких страницах.

Способы определения стиля 1. указав параметры стиля для требуемого тега; тег {параметр: значение; параметр: значение;}

Способы определения стиля 2. указав параметры стиля для стилевого класса.класс {параметр: значение; параметр: значение;}.класс {параметр: значение; параметр: значение;}

Способы определения стиля 3. указав параметры стиля для стилевого класса #идентификатор {параметр: значение; параметр: значение;} #идентификатор {параметр: значение; параметр: значение;}

Подключение стилевого файла

Применение стиля если параметры стиля были указаны для определенного тега, то ничего делать не нужно; если параметры стиля были указаны для определенного тега, то ничего делать не нужно; если параметры стиля были указаны для стилевого класса, то если параметры стиля были указаны для стилевого класса, то если параметры стиля были указаны для идентификатора, то если параметры стиля были указаны для идентификатора, то

Встраивание таблиц стилей в страницу HTML определение стилей прописывается в заголовке страницы в парном теге ; определение стилей прописывается в заголовке страницы в парном теге ; применяется для стилей, используемых только на данной странице. применяется для стилей, используемых только на данной странице.

Встраивание таблиц стилей в страницу HTML определение стилей определение стилей

Встраивание стилей в теги HTML определение стиля прописывается в атрибуте style какого-либо тега; определение стиля прописывается в атрибуте style какого-либо тега; применяется для стилей, используемых только для данного тега на странице. применяется для стилей, используемых только для данного тега на странице.

Встраивание стилей в теги HTML