Добрый вечер всем и с наступающим! Осталось совсем немного до Нового Года! Осталось совсем немного до сессии… Не буду о плохом, а поговорим о том, как создать свой блок для вывода информации в определенном стиле, то есть с помощью CSS.

Блочная верстка сайта

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

Что такое Css и как он подключается к файлу HTML

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

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

Стандартный способ подключения файла CSS, он же style.css, делается следующим образом:

  1. Открываем файл html, например index.html;
  2. Между тегами head пишем следующее
    <link rel="stylesheet" type="text/css" href="style.css">

Все, файл style.css подключен к шаблону, осталось лишь правильно оформить html файл. К шаблону для WordPress файл CSS подключается таким же образом. Сам файл CSS имеет структуру

оператор (селектор) {
свойство объекта: значение объекта;
}

Оператор (селектор) указывает к какому объекту применяется стиль, который присваивается с помощью тега div. То есть в файле html он будет иметь вид

<div id="оператор1">
код html, php
</div>

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

Создание стиля с помощью средств CMS WordPress

Чтобы создать свой стиль на WordPress не требуется знать специальные операторы, так как используются стандартные операторы HTML и CSS. Чтобы создать свой стиль перейдите в Редактор в блоке Внешний вид.

Редактирование стиля шаблона средствами WordPress

После, вы сразу попадете на страницу редактирования файла style.css, о котором шла речь выше.

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

Приступим к созданию своего стиля, для этого лучше перейти в конец файла, чтобы там начать редактировать и создавать что-то. Для примера возьмем создание стиля для текста на странице 404. Далее создадим макет стиля

#notfound{
здесь будет описание
}

В описании укажем размер шрифта 16, выравнивание текста по левому краю. Для этого заполним макет

#notfound{
font-size:16px;
text-align:left;
}

Кстати, следует указывать явные названия стилей для блоков, чтобы не было путаницы. Для более понятной структуры, а точнее описания можно указать комментарии. Они имеют следующий вид

/* комментарий к стилю */

Далее создадим блок на странице 404. Для этого на той же странице редактирования перейдите на Шаблон ошибки 404 в правой панели. Затем пишем внутри

<div id="notfound">
...
</div>

свой код, текст, который хотим представить на странице. Так как в файле style.css мы указали лишь два параметра, то другие объекты, типа списков, гиперссылки будут использовать стиль, который указан для них по умолчанию.

Пожалуй все. CSS совсем не сложная штука, которую можно выучить за неделю. Экспериментируйте со стилями для придания шаблону нового стиля, но не забудьте сделать резервную копию сайта. Ну а в случае неудачи его можно без труда восстановить.

Комментариев: 3

  1. West Blogger

    Пожалуй самый главный момент — это понятное и информативное обозначение дивов, потому что при редактировании и правке сориентироваться гораздо легче.

  2. writer

    West Blogger Не всегда одними понятными обозначениями отделаешься, иногда приходится в html коммент писать, указывая что зачем нужно…Однажды из-за неразберихи пришлось так весь сайт коментить

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>