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

D

danneo

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

Есть ли правило описания данного дерева? Можно описать так:
#news li a{}
#news p li a{}
Правильно ли пропускать некоторые теги, как в первом варианте?
 
Правильно. Но следует помнить о том, что 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, то этот подход очень напоминает жадную и ленивую квантификации в регулярных выражениях. Вполне очевидно, что чем более точно указан паттерн для поиска, тем меньшая вероятность попадания значений под этот фильтр.
 
тот пример, который вы представили, неправильный. p - тег контента, а Li- тег списка, поэтому неправильно пихать тег li в p.
Это к сведению, если вы вдруг действительно решите использовать такой пример кода)
 
gerasimov.nikita написал(а):
тот пример, который вы представили, неправильный. p - тег контента, а Li- тег списка, поэтому неправильно пихать тег li в p.
Это к сведению, если вы вдруг действительно решите использовать такой пример кода)
Нажмите для раскрытия...
А где должен быть тег li, вне тега p что ли? Что за ерунда?
 
danneo написал(а):
Например, есть дерево из трех тегов:
<div id="news"><p><li>
<a>ссылка</a>

Есть ли правило описания данного дерева? Можно описать так:
#news li a{}
#news p li a{}
Правильно ли пропускать некоторые теги, как в первом варианте?
Нажмите для раскрытия...
в 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>
запомнив данные правила можно легко проследить какие свойства будут использоваться, а какие нет:)
Для просмотра ссылки Войди или Зарегистрируйся - подробное описание
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху