Полезные материалы:
Сегодня мы с вами поднимем вопрос оформления веб-сайтов. Для любого HTML-элемента можно задать атрибут «style». В качестве примера, попробуем заменить цвет основного заголовка на вашей домашней страничке, которую вы делали в качестве домашнего задания для первого урока.
Открываем HTML-документ вашей домашней страницы в браузере, кликаем правой кнопкой мыши по заголовку и открываем инспектор объектов.
Теперь кликаем правой кнопкой мыши по тегу заголовка внутри инспектора и выбираем «Edit as HTML». Добавим атрибут style со следующим значением: color: red.
Теперь кликнем за пределами редактируемого тега, чтобы изменения сохранились. Как мы видим, цвет заголовка поменялся. Теперь мы внесем эти же изменения в исходном файле данной веб-странички. Открываем наш HTML-документ в текстовом редакторе и вносим эти же изменения.
Для каждого элемента может быть задано неограниченное количество правил форматирования. Параметры форматирования и их значения разделяются двоеточием, в разные правила будут разделяться точкой с запятой.
Добавим еще одно правило, которое сделает наш заголовок подчеркнутым: после color:red поставим точку с запятой и напишем: text-decoration: underline.
Прописывать стили каждого элемента в атрибутах этого элемента, на самом деле, так себе идея. Если параметров форматирования у разных элементов слишком много – исходный код HTML-документа станет попросту не читаемым и разработчику придется тратить всё больше времени на внесение изменений в такой HTML-документ. Поэтому управлять правилами форматирования HTML-документа можно централизовано в одном месте. Для этого используется тег
.box {
animation: 5s show ease;
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
В принципе, нам это подходит, но хотелось бы, чтобы анимация работала быстрее. Теперь мы изучим, что означает то, что мы скопировали. Начинам поочередно гуглить незнакомые нам параметры. Первый параметр, с которым мы сейчас столкнулись впервые – это «animation». Переходим в Google и пишем «css animation». Подробно изучаем представленную информацию. И сразу нам в глаза бросается следующий незнакомый нам параметр, который присутствует в примере.
После изучения всех ранее незнакомых нам параметров, скопированная конструкция становится читаемой.
Параметр animation означает, что для нашего HTML-элемента должна применяться анимация, далее через пробел идут значения этого параметра, которые могут быть выделены в отдельные условия:
{
animation: 5s show ease; /*это свойство может быть описано набором нескольких свойств: */
animation-duration: 5s; /* время в течении которого будет проигрываться анимация */
animation-name: show; /* тип или имя анимации */
animation-timing-function: ease; /* свойство animation-timing-function задаёт как происходит анимация в течении длительности каждого цикла */
}
Свойство @keyframes задает ключевые кадры CSS-анимации, т.е. что на что должно измениться.
А следующее незнакомое для нас свойство opacity, которое находится внутри keyframes, ничто иное как прозрачность HTML-элемента, которая должна измениться с нуля до 100% во время анимации.
Заменим скорость анимации на 2 секунды.
Внутри keyframes мы можем задать и другие параметры, которые должны меняться во время CSS-анимации, например, цвет.
Зададим цвет на начало и на конец анимации, сохраним изменения, обновим страничку и посмотрим, что у нас получилось.
В целом, это всё, что нужно знать, чтобы выполнить практически любую задачу по изменению форматирования HTML-документа. В качестве домашнего задания – попробуйте самостоятельно найти ответ на вопрос «как сделать закруглённые углы у изображения с помощью CSS» и применить это на вашем веб-сайте.
Скачать исходные файлы урока №2