slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 1461
Как вам уже должно быть известно, стили можно задавать как непосредственно в html-теге, посредством атрибута style, так и при помощи CSS стилей.

Рассмотрим пример, у нас есть html код:

<p style="color:#ff0000">Какого цвета будет этот текст?</p>

К этому коду прикреплен следующий css-стиль:

p {color:#00ff00;}

Получается, что цвет для параграфа определен два раза, причем разный. Встает вопрос - "Какого же цвета будет текст в параграфе? Какому из стилей отдаст предпочтение браузер?".

На этот вопрос и призван ответить этот урок. Так же здесь мы коснемся других тонкостей, касаемых приоритетов стилей, кроме показанного в примере.

Небольшое отступление, для тех, кто не знает, что делает !important в CSS, для этого вы можете прочитать нашу статью здесь.

Для начала давайте определим возможные варианты указания стилей:

  1. Стиль указан в самом тэге
    <p style="color:#ff0000;">Какого цвета будет этот текст?</p>
  2. Стиль указан в самом тэге с пометкой !important
    <p style="color:#ff0000!important;">Какого цвета будет этот текст?</p>
  3. Стиль указан в CSS формате
    p {color:#00ff00;}
  4. Стиль указан в CSS формате с пометкой !important
    p {color:#00ff00!important;}

Теперь рассмотрим варианты конфликтов стилей:

  1. В самом тэге указан один и тот же стиль два и более раз, применятся будет самый последний стиль.
  2. В самом тэге указан один и тот же стиль несколько раз, среди которых есть один с пометкой !important, применятся будет стиль с этой пометкой.
  3. Стиль указан в самом тэге и в формате CSS, применятся будет стиль, указанный в тэге.
  4. Стиль указан в самом тэге и в формате CSS с пометкой !important, применятся будет тот стиль, который указан в CSS с пометкой !important.
  5. В самом тэге указан один и тот же стиль несколько раз, все с пометкой !important, применится самый последний из таких стилей.
  6. В самом тэге указан стиль с пометкой !important и в CSS формате, применится стиль, указанный в самом тэге с пометкой !important.
  7. В самом тэге указан стиль с пометкой !important и в CSS формате с пометкой !important, применится стиль, указанный в самом тэге с пометкой !important.
  8. Стиль указан в CSS формате несколько раз, применится последний из таких стилей.
  9. Стиль указан в CSS формате и в CSS формате, с пометкой !important, применится стиль с пометкой !important.
  10. Стиль указан несколько раз в CSS формате с пометкой !important, применится последний из таких стилей.

Из сказанного выше можно вынести несколько правил, чтобы можно было проще запомнить, по приоритету стили идут так:

  1. Стиль указан в самом тэге с пометкой !important
  2. Стиль указан в CSS формате с пометкой !important
  3. Стиль указан в самом тэге
  4. Стиль указан в CSS формате
  • При этом, если на каждом уровне встречаются несколько объявлений стилей, применится последний из них. Последним считается, тот который встречается в полном коде самый нижний и правый по отношению к остальным.

Тест

  1. Задан следующий HTML-код: 
    <p style="color:#ff0000;">Главное верить в себя...</p>

    CSS-код:

    p {color:#00ff00!important;}
    p {color:#0000ff;}

    Какого цвета будет текст?

    1. #ff0000
    2. #00ff00
    3. #0000ff
  2. Задан следующий HTML-код: 
    <p style="color:#ff0000!important; color:#ee00ee!important;">Главное верить в себя...</p>

    CSS-код:

    p {color:#00ff00!important;}
    p {color:#0000ff;}

    Какого цвета будет текст?

    1. #ff0000
    2. #00ff00
    3. #ee00ee
    4. #0000ff
  3. Задан следующий HTML-код:
    <p style="color:#ee00ee;">Главное верить в себя...</p>

    CSS-код:

    p {color:#00ff00;}
    p {color:#0000ff;}

    Какого цвета будет текст?

    1. #00ff00
    2. #ee00ee
    3. #0000ff
Ответы на тест

1. - b

2. - c

3. - c

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • Varvarka
    4.00
  • intuit89
    3.60
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
  • Hozephlof
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

intuit89 аватар
Мы можем: • Создание сайтов всех видов: промо-сайты, магазины, корпоративные. • Разработка нестанд...
Перейти в тему
intuit89 аватар
Здравствуйте! Наша команда занимается созданием и продвижением сайтов под ключ. [image] Предлагае...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.