Описание дерева тегов при верстке

Тема в разделе "Верстка", создана пользователем danneo, 6 ноя 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    Например, есть дерево из трех тегов:
    <div id="news"><p><li>
    <a>ссылка</a>

    Есть ли правило описания данного дерева? Можно описать так:
    #news li a{}
    #news p li a{}
    Правильно ли пропускать некоторые теги, как в первом варианте?
     
  2. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    479
    Правильно. Но следует помнить о том, что CSS всегда будет применять именно то правило, которое наиболее подробно описано. Соответственно, если у Вас в CSS встретится код идентичен этому:
    Код:
    #news a {
        color:red;
    }
    
    #news p li a {
        color:blue;
    }
    
    то цвет ссылки на странице будет именно синим, а не красным, не смотря на то, что красный цвет объявлен раньше. Исключение - указатель !important:

    Код:
    #news a {
        color:red !important;
    }
    
    #news p li a {
        color:blue;
    }
    
    Во втором примере цвет ссылки будет принудительно установлен красным.

    Смысл такого подхода заключается в определении некоторых правил по умолчанию. Исходя из примеров, мы устанавливаем красный цвет по умолчанию для всех ссылок внутри тега с идентификатором news. Но те конкретные ссылки, которые нам необходимо выделить другим стилем, мы можем заключать в дополнительные цепочки стилей и определять им параметры CSS отличные от умолчания. Если провести своеобразную параллель с программированием на PHP/JS, то этот подход очень напоминает жадную и ленивую квантификации в регулярных выражениях. Вполне очевидно, что чем более точно указан паттерн для поиска, тем меньшая вероятность попадания значений под этот фильтр.
     
    danneo нравится это.
  3. gerasimov.nikita

    gerasimov.nikita Писатель

    Регистр.:
    4 ноя 2012
    Сообщения:
    8
    Симпатии:
    1
    тот пример, который вы представили, неправильный. p - тег контента, а Li- тег списка, поэтому неправильно пихать тег li в p.
    Это к сведению, если вы вдруг действительно решите использовать такой пример кода)
     
    Viodele нравится это.
  4. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    А где должен быть тег li, вне тега p что ли? Что за ерунда?
     
  5. gerasimov.nikita

    gerasimov.nikita Писатель

    Регистр.:
    4 ноя 2012
    Сообщения:
    8
    Симпатии:
    1
    Да
     
  6. Viodele

    Viodele Механик

    Administrator
    Регистр.:
    17 дек 2011
    Сообщения:
    110
    Симпатии:
    479
  7. danneo

    danneo Честный

    Регистр.:
    13 ноя 2007
    Сообщения:
    1.418
    Симпатии:
    109
    это да. Видимо у меня просто ошибка получилась. Хотя смысла не меняет :)
     
  8. viryys

    viryys Создатель

    Регистр.:
    26 окт 2012
    Сообщения:
    19
    Симпатии:
    1
    в css у селекторов (имен тегов) есть вес:
    1. самый маленький вес у имен тегов p, li, a, div у них вес 1
    пр: a = 1; div p a img = 4
    2. далее идут классы .wrapper, .header у них вес 10
    пр: .wrapper = 10; .wrapper .header = 20; div.wrapper p.text = 22
    3. далле идут идентификаторы (id) #footer, #left-column у них вес 100
    пр: #footer = 100; #footer .content = 110; #footer .content p.text = 121
    4 далее идут стили внутри тега в html у них вес 1000
    пр: <p style="float:left"></p> вес 1000
    5 и есть значение свойства !importamt который имеет еще больший вес 10000
    #text {color:red !important;} - цвет будет красный даже если он будет прописан в теге <p id='text' style='color:black'>asdf</p>
    запомнив данные правила можно легко проследить какие свойства будут использоваться, а какие нет:)
    http://habrahabr.ru/ - подробное описание