Верстка web-страниц. Стили - презентация, доклад, проект скачать

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

Содержание ▲

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

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

Слайд 1

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

Верстка web-страниц

Слайд 2

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

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

Слайд 3

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

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

Слайд 4

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

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

Слайд 5

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

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

Слайд 6

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

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

Слайд 7

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

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

Слайд 8

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

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

Слайд 9

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

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

Слайд 10

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

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

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

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

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

Слайд 14

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

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

Слайд 15

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

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

Слайд 16

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

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; }

Слайд 18

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

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

Слайд 19

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

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

Слайд 20

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

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

Слайд 21

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

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

Слайд 22

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

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

Слайд 23

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

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

Слайд 24

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

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

Слайд 25

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

CSS При вынесении CSS в отдельный файл: - В самом html-коде указываем ссылку на внешний файл, где хранятся стили: … … - В отдельном файле style.css прописываются стили (сам файл создаем в том же редакторе, но при сохранении задаем расширение *.css)

Слайд 26

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

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

Слайд 27

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

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