<MyRusakov.ru />

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

Всё создание сайта будет происходить на Ваших глазах, поэтому Вы легко сможете повторить весь процесс создания сложного функционального сайта уже при разработке своего портала.

Подробнее
Опрос

Посоветуйте тему для будущего видеокурса

Синтаксис CSS

Синтаксис CSS

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

Давайте рассмотрим эти правила на примере:

h1 {
  color: red;
  margin-left: 200px;
  font-size: 20pt;
}

В данном примере селектором является "h1", свойствами являются "color", "margin-left" и "font-size", а их значениями соответственно являются "red", "200px" и "20pt". Что это всё означает? А это означает следующее, что элемент внутри тега <h1> станет красным, с отступом слева в 200 пикселей и размером в 20 пунктов.

Существует огромное количество свойств и их значений, разумеется, приводить их все - это бессмысленно. Самый разумный вариант посмотреть их в справочнике, а здесь же необходимо понимать следующее, что селекторов тоже несколько. Вот их список:

1) Контекстные селекторы.

2) Селектор ID.

3) Селектор CLASS.

4) Селекторы параметров.

5) Стандартный селектор.

Мы с Вами рассмотрели только один стандартный селектор, когда в его качестве выступает обычный HTML-тег (в примере выше, этим тегом был <h1>).

Первые четыре типа селектора CSS обсудим в другой статье в основах CSS. А пятый тип давайте разберём ещё раз.

Первое, что необходимо сделать - это написать HTML-тег (любой из HTML-стандарта). Потом в фигурных скобках указать его свойства и через двоеточие значение. Уверен, что здесь всё понятно.

И, напоследок, хочется сразу разобрать тему псевдоэлементов. Псевдоэлементы нужны для настройки свойств определённого состояния элемента. Например, состояние "наведение мышки" на ссылку, "щелчок мышки" по ссылке и тому подобные вещи. Или, например, первая строка текста. И ещё много чего ещё. Опять же полный набор псевдоэлементов можно посмотреть в справочнике. Я же покажу, как их использовать:

a:visited {
  color: red;
}
a: link {
  color: blue;
}

В данном случае, мы задали следующий стиль: посещённые ссылки (состояние "ссылка уже была нажата") красного цвета, а не посещённые ссылки (состояние "ссылка ещё не была нажата") будут синего цвета. Как видите, псевдоэлементы задаются через двоеточие. То есть пишется тег, у которого могут быть псевдоэлементы, дальше ставится двоеточие и пишется название псевдоэлемента. Потом, как обычно, указываются свойства и их значения. И если у данных элементов будет соответствующее псевдоэлементу состояние, то стили будут к нему применены.

Надеюсь, что я познакомил Вас с основами синтаксиса CSS. Если Вы это освоили, то можно двигаться дальше в освоении процесса самостоятельного создания сайта. Кстати, насчёт справочника. Вот даю возможность скачать справочник CSS в chm формате. Там имеется полный набор свойств всех элементов и их возможных значений: Скачать справочник по CSS в chm.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://burjuy.issohost.com)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.