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

Обсуждение материалов (глав) сайта webremeslo.ru

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

Сообщение snake » 06 дек 2013, 21:31

Всем привет!))) В главе CSS. Псевдоэлементы в одном из примеров не срабатывает свойство content:attr не в одном из браузеров, хотя Алексей пишет, что должно все появится! У всех так???
snake
 
Сообщения: 10
Зарегистрирован: 06 дек 2013, 21:24

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

Сообщение Nikel097 » 07 дек 2013, 11:49

Не знаю. У Вас точно ошибки нет в написании?
Аватара пользователя
Nikel097
 
Сообщения: 276
Зарегистрирован: 04 июн 2012, 12:27
Откуда: Казахстан, Алматы

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

Сообщение snake » 07 дек 2013, 12:33

Я нажимаю "Смотреть пример", который написал Алексей. http://www.webremeslo.ru/css/glava16.html http://www.webremeslo.ru/css/primer/primer73.html
snake
 
Сообщения: 10
Зарегистрирован: 06 дек 2013, 21:24

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

Сообщение Алексей » 07 дек 2013, 13:11

Да, действительно есть какая то странность именно с тегом <img> не могу понять в чем причина.. :)? согласно спецификации всё должно работать! http://www.w3.org/TR/CSS21/generate.html#content
C другими тегами content:attr работает как положено..
вот например:
Код: Выделить всё
<html>
<head>
<style type="text/css">
div{
width: 200px;
height: 80px;
margin: 15px;
padding: 15px;
border: 6px solid green;
border-radius: 20px;
}
div:after {content:attr(title)}
</style>
</head>
<body>
<div title="подсказка">блок</div>
</body>
</html>


или вот:

Код: Выделить всё
<html>
<head>
<style type="text/css">
a:after {content:attr(href)}
</style>
</head>
<body>
<a href="index.html">ссылка</a>
</body>
</html>
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

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

Сообщение snake » 07 дек 2013, 13:26

Да, Алексей, работает!
Тогда ещё сразу вопрос: Глава Псевдоклассы пример http://www.webremeslo.ru/css/primer/primer66.html
Почему при нажатии на "Первый якорь", "Второй якорь", "Третий якорь" текст становится красным?
snake
 
Сообщения: 10
Зарегистрирован: 06 дек 2013, 21:24

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

Сообщение Алексей » 07 дек 2013, 13:46

Думаю от стыда.. :)
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

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

Сообщение snake » 07 дек 2013, 13:52

:)
snake
 
Сообщения: 10
Зарегистрирован: 06 дек 2013, 21:24

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

Сообщение Алексей » 07 дек 2013, 13:58

Ну почему почему.. думаю несложно догадаться.. потому что для активной ссылки указан красный цвет.. и если бы ссылка куда то вела, а не была просто якорем то она краснела бы лишь в момент клика, а так она "зацикливается" на красном.. если Вам это ненужно выведите такие ссылки в отдельный класс и укажите там что стыдиться нечего..
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)

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

Сообщение snake » 07 дек 2013, 14:20

Как-то вот так, Алексей? Только начинаю в этом поприще..
Код: Выделить всё
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Псевдоклассы и ссылки</title>
<style type="text/css">
a:link {color:#0000ff}
a:active {color:#008000}
a:visited {color:#ff0000}
a.nostid {color:#000000}
</style>
</head>
<body>
<a href="#1">Ссылка на первый якорь</a>
<a href="#2">Ссылка на второй якорь</a>
<a href="#3">Ссылка на третий якорь</a>
<hr>
<a class="nostid" name="1" style="text-align: center"><h4>Первый якорь</h4></a>
<p>Псевдокласс link, в этом примере, указывает, что все не посещенные ссылки должны отображаться синим цветом.</p>
<a class="nostid" name="2"><h4>Второй якорь</h4></a>
<p>Попробуйте нажить и удерживать на одну из не посещенных ссылок, чтобы увидеть для работу псевдокласса active.</p>
<a class="nostid" name="3"><h4>Третий якорь</h4></a>
<p>visited - псевдокласс который, в этом примере, говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.</p>
</body>
</html>
snake
 
Сообщения: 10
Зарегистрирован: 06 дек 2013, 21:24

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

Сообщение Алексей » 07 дек 2013, 14:27

Ну да.. как то так.. ;)
Аватара пользователя
Алексей
Администратор
 
Сообщения: 834
Зарегистрирован: 03 апр 2010, 09:12
Откуда: Солнечный Геленджик :)


Вернуться в Учебники

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron
Рейтинг@Mail.ru