10 простых советов по изучению CSS для WordPress

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

Поскольку CSS — это язык стилей, а не полноценный язык программирования, такой как Javascript или PHP, на самом деле его довольно просто выучить, особенно если у вас есть некоторые знания HTML (которые, как я предполагаю, у вас есть для целей этого поста).

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

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

Продолжить чтение или перейти вперед по этим ссылкам:

• Базовая конструкция
• Практика с простыми селекторами и свойствами
• Запомните блочную модель
• Учитесь, делая
• Упорядочить содержимое по ширине и высоте
• Поплавки и позиционирование
• Расширенный CSS
• Дублируйте сайт с помощью CSS
• Препроцессоры
• Фреймворки

1. Базовая конструкция

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

Поскольку HTML обычно является первым языком, который люди изучают, когда хотят работать с сайтами WordPress, полезно изучить синтаксис CSS, сначала написав его аналогично HTML.

Вот основная структура, которую принимает CSS:

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

Вот почему существует более эффективный и организованный способ написания вашего CSS:

Теперь вы можете начать копаться в терминах, которые используются в этом примере. Каждый из этих терминов является базовым строительным блоком CSS: класс, идентификатор, селектор, свойство и значение. Свойства и значения также составляют то, что называется объявлением.

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

В вашей установке WordPress любой файл, оканчивающийся на .css , является файлом CSS, как вы, наверное, уже догадались. Основной файл, который вам нужно найти, — это таблица стилей, помеченная как style.css . Здесь находится большая часть или весь дизайн вашей темы с точки зрения цветов, шрифтов, основных изображений и, возможно, некоторых макетов вашей темы.

Вы также можете заметить файл в готовой теме под названием custom.css , и обычно они хотят, чтобы вы внесли какие-либо изменения в тему. Когда вы вносите изменения в этот файл, он должен перезаписывать существующие стили в таблице стилей темы.

Если вы добавляете плагины в свою тему, они также могут поставляться с файлами CSS в своей папке, и они используются для стилизации внешнего вида плагина.

2. Практикуйтесь с простыми селекторами и свойствами

Далее следует изучить основные селекторы и свойства и то, как они функционируют в теме. Например, селекторы, такие как h1 , h2 и h3 для заголовков и p для текста абзаца, а также такие свойства, как font-family и background-color .

Есть простой способ попрактиковаться в этих новых навыках и увидеть изменения, которые вы вносите, без необходимости вести собственный блог WordPress. В W3Schools есть тонна информации о CSS, а также живые примеры, где вы можете изменить их код, и одним нажатием кнопки вы можете мгновенно увидеть внесенные вами изменения.

Когда вы увидите пример, просто нажмите кнопку « Попробовать сами» , и откроется окно, в котором вы можете протестировать базовый CSS.

3. Запомните блочную модель

Я сторонник того, чтобы ссылаться на наиболее распространенные фрагменты информации, а не запоминать ее всю. Возможно, это потому, что мне часто не хватает памяти, но я бы скорее сказал, что это потому, что в Интернете так много замечательных ссылок.

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

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

4. Учитесь на практике

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

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

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

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

Белый Спектрум

Тема White Spektrum — это простая тема с общим макетом, включающим основную область содержимого, боковую панель, верхний и нижний колонтитулы.

Помимо всплеска цвета, когда дело доходит до шрифтов и ссылок, это простая и простая тема для работы.

Основатель

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

5. Расположите контент по ширине и высоте

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

Это предвестник следующего шага, который знакомит вас с различными областями макета в теме WordPress.

6. Поплавки и позиционирование

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

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

7. Расширенный CSS

На данный момент вы действительно начинаете осваивать CSS, но вам предстоит еще многое узнать:

• Псевдоклассы — используются для определения определенного состояния элемента, например, при наведении курсора мыши и размещении изображений в определенном месте, относящемся к другим элементам.
• Сложные селекторы . Вы можете получить еще более конкретные стили, используя более сложные селекторы.
• Анимации CSS3 — создание плавных, всплывающих или других переходов при наведении курсора на изображения и кнопки.
• Отзывчивость с помощью медиа-запросов CSS3 . Один из самых простых способов создать адаптивную тему — использовать медиа-запросы.
• Transforms — управляет размером и формой выбранных областей содержимого.
• At-rules — используется для импорта таких вещей, как шрифты и таблицы стилей, в вашу тему.
• Градиенты — добавление градиента к вашей теме без использования изображения.

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

8. Дублируйте сайт с помощью CSS

Со всеми этими знаниями вам может понадобиться более прочный пояс, но, что более важно, вы действительно сможете применить свои навыки на практике, используя базовую оболочку темы и добавляя свои собственные стили CSS с нуля.

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

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

Вот несколько отличных бесплатных тем для начинающих, которые вы можете использовать:

• Чистый лист

  

  Это голые кости, насколько это возможно. В этой теме есть только HTML5, поэтому вы можете свободно добавлять свой CSS, не беспокоясь о конфликте стилей. Тем не менее, он поставляется со всем, что вам нужно, чтобы начать стилизацию вашей темы.

• Пустой HTML5

  

  HTML5 Blank — это шаблонная тема WordPress, которая включает в себя некоторые стили, но не так много. Это отличное начало, если вы не слишком заинтересованы в том, чтобы начинать свой CSS с нуля.

• Подчеркивание

  

  Если вы немного предприимчивы и хотите попробовать более продвинутую стартовую тему, Underscores — отличный вариант, хотя и не для слабонервных, поскольку он поставляется с двумя предварительно загруженными образцами стилей темы. Он также включает в себя некоторые передовые методы и кодирование, что делает его отличным инструментом обучения.

На GitHub также есть тема HTML5 Reset WordPress. Он включает в себя функции, которые немного более продвинуты, но именно это делает его ценной стартовой темой.

9. Препроцессоры

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

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

Если вы хотите попробовать свои силы в SASS в контексте WordPress, ознакомьтесь с темой Bones. Он состоит в основном из HTML5, поэтому вы можете попробовать стилизовать его с помощью встроенного SASS, который уже включен.

10. Фреймворки

В веб-разработке фреймворки — это структура для создания динамических веб-сайтов. В конечном счете, цель фреймворка — ускорить работу сайтов без потери функциональности.

После того, как вы освоите CSS, вы можете ускорить разработку своей темы с помощью фреймворка.

Одним из самых популярных фреймворков является Twitter Bootstrap. Он создан, чтобы быть отзывчивым прямо из коробки, и использует как SASS, так и LESS, а также множество пользовательских компонентов CSS.

Подведение итогов

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

Чтобы получить дополнительные ресурсы по изучению CSS и WordPress, ознакомьтесь с некоторыми из наших других публикаций: Мега-руководство по изучению и использованию CSS для WordPress: более 150 ресурсов и От новичка до профессионала WordPress: более 200 ресурсов для развития карьеры.

• CSS