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

Содержание слайда: Верстка web-страниц

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Содержание слайда: CSS

Содержание слайда: Пример

Содержание слайда: Задание

Содержание слайда: CSS

Содержание слайда: CSS

Содержание слайда: CSS

Содержание слайда: CSS

Содержание слайда: CSS

Содержание слайда: Пример

Содержание слайда: Задание

Содержание слайда: CSS

Содержание слайда: CSS

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