<- Начало в WEB-программировании . Урок 1
В прошлом уроке мы с тобой создали твой первый сайт. Да, простой. Да, некрасивый. Сегодня мы это частично исправим. Посмотрим, что у нас есть с прошлого урока:
Соглашусь, не очень красиво.
1. Основы CSS. Встраиваемый и внешний код.
Почти все стили принято делать через CSS. Это такой язык (нет, не программирования) стилизации, который используется (не угадаешь) - для стилей. Его можно использовать двумя способами:
1) Встроить в страницу
2) Вынести в отдельный файл
Рассмотрим плюсы и минусы каждого из методов:
1) Плюсы в том, что тебе без разницы на кэширование, поэтому во время разработки тебе не нужно будет бороться с проблемой, что браузер уже сохранил старую версию, а новую отображать не хочет (эта проблема появляется при загрузке сайта на хостинг). Второй плюс в том, что ты видишь весь код сразу, а не груду файлов. Есть обратная сторона монеты. Это некрасиво, нагроможденно, и неоптимизированно в плане доставки контента. Так что, во время разработки лучше использовать встраиваемый CSS, а после - внешний.
2) Плюсы и минусы обратные к прошлому, и описаны в п. 1.
Для удобства, воспользуемся методом 1.
2. Фон и цвет текста
Начнем с фона страницы. Я думаю, что ты так же, как и я, не любишь режущий глаза, "токсичный" белый цвет. Особенно, на весь экран. Давай это исправим. Для этого используем новый тег - <style></style>. Его нужно прописывать в <head></head>, и он тоже удобно автоматически дополняется после написания style и нажатия Tab. Внутри этого тега мы будем писать код не на языке HMTL, как делали раньше, а на CSS. Посмотрим, как изменить фон. Для этого используем следующий код:
Рассмотрим CSS код по строке.
1) body {: body - указатель на элемент. Это словно имя элемента, и в CSS мы зовем его. Далее открывается фигурная скобка. Она ограничивает стили именно для этого элемента.
2) background: *хэштег*222222; - background название свойства, которое мы хотим изменить. В данном случае мы меняем фон. Числа после хэштега - HEX-код цвета. Найти его можно в таблице цветов, или же пользуясь интерактивной табличкой от Яндекса. В конце каждой строчки со свойствами нужно писать ;
3) } - говорим CSS, что мы закончили перечислять стили для body.
Изменим цвет текста, иначе он будет сливаться с фоном.
4) h1, p { - Можно написать несколько элементов, к которым будут применены стили. В нашем случае это заголовок и параграф.
5) color: *хэштэг*ffffff; - Атрибут color отвечает за цвет текста. *хэштэг*ffffff обозначает белый цвет. Можно изменить на другой цвет, пользуясь все той же табличкой.
6) } - Заканчиваем стилизацию текста
Сохраняем (Ctrl + S), перезагружаем страницу.
3. Ширина элементов и отступы
3. Ширина элементов о небольшой параграф текста растянут на всю страницу, верно? А также некрасиво и то, что текст прижат к левому краю. Давай это исправим:
Очень много непонятных атрибутов, верно? Давай по-порядку
Ширина задается с помощью атрибута width. После двоеточия нужно написать ширину. Ее можно задать абсолютной, или относительной. Абсолютная - эта та, которая не адаптируется под размер экрана, и будет одинаковой как на телефоне, так и на компьютере. Относительная же зависит от какого-либо параметра, чаще всего от ширины и высоты. width: 50%; - сделает наш текст шириной 50% относительно ширины страницы. Если же ты хочешь использовать абсолютные системы измерения, то тебе наверняка пригодится обозначение px. Оно означает пиксели. Например: width: 500px; - сделает текст шириной 500 пикселей.
Отступы задаются с помощью атрибута margin. Если написать margin: 5px;, то браузер отступит 5 пикселей от каждого края текста, и сделает своеобразные поля вокруг текста. Словно поместит его в невидимую коробку, размером, превышающим текст на 5 пикселей. Если после margin написать -сторона, то можно менять отступы отдельно для левого, правого, верхнего и нижнего края (left, right, top, bottom). В примере мы сделаем отступ 5% относительно ширины слева, и 5% относительно высоты сверху.
Уже красивее, верно? А теперь самое главное, по-моему мнению - шрифты.
4. Шрифты
Я могу часами сидеть и выбирать шрифты для сайта. Современные и винтажные, рукописные и граффити, из фильмов и авторские. Такие разные. Один из моих самых любимых - Poiret One. Но давай найдем другой шрифт. Для этого зайдем на Google библиотеку шрифтов и выберем что-то новое.
Мы видим названия шрифтов, а также пример его написания. Простое правило - если пример на русском, значит шрифт его поддерживает. Если нет - то это не наш вариант, так как шрифт красиво отображается только на латинице.
После того, как выбрали шрифт, жмем на плюсик
Как теперь выглядит код:
Сохраним и откроем в браузере.
Только что ты стилизовал свой сайт, сделал его более красивым, узнал про CSS, изучил несколько атрибутов и знаешь, как изменять шрифты. Надеюсь, тебе понравилось. Чтобы не пропускать уроки - подпишись на блог, и канал в телеграм. Если остались вопросы, задавай их в комментариях, или в лс в телеграм (ссылка в канале). Спасибо за прочтение :)
В следующем уроке мы поговорим о толщине текста, узнаем про классы и ID, и узнаем про форматирование текста.
CSS. WEB-программирование. Урок 3 ->