Инфоурок Технология Другие методич. материалыHTML Каскадные таблицы стилей

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

Скачать материал
Скачать материал "HTML Каскадные таблицы стилей"

Получите профессию

Методист-разработчик онлайн-курсов

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Директор по маркетингу (тур. агенства)

Описание презентации по отдельным слайдам:

  • Лекция 3: Каскадные таблицы стилейОбщие сведения о CSS 
Способы подключение C...

    1 слайд

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

  • 1. Общие сведения о CSSCSS (англ. Cascading Style Sheets) - каскадные таблицы...

    2 слайд

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










  • История развития CSSдекабрь 1996 г. первая версия CSS 1. Определены параметры...

    3 слайд

    История развития CSS
    декабрь 1996 г. первая версия CSS 1. Определены параметры шрифта, текста, выравнивание, позиционирование, отступы.
    май 1998 г. – CSS 2. Добавлены блочная верстка, различные стили для различных устройств вывода.
    сентябрь 2009 г. – CSS 2.1. Исправлены ошибки предыдущих версий.
    CSS 3. Закругленные блоки, переменные, анимация.

    CSS валидатор http://jigsaw.w3.org/css-validator/

  • HTML без CSSHTML с CSSСравнение сайта с CSS и без CSS

    4 слайд

    HTML без CSS
    HTML с CSS
    Сравнение сайта с CSS и без CSS

  • Преимущества CSSуправление отображением множества документов с помощью одной...

    5 слайд

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

  • 2. Подключение CSS к HTML1. Внутри каждого тега2. Внутри HTML-документа3. CSS...

    6 слайд

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

  • 3. ПравилаПравила css селекторов - это набор свойств, которые указывают брауз...

    7 слайд

    3. Правила
    Правила css селекторов - это набор свойств, которые указывают браузеру, как нужно отображать html элемент






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

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

    8 слайд

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

  • 9 слайд

  • Примеры использования селекторовfile.htmlstyle.css

    10 слайд

    Примеры использования селекторов
    file.html
    style.css

  • Динамические псевдо классыДинамические псевдо-классы так называются потому, ч...

    11 слайд

    Динамические псевдо классы
    Динамические псевдо-классы так называются потому, что они фактически не существуют в HTML. Они появляются только тогда, когда пользователь находится на сайте или взаимодействуют с ним.
    :link относится к ссылкам, которые не были посещены  
    :visited относится к ссылкам, которые посетили
    :hover применяется, когда пользователь наводит курсор мыши на элемент, без необходимости активации или клика по нему
    :active применяется, когда пользователь кликает на элемент
    :focus применяется, когда элемент находится в фокусе (например курсор в текстовом поле)

  • Примеры использования псевдо-классовВсе не посещенные ссылки

Все посещенные...

    12 слайд

    Примеры использования псевдо-классов
    Все не посещенные ссылки

    Все посещенные ссылки, которые имеют класс g

    Все посещенные ссылки, которые имеют идентификатор g

    Все абзацы при наведении на них курсора мыши

  • Все ссылки внутри абзац при наведении

Все поля ввода в любой момент времени,...

    13 слайд

    Все ссылки внутри абзац при наведении

    Все поля ввода в любой момент времени, всегда

    Все поля ввода внутри объекта с идентификатором odin при активации

    Все поля ссылки внутри ячейки таблицы при активации ссылки


  • 4. Единицы измеренияАбсолютные5 mm – миллиметры
17 cm – сантиметры
0.1968 in...

    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 слайд

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

  • 5. Специфичность селекторовЕсли есть два конфликтующих правила CSS относящихс...

    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 слайд

    Какого цвета будет текст? Почему?

  • 6. НаследованиеНаследование является способом распространения значения свойст...

    19 слайд

    6. Наследование
    Наследование является способом распространения значения свойств элементов от родителей к детям
    Родитель
    Дитя

  • Некоторые свойства CSS наследуются детьми элементов по умолчанию. Например, е...

    20 слайд

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

  • Правила наследованияСпецифицированное значение.
User agent (инструмент пользо...

    21 слайд

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

  • FireBug для FireFoxFireBug – дополнение к FireFox которое используется для от...

    22 слайд

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


  • Просмотр HTML кода Выделяет желаемый элемент.
Иерархическая структура выбранн...

    23 слайд

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

  • Работа с CSS Если страница, на которой вы работаете, содержит несколько табли...

    24 слайд

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

  • Статистика загрузки страницыЗапросы могут быть отфильтрованы в соответствии с...

    25 слайд

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

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

    26 слайд

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

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

    27 слайд

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

Получите профессию

Менеджер по туризму

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

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

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

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

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

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

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

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 781 материал в базе

Скачать материал

Другие материалы

Презентация по технологии к теме "Профессиональная деятельность"
  • Учебник: «Технология (базовый уровень)», Симоненко В.Д., Очинин О.П., Матяш Н.В., Виноградов Д.В.
  • Тема: § 1. Понятие профессиональной деятельности. Структура и организация производства
  • 30.09.2020
  • 701
  • 13
«Технология (базовый уровень)», Симоненко В.Д., Очинин О.П., Матяш Н.В., Виноградов Д.В.
Презентация по технологии к теме "Предмет труда"
  • Учебник: «Технология. 10-11 класс», Симоненко В.Д., Очинин О.П., Матяш Н.В.
  • Тема: Сферы, отрасли, предметы труда и процесс профессиональной деятельности Нормирование и оплата труда     
  • 30.09.2020
  • 2940
  • 261
«Технология. 10-11 класс», Симоненко В.Д., Очинин О.П., Матяш Н.В.

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 25.12.2014 522
    • PPTX 1.2 мбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Назаренко Игорь Павлович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Назаренко Игорь Павлович
    Назаренко Игорь Павлович
    • На сайте: 9 лет и 3 месяца
    • Подписчики: 1
    • Всего просмотров: 144488
    • Всего материалов: 73

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Секретарь-администратор

Секретарь-администратор (делопроизводитель)

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Технология: теория и методика преподавания в образовательной организации

Учитель технологии

300/600 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе
  • Сейчас обучается 989 человек из 78 регионов

Курс повышения квалификации

Актуальные вопросы преподавания технологии в условиях реализации ФГОС

72 ч.

2200 руб. 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 234 человека из 60 регионов

Курс повышения квалификации

Методика инструктажа и обучения в социальном учреждении по вопросам трудовой деятельности

180 ч.

3300 руб. 1650 руб.
Подать заявку О курсе

Мини-курс

Современные тенденции в искусстве: от постмодернизма до поп-культуры

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 29 человек из 16 регионов

Мини-курс

Эффективное управление проектами

6 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Здоровые взаимоотношения: адаптация и развитие ребенка через привязанность и игрушки

4 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 71 человек из 32 регионов