Основы 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. Об этом мы писали тут.

6 комментариев

Оставить комментарий
  1. Статья интересная, цепляет, хотя ещё не всё понятно, но как всё сделанное Аделем разложено по полочкам, главное потыкать и всё придёт!

  2. Давно хотела узнать как изменять параметры шрифта.

  3. Только начал интересоваться сайтостроением и ваша информация была для меня очень полезной

  4. Статья действительно интересная и нужная!

  5. Очень интересная и нужная статья, спасибо за информацию.

  6. я конечно новичок, но статья интересна все жем подсказывает куда двигаться.

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

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