Оформление шаблона Вордпресс CSS

В предыдущей статье мы ответили на самые основные и общие вопросы о кодировании шаблона Вордпресс. Там же мы начали разговор о html. Сегодня продолжим разбираться и обратимся к CSS — языку, который отвечает за оформление контента нашего блога. Автор должен понимать, что, как и почему написано в таблице стилей — тогда ваш блог будет выглядеть именно так, как хотите вы!

CSS — каскадные таблицы стилей

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

А вот аббревиатура CSS выглядит менее устрашающей (на мой взгляд). Так что, мы будем использовать именно ее в наших рассуждениях.

Чтобы понять, как вообще появилась идея описывать стили на отдельном языке в отдельных файлах, лучше всего посмотреть на пример:

Пример оформления фразы!

А вот, как выглядит ее запись в html:

<p style="text-align: center; color: #ff0000; font-size: 22px;">Вот вам чистый HTML - и форматирование, и оформление!</p>

Все, что написано в кавычках «text-align: center; color: #ff0000; font-size: 22px;» — это описание стиля. А именно:

• text-align: center — выравнивание по центру
• color: #ff0000 — красный цвет шрифта
• font-size: 22px — размер шрифта 22 пикселя

При такой записи код html уже длиннее самой фразы, ради которой он создан. А ведь это самое простое оформление. А если бы нам захотелось добавить цветной фон?! А если бы это была ссылка, которая должна менять цвет при наведении и после посещения?! И таких ссылок в тексте может быть несколько…

В общем, когда не существовало CSS и все оформление прописывалось в html — длина кода обыкновенной статьи превращалась в бесконечную простыню. И разобраться в этом коде, чтобы что-то изменить или исправить ошибку, мог только очень внимательный и сильно замотивированный человек.

Кстати, когда вы делаете какое-то оформление текста в редакторе блога — вы добавляете его именно в html код. Подумайте об этом!

Теперь та же фраза, но с использованием CSS (сразу код):

<p class="mystyle">Вот вам чистый HTML - и форматирование, и оформление!</p>

Уже заметно короче! А где же все эти описания цвета, размеров, выравнивания? Вот здесь, в файле style.php:

.mystyle {text-align: center; color: #ff0000; font-size: 22px}

И теперь везде, где мы присвоим тегу класс mystyle — текст будет центрирован, выделен красным и шрифтом в 22 пикселя. Более того, можно прописать и более общие правила, например, для любой ссылки, которую открывает тег

<a>

Именно поэтому все ссылки на вашем блоге Вордпресс выглядят одинаково, одинаково меняют цвет и т.д. В коде html вообще ничего лишнего не приходится записывать, а в таблице стилей за это оформление отвечает одна строка! Правда круто?!

Как изучить CSS

И тут я снова посоветую сайт htmlbook.ru (уже просто столько ссылок я на них наставила, что решила просто писать название — сами наберете его в адресной строке). Там есть и самоучитель CSS, и список атрибутов, и множество примеров использования разных стилей. К тому же, существует миллиард книг, методичек, учебников и справочников, среди которых обязательно найдется понятное и приятное описание этого языка.

Но мало кому поможет просто прочтение теории. Поэтому я советую параллельно изучать содержимое файла style.php вашего блога Вордпресс. Уверяю вас:

это НЕ страшно и НЕ опасно!

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

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

А еще нужно обязательно попробовать написать собственный стиль. Для тренировок могу посоветовать прочитать статью о создании блока, который будет выделять важные фрагменты текста. Сначала просто повторите шаги, описанные в посте, потом измените некоторые параметры, оцените результаты…

Можно утверждать:

CSS — это реальный инструмент для кибертворчества! Спешите его освоить!

А в следующий раз мы с благоговением и трепетом приступим к знакомству с php. Пишите мне, какие еще вопросы возникают у вас по поводу шаблона Вордпресс, что еще интересно по поводу html и CSS? — Будем вместе разбираться