Каждый вебмастер стремится выбрать лучший шаблон для своего блога на WordPress, но после установки самого привлекательного замечаешь, что цвет букв оказывается немного не тот, который ожидал увидеть, да и сайдбар не мешало бы чуть-чуть больше сделать ;). Так начинается поиск новой красивой темы WP, но оказывается, вопрос можно просто решить, если знать основы CSS верстки :smile:. Итак, сегодня узнаем, что такое CSS и как использовать язык CSS при редактировании сайтов.

Что такое стили CSS?

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

Для успешного изменения дизайна хватает минимальных знаний основ верстки стилей CSS и их дальнейшее изучение позволит уверенно редактировать тему ВордПресс. К тому же файл, отвечающий за дизайн, доступен из админки WP и называется style.css. Достаточно откорректировать один параметр, как изменения в оформлении сразу же вступят в силу.

В один урок вместить все тонкости языка CSS не возможно, поэтому будут рассмотрены основные теоретические моменты необходимые для быстрого редактирования и создания достойного сайта. Основы языка программирования CSS и верстки шаблона в обязательном порядке стоит изучить каждому блоггеру. И помните, уверенность придет с практикой ;)!

Основы теории CSS верстки

Шрифт

font-family – устанавливает шрифт для элемента (font-family: название шрифта):

font-size – установка размера (font-size: размер шрифта, выраженный в процентах (%)):

И в пикселях (px):

font-style – определяет стиль шрифта:

• normal – нормальный;
• italic – курсив;
• oblique – наклонный.

font-weight – степень насыщенности или стиль толщины шрифта:

• normal – нормальный;
• bold – полужирный;
• bolder – жирный;
• lighter – светлый.

font — объединяет все свойства шрифта или несколько его параметров (font: жирность стиль размер шрифт):

Свойства текста

text-align – горизонтальное выравнивание текста:

• left - по левому краю;
• right - по правому краю;
• center – выравнивание по центру;
• justify - по ширине колонки.

vertical-align – вертикальное выравнивание текста:

• bottom – выравнивание по нижнему краю;
• top – по верхнему;
• middle – по середине;

line-height – межстрочный интервал (line-height: размер, выраженный в  пикселях (px) или в процентах (%)):

Любое значение, которое больше нуля, берется за множитель. Например, параметр 1,5 установит между строками полуторный интервал:

letter-spacing – интервал между буквами (letter-spacing: значение в пикселях (px)):

• normal – расстояние по умолчанию;

text-transform – заглавные или прописные буквы в словах:

• uppercase – все символы заглавные;
• lowercase – строчные;
• none - по умолчанию;
• capitalize - первая буква каждого слова большая.

Размер

width – устанавливает ширину элемента (width: значение, выраженное в пикселях (px) или процентах (%)):

Остальные виды значений CSS стилей, которые находятся ниже, работают по такому же принципу, как width:

height – устанавливает высоту элемента;

max-width – устанавливает максимальную ширину элемента;

max-height – устанавливает максимальную высоту элемента;

min-width – минимальная ширина;

min-height – минимальная высота.

Позиции

float – сторона выравнивания элемента:

• right – выравнивание по правому краю;
• left – по левому;

visibility – делает элемент видимым или невидимым:

• hidden – скрытие объекта;
• visible – отображение.

Границы

border – установка границы (рамки) вокруг элемента (border: толщина (2px), стиль (dashed) и цвет границы (black)):

• solid – сплошная рамка;
• dashed – пунктирная;
• dotted – точечная.

Остальные свойства границ при верстке CSS, которые представлены ниже, действуют подобным образом:

1. border-top – верхняя граница;
2. border-bottom – нижняя;
3. border-right – правая;
4. border-left – левая.

Поля

padding – устанавливает значение полей вокруг объекта. Отсчет начинается сверху и далее по часовой стрелке (padding: размер шрифта, выраженный в пикселях (px) сверху (1), справа (2), снизу (3) и слева (4)):

Установка параметров отдельно для каждой стороны:

1. padding-top – поле от верхнего края;
   

   padding-top: 10px;

2. padding-bottom – от нижнего;
3. padding-right – от правого;
4. padding-left – от левого.

Отступы

margin – значение отступов с 4 сторон (margin: отступ, выраженный в пикселях (px) сверху (10), справа (11), снизу (12) и слева (13)):

Параметры отступов для каждой стороны по отдельности:

1. margin-top – верхний отступ;
   

   margin-top: 5px;

2. margin-bottom – отступ нижний;
3. margin-left – левый;
4. margin-right – правый.

Фон и цвет

color – цвет элемента:

• Значение цвета задается с помощью названия оттенков (black, red, white):
  

  color: red;

• С помощью шестнадцатеричного кода (#000000 (черный), ff0000 (красный), #000000 (белый)):
  

  color: #ff0000;

background – характеристика фона:

1. background-color – параметр цвета фона:
   

   background-color: ffff00;

   Или

   background-color: yellow;

2. background-position – стартовое положение фонового изображения (background-position: размер, выраженный в пикселях (px) или в процентах (%) – слева сверху):
   

   background-repeat: 0% 0%;

   Или заданы свойства по горизонтали (left или right или center)) + по вертикали (top или bottom или center):

   background-repeat: left top;

3. background-repeat – указывает должно ли фонового изображение повторяться:
   

   background-repeat: repeat-y;

   • repeat-y – повторение картинки по оси y;
   • repeat-x – повторение по оси х.
4. background-attachment – делает фон прокручивающимся или фиксированным:
   

   background-attachment: scroll;

   • fixed – фиксированное положение;
   • scroll – прокручивание вместе с элементами.
5. background-image – устанавливает url-картинки фона:
   

   background-image: url(images/good.jpg);

   • url(images/good.jpg) – путь к изображению.
6. background — задает несколько свойств фона (background: желтый url-изображения повторение по оси y):
   

   background: #ffff00 url(images/good.jpg) repeat-у;

Псевдоклассы

:hover – установка стиля элемента, когда не него наводят курсор мыши. Устанавливается желтый цвет при наведении мышкой:

:visited – стиль ссылки, по которой уже перешли. На посещенную ссылку устанавливается серый цвет:

От такого обилия команд у самого голова кругом пошла. И всё же мы узнали, что такое CSS и рассмотрели основы CSS верстки, и, тем не менее, этой верхушки знаний достаточно для того, чтобы успешно внести небольшие изменения в дизайн блога :smile:. Конечно, сразу всё понять очень трудно, но всё приходит с практикой, и со временем основные свойства CSS Вас не будут так пугать. Подробнее о стилях CSS можно познакомиться на сайте htmlbook.ru.

Рекомендую посмотреть на самые красивые сайты в интернете здесь и на самые креативно оформленные подвалы тут, чтобы знать к чему стремиться ;).

В этом анонсе было много теории, которая пригодится в следующих практических уроках по редактированию шаблона WordPress, поэтому подпишитесь на RSS блога и оставайтесь в курсе самых последних событий.

Читайте далее Как быстро вносить изменения в дизайн.

Посмотришь на такое и любые языки программирования покажутся детской забавой :smile::

С уважением, Дмитрий Байдук