slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2231
Данный урок будет посвящен пояснению наследования в CSS для вложенных элементов. Это довольно важная тема и вам нужно хорошо ее усвоить.

Для начала давайте разберемся, что такое родительский элемент и дочерний, например, имеем такую HTML структуру:

<div>
        <p>Всем счастья, <u>а вот это мы подчеркнем</u></p>
</div>

В этой структуре самым главным родительским элементом будет <div>, его дочерними элементами будут <p> и еще глубже <u>. Так же элемент <p> будет дочерним для <div>, но родительским для <u>, так как последний заключен в тэге <p>. Для тэга <u> родительскими будут и <div> и <p>, причем по приоритетам стилей сначала будет идти самый ближний по родству, т.е. <p> тэг.

Как правило наследуются не все свойства, например, могут наследоваться такие свойства, как цвета шрифта, размер шрифта и т.д. А не наследуются, например, ширина блока, отступы и т.д.

В примере описанном выше, если тэгу <div> размер шрифта задан 12px, а тэгу <p> - 14px, тогда тэг <u> будет наследовать размер в 14px, от ближнего родственника.

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

Допустим у нас есть HTML-структура:

<div>
    <p>
        У тебя все получится! =)
    </p>
</div>

Задать стиль для <p> можно следующим образом

p {color:#ff0000;}

или так

div p {color:#ff0000;} /* div p - вложенный селектор */

Оба этих варианта для данной структуры сделаю абсолютно одно и тоже - окрасят текст в красный цвет. Но вы заметили, что перед p, во втором случае появилось div. Это называется вложенные селекторы, они позволяют отделять стили друг от друга. Все в родительских и дочерних элементах. Вот эта запись:

div p {color:#ff0000;} /* div p - вложенный селектор */

Будет применять стиль ко всем <p> тэгам, у которых в родителях есть <div>. А тем, у которых такого родителя нету, стиль применятся не будет.

Отсюда вытекает еще одна особенность наследования. Допустим, у нас есть такая структура HTML:

<div>
        <span>Текст с неведомой, <span>Еще какой-то текст</span>,<u>информацией</u></span>
</div>

Тогда стиль

div span {color:#00FF00;}

Применится ко всем этим тэгам <span>, чтобы для внутреннего тэга <span> указать свой стиль нужно дописать такое:

div span {color:#00FF00;}
div span span {color:#FF0000;}

Вот как это будет выглядеть:

1 2

Т.е. тут четко прослеживается наследование и использование этого в CSS.

Еще одна занимательная особенность - сгруппированные селекторы. Допустим, мы хотим задать красный цвет всем <p> тэгам и всем <a> тэгам, тогда нам нужно написать так:

a {color:#ff0000;}
p {color:#ff0000;}

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

p, a {color:#ff0000;}

Результат не изменился, изменилась только структура CSS-кода. Сгруппированный селектор состоит из обычных селекторов, разделенных запятыми. В том числе под обычным селектором понимаются вложенные селекторы, тэги с классами и идентификаторами. Такая запись будет вполне допустимой:

div p.cred u, span#general a {color:#ff0000;}

Тест

  1. Для структуры ниже выберите неправильное утверждение:
    <ul>
        <li><span>птицы</span></li>
        <li><span>растения</span></li>
    <ul>
    1. Тэг <span> дочерний по отношению к тэгам <li> и <ul>
    2. Тэг <li> родительский по отношению к <span>
    3. Тэг <ul> дочерний по отношению к <span>
    4. Тэг <li> дочерний по отношению к <ul>
  2. Выберите правильный полный селектор для тэга <s>, учитывая наследование
    <div>
        <p>Продолжай <span>идти</span> к своей <s>цели</s></p>
    <div>
    1. p span s
    2. div p s
    3. div p span s
    4. span s
Ответы на тест

1. - c

2. - b

< >

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

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

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

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

IHC

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

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

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

ZOMRO аватар
А Вы уже приобрели защиту от всех известных DDoS-атак (L2-L7)? Наши преимущества: Защищаем от атак ...
Перейти в тему
ZOMRO аватар
Жаркое лето дарит горячие бонусы для наших партнёров! Вознаграждение до 40% от всех платежей и прив...
Перейти в тему
ZOMRO аватар
VIP-тарифы для Вас! Высокопроизводительные VDS/VPS по VIP-тарифам будет отличным решением для тех, ...
Перейти в тему

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

Javascript функции

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

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

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

CPA сети 30.01.2017
CPA сети

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