Продолжаем знакомство с CSS. На этот раз мы закончим оформление нашего первого экрана. Итак, сейчас, наш файл выглядит вот так:
Итак, начнем с того, что увеличим шрифт надписи. Это делается при помощи стилевого свойства font-size. Установим размер шрифта в 27 пикселей:
Вот, что получилось:
Подвинем надпись пониже при помощи свойства margin-top (верхний отступ). И поместим надпись по центру при помощи свойства text-align (выравнивание текста):
Результат:
Отлично! Теперь поменяем шрифт надписи при помощи свойства font-family (имя шрифта), сделаем его жирнее при помощи свойства font-weight ("толщина" шрифта). И еще поменяем цвет надписи при помощи свойства color (цвет).
Вот такой результат мы получим:
С надписью у нас все в полном порядке, теперь займемся кнопками. Сначала верхнюю кнопку, поместим ее пониже и по центру при помощи свойства margin (отступы).
Для этого свойства мы указали значение 18px auto, первое значение отвечает за верхний и нижний отступы - он будет равен 18 пикселям. Второе значение отвечает за левый и правый отступы - он будет установлен автоматически так, чтобы левый и правый отступы равны, то есть, кнопка расположится по центру.
Теперь поменяем фон, как делали это прежде, при помощи свойства background-color (цвет фона). Сделаем шрифт побольше (font-size) и уберем границу у кнопки при помощи свойства border (граница):
Я еще поменял цвет шрифта на белый для лучшего контраста:
Сделаем внутренний отступ у кнопки побольше, это делается при помощи свойства padding (внутренний отступ). Обратите внимание margin - внешний отступ, а padding - внутренний отступ
Получилось вот так:
Отлично, теперь давайте, все, что относится к первой кнопке просто скопируем для второй:
Вот так получится:
Сделаем кнопки пошире (width) и сдвинем кнопки пониже изменив свойство надписи margin-bottom:
Получилось вот так:
Итак, последний штрих и заканчиваем урок. Изменим цвет границы экрана свойством border-color (цвет границы) и сделаем закругленные углы при помощи свойства border-radius (радиус закругления углов):
Заодно, я закруглил углы кнопок:
Вот так, в таком виде пока и оставим первый экран. В следующем уроке займемся вторым экраном.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки. Другие курсы и навигация по каналу
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.