Урок 2. CSS — Как гуглить?

Сегодня мы с вами поднимем вопрос оформления веб-сайтов. Для любого 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» и применить это на вашем веб-сайте.

Обсудите ваш проект с менеджером

    Я согласен на обработку персональных данных согласно политике конфиденциальности

    Служба поддержки

      Тариф Базовый Продвинутый Профессиональный
      При оплате на 1 год 390 руб./мес. 450 руб./мес. 490 руб./мес.
      При оплате на 2 года 332 руб./мес. 383 руб./мес. 417 руб./мес.
      При оплате на 3 года 273 руб./мес. 315 руб./мес. 343 руб./мес.

      Реквизиты для рассчётного счета

      Заполните реквизиты вашей организации, а мы подготовим и направим счет вам на электронную почту. Обратите внимание, при оплате через расчетный счет срок выполнения работ увеличен до 10 рабочих дней.

        Я согласен на обработку персональных данных согласно политике конфиденциальности