Рейтинг@Mail.ru
    Работа \ Обучение \ Web-программираммирование для чайников. "Приоритеты правил CSS"

    Web-программираммирование для чайников. "Приоритеты правил CSS"

    Тема сегодняшнего урока: «Приоритеты правил CSS».

     

    Вы можете задать для каждого элемента сразу несколько правил оформления. Вот например так:

    <HTML>
    <HEAD>
    <TITLE>Урок 12. Приоритеты стилей CSS</TITLE>
    </HEAD>
    <STYLE TYPE="text/css">
    <!--
    P {
    color:red;
    }
    .myclass {
    color:green;
    }
    -->
    </STYLE>
    <BODY>

    <div>
    <P>Первый абзац</P>
    <P class="myclass">Второй абзац</P>
    <P>Третий абзац</P>
    </div>

    </BODY>
    </HTML>

     

    Как видим, для тэга

     

    <P class="myclass">Второй абзац</P>

     

    действуют сразу два правила, по одному он должен быть красным. как тэг <P> по второму зеленым. как класс "myclass". Какого же цвета будет надпись "Второй абзац"?. правильный ответ: зеленого. Потому что селектор по классу главнее чем селектор по тэгу. Еще большим приоритетом обладает селектор по идентификатору. Убедимся в этом на примере:

     

    <HTML>
    <HEAD>
    <TITLE>Урок 12. Приоритеты стилей CSS</TITLE>
    </HEAD>
    <STYLE TYPE="text/css">
    <!--
    P {
    color:red;
    }
    .myclass {
    color:green;
    }
    #myid {
    color:blue;
    }
    -->
    </STYLE>
    <BODY>

    <div>
    <P>Первый абзац</P>
    <P class="myclass">Второй абзац</P>
    <P class="myclass" id="myid">Третий абзац</P>
    </div>

    </BODY>
    </HTML>

     

    Селектор по классу или идентификатору, заданный для конкретного тэга, главнее, чем общий селектор по тэгу или идентификатору. Для того, что бы убедиться в этом, рассмотрим такой пример:

    <HTML>
    <HEAD>
    <TITLE>Урок 12. Приоритеты стилей CSS</TITLE>
    </HEAD>
    <STYLE TYPE="text/css">
    <!--
    P {
    color:red;
    }
    .myclass {
    color:green;
    }
    P.myclass {
    color:gray;
    }
    #myid {
    color:blue;
    }
    -->
    </STYLE>
    <BODY>

    <div class="myclass">
    Этот тест должен быть зеленым
    <P>Первый абзац</P>
    <P class="myclass">Второй абзац</P>
    <P class="myclass" id="myid">Третий абзац</P>
    </div>

    </BODY>
    </HTML>

     

    Проще говоря, чем больше детализация правила, тем оно главнее. Если возникает ситуация, когда не понятно, какое правило имеет главнее, то приоритет определяется порядком следования правил в таблице стилей.



    Теги: HTML , WEB , CSS , сайт , программирование
    Смотрели:

    всего 9398 раз



    Нравится

    Комментарии: Добавить комментарий

    Пока нет комментариев.

    Добавьте ваш комментарий:

    Чтобы оставить комментарий вам нужно войти на сайт или зарегистрироваться.