Изучение CSS может быть болезненным, особенно когда вы не знаете, с чего начать.
CSS - это язык стилей, а не язык программирования, такой как JavaScript или PHP, на самом деле его довольно легко изучить, особенно если у вас есть некоторые знания HTML.
Сегодня я дам вам несколько советов, которые помогут вам изучить CSS.
1. Основная конструкция
Что нужно знать в первую очередь: научиться писать ваш собственный CSS, вам нужно знать, как правильно его форматировать. На самом деле есть два правильных способа сделать это, но один из них держит вас в порядке.
Поскольку обычно HTML является первым языком, который люди изучают, когда хотят работать с сайтами WordPress, он помогает изучить синтаксис CSS, написав его вначале аналогично HTML.
Вот основная структура CSS:
.class selector {свойство: значение;} #id селектор {свойство: значение;}
Это довольно просто, когда не так много стилей, которые вы хотите реализовать для элемента на своем сайте, но когда вы начнете знакомиться с CSS, вам понадобится гораздо больше, чем один стиль. за элемент, который сделает такую конструкцию неуместной.
Вот почему есть более эффективный и организованный способ написания вашего CSS:
.class selector {свойство: значение; Свойство 2: значение 2; Свойство 3: значение 3; } #id селектор {свойство: значение; Свойство 2: значение 2; Свойство 3: значение 3; }
Теперь вы можете приступить к изучению терминов, используемых в этом примере. Каждый из этих терминов является основными строительными блоками CSS: класс, идентификатор, селектор, свойство и значение. Свойства и значения также называются декларацией.
Это отличная отправная точка для научиться писать ваш собственный CSS, и как только вы начнете, вы можете задаться вопросом, где вы должны написать все это в конце ваших файлов WordPress.
В вашей установке WordPress любой файл с расширением .css является файлом CSS, как вы, наверное, уже догадались. Главный файл, который вам следует искать, - это ваша таблица стилей с именем " style.css". Именно в этом файле вы обычно найдете все стили темы.
2. Удобно с простыми селекторами
Затем вам нужно узнать об основных селекторах и свойствах, но, что более важно, о том, как они работают в теме. Селекторы, такие как h1, h2 et h3 для заголовков и p например, текст абзаца, а также свойства, такие как font-family и «background-color» для цвета фона.
Есть простой способ попрактиковаться в этих новых навыках и фактически увидеть изменения, которые вы вносите, без необходимости начинать свои собственные. WordPress блог. W3Schools содержит массу информации о CSS, а также примеры, в которых вы можете изменить их код, чтобы быстро попрактиковаться. Вы также можете прочитать это Во время Матье Небра на OpenClassrooms.
3. Запомни модель Box
Вы можете легко найти селекторы и свойства, о которых вы не знаете, в кратчайшие сроки. Все, что вам нужно сделать, это выполнить простой поиск в Google или Bing.
Это может быть в случае со многими (или наиболее) вещи в жизни, но модель коробки должна быть исключением.
По сути, это основные элементы макета CSS, которые вам необходимо освоить, чтобы понять многие свойства. Макет коробки также включает в себя множество элементов, которые вы можете настроить.
К счастью, это несложно выучить, и, честно говоря, если я смогу запомнить, у вас не должно возникнуть проблем. По сути, шаблон блока включает в себя область содержимого, внутренние поля или отступы, границы или границу и внешнее поле или поле.
4. Учимся делать
Как только вы начнете знакомиться с CSS, будет отличной идеей попрактиковаться в выборе темы с полностью базовым дизайном, в которую можно вносить изменения.
Важно понимать, как простые изменения могут иногда сильно повлиять на тему, а иногда не так сильно. В конечном итоге, если вы будете практиковаться как можно больше, это поможет вам визуально увидеть вносимые вами изменения.
В проекте вещей, как только вы сможете соединить точки, вы не только сможете быстро написать CSS, но и будете иметь возможность устранять проблемы в будущем, что становится для вас жизненно важной задачей. веб-дизайн и разработка.
5. Есть содержание в зависимости от ширины и высоты
После того, как вы установили простую тему, над которой вы можете работать, вы можете сразу же приступить к изменению макета, указав разную длину и ширину для областей содержимого.
Это позволит вам ознакомиться с макетами Темы WordPress
6. Поплавки и позиционирование
Здесь CSS имеет тенденцию становиться немного сложнее, поскольку вы можете создать макет только с помощью CSS и особенно с плавающими точками и позиционированием. Проблема в том, что эти свойства не предназначены для создания целых презентаций.
Прямо сейчас многие люди отображают совершенно правильный макет. изучить код темы, над которой вы работаете.
7. Продвинутый CSS
На этом этапе вы начнете общаться с CSS, но вам предстоит еще многое узнать:
- классы Ник - Используется для установки определенного состояния элемента, такого как наведение мыши и позиционирование изображения.
- Сложные селекторы - вы можете настроить свой стиль с помощью более продвинутых селекторов.
- CSS3 анимации - Создание затухающей анимации или других переходов.
- Отзывчивый на медиа-запросы CSS3 - позволит вам создавать адаптивные темы в кратчайшие сроки.
- Transforme - Управляйте размером и формой выбранных областей содержимого.
- В-правил - используется для импорта таких вещей, как шрифты и таблицы стилей, в вашу тему.
- градиенты - Добавление градиента к вашей теме без использования изображения.
Это много элементов, с которых вы действительно можете начать учиться, чтобы придать вашей теме больше стиля.
Это все, что нужно было для изучения CSS для вашего WordPress блог. Не стесняйтесь поделиться этим руководством с друзьями в ваших любимых социальных сетях.
