Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Frontend — Javascript

Основы CSS или как сделать свой сайт «самым обаятельным и привлекательным»

Приветствую! Это Андрей Панин, и я продолжаю своё путешествие к глубинам (ну, или к вершинам, кому как нравится) IT и программирования. Буквально недавно я окончил курс по основам HTML, поэтому что будет логичным продолжением? Правильно, CSS. Кое-что я о нём знаю, теперь пришло время это «знание» сделать ровным и удобочитаемым. Как раз то же самое стили CSS делают с веб-страницей. Если теги и атрибуты HTML — это магия, то стили CSS — это магия «на расстоянии». Просто потому что стили «спрятаны» не в самом файле страницы, а в соседнем, как бы «за стенкой». И, тем не менее, малейшее изменение в стилях тут же отображается на странице. Как это получается? Давайте разбираться по порядку.

Урок 1. Введение. Подключение CSS
Здесь мы для начала немного заглянем назад: в корневую структуру HTML-документа, а также вспомним, что такое «родительские», «дочерние» и «сестринские» элементы. А потом начинается главное: именно здесь вводятся понятия селекторов, объявлений и правил CSS, а также CSS-свойств и их значений, объясняется, как правильно связать («подключить») стили к индексному файлу, причём тремя (!!) способами.
А ещё Николай Чернобаев (да, именно он автор этого курса) показал, как на самом деле можно и нужно пользоваться инструментарием разработчика в браузере. Да, действительно, стили здесь как на ладони.

Урок 2. Селекторы CSS
Селекторы — это и есть суть CSS. Их 10 разновидностей, и в этом уроке они рассмотрены буквально под микроскопом: как устроены, как работают. Примеры очень простые и наглядные, всегда можно вернуться и повторить. Николай предельно понятно объясняет, вопросов не остаётся от слова «совсем». Я читал онлайн-справочник по CSS, но ничего не понял тогда толком. А здесь не просто понял, а ПОНЯЛ! И вы поймёте, обязательно.

Урок 3. Центрирование блочных элементов
А вот это уже, собственно, пошла вёрстка: контейнеры и их свойства. Это действительно как кирпичики, на которых строятся практически любые сайты. Делов-то: создать контейнер, выставить внешние и/или внутренние отступы, задать ширину и центрирование… А страница уже совсем иначе смотрится! Если вот так всё по кирпичикам разбирать, глядишь, всю вёрстку можно освоить!

Урок 4. Структура сайта: свойства float и clear
Да, да, я в курсе, что в 2018 году уже никто этими свойствами не пользуется и вёрстка строится на совсем иной основе. Но принципы работы понимать желательно. А когда всё это проделываешь своими руками, в голове выравнивается материал, точно так же, как блоки на странице. И ведь хорошо смотрится итог, и даже есть какое-то подобие адаптивности. Мне было интересно.

Урок 5. Каскадность в CSS
Уффф… Это уже не программирование, это «санта-барбара» какая-то. Действительно сложный (на мой взгляд) материал о наследовании свойств и о конфликтах стилей. Единственный разумный вывод, который напрашивается: чем проще и структурированнее будет ваша будущая таблица стилей, тем лучше для вас как для разработчика. И для тех людей, которые, возможно, будут вносить правки в вёрстку после вас. Если не всё понятно с первого раза, повторите просмотр.

Урок 6. Использование шрифтов CSS
Так вот что на самом деле значит «поиграться со шрифтами»! Настраивать разные красивые шрифты для разных блоков текста, с таким расчётом, чтобы они подгружались с сайта, а не с компьютера пользователя — сложно. И интересно. Это ещё один способ сделать ваш сайт красивым, привлекательным, запоминающимся. Главное — не переборщить, но это уже больше к дизайнеру. А уж вы настроите всё как надо, правильно?

Урок 7. Цвета и размеры в CSS
А вот этот материал оказался так или иначе знакомым. Определение и переопределение цветов и размеров в файле стилей, возможность и необходимость вносить изменения во внешний вид страницы, просто подправляя значения этих свойств — то, с чем я столкнулся давным-давно, ещё в первых своих интернет-проектах. К счастью, сейчас уже не надо перебирать селекторы наугад, теперь они ясны и понятны. Правда, за это время добавились em и rem как единицы измерения, а также размеры относительно области просмотра (это уже больше про вёрстку для мобильных устройств). Сколько, однако, возможностей… CSS — это действительно как будто палитра художника, только вместо кистей и красок строки кода, а вместо холста страница браузера. Валидных вам рисунков, друзья!

Итак, курс по основам CSS завершён. Впереди меня ждёт углубление и детализация: SAAS и Flexbox. Я предполагаю, что это будет ещё сложнее. И ещё интереснее. До встречи в новых статьях!

Делись:

Оставь комментарий!

Добавить комментарий