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

Если вы нашли ошибку, то выделите её и нажмите клавиши Shift + Enter или нажмите сюда, чтобы проинформировать нас.

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (1 оценок, среднее: 5,00 из 5)
Загрузка...

Также по этой теме:

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

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

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

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

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

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

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

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

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

Как создать блог. Видео Уроки WordPress © 2017 | Оставляя комментарий на сайте или используя форму обратной связи, вы соглашаетесь с правилами обработки персональных данных.