<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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

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

Ответить

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