каскадные таблицы стилей!вопрос по цвету абзацев

Question

Другие языки программирования и технологии

каскадные таблицы стилей!вопрос по цвету абзацев

вот что у меня... но!первые два абзаца синее.а мне нужно что бы первый был синим а второй красным! напишите пожалуйста ксс! <html> <head> </head> <body> h1{font-family: "Comic Sans MS"; font-size: 16px; color: black;background-color: red; text-align:center} body {font-family: "Comic Sans MS"; font-size: 1em; color: black; text-align:center; background-image: url('фон.JPG')} p {font-family: "Comic Sans MS"; font-size: 16px;color: black;background-color: blue;} </body> </html>

Алексей Плотников

305

29.05.2011

Похожие вопросы

Answer 1 · 2011-05-28 23:40:33

Загадка:
какого цвета каждый абзац?) )

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Некий документ</title>
<style type="text/css">
h1{font-family: "Comic Sans MS"; font-size: 16px; color: black;background-color: red; text-align:center}

body {font-family: "Comic Sans MS"; font-size: 1em; color: black; text-align:center; background-image: url('фон. JPG')}

p {font-family: "Comic Sans MS"; font-size: 16px;color: black; background-color:violet; }
section>p {background-color: red;}
p:first-child { background-color: blue; }
p:nth-child(4) { background-color:green; }
p.green { background-color:green; }
p+p { background-color:yellow; }

</style>

</head>

<body>
<article>
<header>
<h1>Заголовок</h1>
</header>
<section>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
<p>Четвертый абзац</p>
<p class="green">Пятый абзац</p>
<p>Шестой абзац</p>
</section>
</article>
</body>
</html>

Ответ:
в FF, Chrome, Opera, Safari, IE 9 - Первый- синий, Второй, Третий, Шестой - желтые, Четвертый и Пятый - зеленые.
в IE 7-8 - так же, но четвертый - желтый. IE до 9-й версии не понимает замечательный псевдокласс :nth-child
а вот в IE 6 все, кроме 5-го будут лиловые, т. е. violet - он не понимает даже таких селекторов, как section>p, или :first-child
поэтому для него сработает только p { } и p.green { } ( p.green - это все <p class="green"> )

так что если нужна кроссбраузерность, то используйте классы и id. или плюньте на старые браузеры (им можно поддержку через джаваскрипт сделать)
что такое p+p - параграфы, которые идут после параграфов (т. е. в данном случае - все, кроме первого)
что такое section>p - параграфы внутри элемента section (дочерние)

P.S. ссылку на скрипт скопируйте правильно, если у себя будете проверять - тут парсер текст обрезает и ставит точки в конце. Скрипт нужен только браузерам IE<9 версии - чтобы они "поняли" html5
Но все будет аналогично работать и в других версиях HTML - просто там нет этих тегов, а хорошеньким девочкам можно уже использовать эту версию HTML. Поскольку через несколько лет все хорошенькие и даже не очень хорошенькие девочки будут поступать именно так. А пока так делают только ОЧЕНЬ хорошенькие девочки.)))

Георгий Гиоргадзе

60 969

Лучший ответ

28.05.2011

Answer 2 · 2011-05-29 04:45:43

Я думаю Катеньке будет сложновато разобраться.
Поэтому проще:
Каждому абзацу свой класс и стиль
p.one {background-color: red;}
p.twy {background-color: blue;}
------------------
<p class="one">Этот красный.. .
<p class="twy">Этот синий.. .

Александр Битюков

54 070

29.05.2011