Всем привет!
Итак, в прошлой статье я писал про то, как можно создать свой сайт на HTML. Сейчас же мы добавим ему немного дизайна. Нужно все тоже, что и для сайта.
Для начала создаем файл с расширением .css в той же папке, что и HTML и открываем его.
Далее, скачиваем расширение на CSS, оно нам очень поможет. Есть два варианта - писать в том же файле, что и HTML, но мы будем писать в отдельном файле, так удобнее.
Также нам надо открыть HTML файл и в <head> добавить команду:
<link rel="stylesheet" href=путь к css файлу в папке сайта>
Наконец, открываем наш CSS файл и пишем:
p{
font-size: 20px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-style: Calibri;
}
И что же мы написали? Первой строкой мы "сказали", к какому классу все это относится, вторая строка объявляет размеры шрифта, третья - семейство шрифта, ну а четвертая - сам стиль шрифта.
И, если вы все сделали правильно, то весь текст на вашем сайте будет написан с размером 20 пикселей и со шрифтом Calibri.
Перейдем к картинкам, в HTML файле напишем к картинке атрибут class='image'
Вместо image может быть что угодно, главное делайте понятные и логичные названия, вряд ли даже вы в будущем сможете понять, что под названием jarenye_sosiski может быть картинка с бананами.
Итак, в CSS файле пишем:
.image{
border-radius: 5px;
margin-left: 200px;
margin-top: 200px;
}
Сохраняем, заходим на сайт и видим примерно это:
Разберемся, что же мы сделали. Первая строка, как я и говорил раньше, объявляет класс. Border-radius - команда используется для того, чтобы скруглить края картинки в нашем случае - на 5 пикселей. Ну а 3 и 4 строки - это отступы, слева и сверху по 200 пикселей, но можно изменить это значение на любое другое.
Это наши коды сайта на данный момент:
На этом всё, ну а в следующей статье я расскажу больше про команды в HTML и CSS, всем пока!