Каскадные таблицы стилей. Назначение и синтаксис - презентация, доклад, проект скачать

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

Каскадные таблицы стилей. Назначение и синтаксис, слайд №1

Каскадные таблицы стилей. Назначение и синтаксис, слайд №2

Каскадные таблицы стилей. Назначение и синтаксис, слайд №3

Каскадные таблицы стилей. Назначение и синтаксис, слайд №4

Каскадные таблицы стилей. Назначение и синтаксис, слайд №5

Каскадные таблицы стилей. Назначение и синтаксис, слайд №6

Каскадные таблицы стилей. Назначение и синтаксис, слайд №7

Каскадные таблицы стилей. Назначение и синтаксис, слайд №8

Каскадные таблицы стилей. Назначение и синтаксис, слайд №9

Каскадные таблицы стилей. Назначение и синтаксис, слайд №10

Каскадные таблицы стилей. Назначение и синтаксис, слайд №11

Каскадные таблицы стилей. Назначение и синтаксис, слайд №12

Каскадные таблицы стилей. Назначение и синтаксис, слайд №13

Каскадные таблицы стилей. Назначение и синтаксис, слайд №14

Каскадные таблицы стилей. Назначение и синтаксис, слайд №15

Каскадные таблицы стилей. Назначение и синтаксис, слайд №16

Каскадные таблицы стилей. Назначение и синтаксис, слайд №17

Каскадные таблицы стилей. Назначение и синтаксис, слайд №18

Каскадные таблицы стилей. Назначение и синтаксис, слайд №19

Каскадные таблицы стилей. Назначение и синтаксис, слайд №20

Каскадные таблицы стилей. Назначение и синтаксис, слайд №21

Каскадные таблицы стилей. Назначение и синтаксис, слайд №22

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Каскадные таблицы стилей. Назначение и синтаксис. Доклад-сообщение содержит 22 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

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

Слайд 1

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

Каскадные таблицы стилей: назначение и синтаксис Краткий обзор

Слайд 2

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

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

Слайд 3

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

Проблемы стилевого оформления HTML Смешение логической и визуальной разметки Слабые выразительные средства Трудоемкость правки

Слайд 4

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

История CSS 1967 – идея использования языков разметки для компьютерной обработки текстов 1969 – применение языков разметки с отделяемыми стилями Конец 1970-х – подгружаемые стили ТЕХ 1994 год - Хокон Виум Ли в предложил термин и основные идеи «каскадных таблиц стилей» 1996 года - Рекомендация W3C CSS1 1998 год – рекомендация W3C CSS2 2011 год – ревизия CSS2.1

Слайд 5

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

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

Слайд 6

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

Цель создания CSS CSS используется создателями веб-страниц для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом. Кроме того, CSS (2.0+) позволяет представлять один и тот же документ в различных стилях или методах вывода, таких как экранное представление, печатное представление, чтение голосом (специальным голосовым браузером или программой чтения с экрана), или при выводе устройствами, использующими шрифт Брайля.

Слайд 7

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

Способы применения CSS Определение стиля в элементе разметки - внутренние стили (inline styles) Размещение описания стиля в заголовке документа – стили уровня документа (document style sheets) Внешние таблицы стилей (external style sheets) Связывание внешних стилей Импорт внешних стилей

Слайд 8

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

Способы применения CSS: внутренние стили Назначают стиль отдельному элементу на странице. Указываются как значение атрибута style, который есть у всех HTML элементов тела документа. Внутри атрибута style можно написать несколько CSS объявлений (элементарных указаний оформления), разделённых точкой с запятой. Внимание: избегайте использования вышеописанного способа. Встроенные стили смешивают логическую и визуальную разметки!

Слайд 9

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

Пример внутренних CSS стилей Оформление абзаца средствами HTML: Этот абзац будет выведен в окне браузера наклонным шрифтом голубого цвета. Он также будет выровнен по ширине. И оформление средствами CSS: А этот абзац будет выведен в окне браузера наклонным шрифтом голубого цвета. Он также будет выровнен по ширине за исключением последней строки, которая будет выровнена по центру.

Слайд 10

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

Способы применения CSS: стили уровня документа Располагаются непосредственно в HTML-документе и применяются ко всему документу и только к нему. Размещаются между открывающим и закрывающим тегами элемента style: Сам элемент style может находиться в любой части документа, но обычно его размещают внутри элемента head

Слайд 11

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

Пример стилей уровня документа p {font-weight: bold; color: red} Этот абзац будет отображен полужирным шрифтом красного цвета. К заголовоку стиль применен не будет И этот абзац также будет отображен полужирным шрифтом красного цвета.

Слайд 12

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

Способы применения CSS: внешние стили Стили размещаются во внешнем файле с расширением css. Файл css не должен содержать ничего, кроме CSS-инструкций. Внешние таблицы стилей применяются либо связыванием либо импортированием. Внешний файл со стилями удобен тем, что одни и те же стили можно применять ко множеству документов на сайте — в каждом из них достаточно лишь вписать одну строку с указанием на внешний файл.

Слайд 13

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

Способы применения CSS: связывание внешних стилей Связывание – основной метод применения внешних стилей, связывание осуществляется с помощью элемента link, который должен располагаться внутри элемента head и нигде более. Связанные стили подгружаются браузером при обработке link.

Слайд 14

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

Пример связывания стилевых таблиц Определяем стиль в файле mystyle.css: p {align: right; color: green} Используем внешний стиль в файлах html: Этот абзац будет отображен шрифтом зеленого цвета и выровнен по правому краю.

Слайд 15

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

Способы применения CSS: импорт внешних стилей Импортирование – метод применения внешних стилей, импорт осуществляется с помощью директивы @import элемента style. Правила @import комментируются в HTML Правила @import могут также находится во внешней таблице стиле. Импортируемые правила должны предшествовать всем явно определяемым как в элементе style так и во внешней таблице.

Слайд 16

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

Пример импортирования стилевых таблиц Импортируем стиль в файле mystyle.css из файла yourstyle.css: @import url("yourstyle.css“); Импортируем таблицу внешних стилей в файл html:

Слайд 17

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

Стиль (стилевое правило) Синтаксис стилевого правила: {} Селектор тегов задает область применения стилевого правила Строка объявлений определяет значения свойств стиля Комментирование: /* комментарий */

Слайд 18

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

CSS: Каскадность стилей Пусть mystyle.css содержит: p {align: right; font-weight: normal; color: green} ------------------------- p {font-weight: bold; color: red} Этот абзац будет выведен курсивом голубого цвета в соответствии со встроенным стилем. Он будет также набран полужирным шрифтов в соответствии со стилем документа и выровнен по правому краю в соответствии с примененным внешним стилем. Цвета шрифта задаваемые внешним стилем и стилем документа не будут применены из-за перекрытия встроенным.

Слайд 19

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

Наследование стилей div.note {color: red} p {font-style: italic} --- В этом абзаце будет применен курсив и зеленый цвет букв.

Слайд 20

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

Допустимые значения селектора тегов Одинарный селектор: p / h1 / img Множественный селектор: h1, h2, h3, h4, h5, h6 Контекстный селектор: ol li / p strong Множественный селектор с контекстными элементами h1, p strong

Слайд 21

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

Объявления и значения свойств Строка стилевого правила состоит из пар объявлений свойство - значение {property1: value1; property2: value2} {color: red; font-size: large} Множество свойств определяется стандартом CSS в ряде групп Шрифты Текст Цвета и фон Нумерация и списки Блоки … Множество допустимых значений свойства определяется свойством и может быть следующих типов: ключевое слово длина процентная величина URL (ссылка) цвет списки значений

Слайд 22

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

Типы значений свойств ключевое слово left / right / normal / italic длина (размер) пикселы (px) 10px сантиметры (cm) и милиметры (mm): 1.5cm дюймы (in), цицеро (pc), пункты (pt): 1in относительные величины шрифта (em) и (ex) 2em процентная величина % 200% URL (ссылка на файл) url(file_name) : url("bg_image.gif") цвет предопределенные значения: white | red | green | blue | black и другие… значение в шестнадцатиричной системе счисления #FFFFFF - #000000 тройка значений красный-зеленый-синий rgb (255,255,255)