<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

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

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Псевдоэлементы в CSS

Псевдоэлементы в CSS

Очень важной особенностью CSS являются псевдоэлементы. Псевдоэлемент - это некая характеристика состояния объекта или его особенность. Например, первая буква в абзаце (особенность), наведённый курсор мыши на объект (состояние). И вот таких псевдоэлементов в CSS достаточно много. О них мы и поговорим подробно в данной статье.

Псевдоэлементы в CSS позволяют задавать особый стиль для "необычных" элементов. Давайте с Вами разберём простой пример:

img:hover {
  border: 2px solid #f00; // Устанавливаем красную рамку
}

Данный код означает, что вокруг изображения при наведении на него курсора мыши будет появляться красная рамка толщиной 2 пикселя. Когда же курсор мыши будет уходить с элемента, то рамка будет исчезать. Благодаря псевдоэлементам, казалось бы непростую задачу, мы решили очень легко и без использования JavaScript, что вообще прекрасно.

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

Привожу таблицу с различными псевдоэлементами в CSS и их описанием.

Псевдоэлемент Описание
active Состояние "активной ссылки", то есть ссылка, на которую нажимают.
firstchild Можно применить стиль к первому дочернему элементу.
first-letter Первый символ в тексте элемента.
first-line Первая строка в тексте элемента.
focus Для элемента в состоянии "фокус". Например, текстовое поле, в котором сейчас набирают текст.
hover Наведение на элемент курсора мыши.
link Определяет состояние непосещённой ссылки.
visited Определяет состояние посещённой ссылки.

Это не все псевдоэлементы, а лишь те, которые, во-первых, во всех браузерах работают (за исключением IE6, где не всё это работает), а также постоянно используются верстальщиками. Поэтому все данные псевдоэлементы Вы должны знать прекрасно.

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

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

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

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

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

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

  1. Кнопка:

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

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

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

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

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

GoTo GoTo 06.06.2012 15:37:46

Михаил, а если для какого-то определенного изображения рамка не нужна. Как отменить стиль в определенном месте?

Ответить

Admin Admin 06.06.2012 15:40:39

border: none;

Ответить

vshrek vshrek 08.06.2012 00:03:29

К сожалению, IE поддерживает hover только для элемента a (то есть ссылки). Для создания элементов меню все равно пришлось писать JavaScript - функции для onmouseover (и out, конечно). А это, в свою очередь, не работает в мозилле. Так что пришлось в PHP проверять браузер и подсовывать или CSS стиль, или JavaScript. Если знаешь как обойти проблему, пожалуйста напиши.

Ответить

Admin Admin 08.06.2012 06:27:30

hover прекрасно работает в IE7 и старше, этого достаточно. Писать из-за одного IE6 скрипты - это лишнее.

Ответить

vshrek vshrek 09.06.2012 23:50:03

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

Ответить

soffrick soffrick 08.06.2012 13:53:33

Владимир Евсеев, В PHP проверяете браузер клиента? Научите :)

Ответить

vshrek vshrek 09.06.2012 23:44:00

if ( stristr($_SERVER['HTTP_USER_AGENT'], 'MSIE') ){ }else{ } Проверяем, IE или нет.

Ответить

malina95 malina95 09.01.2013 00:14:14

Михаил, а как применить стиль к последнему элементу списка? мне нужно от него поставить отступ справа

Ответить

Admin Admin 09.01.2013 09:57:12

Пометить его class="last", а дальше li.last { }

Ответить

malina95 malina95 09.01.2013 19:56:33

При позиционировании классы и айди безсильны, я пробовал, ладно попробую разобратся сам

Ответить

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