Лучший способ самостоятельного изучения CSS

2 голоса
css уроки для начинающих

Здравствуйте, уважаемые читатели моего блога. Если вы уже начали знакомиться с движками и разработкой сайтов, то наверняка в Google вас уже начала преследовать реклама «css уроки для начинающих». Что это такое и нужно ли вам лезть в эти дебри узнаете из этой статьи.

О чем вообще речь

Начнем с выяснения что же это за три такие страшные буквы ­– CSS. Грубо говоря, это коды, которые позволяют вам улучшить и изменить дизайн вашего портала. «Боже мой, — скажете вы, — Я же надеялся, что мне никогда не придется с этим сталкиваться, а потому и выбрал wordpress!». Не стоит паниковать. Вас никто не заставляет изучать их, в принципе, вы можете избежать подобной работы, а можете попробовать что-то новое, узнать чуть больше и сэкономить кучу денег на верстальщиках.

Не стоит волноваться раньше времени, просто узнайте о преимуществах, которые дает изучение CSS, поймите зачем это нужно, немного разберитесь в терминологии, алгоритме, и сможете принять решение самостоятельно. Прочитайте статью до конца, и вы поймете, что не так страшен код, как его малюют.

В идеале над сайтом работает множество людей. Дизайнер создает фотографию или рисунок в Photoshop, далее по этому изображению производится верстка сайта. В России всегда действовало правило, что чем непонятнее профессия, тем за нее больше платят. Врачевать и учить – просто, это каждый может, а вот «программисты», владеющие тайным языком, зарабатывают в разы больше, ведь никто не сомневается в их профессионализме.

Внизу вы можете увидеть: в левой части изображение (работа дизайнера), а в правой – код (то, над чем трудился верстальщик). Вы бы сами, за что заплатили больше?

blog1

На самом деле пугаться не стоит. Никто не учит коды наизусть. Самое главное понять, как они работают, узнать основные правила и алгоритм. Если вы к концу этой статьи заинтересуетесь, то можете скачать и обучиться всему по бесплатному видео курсу CSS Евгения Попова: http://1popov.ru/bonuscourse/cssform/. Всего 45 видео уроков и вы постигните великие тайны.

Повторюсь, никто не знает всех кодов. Со временем самые распространенные из них сами врезаются в память, а те, с которыми вы сталкиваетесь впервые, можно без труда найти в интернете. Что отличает верстальщиков и программистов от других людей? Они знают чуть больше остальных и не боятся трудностей. Они ставят задачи и выполняют их. Пока многие боятся непонятного и, казалось бы, выносящего мозг длинного текста, прогеры спокойно получают на нашей непросвещенности.

Я не хочу сказать, что верстальщики и программисты бесталанные, ленивые и ничего не умеют. Это не так. Наоборот, они очень крутые и добились многого, за это им отдельное уважение! Их можно сравнить с доисторическими шаманами и алхимиками. Мало кто знает, что они делают, но народ идет к ним за помощью толпами, а в дары за минимальные услуги приносят девственниц, яйца драконов и корни всяческих растений.

Просто о сложном

Сейчас этот код кажется вам непрерывным потоком символов. На самом деле каждый элемент находится на своем месте, существует определенный алгоритм позиционирования. Как только вы начнете в это вникать, все покажется не таким уж сложным.

Например, если вы приглядитесь, то увидите обилие символов div – непременный атрибут блочной верстки. Посмотрите на картинке внизу. Часть кода отвечает за определенный блок на странице.

Или вот:

Если проводить аналогию: у вас есть полочка – базовые знания CSS. И на эту полочку вы можете поставить приправу для супа (например, кнопку или форму для заполнения), а для выполнения этой задачи вам не нужно будет идти в магазин (обращаться к верстальщикам). Вы самостоятельно находите нужный предмет (код) в интернете и ставите его в правильное место.

Если вы собираетесь всерьез заняться созданием сайта, вам всенепременно нужно понять основы. Например, для адаптивной верстки – когда все элементы вашего портала подстраиваются под размеры экрана, нужно всего-то добавить нескольких символов в изначальный документ стиля.

Или горизонтальное вываливающееся меню. Его можно сварганить буквально за пару секунд самому, вместо того, чтобы переплачивать исполнителю. Если вам сейчас страшно и непонятно, просто вспомните как было непривычно делать что-то первый раз. Например, кататься на велосипеде!

Не спорю, можно обойтись и без знаний, в интернете всегда найдутся люди, которые согласятся за определенную плату выполнить любое ваше желание. Вот только будет совсем обидно за потраченные деньги, когда со временем вы все-таки захотите вникнуть в суть вопроса и поймете насколько просто было сэкономить.

Базовые понятия и немного практики для успокоения

Найти файл стиля можно без проблем прямо в админке. Для этого заходим во Внешний вид – Редактор.

И находим справа внизу файл STYLE.CSS. Сейчас css подключены ко всем html страницам, то есть какие бы изменения вы не делали, они будут отображаться в любом месте вашего сайта, потому как вы работаете с шаблоном. Если соберетесь делать дизайн самостоятельно, то подписывайтесь на мой блог и сможете все сделать без привлечения сторонних ресурсов.

Давайте попробуем что-нибудь здесь сделать. Изменим цвет и размер текста. Для этого просто поменяем значения в этих колонках.

В итоге, вместо вот такой главной страницы

У нас получается вот такая.

Если в коде вы видите какое-то слово с точкой впереди, то это означает выделенный класс (class). Кнопка, поисковая строка, логотип или как в примере внизу «Заголовок сайта».

Давайте немного поиграемся и поменяем color (цвет).

Видите, надпись из белой превратилась в синюю.

Вот точно также, вставив свое значение в код вы без труда можете добавить на сайт форму обратной связи, кнопки для продажи, звонка и многое другое.

Если вы планируете этим заниматься профессионально, то придется скачать русский редактор CSS https://notepad-plus-plus.org/download/v6.8.3.html (для Windows) или sublime text 2 (для iOS). В них более удобно работать с собственными шаблонами и делать дизайн с нуля. Если вам понравилась эта статья, то обязательно качайте эти программы и подписывайтесь на рассылку моего блога. Совсем скоро вас ждут новые интересные уроки. На почту придет уведомление, что новая публикация наконец-то вышла!

Всем удачи и не пугайтесь трудностей. Все решаемо, когда речь идет о работе в интернете.

Какого материала вы хотели бы видеть больше? (Рубрики)

Комментариев к статье: 5

  • Наталья Краснова 2016-01-13 в 09:37

    Очень хочется изучить этот чудо-язык, но на все надо время! А еще хочу научиться делать оглавление как у вас. Может поделитесь информацией?

    • Андрей Зенков 2016-01-13 в 12:30

      Наталья, мои Оглавления выведены при помощи плагина Table of Contents Plus. Настройки достаточно просты и логичны. Но если возникнут вопросы, пишите — подскажу.

  • Наталья Краснова 2016-01-14 в 15:47

    Спасибо, буду устанавливать. Попробовала без плагина, мне эта идея не очень понравилась. Сделаешь одну маленькую поправку (например, пробел удалишь) и вся работа насмарку.

  • Наталья Краснова 2016-01-14 в 17:11

    Установила, у всех написано, что должно оглавление выводиться автоматически. У меня не вывелось.

    • Андрей Зенков 2016-01-14 в 18:19

      Вполне возможно, что конфликтует с другими плагинами. Следует по месту смотреть, можете в личку скинуть данные для входа в админку, гляну. Либо поищите другие подобные плагины. Для начала сверьте настройки: prntscr.com/9pxdwr

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

  • ;-)
  • :|
  • :x
  • :twisted:
  • :smile:
  • :shock:
  • :sad:
  • :roll:
  • :razz:
  • :oops:
  • :o
  • :mrgreen:
  • :lol:
  • :idea:
  • :grin:
  • :evil:
  • :cry:
  • :cool:
  • :arrow:
  • :???:
  • :?:
  • :!: