Лекция
Привет, сегодня поговорим про wordpress style css, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое wordpress style css, вступление к css , настоятельно рекомендую прочитать все из категории Системы управления контентом CMS.
Лучший способ выучить CSS — как и многое другое – это сразу приступить к практическим занятиям. В отличие от XHTML и PHP, вам не надо работать с центральными файлами шаблона. Также нет никакой базовой концепции, в которой нужно разобраться. Просто пробуйте! Здесь также работает любимый метод проб и ошибок.
Перед тем, как начать, в вашем файле style.css уже должна быть некоторая информация. Давайте прямо сейчас выясним, что она означает.
|
1
2
3
4
5
6
7
8
|
/*Theme Name: Тестовая темаTheme URI: http://wp-config.ru/Description: Тестовая тема учебного курса.Version: 1.0Author: wp-adminAuthor URI: http://wp-config.ru/*/ |
Вот обработанная информация о теме:
На этом этапе вам необходимы все браузеры, под какими вы хотите чтобы правильно отображалась ваша тема: Mozilla Firefox, Internet Explorer(в идеале версий 6, 7 и 8),Opera, Google Chrome и Safari — все для тестирования темы под ними. Об этом говорит сайт https://intellect.icu . Разные браузеры порой по разному воспринимают CSS. Лучше всего тестировать тему в как можно большем количестве операционных систем и браузеров. Если вы так же ленивы как и я — тестируйте тему только в Firefox :-)
Откройте файл style.css в редакторе и вставьте туда следующий код:
|
1
2
3
4
5
6
7
8
9
|
body {margin: 0;font-family: Arial, Helvetica, Georgia, Sans-serif;font-size: 12px;text-align: left;vertical-align: top;background: #ffffff;color: #000000;} |
Как и при работе с XHTML или PHP, добавляйте отступы для организации кода:
Сохраните файл style.css, обновите браузеры, чтобы увидеть изменения (помните что вы работаете с несколькими браузерами).
Считайте, что body{ } – это тэг, а все, что между фигурными скобками – это атрибуты и значения, как и в XHTML. { — это открыть. } – это закрыть. Внутри фигурных скобок { и }двоеточие означает начало значения, а точка с запятой — конец (я использую термины из XHTML и PHP «тэг», «атрибут», «значение» для СSS, чтобы вам было проще; на самом деле, РНР и CSS используют разные термины, например: параметры, селектор и свойство).
Перед тем как продолжить, объясню, почему вы использовали CSS селектор body{ } — потому, что вы работаете над стилизацией базовой части веб-страницы – тэгом <body>. Вы не стилизируете тэг <header>, потому что нечего стилизировать. Все, что отображается на веб-странице находится в структуре тэгов <body> и </body>.
Позже вы будете работать над стилем DIV блока с ID «header» и каждый блок, для которого потребуется указать свой стиль, оличный от общего.
Давайте подробнее разберемся в нашем коде:
margin: 0; — отмена созданных по умолчанию отступов внутри боди тэга. Если вы хотите, чтобы отступы присутствовали, или вообще сделать их больше, измените 0 на большее значение: 10рх, 13рх, 20px и т.д. РХ сокращенно пиксель (pixel). Когда поле равно «0», вам не обязательно ставить рх после нуля.
На изображении ниже красным обозначен используемый по умолчанию отступ, примененный к боди тэгу:
После изменения отступа на margin: 0; отступы исчезнут.
font-family: Verdana, Helvetica, Georgia, Sans-serif; — указывает, какой шрифт использовать для отображения элемента. Шрифты, которые следуют после первого, в данном случае это Verdana, являются альтернативными. Если у посетителей вашей страницы в системе не установлен шрифт Verdana, браузер будет искать шрифт Helvetica, потомGeorgia, затем Sans-serif. Вы можете найти список установленных шрифтов в системной папке Fonts вашей операционной системы;
font-size: 12px; — размер шрифта, здесь все говорит само за себя. Увеличте или уменьшите показатель, чтобы увидеть изменения;
text-align: left; — выравнивает ваш текст по левому краю, измените его на выравнивание на «right» или «justify», чтобы увидеть изменения;
vertical-align: top; — проверяет, все ли начинается с верха страницы. Если вы измените данный пункт на выравнивание по середине или по нижнему краю, содержимое опустится вниз;
background: #ffffff; означает белый фон. Кадый цвет имеет свой код в HTML Например #ffffff – это код белого цвета. #000000 – код черного.
color: #000000; означает, что текст будет черного цвета.
В нашем курсе мы изучим азы CSS на достаточном уровне для того, чтобы вы смогли создать несложную тему для WordPress. Если вы хотите двигаться дальше и глубже изучить CSS — вы можете сделать это самостоятельно, вне рамок нашего курса, освоить его вам поможет этот самоучитель или этот учебник.
На этом все! Теперь вы знаете все про wordpress style css, Помните, что это теперь будет проще использовать на практике. Надеюсь, что теперь ты понял что такое wordpress style css, вступление к css и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Системы управления контентом CMS
Из статьи мы узнали кратко, но содержательно про wordpress style css
Комментарии
Оставить комментарий
Системы управления контентом CMS
Термины: Системы управления контентом CMS