|
Добро пожаловать,
Гость
|
ТЕМА:
Начальное руководство по HTML/CSS/JS. Создаём кликер на HTML. Часть четвёртая. 2 года 5 мес. назад #25
|
Продолжаем создавать свой мини-кликер с помощью HTML, CSS и JS.
В этой части мы попрактикуемся. Предыдущая (третья) часть. Все элементы страницы размещаются внутри тега <body>, кроме, например, подключения CSS и скриптов. Подключение CSS происходит в теге <head>, где находится "информация" о странице. Создадим в папке с проектом файл style.css и подключим его внутри тега <head>: <link rel="stylesheet" type="text/css" href="style.css">
Теперь удалим всё содержимое тега <body> и создадим заготовку счётчика коинов. Для этого используем тег <div> и добавим ему тег counter. Внутри него пока что напишем 0: <div class="counter">0</div><button class="clicker-button">+1 коин!</button>
Готово! В браузере Google Chrome наша страница теперь выглядит вот так: 
Пока что не очень красочно, но сейчас мы придадим странице стиль! Зайдем в файл style.css и добавим классу .counter стиль: .counter {
}text-align — свойство для указания, где по горизонтали будет находиться текст. То есть, если в свойстве указать center, то текст будет находиться по середине. margin — свойство для создания внешних отступов. margin-top — это дополнительное свойство для создания внешнего отступа сверху. Вместе с ним существуют свойства margin-bottom, margin-left и margin-right, которые создают внешние отступы снизу, слева и справа соответственно. А 250px — это значение, которое указывает размер отступа — 250 пикселей. Вместо него может быть любое другое количество, а также вместо пикселей можно использовать другие единицы измерения, например %, em, vw, vh и т.д. Их достаточно много. Вот что должно получиться: .counter {
text-align: center;
margin-top: 250px;
}
Всё ещё кривовато. Теперь добавим стиль кнопке: .clicker-button {
display: block;
margin: 0 auto;
}Здесь мы использовали два значения — 0 auto, поэтому сверху и снизу отступов не будет, так как мы указали 0, а справа и слева указали auto. Значение auto здесь сделает одинаковые отступы слева и справа, то есть кнопка будет находиться посередине. Чтобы margin: 0 auto работал, элемент должен быть «блоком». Поэтому мы использовали свойство display: block, чтобы превратить кнопку в «блок». В свойстве display есть еще много значений, например none, который вообще удаляет блок (при этом блок все равно можно будет использовать в скрипте, например, чтобы вернуть этот блок обратно), table, чтобы сделать элемент таблицей, inline, чтобы сделать элемент строкой... Код CSS теперь должен выглядеть так: .counter {
text-align: center;
margin-top: 250px;
}
.clicker-button {
margin: 0 auto;
display: block;
}
Готово, теперь элементы находятся по центру! Теперь попробуем раскрасить нашу кнопку! Добавим в ее стиль свойств: .clicker-button {
margin: 0 auto;
display: block;
background-color: #ffa500;
border: 3px solid #eb8d00;
padding: 5px 25px;
}background-color отвечает за цвет фона. Мы указали цвет #ffa500, то есть оранжевый, но вы можете использовать любой другой. border отвечает за обводку. Первым значением идет размер обводки, то есть 3px. Вторым значением идет «стиль» обводки. Обводка, может быть, например, пунктирная, но мы использовали solid — обычную обводку. Третьим значением идёт цвет, мы использовали темно-оранжевый, #eb8d00. padding отвечает за внутренние отступы. margin отвечает за внешние отступы, а padding за внутренние. Значения подставляются также, как и в margin. Здесь указаны 5px 25px, то есть по вертикали отступы будут в 5 пикселей, а по горизонтали 25 пикселей. Посмотрим, что получилось! 
Готово! Теперь наша страница имеет более красочный вид и уже имеет содержание!  Читать следующую часть. |
|
|
Пожалуйста Войти или Регистрация, чтобы присоединиться к беседе. |
Copyright © vlad. 2022
