Главная / Технология / HTML Каскадные таблицы стилей

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

Лекция 3: Каскадные таблицы стилей Общие сведения о CSS Способы подключение C...
1. Общие сведения о CSS CSS (англ. Cascading Style Sheets) - каскадные таблиц...
История развития CSS декабрь 1996 г. первая версия CSS 1. Определены параметр...
HTML без CSS HTML с CSS Сравнение сайта с CSS и без CSS
Преимущества CSS управление отображением множества документов с помощью одной...
2. Подключение CSS к HTML 1. Внутри каждого тега 2. Внутри HTML-документа 3. ...
3. Правила Правила css селекторов - это набор свойств, которые указывают брау...
3. Виды селекторов Селектор "выбирает" html элементы, для которых будут описы...
Вложенный селектор E F Применяется к любому элементу F, который является пот...
Примеры использования селекторов file.html style.css
Динамические псевдо классы Динамические псевдо-классы так называются потому, ...
Примеры использования псевдо-классов Все не посещенные ссылки Все посещенные ...
Все ссылки внутри абзац при наведении Все поля ввода в любой момент времени, ...
4. Единицы измерения Абсолютные 5 mm – миллиметры 17 cm – сантиметры 0.1968 i...
Таблица предпочтений использования единиц измерения Рекомендуемые Редкие Не р...
5. Специфичность селекторов Если есть два конфликтующих правила CSS относящих...
Специфичность определяет приоритет использования стилей. Чем больше специфичн...
Какого цвета будет текст? Почему?
6. Наследование Наследование является способом распространения значения свойс...
Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, е...
Правила наследования Специфицированное значение. User agent (инструмент польз...
FireBug для FireFox FireBug – дополнение к FireFox которое используется для о...
Просмотр HTML кода Выделяет желаемый элемент. Иерархическая структура выбранн...
Работа с CSS Если страница, на которой вы работаете, содержит несколько табли...
Статистика загрузки страницы Запросы могут быть отфильтрованы в соответствии ...
Какой текст будет красным? У каких объектов будут рамки?
Какого цвета будет текст и фон?
1 из 27

Описание презентации по отдельным слайдам:

№ слайда 1 Лекция 3: Каскадные таблицы стилей Общие сведения о CSS Способы подключение CSS
Описание слайда:

Лекция 3: Каскадные таблицы стилей Общие сведения о CSS Способы подключение CSS к HTML Правила. Виды селекторов Единицы измерения Специфичность селекторов Наследование. Инструменты отладки CSS

№ слайда 2 1. Общие сведения о CSS CSS (англ. Cascading Style Sheets) - каскадные таблицы с
Описание слайда:

1. Общие сведения о CSS CSS (англ. Cascading Style Sheets) - каскадные таблицы стилей предназначенные для задания цветов, шрифтов, расположения и других аспектов представления документа. Основной целью разработки CSS является разделение содержимого (написанного на HTML) и представления документа (написанного на CSS). Возможно задание различных стилей для различных устройств вывода: монитор, принтер, аудио-браузеры.

№ слайда 3 История развития CSS декабрь 1996 г. первая версия CSS 1. Определены параметры ш
Описание слайда:

История развития CSS декабрь 1996 г. первая версия CSS 1. Определены параметры шрифта, текста, выравнивание, позиционирование, отступы. май 1998 г. – CSS 2. Добавлены блочная верстка, различные стили для различных устройств вывода. сентябрь 2009 г. – CSS 2.1. Исправлены ошибки предыдущих версий. CSS 3. Закругленные блоки, переменные, анимация. CSS валидатор http://jigsaw.w3.org/css-validator/

№ слайда 4 HTML без CSS HTML с CSS Сравнение сайта с CSS и без CSS
Описание слайда:

HTML без CSS HTML с CSS Сравнение сайта с CSS и без CSS

№ слайда 5 Преимущества CSS управление отображением множества документов с помощью одной та
Описание слайда:

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

№ слайда 6 2. Подключение CSS к HTML 1. Внутри каждого тега 2. Внутри HTML-документа 3. CSS
Описание слайда:

2. Подключение CSS к HTML 1. Внутри каждого тега 2. Внутри HTML-документа 3. CSS из отдельного файла for_screen.css for_printer.css

№ слайда 7 3. Правила Правила css селекторов - это набор свойств, которые указывают браузер
Описание слайда:

3. Правила Правила css селекторов - это набор свойств, которые указывают браузеру, как нужно отображать html элемент Все CSS документы состоят из селекторов с описанными правилами (объявлениями). Все правила состоят из свойств и значений разделенных двоеточием. Все правила заканчиваются точкой с запятой. Селектор Блок объявлений Правило Правило Свойство Значение Свойство Значение

№ слайда 8 3. Виды селекторов Селектор "выбирает" html элементы, для которых будут описыват
Описание слайда:

3. Виды селекторов Селектор "выбирает" html элементы, для которых будут описываться правила Тип селектора Образец Описание Универсальный селектор * Применяется ко всем элементам Селектор типа Е Применяется к элементу Е Селектор класса .info Применяется к любому элементу, который имеет атрибут class со значением info Id селектор #footer Применяется к любому элементу, который имеет атрибутidсо значениемfooter

№ слайда 9 Вложенный селектор E F Применяется к любому элементу F, который является потомк
Описание слайда:

Вложенный селектор E F Применяется к любому элементу F, который является потомком по отношению к E Селектор атрибута E[атрибут] Применяется к любому элементу E, который имеет атрибут, не зависимо от значения Селектор атрибута E[атрибут="значение"] Применяется к любому элементу E, который имеет атрибут с заданным значением Псевдо-классссылки E:link E:visited Применяется к еще не посещенным ссылкам (:link) и уже посещенным (:visited) Динамические псевдо-классы E:active E:hover E:focus Применяется к E в зависимости от действий пользователя

№ слайда 10 Примеры использования селекторов file.html style.css
Описание слайда:

Примеры использования селекторов file.html style.css

№ слайда 11 Динамические псевдо классы Динамические псевдо-классы так называются потому, что
Описание слайда:

Динамические псевдо классы Динамические псевдо-классы так называются потому, что они фактически не существуют в HTML. Они появляются только тогда, когда пользователь находится на сайте или взаимодействуют с ним. :link относится к ссылкам, которые не были посещены   :visited относится к ссылкам, которые посетили :hover применяется, когда пользователь наводит курсор мыши на элемент, без необходимости активации или клика по нему :active применяется, когда пользователь кликает на элемент :focus применяется, когда элемент находится в фокусе (например курсор в текстовом поле)

№ слайда 12 Примеры использования псевдо-классов Все не посещенные ссылки Все посещенные ссы
Описание слайда:

Примеры использования псевдо-классов Все не посещенные ссылки Все посещенные ссылки, которые имеют класс g Все посещенные ссылки, которые имеют идентификатор g Все абзацы при наведении на них курсора мыши

№ слайда 13 Все ссылки внутри абзац при наведении Все поля ввода в любой момент времени, все
Описание слайда:

Все ссылки внутри абзац при наведении Все поля ввода в любой момент времени, всегда Все поля ввода внутри объекта с идентификатором odin при активации Все поля ссылки внутри ячейки таблицы при активации ссылки

№ слайда 14 4. Единицы измерения Абсолютные 5 mm – миллиметры 17 cm – сантиметры 0.1968 in –
Описание слайда:

4. Единицы измерения Абсолютные 5 mm – миллиметры 17 cm – сантиметры 0.1968 in – дюйм (1 in = 2.54 cm) 14 pt – пункт (1 pt = 1/72 дюйма) 1.1 pc – пика (1 pc = 12 pt) 18 px – пикселы (1 px = 0.25mm) Относительные 1.5 em – обычно 1em = 16px (font-size: 10px;) 1 ex – высота буквы х в любом шрифте 140% - процент берется от размера родителя

№ слайда 15 Таблица предпочтений использования единиц измерения Рекомендуемые Редкие Не реко
Описание слайда:

Таблица предпочтений использования единиц измерения Рекомендуемые Редкие Не рекомендуемые Стили для вывода на экран em, px, % ex pt, cm, mm, in, pc Стили для вывода на печать em, cm, mm, in, pt, pc, % px, ex

№ слайда 16 5. Специфичность селекторов Если есть два конфликтующих правила CSS относящихся
Описание слайда:

5. Специфичность селекторов Если есть два конфликтующих правила CSS относящихся к одному элементу, браузер следует нескольким принципам для определения какое из правил более приоритетное… Для двух одинаковых селекторов, приоритет будет иметь последний

№ слайда 17 Специфичность определяет приоритет использования стилей. Чем больше специфичност
Описание слайда:

Специфичность определяет приоритет использования стилей. Чем больше специфичность тем выше приоритет у стиля. каждый селектор элемента равен 0,0,0,1; селекторы класса равны 0,0,1,0; все селекторы идентификторов равны 0,1,0,0; инлайновые стили (атрибут style) и равны 1,0,0,0. Примеры: p{} 0,0,0,1 div p {} 0,0,0,2 .tree {} 0,0,1,0 div p.tree {} 0,0,1,2 #baobab {} 0,1,0,0 body #content .alternative p {} 0,1,1,2

№ слайда 18 Какого цвета будет текст? Почему?
Описание слайда:

Какого цвета будет текст? Почему?

№ слайда 19 6. Наследование Наследование является способом распространения значения свойств
Описание слайда:

6. Наследование Наследование является способом распространения значения свойств элементов от родителей к детям Родитель Дитя

№ слайда 20 Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, если
Описание слайда:

Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, если вы установите body тегу страницы конкретный шрифт, то шрифт будет наследоваться другими элементами. CSS спецификация определяет, в каких случаях наследование каждого свойства идёт по умолчанию. Когда элемент наследует значение от своего предка, он наследует его вычисленное значение.

№ слайда 21 Правила наследования Специфицированное значение. User agent (инструмент пользова
Описание слайда:

Правила наследования Специфицированное значение. User agent (инструмент пользователя, тот же браузер) определяет, откуда должно использоваться значение для свойства – из таблицы стилей, оно наследуется или же имеет свой первоначальный вид. Вычисленное значение. Специфицированное значение разрешается в вычисленное значение и существует, даже когда свойство не применяется. Документ не должен верстаться, чтобы данное значение было определено. Используемое значение. Используемое значение берёт расчетное значение и разрешает с ним все зависимости, которые могут быть рассчитаны только после Действительное значение. Это значение используется для окончательного рендеринга, после применения каких-либо приближений (например, преобразование десятичных чисел в целое).

№ слайда 22 FireBug для FireFox FireBug – дополнение к FireFox которое используется для отла
Описание слайда:

FireBug для FireFox FireBug – дополнение к FireFox которое используется для отладки при верстке страниц и программирование на JavaScript. Для работы с FireBug необходимо установить дополнение и при необходимости вызвать его клавишей F12.

№ слайда 23 Просмотр HTML кода Выделяет желаемый элемент. Иерархическая структура выбранного
Описание слайда:

Просмотр HTML кода Выделяет желаемый элемент. Иерархическая структура выбранного элемента. Перемещения по HTML документу, быстрого изменения кода. Вычислен стиль текущей страницы или отображаемого элемента. Исследовать габариты элемента (размер, отступы, границы). Показывает список всех методов и свойств выбранного элемента.

№ слайда 24 Работа с CSS Если страница, на которой вы работаете, содержит несколько таблиц с
Описание слайда:

Работа с CSS Если страница, на которой вы работаете, содержит несколько таблиц стилей, тогда мы можем выбрать нужную таблицу стилей. Основная область где показан CSS код. Легкость изменения CSS свойства. Легко запретить CSS правило.

№ слайда 25 Статистика загрузки страницы Запросы могут быть отфильтрованы в соответствии с и
Описание слайда:

Статистика загрузки страницы Запросы могут быть отфильтрованы в соответствии с их типом. Каждый запрос показан с учетом объема, времени загрузки, кешировния. Каждый запрос может быть показан более детально.

№ слайда 26 Какой текст будет красным? У каких объектов будут рамки?
Описание слайда:

Какой текст будет красным? У каких объектов будут рамки?

№ слайда 27 Какого цвета будет текст и фон?
Описание слайда:

Какого цвета будет текст и фон?

HTML Каскадные таблицы стилей
  • Технология
Описание:

CSS (англ. CascadingStyleSheets) - каскадные таблицы стилей предназначенные для задания цветов, шрифтов, расположения и других аспектов представления документа.

Основной целью разработки CSS является разделение содержимого (написанного на HTML) и представления документа (написанного на CSS).

Возможно задание различных стилей для различных устройств вывода: монитор, принтер, аудио-браузеры.

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

гибка смена дизайна всего сайта

Автор Назаренко Игорь Павлович
Дата добавления 25.12.2014
Раздел Технология
Подраздел
Просмотров 532
Номер материала 12038
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓