КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS. Доклад-сообщение содержит 10 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

КАСКАДНЫЕ ТАБЛИЦЫ СТИЛЕЙ CSS

Слайд 2

Описание слайда:

Назначение каскадных таблиц стилей CSS CSS (Cascading Style Sheets) – совокупность правил форматирования элементов Web-страницы Стиль CSS связывается с соответствующим HTML-элементом и указывает браузеру, как воспроизводить этот объект на экране CSS служат для раздельного хранения содержания и формы представления Web-документа CSS сохраняют логическую (содержательную) структуру Web-страницы, но позволяют произвольно форматировать и изменять положение HTML-элементов на странице CSS стили загружаются в память браузера один раз и используются для всех страниц сайта без повторной загрузки (принцип кэширования)

Слайд 3

Описание слайда:

Основные возможности стилей CSS Устанавливать точный размер символов Задавать отступы при размещении текста Устанавливать поля Web-страницы и элементов блочного уровня Устанавливать интервалы между буквами, словами, строками и абзацами текста Задавать точное расположение элементов на странице Изменять форму отображения элементов Воспринимать команды программ для динамического управления представлением содержания Web-страницы

Слайд 4

Описание слайда:

Типы каскадных таблиц стилей CSS Стиль браузера (правила стиля не объявлены) Стиль пользователя (задаются для браузера пользователем) Встроенный стиль (для HTML-элемента) Внедренный стиль (для Web-страницы) Связанный стиль (во внешнем css-файле) Импортированный стиль(во внешнем css-файле) Каскад – это иерархия применения стилей: 1 – 2 – 3 – 4 – 5,6

Слайд 5

Описание слайда:

Правила стиля CSS Таблицы стилей CSS состоят из списков правил стиля для HTML-элементов и именованных селекторов Правило стиля состоит из двух компонент: селектор – элемент, который подвергается форматированию объявление – описание, как должен отображаться элемент в браузере Например: h1 {color: red; font-size: 12px} Правила стилей для именованных селекторов: h1.имя {объявление} – имя селектора для заголовка h1 .имя {объявление} – имя селектора для любых элементов #имя {объявление} – имя селектора для одного элемента

Слайд 6

Описание слайда:

Включение CSS-стилей Подключение CSS-стилей происходит: в HTML-элементах страницы в заголовке страницы ссылкой на внешний текстовый файл Для включения CSS-стиля используются 4 HTML-дескриптора (тега) для модификации всего документа, его части или отдельного HTML-элемента: <span>, <div>, <style>, <link> и 3 атрибута для модификации HTML-элемента, включающего этот атрибут: style, class, id

Слайд 7

Описание слайда:

Использование дескрипторов <span> - для стилизации текста в составе абзаца <div> - для стилизации фрагментов блокового уровня (абзац, несколько абзацев) Для этих дескрипторов необходимо либо непо-средственно задавать стиль через атрибут style: <span style=“CSS-правила”>…</span> либо делать ссылку через атрибуты class или id на стили, определенные в дескрипторах <style> или <link>: <div class=“имя”>…</div>

Слайд 8

Описание слайда:

Использование дескрипторов Дескриптор <style> в заголовке страницы <head> определяет стили отдельных HTML-элементов, а также имена стилей для атрибутов id и class: <style> body {font-size: 24px} #rd {color: #ff0000} .gr {color: #00ff00} </style> Дескриптор <link> ссылается на внешний текстовый файл с расширением *.css <link href=“st1.css” rel=“stylesheet” type=“text/css” />

Слайд 9

Описание слайда:

Основные принципы использования CSS-стилей Группировка: <style> h1, h2, h3 {font-famaly: helvetica} </style> <p style=“font-size:12pt; font-famaly: courier; color: green”> Наследование – дочерние дескрипторы наследуют CSS-стили, определенные для родительских дескрипторов (например, <body> родитель для <p> и т.п.)

Слайд 10

Описание слайда:

Очередность применения CSS-стилей в Web-документе CSS-выражения сортируются по «весу», наибольший вес имеет CSS-выражение, помеченное как !important Более частные CSS-выражения приоритетнее более общих Если CSS-выражения имеют одинаковый вес, то выполняется то, которое было задано последним Если стиль для дочернего элемента не задан, то выполняется стиль родительского элемента Стиль, импортированный через <link>, имеет самый низкий приоритет