Каскадные таблицы стилей css практическая работа: Каскадные таблицы стилей

Содержание

Лабораторная работа №6 - КФ-Education

Свойства блочных объектов. Введение в каскадные таблицы стилей.

Цель:

  • Изучить возможности CSS по работе с блочными объектами;
  • Изучить основные свойства блоков;

Практическая часть

  1. Создайте html-файл lab6.htm, содержащий блочний элемент DIV.
  2. Создайте css-файл и подключите его к html-документу так:
  3. Создайте класс k1, в котором определите размер блока 200х200
    пикселей, фон (светло-зеленый) и рамку (сплошную, темно-зеленую, шириной
    в 3 пикселя).
  4. Подключите класс k1 к блоку в html-документе (<div class=»k1:>…</div>). Обратите внимание на то, как изменится блок.
  5. Добавьте еще пять таких же блоков размером 200х200 пикселей. Блоки располагаются друг под другом. Да?
  6. Для того что бы блоки располагались друг за другом необходимо добавиться в класс k1 объявление . Обновите и посмотрите изменения при изменение размеров окна.
  7. Теперь блоки «липнут» друг к другу, между ними нет расстояния, что бы добавить наружный отступ слева добавляем объявление .
    Сохраните, просмотрите изменения.
  8. Создайте в отдельном файле горизонтальный светофор из трех блоков.
    Ширину блоков сделайте динамичной, что бы они изменялась в зависимости
    от ширины окна, но все блоки должны иметь одну ширину. Задайте каждому
    блоку свой цвет. Отступы для body уберите с помощью css.
  9. Задайте первому блоку объявление display:none, а второму visibility: hidden; В чем отличия этих двух объявлений?
  10. Создайте файл, а в нем три блока. В первом блоке сделайте рамку,
    шириной с разным типом линии с разных сторон блока. Во втором блоке
    задайте фоновое изображение (background-image). В третьем блоке, задайте
    фон… Добавляйте строчки по одной и смотрите изменения в браузере после каждой строки.
  11. Расположите блоки одни над одним. Для этого установите каждому блоку
    объявление position: absolute; и порядок расположения блоков сверху
    вниз: объявление z-index: 5; (у тех блоков что ниже, значение индекса
    должно быть меньше, например 10, 20 и 30). Что бы блоки начинались не в
    одной точке, им необходимо задать свойства left и top.
  12. Создадим скругленные углы… Создаем четыре вложеных друг в друга блока.
    опишем для внешнего блока класс ugol и назначим этот класс блоку

    опишем класс для правого верхнего угла

    и самостоятельно для левого нижнего и правого нижнего углов.
  13. Создать новый html файл в который поместить изображение ягоды.
  14. В css-файл подключенный к html-файлу запишите стиль для изменения
    прозрачности любого изображения при наведении на него курсора мыши.

    данный код будет работать только в браузере Mozilla. Для Internet Explorer строчки должны быть следующими:
  15. Используя только блоки, создайте поле для игры в крестики-нолики.
  16. Используя блоки, их вложенность, фон, выравнивание, свойство float,
    шрифт Georgia создайте вот такую вот шапку. Углы вырежьте
    самостоятельно.

Материалы к лабораторной работе №6

Справочник по CSS.

НОУ ИНТУИТ | Лекция | Основы CSS. Особенности CSS 3

Аннотация: Понятие каскадных таблиц стилей. История версий CSS. Отношения между множественными вложенными элементами. Создание CSS стилей. Связь HTML и CSS. Правила написания CSS. Каскадность CSS.

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

  1. каскадные таблицы стилей;
  2. используется для управления внешним видом информации, предоставляемой сайтом.

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

Возникновение CSS

Во второй лекции нашего курса приведена краткая история возникновения HTML. Частично написанное сейчас будет пересекаться с прошлым материалом.

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

С дальнейшим распространением HTML такие компании, как Microsoft и Netscape стали внедрять свои собственные теги или "улучшать" имеющиеся именно с целью управления оформлением html - документов. Часть внесенных изменений прижилась и "ушла" в массы.

После случилось логически неизбежное, а именно, HTML стал представлять собой набор несовместимых между собой тегов и расширений. Результатом исправления ситуации стал стандарт HTML 3.2, "узаконивший" ряд изменений и устранивший проблемы совместимости.

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

Стандарт HTML 3.2 лишь исправил ряд наиболее серьезных недостатков предыдущих версий. Настоящим же решением проблемы явился стандарт HTML 4.0, в рамках которого было предложено отделить описание структуры html документа от его оформления.

Если уж совсем "рыться" в истории, то можно заметить, что и этот подход не нов. SGML, на котором и основывалась первая версия HTML, в числе прочего предполагал наличие отдельного "файла стилей" документа.

Таким образом, возникновение каскадных таблиц стилей является закономерным результатом эволюционного развития стандартов HTML.

Суть и преимущества CSS

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

Концепция каскадных таблиц стилей была предложена Хоконом Виум Ли – норвежским ученым и специалистом в области информационных технологий, работавшим в то время на консорциум W3C.

Как правило, CSS применяется при работе с HTML и XHTML языками, и используется для задания цветов, параметров шрифтов, расположения блоков и иных элементов представления веб - страниц.

К преимуществам использования CSS относятся:

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

Стандарт HTML 4.0 помимо CSS утвердил и объектную модель браузера (Browser Object Model – BOM), о которой следует сказать отдельно.

Объектная модель браузера описывает содержимое веб - документа, т.е. сама модель является набором объектов, описывающих указанное содержимое. Поскольку BOM уникальна для каждого браузера, возникали проблемы с межплатформенными приложениями. В конечном итоге, на место объектной модели браузера пришла объектная модель документа (Document Object Model – DOM), описывающая стандарт представления веб - страниц в виде набора объектов.

Краткая история CSS

Описание возникновения CSS будет неполным, без краткой истории версий каскадных таблиц стилей.

Таблица 6.1.
Версия Дата принятия Предоставляемые возможности
CSS1 17.01.1996
  • Управление способом отображения элемента на странице.
  • Задание настроек обтекания элемента текстом.
  • Управление размерами элемента.
  • Управление внешними и внутренними отступами элемента.
  • Управление вертикальным выравниванием в таблицах.
  • Управление стилями границ элементов.
  • Управление форматированием списков.
  • Управление цветами текста и фона.
  • Управление параметрами шрифтов.
  • Управление свойствами текста.
  • Управление междустрочными интервалами.
CSS2 12.05.1998 Все возможности CSS1 и ряд новых:
  • Управление направлением текста.
  • Управление позиционированием элементов.
  • Управление видимыми областями элементов.
  • Управление отображением элементов, выходящих за границы заданных размеров.
  • Управление внешним видом курсора.
  • Управление расположением элементов по оси z (слои).
  • Задание минимально и максимально возможных размеров элемента.
  • Управление расстоянием между ячейками таблицы.
  • Управление стилями границ элемента (каждой границы в отдельности).
  • Управление размерами элементов таблиц.
  • Управление стилями кавычек.
  • Управление контентом при его печати.
  • Управление звуковым оформлением контента (громкость, паузы и т. п.).
CSS2.1 8.09.2009
  • Исправлен ряд ошибок CSS2.
  • Изменились некоторые моменты, реализация которых в подавляющем большинстве браузеров отличается от спецификации CSS2.
  • Убрали особенности CSS2, которые, в силу того, что не были реализованы, были отвергнуты CSS сообществом.
  • Удалили фрагменты CSS2, которые будут устаревшими в CSS3.
  • Добавили некоторые новые значения свойств.
CSS3 разрабатывается
  • Поддержка закругленных углов.
  • Поддержка градиентных границ.
  • Управление тенями элементов.
  • Поддержка возможности использования изображений, в качестве границ элементов.
  • Управление тенью текста.
  • Поддержка нестандартных шрифтов.
  • Возможность изменения размеров блоков пользователем.
  • Возможность разбиения текста на несколько колонок.
  • Управление фоновыми изображениями.

В настоящее время стандарт CSS3 только разрабатывается. В связи с этим нами перечислен только ряд его новшеств. Подробнее с ними, на данном этапе, предлагается ознакомиться самостоятельно.

Разработка сайтов с нуля (Верстка HTML+CSS) — Лаборатория программирования

Описание

Модуль 1. Введение и основные понятия

Как это работает? Что такое web-сервер, web-сайт, web-страница

Цели и задачи языка HTML

HTML-разметка. Элементы

Структура HTML-документа:

Использование комментариев

Базовые элементы разметки:

Атрибуты элементов

Специальные символы

Лабораторная работа по теме

Модуль 2. Анатомия страницы

Понимаем, как мы пишем: синтаксис HTML

Элементы форматирования текста

Понимаем, что мы пишем: семантика элементов

Валидация HTML-документа

Структурные элементы разметки

Лабораторные работы по теме

Модуль 3.

Гиперссылки

Понятие гиперссылок в WWW

Внешние и внутренние гиперссылки

Типы адресов в WWW

Дополнительные атрибуты гиперссылок

Лабораторная работа по теме

Модуль 4. CSS. Каскадные таблицы стилей: основные свойства

Основные понятия CSS

Способы определения стилей

Каскадирование и наследование

Единицы измерения в CSS

Основные типы селекторов

Псевдоклассы и псевдоэлементы

Свойства шрифтов

Свойства текста

Свойства цвета и фона

Лабораторные работы по теме

Модуль 5. Использование изображений на странице

Типы изображений используемые в WWW

Вставка изображений на страницу

Атрибуты элемента img

Лабораторная работа по теме

Модуль 6. Структурирование информации при помощи списков

Неупорядоченный список

Упорядоченный список

Список определений

CSS свойства для списков

Лабораторная работа по теме

Модуль 7. Представление табличных данных при помощи таблицы

Основные элементы таблицы

CSS свойства элементов таблиц

Объединение ячеек таблицы

Дополнительные элементы таблицы

Лабораторная работа по теме

Модуль 8.

Встраивание внешних данных при помощи фрейма

История фреймов

Встраиваемые фреймы

Фреймы и гиперссылки

Лабораторная работа по теме

Модуль 9. Передача пользовательских данных при помощи формы

Что такое веб-формы?

Элемент form и его атрибуты

Элементы формы: текстовые поля и кнопки

Элементы формы: элементы выбора

Дополнительные атрибуты элементов формы

Лабораторная работа по теме

Модуль 10. Использование CSS для макетирования

Оформление границ элемента

Внутренние отступы элемента

Наружные отступы элемента

Размеры элемента

Плавающие элементы

Видимость элемента

Лабораторные работы по теме

Модуль 11. Дополнительные возможности HTML и CSS

Практическая работа для закрепления изученных тем

Стили для различных типов носителей

Свойства курсора

Встраивание аудио- и видео-файлов

Лабораторные работы по теме

Модуль 12. Мета-информация на странице

Использование мета-информации

Элемент meta и его атрибуты

Поясняющая мета-информация

Мета-информация для роботов

Эмуляция заголовков ответа сервера

Модуль 13.

Выбор хостинга и поддержка сайта

Понятие хостинга

Поиск хостера

Услуги хостера

Использование FTP-клиента

Доступ к ftp-серверу через проводник Windows

Модуль 14. Что дальше?

Обзор HTML5 API

Тонкая настройка сайта на стороне сервера

Динамические элементы на странице

Динамическое создание контента на сервере

Современные способы предоставления информации

Модуль 15. Верстка сайта по psd макету

Модуль 16. Bootstrap

Курс: HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3

Курс: HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3


Продолжительность курса: 32 ак. ч.

Формат обучения:
• Очно - на территории нашего учебного центра или на территории Заказчика (для корпоративных клиентов)
• Онлайн обучение с помощью вебинаров в режиме "здесь и сейчас"
• Дистанционно с помощью системы СДО в любое удобное для вас время

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

Необходимая подготовка:
Успешное окончание курса Базовая компьютерная подготовка. Windows и Интернет для начинающих или эквивалентная подготовка.

Аудитория:
Курс предназначен для начинающих разработчиков Web-страниц и Web-дизайнеров, желающих освоить создание страниц и Web-сайтов.

Результат обучения:
После изучения слушатель будет уметь:
• Создавать web-страницы, содержащие все необходимые компоненты: текстовое наполнение, гиперссылки, графическое наполнение
• Самостоятельно создавать полноценный сайт путем определения иерархии взаимодействия web-страниц между собой
• Грамотно разрабатывать интерактивные формы для взаимодействия пользователя с web-сервером
• Эффективно использовать возможности каскадных таблиц стилей CSS для повышения функциональности и улучшения оформления web-сайта
• Использовать технологию фреймов
• Узнаете о новых возможностях HTML 5 и CSS 3

Программа курса:
Модуль 1. Введение и основные понятия
• Что такое web-сервер, web-сайт, web-страница
• Основные сведения о языках разметки
• Эволюция языков разметки
• Цели и задачи языка HTML
• HTML-разметка: Элементы
• Тэги
• Структура HTML-документа. Основные элементы разметки
• Раздел head и заголовок документа
• Использование комментариев
• Атрибуты элементов
• Специальные символы
• Лабораторная работа: создание HTML-документа

Модуль 2. Анатомия страницы
• Регистр букв, закрытие тегов, использование кавычек в атрибутах
• Типы HTML-документов
• Валидация HTML-документа, валидатор W3C
• Лабораторная работа: валидация разметки
• Структурные элементы разметки
• Текстовые элементы разметки
• Лабораторная работа: добавление типа документа

Модуль 3. Гиперссылки
• Понятие гиперссылок в WWW
• Внешние и внутренние гиперссылки
• Типы адресов в WWW
• Дополнительные атрибуты гиперссылок
• Лабораторная работа: создание навигационного меню

Модуль 4. Изображения
• Типы изображений, используемые в WWW
• Вставка изображений на страницу
• Атрибуты элемента img
• Новые элементы для изображений в HTML5
• Лабораторная работа: использование изображений на странице

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

Модуль 6. Списки
• Структурирование информации на WEB-странице при помощи списков
• Маркированный список
• Нумерованный список
• Список определений
• Смешанные списки
• CSS свойства для списков
• Лабораторная работа: оформление навигационного меню в виде списка

Модуль 7. Таблицы
• Основные элементы таблицы
• Структура таблицы на странице
• Объединение ячеек. Типичные ошибки при работе с таблицами
• CSS свойства элементов таблиц
• Дополнительные элементы таблицы
• Лабораторная работа: оформление табличных данных

Модуль 8. Фреймы
• История фреймов
• Вложенные фреймы (iframe)
• Фреймы и гиперссылки
• Лабораторная работа: добавление на страницу плавающего фрейма

Модуль 9. Формы
• Что такое веб-формы?
• Элемент form
• Текстовые поля и кнопки
• Элементы выбора
• Списки
• Атрибуты элементов формы
• Лабораторная работа: создание веб-формы обратной связи
• Элементы и их атрибуты в HTML 5

Модуль 10. Использование CSS для макетирования
• Оформление границ элемента
• Внутренние отступы элемента
• Наружные отступы элемента
• Размеры элемента
• Позиционирование элемента
• Видимость элемента
• Лабораторная работа: позиционирование элементов

Модуль 11. Дополнительные возможности HTML и CSS
• Импорт CSS
• Стили для различных типов носителей
• Свойства CSS для печати страниц
• Лабораторная работа: подготовка страницы к печати
• Свойства курсора
• Использование внешних объектов
• Встраивание аудио- и видео-файлов с помощью элементов HTML5
• Обзорвозможностей HTML 5 (Canvas, WebStorage, Drag-&-Drop)

Модуль 12. Мета-информация на странице
• Использование мета-информации
• Элемент meta и его атрибуты
• Поясняющая мета-информация
• Мета-информация для роботов
• Эмуляция заголовков ответа сервера

Модуль 13. Выбор хостинга и поддержка сайта
• Хостинг
• Поиск хостера
• Услуги хостера
• Использование FTP-клиента
• Доступ к сайту через проводник Windows

Модуль 14. Что дальше?
• Тонкая настройка сайта на стороне сервера
• Динамические элементы на странице
• Динамическое создание контента на сервере
• Современные способы предоставления информации

Введение в CSS - Изучение веб-разработки

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

Перед запуском этого модуля вы должны иметь:

  1. Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
  2. Базовая рабочая среда, описанная в разделе Установка базового программного обеспечения, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе Работа с файлами.
  3. Основное знакомство с HTML, как описано в модуле Введение в HTML.

Примечание: Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.

Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.

Что такое CSS?
CSS (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
Начало работы с CSS
В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
Как структурирован CSS
Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.
Как работает CSS
Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу.
Использование ваших новых знаний
С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это.
Intermediate Web Literacy 1: Intro to CSS
Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле Введение в CSS. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.

KirillShakhov/Web.Lab1: Лабораторная работа №1 Вариант:2823

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

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

Кроме того, ответ должен содержать данные о текущем времени и времени работы скрипта.


Разработанная HTML-страница должна удовлетворять следующим требованиям:

  • Для расположения текстовых и графических элементов необходимо использовать табличную верстку.
  • Данные формы должны передаваться на обработку посредством GET-запроса.
  • Таблицы стилей должны располагаться в отдельных файлах.
  • При работе с CSS должно быть продемонстрировано использование селекторов идентификаторов, селекторов псевдоклассов, селекторов классов, селекторов потомств а также такие свойства стилей CSS, как наследование и каскадирование.
  • HTML-страница должна иметь "шапку", содержащую ФИО студента, номер группы и новер варианта. При оформлении шапки необходимо явным образом задать шрифт (serif), его цвет и размер в каскадной таблице стилей.
  • Отступы элементов ввода должны задаваться в пикселях.
  • Страница должна содержать сценарий на языке JavaScript, осуществляющий валидацию значений, вводимых пользователем в поля формы. Любые некорректные значения (например, буквы в координатах точки или отрицательный радиус) должны блокироваться.


Вопросы к защите лабораторной работы:

  1. Протокол HTTP. Структура запросов и ответов, методы запросов, коды ответов сервера, заголовки запросов и ответов.
  2. Язык разметки HTML. Особенности, основные теги и атрибуты тегов.
  3. Структура HTML-страницы. Объектная модель документа (DOM).
  4. HTML-формы. Задание метода HTTP-запроса. Правила размещения форм на страницах, виды полей ввода.
  5. Каскадные таблицы стилей (CSS). Структура - правила, селекторы. Виды селекторов, особенности их применения. Приоритеты правил. Преимущества CSS перед непосредственным заданием стилей через атрибуты тегов.
  6. LESS, Sass, SCSS. Ключевые особенности, сравнительные характеристики. Совместимость с браузерами, трансляция в "обычный" CSS.
  7. Клиентские сценарии. Особенности, сферы применения. Язык JavaScript.
  8. Версии ECMAScript, новые возможности ES6 и ES7.
  9. Синхронная и асинхронная обработка HTTP-запросов. AJAX.
  10. Библиотека jQuery. Назначение, основные API. Использование для реализации AJAX и работы с DOM.
  11. Реализация AJAX с помощью SuperAgent.
  12. Серверные сценарии. CGI - определение, назначение, ключевые особенности.
  13. FastCGI - особенности технологии, преимущества и недостатки относительно CGI.
  14. Язык PHP - синтаксис, типы данных, встраивание в веб-страницы, правила обработки HTTP-запросов. Особенности реализации принципов ООП в PHP.

Как залить лабу 1 на гелиос?

Надо создать в корне своей директории директорию public_html, у неё рекурсивно выставить права 755 и передать файлы по SFTP. P.S. Ваша домашняя директории также должна иметь права 755.

Лаба будет доступна по ссылке https://se.ifmo.ru/~вашНомерНаГелиосе/

Каскадные таблицы стилей | О жизни, работе, людях...

Выполните следующую лабораторную работу по теме Каскадные таблицы стилей

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

Выполните следующие задания.

  1. 2,5-мерный текст. Общая идея — три раза выводится один и тот же текст с небольшими смещениями, но с тремя разными цветами — красным, темнокрасным, серебристым. Тогда темнокрасный цвет создает тень, а серебристый цвет — блики.
    • Наберите пример из лекции.
    • Модифицируйте предыдущий пример, разбив содержимое предыдущего примера на два файла — первый должен содержать только информацию, второй — только описания стилей.
  2. Создайте стилевой файл для HTML-документа из первой части первого задания. Можно использовать как внешний стилевой файл, так и определение стилей внутри html-файла.
    По крайней мере опишите в стилевом файле следующие элементы для шрифта:
    название, размер,  межстрочный интервал, размер красной строки.
    На основании созданного описания для эпиграфа специально задайте зеленый цвет и отсутствие красной строки.
    Замечание.  Название свойств CSS для выполнения этой части задания я на лекции не давал. Предполагается, что Вы самостоятельно найдете информацию о свойствах в Интернет. Цель этого — понять, что все свойства знать нельзя, но всегда можно найти.
  3. Подключите статические фильтры для нескольких элементов на странице. Используйте Internet Explorer.
    • выведите рисунок тремя способами — обычный, перевернутый, инвертированный.
    • примените к некоторому тексту эффекты glow и shadow
  4. Попробуйте разобрать пример. Выведите дату с использованием рисунков и без использования рисунков. Во втором случае используйте данные комментария.

Связанные статьи

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

Цель этого урока - развить ваше понимание некоторых из самых фундаментальных концепций CSS - каскад, специфичность и наследование - которые определяют, как CSS применяется к HTML и как разрешаются конфликты.

Хотя работа над этим уроком может показаться менее актуальной и немного более академичной, чем некоторые другие части курса, понимание этих вещей избавит вас от боли в дальнейшем! Мы рекомендуем вам внимательно проработать этот раздел и убедиться, что вы понимаете концепции, прежде чем двигаться дальше.

CSS означает Cascading Style Sheets , и это первое слово cascading невероятно важно для понимания - способ, которым ведет себя каскад, является ключом к пониманию CSS.

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

Здесь также важна концепция наследования , что означает, что некоторые свойства CSS по умолчанию наследуют значения, установленные для родительского элемента текущего элемента, а некоторые нет. Это также может вызвать поведение, которого вы не ожидали.

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

Каскад

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

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

Специфичность

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

  • Селектор элемента менее специфичен - он выберет все элементы этого типа, которые появляются на странице, поэтому он получит более низкий балл.
  • Селектор класса более специфичен - он выбирает только те элементы на странице, которые имеют определенное значение атрибута class - поэтому он получит более высокий балл.

Пример времени! Ниже у нас снова есть два правила, которые могут применяться к h2 . Нижний h2 окрашивается в красный цвет - селектор класса придает своему правилу более высокую специфичность, и поэтому оно будет применяться, даже если правило с селектором элементов отображается ниже в исходном порядке.

Мы объясним оценку специфичности и другие подобные вещи позже.

Наследование

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

Например, если вы установите цвет и font-family для элемента, каждый элемент внутри него также будет стилизован с этим цветом и шрифтом, если вы не применили различные значения цвета и шрифта непосредственно к ним.

Некоторые свойства не наследуются - например, если вы установите для элемента ширину равной 50%, все его потомки не получат ширину 50% от ширины их родителя. Если бы это было так, использование CSS было бы очень неприятным!

Примечание : На страницах ссылок на свойства CSS MDN вы можете найти поле с технической информацией под названием «Формальное определение», в котором перечислены некоторые точки данных об этом свойстве, включая то, унаследовано оно или нет.См., Например, раздел формального определения свойства цвета.

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

В приведенном ниже видео показано, как можно использовать Firefox DevTools для проверки каскадности страницы, ее специфичности и многого другого:

Начнем с наследования.В приведенном ниже примере у нас есть

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *