body{background-color:#006600;
font-family:Lucida Console;
font-size:15;
color:#00ff00;
A:link{color:#c0ffc0;
text-decoration:none;
font-family:Comic Sans MS;}
A:active{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
A:visited{color:#c0ffc0;
text-decoration:none;
font-family:Comic Sans MS;}
A:hover{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
.block{background-color:#00ff00;
font-family:Lucida Console;
font-size:15;
color:#006600;
A:link{color:#c066c0;
text-decoration:none;
font-family:Comic Sans MS;}
A:active{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
A:visited{color:#c066c0;
text-decoration:none;
font-family:Comic Sans MS;}
A:hover{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
}
Вопрос по Css
Скажите, какой командой в css листе для html документа прописать выделение просматриваемого меню в окне навигации?
Т.е. если я на главной странице, то чтобы в панели навигации текст "Главная" был, скажем, подчеркнут.
Спасибо.
Т.е. если я на главной странице, то чтобы в панели навигации текст "Главная" был, скажем, подчеркнут.
Спасибо.
Цитата:
Originally posted by mapuBAHHA
Скажите, какой командой в css листе для html документа прописать выделение просматриваемого меню в окне навигации?
Т.е. если я на главной странице, то чтобы в панели навигации текст "Главная" был, скажем, подчеркнут.
Спасибо.
Скажите, какой командой в css листе для html документа прописать выделение просматриваемого меню в окне навигации?
Т.е. если я на главной странице, то чтобы в панели навигации текст "Главная" был, скажем, подчеркнут.
Спасибо.
text-decoration: underline;
Цитата:
Originally posted by Greenering
text-decoration: underline;
text-decoration: underline;
Эту команду я знаю. Тока как привязать ее к активному меню?
Цитата:
Originally posted by mapuBAHHA
Эту команду я знаю. Тока как привязать ее к активному меню?
Эту команду я знаю. Тока как привязать ее к активному меню?
А как страница выводится в браузер? PHP, Static, JS или ещё как? Оттуда и плясать надо. Способов много.
A:hover {text-decoration: underline;}
Цитата:
Originally posted by Вася Триллер
A:hover {text-decoration: underline;}
A:hover {text-decoration: underline;}
Та нет. Вопрос был задан про то, как сделать, чтобы underline был только у того пункта меню, который соответствует открытой странице.
Кстати, можно попробовать javascript'ом сравнить location документа и href ссылки, и если идентичны then a.style.textDecoration=underline:)
Цитата:
Originally posted by mfender
Та нет. Вопрос был задан про то, как сделать, чтобы underline был только у того пункта меню, который соответствует открытой странице.
Кстати, можно попробовать javascript'ом сравнить location документа и href ссылки, и если идентичны then a.style.textDecoration=underline:)
Та нет. Вопрос был задан про то, как сделать, чтобы underline был только у того пункта меню, который соответствует открытой странице.
Кстати, можно попробовать javascript'ом сравнить location документа и href ссылки, и если идентичны then a.style.textDecoration=underline:)
Эмм..я в этой каше недавно =) Пасиба за ответы, буду учить мат. часть =)
Цитата:
Originally posted by mapuBAHHA
Эмм..я в этой каше недавно =) Пасиба за ответы, буду учить мат. часть =)
Эмм..я в этой каше недавно =) Пасиба за ответы, буду учить мат. часть =)
-----------------
a:active {text-decoration:underline;}
А у меня вот какая проблема с CSS:
что-то тут работает не так.
Разве классы вложенными не могут быть?
Код:
что-то тут работает не так.
Разве классы вложенными не могут быть?
Цитата:
Originally posted by FIRESTARTER
что-то тут работает не так.
Разве классы вложенными не могут быть?
что-то тут работает не так.
Разве классы вложенными не могут быть?
Вопрос: а зачем так делать? Всё, что находится в body - всего касается то что в css написано. Запихнуть псевдо-a в body - это не добиться требуемого результата.
В данном случае, следует сделать псевдо-класс какого-то класса.
Цитата:
Originally posted by mfender
В данном случае, следует сделать псевдо-класс какого-то класса.
В данном случае, следует сделать псевдо-класс какого-то класса.
Что-то я не совсем понял,что вы мне пытаетесь обьяснить...
Я хотел сделать вот что:
Внутри <BODY> цвет текста,ссылок,фона такой,
а внутри <DIV class="block">-другой.
Цитата:
Originally posted by FIRESTARTER
Что-то я не совсем понял,что вы мне пытаетесь обьяснить...
Я хотел сделать вот что:
Внутри <BODY> цвет текста,ссылок,фона такой,
а внутри <DIV class="block">-другой.
Что-то я не совсем понял,что вы мне пытаетесь обьяснить...
Я хотел сделать вот что:
Внутри <BODY> цвет текста,ссылок,фона такой,
а внутри <DIV class="block">-другой.
Иначе говоря так:
a.block:link {....}
a.block:visited {....}
a.block:hover {....}
a.block:active {....}
Кстати, следует псевдо классы A расставлять именно в такой последовательности: link, visited, hover, active
Цитата:
Originally posted by mfender
Кстати, следует псевдо классы A расставлять именно в такой последовательности: link, visited, hover, active
Кстати, следует псевдо классы A расставлять именно в такой последовательности: link, visited, hover, active
А по-моему стандарту и браузерам до фени, в каком порядке идут псевдоклассы. :)
У меня на сайте вот так:
Код:
a:link, a:active, a:visited {color: #0000FF;
font-weight: 100;
text-decoration: none;}
a:hover {color: #0000FF;
font-weight: 100;
text-decoration: underline;}
font-weight: 100;
text-decoration: none;}
a:hover {color: #0000FF;
font-weight: 100;
text-decoration: underline;}
Цитата:
Originally posted by Вася Триллер
А по-моему стандарту и браузерам до фени, в каком порядке идут псевдоклассы. :)
А по-моему стандарту и браузерам до фени, в каком порядке идут псевдоклассы. :)
А вот по-мнению создателей CSS есть определённый порядок: LoVe HeArth. Именно так они рекомендуют его запомнить.
[QUOTE]Originally posted by mfender
Иначе говоря так:
a.block:link {....}
a.block:visited {....}
a.block:hover {....}
a.block:active {....}
Сделал.
Только почему-то ссылки (a.block:link) отображаются цветом фона,не видно...
Почему так?
Иначе говоря так:
a.block:link {....}
a.block:visited {....}
a.block:hover {....}
a.block:active {....}
Код:
body{background-color:#006600;
font-family:Lucida Console;
font-size:15;
color:#00ff00;
a:link{color:#c0ffc0;
text-decoration:none;
font-family:Comic Sans MS;}
A:active{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
A:visited{color:#c0ffc0;
text-decoration:none;
font-family:Comic Sans MS;}
A:hover{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
.block{background-color:#0000ff;
font-family:Lucida Console;
font-size:15;
color:#ffffff;
}
a.block:link{
color:c0c0ff;
text-decoration:none;
font-family:Comic Sans MS;}
a.block:hover{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
a.block:active{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
a.block:visited{color:#c066c0;
text-decoration:none;
font-family:Comic Sans MS;}
font-family:Lucida Console;
font-size:15;
color:#00ff00;
a:link{color:#c0ffc0;
text-decoration:none;
font-family:Comic Sans MS;}
A:active{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
A:visited{color:#c0ffc0;
text-decoration:none;
font-family:Comic Sans MS;}
A:hover{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
.block{background-color:#0000ff;
font-family:Lucida Console;
font-size:15;
color:#ffffff;
}
a.block:link{
color:c0c0ff;
text-decoration:none;
font-family:Comic Sans MS;}
a.block:hover{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
a.block:active{color:#c0c0c0;
text-decoration:none;
font-family:Comic Sans MS;}
a.block:visited{color:#c066c0;
text-decoration:none;
font-family:Comic Sans MS;}
Сделал.
Только почему-то ссылки (a.block:link) отображаются цветом фона,не видно...
Почему так?
Цитата:
Originally posted by FIRESTARTER
[QUOTE]Originally posted by mfender
Сделал.
Только почему-то ссылки (a.block:link) отображаются цветом фона,не видно...
Почему так?
[QUOTE]Originally posted by mfender
Сделал.
Только почему-то ссылки (a.block:link) отображаются цветом фона,не видно...
Почему так?
А пАтАмУшта решетки забывать не нужно.
color: #c0c0ff;
Цитата:
Originally posted by Вася Триллер
А по-моему стандарту и браузерам до фени, в каком порядке идут псевдоклассы. :)
У меня на сайте вот так:
А по-моему стандарту и браузерам до фени, в каком порядке идут псевдоклассы. :)
У меня на сайте вот так:
Код:
a:link, a:active, a:visited {color: #0000FF;
font-weight: 100;
text-decoration: none;}
a:hover {color: #0000FF;
font-weight: 100;
text-decoration: underline;}
font-weight: 100;
text-decoration: none;}
a:hover {color: #0000FF;
font-weight: 100;
text-decoration: underline;}
Не до фени.
Цитата:
Обратите внимание, что правило A:hover должно располагаться после правил A:link и A:visited, так как в противном случае правила каскадирования скроют свойство 'color' правила A:hover. Аналогичным образом, благодаря тому, что A:active находится после A:hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.
Просто твой браузер (да как почти все широкораспространеные браузеры) не поддерживают псевдокласс :active. Перепиши свой код так:
Код:
a:hover {color: #0000FF;
font-weight: 100;
text-decoration: underline;}
a:link, a:active, a:visited {color: #0000FF;
font-weight: 100;
text-decoration: none;}
font-weight: 100;
text-decoration: underline;}
a:link, a:active, a:visited {color: #0000FF;
font-weight: 100;
text-decoration: none;}
и убедись, что псевдокласс :hover поддерживает как и указано в спецификации. ;-)
Всё же [font=Lucida Console]a.block:link{color:#ffffff;}[/font] как следует не работает(вообще не работает).
Нужно так: [font=Lucida Console].block a:link{color:#ffffff;}[/font]
Нужно так: [font=Lucida Console].block a:link{color:#ffffff;}[/font]
Цитата: FIRESTARTER
Всё же [font=Lucida Console]a.block:link{color:#ffffff;}[/font] как следует не работает(вообще не работает).
Нужно так: [font=Lucida Console].block a:link{color:#ffffff;}[/font]
Нужно так: [font=Lucida Console].block a:link{color:#ffffff;}[/font]
Естественно:
a.block - это элемент с классом block, находящийся внутри тэга A.
.block a - это тэг А, находящийся внутри элемента с классом block.
ЗЫ: Что за мания поднимать темы полуторогодовой давности?
Цитата:
ЗЫ: Что за мания поднимать темы полуторогодовой давности?
Быстродействие хромает :D
Вот в теме про Delphi тему сегодня подняли 2002-го года :D
А что означает конструкция типа [color=green]body>div{...}[/color] ?
Цитата: FIRESTARTER
А что означает конструкция типа [color=green]body>div{...}[/color] ?
А тебе в падлу в спецификацию посмотреть?
Цитата:
E > F
Сопоставляется любому элементу F, который является дочерним элементом элемента E.
5.6 Селекторы дочерних элементов
Селектор дочерних элементов сопоставим, если элемент является дочерним по отношению к некоторому другому элементу. Данный тип селекторов состоит из двух и более селекторов, разделенных символом ">".
Следующее правило задает стиль всех элементов P, являющихся дочерними элементами элемента BODY:
BODY > P { line-height: 1.3 }
В приведенном ниже примере осуществляется объединяются селекторы потомков и селекторы дочерних элементов:
DIV OL>LI P
Селектор, построенный в этом примере, сопоставляется элементу P, являющемуся потомком элемента LI, который должен быть дочерним элементом элемента OL. Последний, в свою очередь, должен быть потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.
Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассах first-child.
Цитата: mfender
Та нет. Вопрос был задан про то, как сделать, чтобы underline был только у того пункта меню, который соответствует открытой странице.
Кстати, можно попробовать javascript'ом сравнить location документа и href ссылки, и если идентичны then a.style.textDecoration=underline:)
Кстати, можно попробовать javascript'ом сравнить location документа и href ссылки, и если идентичны then a.style.textDecoration=underline:)
Ппц :) Зачем усложнять себе жизнь? Вводим класс какой-нить для li или для a и присваиваем ему необходимые определения.
Цитата: e1vin
Ппц :) Зачем усложнять себе жизнь? Вводим класс какой-нить для li или для a и присваиваем ему необходимые определения.
Это не всегда приемлено. И не всегда разумно именно в виду того, что "усложняет жизнь".
Разумеется не всегда :) Думаю, что мы с вами все прекрасно понимаем, что универсальных способов не бывает.
Спасибо,а чем отличается дочерний элемент от потомка?
Цитата: FIRESTARTER
Спасибо,а чем отличается дочерний элемент от потомка?
В принципе ни чем. Но обычно под дочерним элементом понимают непосредственных потомков элемента, а под потомками просто все потомки элемента (т.е. непосредственные потомки дочернего элемента, а так же из дочерние элементы... и так далее и так далее).
Кстати говоря, селектор дочерних элементов ">" не работает, по-моему, в IE. Поэтому вместо конструкции "div a:hover > span { ... }" я пользуюсь "div a:hover span { ... }". Главное чтобы span один был внутри a, тогда все будет хорошо :)
Т.е. без разницы,что использовать,пробел или ">" ?
Цитата: FIRESTARTER
Т.е. без разницы,что использовать,пробел или ">" ?
Ты CSS читать начал? Ты вообще понял, что тебе говорят?
Цитата: FIRESTARTER
Т.е. без разницы,что использовать,пробел или ">" ?
Вообще разница есть. В случае если у твоего div.container (просто для примера я выбрал div) один потомок - span.inner_container, например вот так:
Код:
<div class="container">
<span class="inner_container">
...
</span>
</div>
<span class="inner_container">
...
</span>
</div>
то разницы нет, использовать ли селекторы потомков или только дочерние селекторы и код
Код:
div.container span.inner_container { ... }
div.container > span.inner_container { ... }
div.container > span.inner_container { ... }
будет работать одинаково.
Но если ты вложишь в span.inner_container еще один такой же, то первая конструкция (div.container span.inner_container { ... }) сработает и для него, а вторая (div.container > span.inner_container { ... }) - только для непосредственного потомка.
Спасибо,всё ясно.
Цитата: FIRESTARTER
В смысле спецификации? Я читал вот это.
В смысле спецификацию. Читать, читать и еще раз читать http://alepira.ural.ru/css2/index.htm
Спасибо,хороший ресурс.
Буду как говорится фтыкать...
Буду как говорится фтыкать...
Цитата: FIRESTARTER
Спасибо,хороший ресурс.
Хороший ресурс это вот: http://www.w3.org/ . Для человека пишушего под веб это должно быть как библия для верующего. Конечно очень там много на инглише, но и переводов на русский тоже предостаточно.