.q:before
{ content: open-quote; }
.q:after
{ content: close-quote; }
Элементы из опыта. html
Во-первых, узнаем отображение и начальные стили, заложенные для элементов в браузерах... Известно, что, например элемент q в html содержит начальное описание css в Opera Mozilla Firefox...:
А знаете, почему тег q не отображает кавычки в IE?...
Вообще, самым хорошим тоном является собственное описание каждого элемента в стилях. Этого можно добиться следующим образом:
Создаем файл стилей "html" и файл "elemenst" с расширениями .css и .xml соответственно.
В xml файле "elements" пишем заголовок для подсоединения css
остальное дело за малым...
И открываем elements.xml так же как и обычный html в браузере...
Во-вторых, видим все элементы в html документе:
и замечаем, что h1, h2 и т.д. в IE, Opera и др отображаются с разными свойствами margin и padding...:
[html]
<div>
<h1>hello</h1>
</div>
[/html]
И на конец презент. Центрование по вертикали блоковых элементов:
[html]
<body>
<div>
<h1>hello!</h1>
</div>
</body>
[/html]
Из примера видно, что в браузере IE5 свойство auto не поддерживается, хотя успешно заменимо свойством text-align:center; для строковых элементов.
Код:
А знаете, почему тег q не отображает кавычки в IE?...
Вообще, самым хорошим тоном является собственное описание каждого элемента в стилях. Этого можно добиться следующим образом:
Создаем файл стилей "html" и файл "elemenst" с расширениями .css и .xml соответственно.
В xml файле "elements" пишем заголовок для подсоединения css
Код:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="html.css"?>
<html>
<!--
Далее элементы head, body...
-->
</html>
<?xml-stylesheet type="text/css" href="html.css"?>
<html>
<!--
Далее элементы head, body...
-->
</html>
остальное дело за малым...
Код:
head, script
{ display:none; }
body, h1, h2, div /*и т.д.*/
{ display:block; }
{ display:none; }
body, h1, h2, div /*и т.д.*/
{ display:block; }
И открываем elements.xml так же как и обычный html в браузере...
Во-вторых, видим все элементы в html документе:
Код:
*
{ border:1px red solid; }
{ border:1px red solid; }
и замечаем, что h1, h2 и т.д. в IE, Opera и др отображаются с разными свойствами margin и padding...:
[html]
<div>
<h1>hello</h1>
</div>
[/html]
И на конец презент. Центрование по вертикали блоковых элементов:
Код:
*
{ border:1px red solid; }
div
{/* height:100%; */}
h1
{ margin:0pt auto; width:200px; /или процентное значение.../}
body
{ text-align:center; /*correct; version: 5.00.3700.1000, SP4*/ }
body div *
{ text-align:left; /*end correct;*/ }
{ border:1px red solid; }
div
{/* height:100%; */}
h1
{ margin:0pt auto; width:200px; /или процентное значение.../}
body
{ text-align:center; /*correct; version: 5.00.3700.1000, SP4*/ }
body div *
{ text-align:left; /*end correct;*/ }
[html]
<body>
<div>
<h1>hello!</h1>
</div>
</body>
[/html]
Из примера видно, что в браузере IE5 свойство auto не поддерживается, хотя успешно заменимо свойством text-align:center; для строковых элементов.