🗊Презентация Верстка web-страниц. Стили

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Верстка web-страниц. Стили, слайд №1Верстка web-страниц. Стили, слайд №2Верстка web-страниц. Стили, слайд №3Верстка web-страниц. Стили, слайд №4Верстка web-страниц. Стили, слайд №5Верстка web-страниц. Стили, слайд №6Верстка web-страниц. Стили, слайд №7Верстка web-страниц. Стили, слайд №8Верстка web-страниц. Стили, слайд №9Верстка web-страниц. Стили, слайд №10Верстка web-страниц. Стили, слайд №11Верстка web-страниц. Стили, слайд №12Верстка web-страниц. Стили, слайд №13Верстка web-страниц. Стили, слайд №14Верстка web-страниц. Стили, слайд №15Верстка web-страниц. Стили, слайд №16Верстка web-страниц. Стили, слайд №17Верстка web-страниц. Стили, слайд №18Верстка web-страниц. Стили, слайд №19Верстка web-страниц. Стили, слайд №20Верстка web-страниц. Стили, слайд №21Верстка web-страниц. Стили, слайд №22Верстка web-страниц. Стили, слайд №23Верстка web-страниц. Стили, слайд №24Верстка web-страниц. Стили, слайд №25Верстка web-страниц. Стили, слайд №26Верстка web-страниц. Стили, слайд №27Верстка web-страниц. Стили, слайд №28Верстка web-страниц. Стили, слайд №29Верстка web-страниц. Стили, слайд №30Верстка web-страниц. Стили, слайд №31Верстка web-страниц. Стили, слайд №32Верстка web-страниц. Стили, слайд №33Верстка web-страниц. Стили, слайд №34Верстка web-страниц. Стили, слайд №35Верстка web-страниц. Стили, слайд №36Верстка web-страниц. Стили, слайд №37Верстка web-страниц. Стили, слайд №38Верстка web-страниц. Стили, слайд №39Верстка web-страниц. Стили, слайд №40
Скачать

Содержание ▲

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

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

Слайд 1


Верстка web-страниц
Описание слайда:
Верстка web-страниц

Слайд 2


Содержание Знакомство с CSS Преимущество в использовании CSS Синтаксис оформления стилевых параметров Способы задания стилевого оформления Подключение CSS к HTML-документу
Описание слайда:
Содержание Знакомство с CSS Преимущество в использовании CSS Синтаксис оформления стилевых параметров Способы задания стилевого оформления Подключение CSS к HTML-документу

Слайд 3


CSS CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Описание слайда:
CSS CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Слайд 4


CSS Назначение CSS - установить внешний вид какого-либо элемента (фрагмента) веб-страницы; Таким образом, это правило, которое сообщает браузеру, что и каким образом форматировать
Описание слайда:
CSS Назначение CSS - установить внешний вид какого-либо элемента (фрагмента) веб-страницы; Таким образом, это правило, которое сообщает браузеру, что и каким образом форматировать

Слайд 5


Преимущества Разграничение кода и оформления Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задаётся через стили. При подобном разделении работа над дизайном и версткой сайта может вестись параллельно.
Описание слайда:
Преимущества Разграничение кода и оформления Идея о том, чтобы код HTML был свободен от элементов оформления вроде установки цвета, размера шрифта и других параметров, стара как мир. В идеале, веб-страница должна содержать только теги логического форматирования, а вид элементов задаётся через стили. При подобном разделении работа над дизайном и версткой сайта может вестись параллельно.

Слайд 6


Преимущества Разное оформление для разных устройств С помощью стилей можно определить вид веб-страницы для разных устройств вывода: монитора, принтера, смартфона, планшета и др. Например, на экране монитора отображать страницу в одном оформлении, а при её печати — в другом. Эта возможность также позволяет скрывать или показывать некоторые элементы документа при отображении на разных устройствах.
Описание слайда:
Преимущества Разное оформление для разных устройств С помощью стилей можно определить вид веб-страницы для разных устройств вывода: монитора, принтера, смартфона, планшета и др. Например, на экране монитора отображать страницу в одном оформлении, а при её печати — в другом. Эта возможность также позволяет скрывать или показывать некоторые элементы документа при отображении на разных устройствах.

Слайд 7


Преимущества Расширенные по сравнению с HTML способы оформления элементов В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.
Описание слайда:
Преимущества Расширенные по сравнению с HTML способы оформления элементов В отличие от HTML стили имеют гораздо больше возможностей по оформлению элементов веб-страниц. Простыми средствами можно изменить цвет фона элемента, добавить рамку, установить шрифт, определить размеры, положение и многое другое.

Слайд 8


Преимущества Ускорение загрузки сайта При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счёт кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов. Кэшем называется специальное место на локальном компьютере пользователя, куда браузер сохраняет файлы при первом обращении к сайту. При следующем обращении к сайту эти файлы уже не скачиваются по сети, а берутся с локального диска. Такой подход позволяет существенно повысить скорость загрузки веб-страниц.
Описание слайда:
Преимущества Ускорение загрузки сайта При хранении стилей в отдельном файле, он кэшируется и при повторном обращении к нему извлекается из кэша браузера. За счёт кэширования и того, что стили хранятся в отдельном файле, уменьшается код веб-страниц и снижается время загрузки документов. Кэшем называется специальное место на локальном компьютере пользователя, куда браузер сохраняет файлы при первом обращении к сайту. При следующем обращении к сайту эти файлы уже не скачиваются по сети, а берутся с локального диска. Такой подход позволяет существенно повысить скорость загрузки веб-страниц.

Слайд 9


Преимущества Единое стилевое оформление множества документов Сайт это не просто набор связанных между собой документов, но и одинаковое расположение основных блоков, и их вид. Применение единообразного оформления заголовков, основного текста и других элементов создает преемственность между страницами и облегчает пользователям работу с сайтом и его восприятие в целом. Разработчикам же использование стилей существенно упрощает проектирование дизайна.
Описание слайда:
Преимущества Единое стилевое оформление множества документов Сайт это не просто набор связанных между собой документов, но и одинаковое расположение основных блоков, и их вид. Применение единообразного оформления заголовков, основного текста и других элементов создает преемственность между страницами и облегчает пользователям работу с сайтом и его восприятие в целом. Разработчикам же использование стилей существенно упрощает проектирование дизайна.

Слайд 10


Преимущества Централизованное хранение Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Благодаря этому удобно править стиль в одном месте, при этом оформление элементов автоматически меняется на всех страницах, которые связаны с указанным файлом. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.
Описание слайда:
Преимущества Централизованное хранение Стили, как правило, хранятся в одном или нескольких специальных файлах, ссылка на которые указывается во всех документах сайта. Благодаря этому удобно править стиль в одном месте, при этом оформление элементов автоматически меняется на всех страницах, которые связаны с указанным файлом. Вместо того чтобы модифицировать десятки HTML-файлов, достаточно отредактировать один файл со стилем и оформление нужных документов сразу же поменяется.

Слайд 11


CSS Фактически определение стиля состоит из двух основных элементов: селектор – указатель на объект, который подлежит форматированию (например, тег p – абзац) блок объявления – форматирующие команды (свойство и его значение)
Описание слайда:
CSS Фактически определение стиля состоит из двух основных элементов: селектор – указатель на объект, который подлежит форматированию (например, тег p – абзац) блок объявления – форматирующие команды (свойство и его значение)

Слайд 12


CSS Селектор Сообщает браузеру, к какому элементу применяется стиль В роли селекторов могут выступать различные объекты и их комбинации Пример p {color: red;} В роли селектора – тег p div p {color: #653302;} В роли селектора – теги p, находящиеся внутри тега div
Описание слайда:
CSS Селектор Сообщает браузеру, к какому элементу применяется стиль В роли селекторов могут выступать различные объекты и их комбинации Пример p {color: red;} В роли селектора – тег p div p {color: #653302;} В роли селектора – теги p, находящиеся внутри тега div

Слайд 13


CSS Блок объявления стиля Код, расположенный сразу за селектором, содержит все форматирующие команды, которые нужно применить к данному селектору; блок начинается с открывающей и заканчивается закрывающей фигурной скобкой Пример p {color: red;}
Описание слайда:
CSS Блок объявления стиля Код, расположенный сразу за селектором, содержит все форматирующие команды, которые нужно применить к данному селектору; блок начинается с открывающей и заканчивается закрывающей фигурной скобкой Пример p {color: red;}

Слайд 14


CSS Объявление свойства Между скобками блока объявления можно добавить одно или несколько определений или форматирующих команд; каждое объявление имеет две части – свойство и значение; Двоеточие отделяет имя свойства от его значения; Любое объявление заканчивается точкой с запятой Пример p {color: red; font-size: 20px;}
Описание слайда:
CSS Объявление свойства Между скобками блока объявления можно добавить одно или несколько определений или форматирующих команд; каждое объявление имеет две части – свойство и значение; Двоеточие отделяет имя свойства от его значения; Любое объявление заканчивается точкой с запятой Пример p {color: red; font-size: 20px;}

Слайд 15


CSS Свойство Имеется достаточно большой перечень команд форматирования объектов, называемых свойствами Пример p {color: red; font-size: 20px;}
Описание слайда:
CSS Свойство Имеется достаточно большой перечень команд форматирования объектов, называемых свойствами Пример p {color: red; font-size: 20px;}

Слайд 16


CSS Значение Для каждого используемого свойства есть допустимое множество значений, которые можно применять Пример p { color: red; font-size: 20px; }
Описание слайда:
CSS Значение Для каждого используемого свойства есть допустимое множество значений, которые можно применять Пример p { color: red; font-size: 20px; }

Слайд 17


Правила применения Расширенная форма записи td { background: olive; } td { color: white; } td { border: 1px solid black; } Компактная форма записи td {   background: olive;   color: white;   border: 1px solid black; }
Описание слайда:
Правила применения Расширенная форма записи td { background: olive; } td { color: white; } td { border: 1px solid black; } Компактная форма записи td {   background: olive;   color: white;   border: 1px solid black; }

Слайд 18


Правила применения Имеет приоритет значение, указанное в коде ниже Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже Разные значения у одного свойства p { color: green; } p { color: red; } В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту. ! Избегаем подобных противоречий
Описание слайда:
Правила применения Имеет приоритет значение, указанное в коде ниже Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже Разные значения у одного свойства p { color: green; } p { color: red; } В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту. ! Избегаем подобных противоречий

Слайд 19


Правила применения Значения У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.
Описание слайда:
Правила применения Значения У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

Слайд 20


Правила применения Комментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают или существенно сокращают. Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* ... */ 
Описание слайда:
Правила применения Комментарии нужны, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы или писать свои заметки. Комментарии позволяют легко вспоминать логику и структуру селекторов, и повышают разборчивость кода. Вместе с тем, добавление текста увеличивает объём документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают или существенно сокращают. Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* ... */ 

Слайд 21


Правила применения /* Стиль сделан для ознакомительных целей */ div { width: 200px; /* Ширина блока */ margin: 10px; /* Поля вокруг элемента */ float: left; /* Обтекание по правому краю */ } Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.
Описание слайда:
Правила применения /* Стиль сделан для ознакомительных целей */ div { width: 200px; /* Ширина блока */ margin: 10px; /* Поля вокруг элемента */ float: left; /* Обтекание по правому краю */ } Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

Слайд 22


CSS Таблицы стилей могут быть: внутренние; внешние. В зависимости от того, где определена стилевая информация: непосредственно в самой веб-странице или в отдельном файле, который связан с веб-страницей
Описание слайда:
CSS Таблицы стилей могут быть: внутренние; внешние. В зависимости от того, где определена стилевая информация: непосредственно в самой веб-странице или в отдельном файле, который связан с веб-страницей

Слайд 23


CSS CSS может быть: вынесен в отдельный файл (рекомендуется); оставлен в HTML-документе, обрамленный парным тегом <style>…</style> в служебном блоке <head> прописан в самом теге, к которому применяют стилевое оформление
Описание слайда:
CSS CSS может быть: вынесен в отдельный файл (рекомендуется); оставлен в HTML-документе, обрамленный парным тегом <style>…</style> в служебном блоке <head> прописан в самом теге, к которому применяют стилевое оформление

Слайд 24


CSS Внешние таблицы стилей. Это не что иное как текстовый файл, содержащий весь необходимый набор стилей CSS Он не должен включать в себя html-код, поэтому не нужно добавлять сюда тег <style> Имя данного файла всегда должно заканчиваться расширением .css
Описание слайда:
CSS Внешние таблицы стилей. Это не что иное как текстовый файл, содержащий весь необходимый набор стилей CSS Он не должен включать в себя html-код, поэтому не нужно добавлять сюда тег <style> Имя данного файла всегда должно заканчиваться расширением .css

Слайд 25


CSS При вынесении CSS в отдельный файл: - В самом html-коде указываем ссылку на внешний файл, где хранятся стили: <html> <head> <title> … </title> <link rel="stylesheet" href="style.css"/> </head> <body> … - В отдельном файле style.css прописываются стили (сам файл создаем в том же редакторе, но при сохранении задаем расширение *.css)
Описание слайда:
CSS При вынесении CSS в отдельный файл: - В самом html-коде указываем ссылку на внешний файл, где хранятся стили: <html> <head> <title> … </title> <link rel="stylesheet" href="style.css"/> </head> <body> … - В отдельном файле style.css прописываются стили (сам файл создаем в том же редакторе, но при сохранении задаем расширение *.css)

Слайд 26


CSS <link rel="stylesheet" href="style.css"> rel="stylesheet“ указывает тип ссылки; в данном случае это ссылка на таблицу стилей; href="style.css" задает местонахождение внешнего css-файла; значение этого атрибута – url-адрес, который будет формироваться в зависимости от того, где хранится css-файл
Описание слайда:
CSS <link rel="stylesheet" href="style.css"> rel="stylesheet“ указывает тип ссылки; в данном случае это ссылка на таблицу стилей; href="style.css" задает местонахождение внешнего css-файла; значение этого атрибута – url-адрес, который будет формироваться в зависимости от того, где хранится css-файл

Слайд 27


CSS ВАЖНО: К веб-странице можно присоединить некое множество таблиц стилей, добавляя несколько тегов <link>, каждый из которых будет указывать на свой файл таблицы стилей
Описание слайда:
CSS ВАЖНО: К веб-странице можно присоединить некое множество таблиц стилей, добавляя несколько тегов <link>, каждый из которых будет указывать на свой файл таблицы стилей

Слайд 28


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

Слайд 29


Пример
Описание слайда:
Пример

Слайд 30


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

Слайд 31


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

Слайд 32


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

Слайд 33


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

Слайд 34


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

Слайд 35


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

Слайд 36


Пример
Описание слайда:
Пример

Слайд 37


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

Слайд 38


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

Слайд 39


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

Слайд 40


Спасибо за внимание
Описание слайда:
Спасибо за внимание

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию