Основы CSS за три минуты – легко и доступно каждому

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

CSS – это язык программирования, который используется во многих веб-приложениях, в том числе и в WordPress. CSS определяет внешний вид, дизайн. Файл со всеми стилями CSS хранится в шаблоне WordPress. Не зависимо от того, какой шаблон установлен, он будет называться style.css. Именно в нём можно производить редактирования. Но перед этим следует узнать основы CSS.

Основы CSS

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

Синтаксис CSS состоит из трёх частей:

селектор {свойство: значение}

Это основы CSS, которые нужно запомнить. В этом синтаксисе следующие определения:

• Селектор – это тот элемент, к которому применяется всё, что написано далее. Селектор может принимать вид тега HTML, класса или идентификатора.
• Свойства – это параметр, который мы изменяем. Например, шрифт, цвет, размер, ширина, длина, положение и проч.
• Значение – это величина свойства. Может быть измерено пикселями, процентами, пунктами, постоянными величинами и другими единицами.

Как было сказано, основы CSS подразумевают появление селектора в трёх видах:

• Если селектор – это HTML тег, то это выглядит так:

h1 {font-size: 20px} – все заголовки с тегом H1 будут иметь размер 20 пискселей.

• Если селектор – это класс, то это выглядит так:

h1.big { font-size: 30px }- все заголовки с тегом H1, с классом big будут иметь размер 30 пискселей, и чтобы подключить класс в HTML документе, делается следующая запись:

<h1 class=”big”>Заголовок с внешним отступом 10 пунктов.</h1>

• Если селектор – это идентификатор, то это выглядит так:

#font{font-size: 10px} – все элементы, имеющие идентификатор font будут иметь размер шрифта 10px.

В WordPress могут применить все три вида селектора, Поэтому необходимо запомнить это как основу CSS.

Для удобства в CSS могут использоваться комментарии – записи, которые видны человеку, но игнорируются браузером. Для этого необходимо записать текст комментария, заключив его в символы /* и */.

Например:

/* Задаём размер шрифта */

h1 {font-size: 20px

Комментарии помогают легче ориентироваться в файле CSS.

Кстати, легче всего ориентироваться будет, когда редактор файла style.css поддерживает синтаксис CSS. Стандартный редактор WordPress здесь не очень подходит, поэтому нужно использовать что-то другое, например, NotePad. Об этом мы писали тут.