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

• 1 слайд

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

• 2 слайд

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

• 3 слайд

  История развития 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
  

• 5 слайд

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

• 6 слайд

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

• 7 слайд

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

• 8 слайд

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

• 9 слайд

• 10 слайд

  Примеры использования селекторов
  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 – дюйм (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 слайд

  Таблица предпочтений использования единиц измерения
  

• 16 слайд

  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. Наследование
  Наследование является способом распространения значения свойств элементов от родителей к детям
  Родитель
  Дитя
  

• 20 слайд

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

• 21 слайд

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

• 22 слайд

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

• 23 слайд

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

• 24 слайд

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

• 25 слайд

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

• 26 слайд

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

• 27 слайд

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

Краткое описание документа:

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

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

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

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

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