Компания

Инвентарь

Наше все

Ководство

Техногрет

Учим IE хорошему

HTML и CSS XSLT JavaScript Изображения Софт Etc

Для просмотра этого примера необходим IE.

	Задача.	Сделать «прозрачным» написание CSS- и HTML-кода для IE под Windows версии 5.0 и выше.

Это не окончательный код. Скрипт будет изменяться и дополняться.

Как это выглядит в браузере


    <head>
        <title></title>
        <style type="text/css">
            /*
                не забудьте особенность конструкции
                behavior: url(...)
                путь должен быть абсолютным
            */
            body
            {
                background: white;
                color: black;
                behavior: url('../../etc/reformator/i/vlalek.htc');
            }
            .png
            {
                //background-image: none ! important;
                behavior: url('../../etc/reformator/i/vlalek.htc');
            }

            h1:hover, a:hover { color: red ! important; }
            h1:hover code { color: blue; }
            h1 code:hover { color: green; }
            p b:first-child,
            p b.first-child /* для IE */
            { color: green; }
            p:after,
            p.after
            { content: '.'; }
            p#paragraph:before,
            p#paragraph.before
            {
                content: '\2014\a0'; /* такой формат строки не работает в IE 5.x */
                //content: '&mdash;&nbsp;'; /* а такой в FireFox */
            }

            /* такие конструкции используйте осторожно,
            в некоторых случаях, можно серьезно подвесить Windows */
            b:first-child+b+b { color: red; } /* пробелы вокруг + лучше не ставить из-за IE 5.0 */
            /* замена + на plus для IE, через запятую с предыдущим нельзя писать */
            b.first-child plus b plus b { color: red; }

            form { float: left; padding: 0.25em; }
            form + p { clear: left; }
            form plus p { clear: left; }

            p:hover+form { background: yellow; }
            p:hover plus form { background: yellow; }

            input { border-width: 2px; }
            input:active,
            input:focus,
            input.focus
            { border-color: green; border-style: solid; }
            input:active { border-color: red; }
        </style>
    </head>
    <body>
        <h1>Заголовок с&nbsp;псевдоклассом <code>:hover</code></h1>
        <p>#" onclick="return false;">Псевдокласс ссылки</a>
            остается без изменения, а&nbsp;у&nbsp;параграфов используется
            псевдокласс <code>:after</code>, расставляющий точки в&nbsp;конце</p>
        <p id="paragraph"><b>Начальный &laquo;полужирный&raquo; элемент</b>,
            <b>следующий элемент</b>, а&nbsp;<b>третий</b>&nbsp;&mdash; будет
            красным. И&nbsp;у&nbsp;этого параграфа&nbsp;&mdash; псевдокласс
            <code>:before</code>, добавляющий тире перед текстом</p>
        <p>А&nbsp;это кнопка с&nbsp;псевдоклассами <code>:focus</code>
            и&nbsp;<code>:active</code>.  И&nbsp;если навести курсор на&nbsp;этот
            параграф подсветится форма</p>
        <form onsubmit="return false;">
            <input
                type="button"
                value="Добавить новый начальный элемент в предыдущий параграф"
                onclick="Insert_first_child()"
            />
        </form>
        <p>Картинка с&nbsp;классом ../png_in_ie/" target="_top">png</a></p>
        <img
            src="../png_in_ie/logo.gif"
            style="background-image: url('../png_in_ie/logo.png');"
            class="png"
            width="175"
            height="135"
            alt="Knorr &reg;"
        />
        <script type="text/javascript">
            var eP = document.getElementById( 'paragraph' );
            function Insert_first_child(){
                var eB = document.createElement('b');
                eB.innerHTML = 'Новый, ';
                eP.insertBefore( eB, eP.firstChild );
                eP.className += ' '; /* для Firefox */
            }
        </script>
    </body>
</html>