Автоматическое растормаживание колес: Тормозные устройства колес предназначены для уменьшения длины пробега и улучшения маневрирования ВС при...
Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
Топ:
Комплексной системы оценки состояния охраны труда на производственном объекте (КСОТ-П): Цели и задачи Комплексной системы оценки состояния охраны труда и определению факторов рисков по охране труда...
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Проблема типологии научных революций: Глобальные научные революции и типы научной рациональности...
Интересное:
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Национальное богатство страны и его составляющие: для оценки элементов национального богатства используются...
Дисциплины:
2019-12-19 | 81 |
5.00
из
|
Заказать работу |
|
|
Контекстные селекторы
Селектор может состоять из нескольких частей, разделённых пробелом, например:
p strong {... }
ul.hit {... }
.footer.menu a {... }
Такие селекторы называют контекстными или вложенными. Их используют для того, чтобы применить стили к элементу, только если он вложен в нужный элемент.
Например, селектор .menu a сработает для ссылки a только в том случае, если она расположена внутри элемента с классом .menu.
Читать их проще всего справа налево:
p strong {... } /* выбрать все теги strong внутри тегов p */
.menu a {... } /* выбрать все ссылки <a> внутри элементов с классом.menu */
Таким образом, можно задавать элементам различные стили в зависимости от их контекста. Если ссылка расположена внутри меню, сделать её крупнее, а если внутри основного текста, то задать ей нужный цвет.
Дочерние селекторы
Потомком называются любые элементы, расположенные внутри родительского элемента. А дочерними элементами называются ближайшие потомки. Взгляните на пример:
<ul>
<li><span>...</span></li>
<li><span>...</span></li>
</ul>
По отношению к <ul> <li> являются дочерними элементами и потомками, а <span> — потомки, но не дочерние элементы.
Контекстные селекторы влияют на всех потомков, что не всегда удобно. Иногда необходимо задать стили только для дочерних элементов. Особенно это полезно при работе с многоуровневыми списками.
Для этого существует дочерний селектор, в котором используется символ >. Например: ul > li.
CSS селекторы
Каскадирование
|
Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей), где одним из ключевых слов выступает «каскад». Под каскадом в данном случае понимается одновременное применение разных стилевых правил к элементам документа — с помощью подключения нескольких стилевых файлов, наследования свойств и других методов. Чтобы в подобной ситуации браузер понимал, какое в итоге правило применять к элементу, и не возникало конфликтов в поведении разных браузеров, введены некоторые приоритеты.
Самым низким приоритетом обладает стиль браузера — оформление, которое по умолчанию применяется к элементам веб-страницы браузером. Это оформление можно увидеть в случае «голого» HTML, когда к документу не добавляется никаких стилей.
Специфичность или просто приоритет
Специфичность представляет собой вес, придаваемый конкретному правилу CSS. Вес правила определяется количеством каждого из типов селекторов в данном правиле.
Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS.
Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.
Вес селекторов
Название | Вес |
селектор тега | 1 |
селектор класса или селектор атрибута | 10 |
селектор ID | 100 |
inline-стиль | 1000 |
!important; | 10000 |
Пример веса
Селектор, атрибут или стиль | !important | style =” ” | id | class | Тег | Общий вес |
p | 0 | 0 | 0 | 0 | 1 | 1 |
.your_class | 0 | 0 | 0 | 1 | 0 | 10 |
p.your_class | 0 | 0 | 0 | 1 | 1 | 11 |
#your_id | 0 | 0 | 1 | 0 | 0 | 100 |
#your_id p | 0 | 0 | 1 | 0 | 1 | 101 |
#your_id.your_class | 0 | 0 | 1 | 1 | 0 | 110 |
p a | 0 | 0 | 0 | 0 | 2 | 2 |
#your_id #my_id.your_class p a | 0 | 0 | 2 | 1 | 2 | 212 |
<p style=”color:red”> … </p> | 0 | 1 | 0 | 0 | 0 | 1000 |
p { color:red!important; } | 1 | 0 | 0 | 0 | 0 | 10000 |
Наследование
|
Наследование в CSS — механизм, с помощью которого значения свойств элемента-родителя передаются его элементам-потомкам.
Стили, присвоенные некоторому элементу, наследуются всеми потомками (вложенными элементами), если они не переопределены явно. Например, размер шрифта и его цвет достаточно применить к body, чтобы все элементы внутри имели те же свойства.
Наследование позволяет сократить размер таблицы стилей, но если стилей много, то отследить какой родительский элемент установил некоторое свойство, становится сложнее.
Чтобы определить, наследуется значение стилевого свойства или нет, требуется заглянуть в справочник по свойствам CSS и посмотреть там. Подключать свою интуицию в подобном случае бесполезно, может и подвести.
|
|
Биохимия спиртового брожения: Основу технологии получения пива составляет спиртовое брожение, - при котором сахар превращается...
Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!