Лучший способ выучить CSS - как и многое другое – это сразу приступить к практическим занятиям. В отличие от XHTML и PHP, вам не надо работать с центральными файлами шаблона. Также нет никакой базовой концепции, в которой нужно разобраться. Просто пробуйте! Здесь также работает любимый метод проб и ошибок.
Перед тем, как начать, в вашем файле style.css уже должна быть некоторая информация. Давайте прямо сейчас выясним, что она означает.
/* Theme Name: Тестовая тема Theme URI: http://wp-config.ru/ Description: Тестовая тема учебного курса. Version: 1.0 Author: wp-admin Author URI: http://wp-config.ru/ */
- Первая строчка – это имя темы, она говорит сама за себя.
- Вторая строка – это место расположения страницы вашей темы или место где она всегда доступна. Если вы создаете тему для себя, не для публичного использования, забудьте об этом.
- Третья строка – описание темы.
- Четвертая – номер версии, что важно, особенно, когда вы выпускаете обновленные версии вашей темы для общественного пользования.
- Пятая и шестая строки – это соответственно имя автора и его домашняя страница.
- Знаки /* и */ ставятся, чтобы информация о вашей теме не влияла на отсальную часть страницы. Это комментирование CSS. Когда вы будете вводить код CSS для стилизации своей веб-страницы, вам может понадобиться добавить комментарии в том или ином месте, чтобы не запутаться. Но вы же не хотите, чтобы эти комментарии влияли на код? Для этого необходимо использовать знаки /* и */, чтобы сделать комментарии невидимыми браузеру.
Вот обработанная информация о теме:
Шаг 1:
На этом этапе вам необходимы все браузеры, под какими вы хотите чтобы правильно отображалась ваша тема: Mozilla Firefox, Internet Explorer(в идеале версий 6, 7 и 8), Opera, Google Chrome и Safari - всё для тестирования темы под ними. Разные браузеры порой по разному воспринимают CSS. Лучше всего тестировать тему в как можно большем количестве операционных систем и браузеров. Если вы так же ленивы как и я - тестируйте тему только в Firefox :-)
Шаг 2:
Откройте файл style.css в редакторе и вставьте туда следующий код:
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 - вы можете сделать это самостоятельно, вне рамок нашего курса, освоить его вам поможет этот самоучитель или этот учебник.
По поводу тестирования в разных браузерах, был где-то сайтик, который позволял по вводу урл показать как выглядит страница в очень многих браузерах(большой список на выбор)..
вот только ссылку не помню, надо порыться в избранном дома и на работе, как найду – отпишу.
Alex, подозреваю вы имели ввиду сайт browsershots.org? Он наиболее популярный среди остальных.
Примерно оно, скорее всего оно) Только вот тут создалась какая-то очередь на обработку скриншотов, раньше вроде не было..
может правда и сайт другой был)))
давно дело было)
4 утра, на сегодня хватит уроков, завтра продолжу. Спасибо!