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

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

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

3 Основные параметры стилей 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).

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

5 Основные параметры стилей 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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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