Применение стилей CSS в редакторе WordPress

Применение стилей CSSЗдравствуйте, дорогие читатели!

В сегодняшнем юбилейном, 100-м посте я хочу написать о применении стилей во встроенном редакторе WordPress для нестандартного оформления контента. Этот материал является продолжением статьи «HTML-редактор WordPress и его возможности».

С помощью стилей создается внешний вид страницы, ее оформление. Аббревиатура CSS означает Cascading Style Sheets (Каскадные таблицы стилей), об этом я уже писал в статье «Что такое CSS», но приходится немного повторяться.

Слово «каскадные» можно объяснить тем, что существует три способа описания стилей, и браузер постепенно, каскадом, прочитывает их и применяет к контенту. Кроме того, между стилями существует так называемое наследование, но о нем позже.

Способы вставки стилей

Как я уже отметил, существует три способа вставки стилей: внешний файл, внутренний стиль и строчный стиль. Рассмотрим их подробнее.

 Внешний файл

Каждый современный сайт имеет такой файл (а, бывает, и не один). Чаще всего он называется style.css. В нем описываются все методы оформления сайта: как оформляются абзацы, списки, таблицы, какие используются фоны и т. д.

Для подключения этого файла применяется тэг link в области head

1
<link rel=”stylesheet” type=”text/css”  href=”style.css” />

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

 Внутренний стиль

Для описания этого стиля не используется специальный файл, он прописывается в HTML-файле с помощью тэга style в области head. Например

1
2
3
4
5
6
7
<style type=”text/css” >
.styletext {
color: red;
font-size: 14px;
font-family: Arial;
}
</style>

Этот стиль также нельзя редактировать в HTML-редакторе WordPress.

 Строчный стиль

Этот стиль уже прописывается внутри HTML-тэгов, и именно его можно применять для изменения внешнего вида записей в WordPress. На нем я остановлюсь подробнее.

Форматы строчных стилей

Строчные стили применяются для всех тэгов, которые мы рассматривали в статье «HTML-редактор WordPress и его возможности».

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

Для блоков

1
<div style=”стиль: значение;  стиль: значение; ”></div>

Для изображений

1
<img src=”” style=”стиль: значение;  стиль: значение; ”/>

Для ссылок

1
<a href=”” style=”стиль: значение;  стиль: значение; ”>Текст ссылки</a>

Для выделенной части текста

1
<strong style=”стиль: значение;  стиль: значение; ”>Выделенный текст</strong>

Таблицы

1
2
3
4
5
6
<table style=”стиль: значение;”>
<tr style=”стиль: значение;”>
<td style=”стиль: значение;”>содержимое ячейки</td>
<td style=”стиль: значение;”>содержимое ячейки</td>
</tr>
</table>

Списки

1
2
3
4
<ul style=”стиль: значение;”>
<li style=”стиль: значение;”>Элемент списка</li>
<li style=”стиль: значение;”>Элемент списка</li>
</ul>

 Стили для текста

Стиль: font-family — шрифт.
Значение: Название шрифта — Arial, Times New Roman, Comic Sans MS…
Например,

1
<p style="font-family: Arial;">Этот текст содержит фразы, написанные несколькими шрифтами. Основной шрифт - Arial. <span style="font-family: Times New Roman;">Этот фрагмент написан шрифтом Times New Roman,</span> <span style="font-family: Comic Sans MS;">а этот - шрифтом Impact.</span> Здесь опять Arial.</p>

Этот текст содержит фразы, написанные несколькими шрифтами. Основной шрифт — Arial. Этот фрагмент написан шрифтом Times New Roman, а этот — шрифтом Impact. Здесь опять Arial.


Стиль: font-size — размер шрифта.
Значение: указывается в пикселях.
Например,

1
<div style="font-size: 30px;">Текст написан крупным шрифтом.</div>
Текст написан крупным шрифтом.

Стиль: font-style — стиль текста.
Значения: normal — обычный, italic — курсив.
Например,

1
<p>Этот абзац содержит текст, в котором один <span style="font-style: italic;">фрагмент выделен курсивом,</span> а остальная часть написана обычным шрифтом.</p>

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


Стиль: font-weight — насыщенность текста.
Значения: normal — обычный, bold — жирный.
Например,

1
<p>Этот абзац содержит текст, в котором один <span style="font-weight: bold;">фрагмент выделен жирным,</span> а остальная часть написана обычным шрифтом.</p>

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


Стиль: text-decoration — украшение текста.
Значения: line-through — зачеркнутый, overline — надчеркнутый, underline — подчеркнутый, none — нет.
Например,

1
2
3
4
<div style="text-decoration: line-through;">Это зачеркнутый текст</div>
<div style="text-decoration: overline;">Это текст с полосой наверху</div>
<div style="text-decoration: underline;">А это подчеркнутый текст</div>
<a href="http://kviter.ru/karta-sayta" style="text-decoration: none;">Это ссылка без подчеркивания</a>
Это зачеркнутый текст
Это текст с полосой наверху
А это подчеркнутый текст

Это ссылка без подчеркивания


Стиль: text-transform – трансформация букв.
Значения: capitalize – Первые Заглавные, lowercase – все маленькие, uppercase – ВСЕ БОЛЬШИЕ, none – нет.
Например

1
2
3
<div style=”text-transform: capitalize;”>первая буква каждого слова большая</div>
<div style=”text-transform: lowercase;”>Все Буквы маленькие</div>
<div style=”text-transform: uppercase;”>Все буквы большие</div>
первая буква каждого слова большая
Все Буквы маленькие
Все буквы большие

Стиль: text-align — выравнивание текста.
Значения: left — слева,right — справа, center — по центру.
Например,

1
2
3
<div style="text-align: left;">Этот текст выровнен по левому краю.</div>
<div style="text-align: right;">Этот текст выровнен по правому краю.</div>
<div style="text-align: center;">Этот текст выровнен по центру.</div>
Этот текст выровнен по левому краю.
Этот текст выровнен по правому краю.
Этот текст выровнен по центру.

Стиль цвета

Стиль: color
Значения: можно указать название цвета (blue, red …), но чаще используется его шестнадцатеричный код.
Например,

1
<p style="color: #00ff00";>Этот текст напечатан зеленым цветом, <span style="color: #ff0000";>а этот фрагмент выделен красным.</span></p>

Этот текст напечатан зеленым цветом, а этот фрагмент выделен красным.

Стили для блоков

Стиль: width, height — ширина и высота.
Значения: число в пикселях.


Стиль: border — граница.
Значения: у границы указывается толщина в пикселях, вид (dotted, dashed, solid, double, groove, ridge, inset, outset), цвет. Все элементы и порядок их расположения обязательны.
Рассмотрим пример

1
<div style="width: 400px; border: 2px dotted #0000ff">Текст расположен в блоке размером 400 пикселей шириной с рамкой из точек синего цвета.</div>
Текст расположен в блоке размером 400 пикселей шириной с рамкой из точек синего цвета.

Попробуйте сами поэкспериментировать со значениями.


Стиль: padding — отступы внутри блока.
Значения для этого стиля можно записывать разными способами:
padding: 5px — со всех сторон отступ 5px
padding: 3px 5px — сверху и снизу 3px, справа и слева 5px
padding: 3px 10px 5px 15px — сверху 3px, справа 10px, снизу 5px и слева 15px (по часовой стрелке)
Можно использовать и другую форму записи:
padding-top: — отступ сверху
padding-right: — отступ справа
padding-bottom: -отступ снизу
padding-left: — отступ слева.

Изменим предыдущий пример, добавив отступы и изменив вид рамки

1
<div style="width: 400px; border: 5px inset #ff0000; padding: 10px">Текст расположен в блоке размером 400 пикселей шириной с рамкой красного цвета.</div>
Текст расположен в блоке размером 400 пикселей шириной с рамкой красного цвета.

Стиль: margin — отступы вокруг блока.
Значения записываются аналогично предыдущему стилю.
Пример не привожу, можно попробовать самостоятельно.


Стиль: background — фон.
Значение: код цвета.
И последний на сегодня пример

1
<div style="width: 400px; border: 5px outset #00ff00; padding: 10px; margin: 5px; background: #000f00">Текст расположен в блоке размером 400 пикселей шириной с рамкой зеленого цвета, с внутренними отступами 10px, внешними отступами 5px и ярко-зеленым фоном.</div>
Текст расположен в блоке размером 400 пикселей шириной с рамкой зеленого цвета, с внутренними отступами 10px, внешними отступами 5px и ярко-зеленым фоном.

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

Более глубоко и полно изучить CSS вы сможете, используя курс Евгения Попова «CSS практика». Ничто так не повышает ваш уровень в создании качественных веб-страниц, как хорошая порция практики в виде верстки реальных графических шаблонов.

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

Еще советую почитать по этой теме:

Оформление цитат на WordPress с помощью CSS и плагина
Здравствуйте, друзья! Написать о красивом оформлении цитат в тексте статей на блоге под управлением Wordpress я решил, так как напрямую столкнулся с необходимостью такой работы. ...
Как узнать ID рубрики на WordPress?
Здравствуйте, уважаемые читатели блога kviter.ru. Сегодня у меня небольшая, но полезная статья о том, как узнать ID рубрики на блоге под управлением Wordpress. Что такое ID? Сначала выясним, ...
Как защитить информацию на сайте от взлома и заражения
Здравствуйте, друзья! Сегодня я хочу еще раз поговорить о том, как защитить информацию на сайте от взлома и заражения. На настоящий момент это весьма актуальный ...
HTML-редактор WordPress и его возможности
Здравствуйте, уважаемые читатели! Для создания статей в Wordpress обычно используют визуальный редактор, о котором я уже писал, но редактировать их можно и во встроенном HTML-редакторе, ...
Редактор изображений WordPress
Здравствуйте, друзья! Ответьте, с помощью каких программ вы готовите изображения к публикации на блоге? Я чаще всего работаю с Фотошопом – это универсальная программа. В ...
Очень плохоПлохоСреднеХорошоОтлично (голосов: 1 в среднем: 5,00 из 5)
Загрузка...

6 комментариев к “Применение стилей CSS в редакторе WordPress

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *