Обзор популярных расширений Joomla

Статьи о создании и развитии сайта

Обучающие материалы по верстке HTML\CSS


search

Управление селекторами

selectСелекторами могут выступать теги, классы и идентификаторы, к которым применяются определенные свойства. Изменение, которое сделано для определенного тега будет относится ко всем тегам в HTML-документе, а так же для всех остальных документов, к которым будет привязан файл стилей.

Но что если требуется выбрать определенные теги, стоящие в некоторой последовательности?

Для подобного управления селекторами применяют контекстные, дочерние и соседние селекторы. Существует ещё универсальный селектор, который обозначается знаком * и служит для того, чтобы описать стили для всех элементов. Универсальный селектор обычно указывается в начале файла со стилями ( *{свойства стилей} ), как правило, в нем указывается общий фон, общий шрифт и т.п.

Контекстные селекторы

Контекстные селекторы обозначаются для выбранных вложенных тегов. То есть к тегам в HTML-документе, которые находятся внутри других тегов, будут применены обозначенные стили. Для этого сначала пишем тег-контейнер, а через пробел ставим тег, который находится в нём:

div b {font-size:14px; color: brown;} - стиль в файле CSS

<div>текст<b>выделенный</b></div> - часть кода в HTML-документе

После этих записей изменения коснуться только слова "выделенный", так как оно находится в теге b, стоящем в <div>

Дочерние селекторы

Дочерние селекторы по своему действию похожи с контекстными, они также предназначены для изменения свойств вложенных тегов. Разница состоит в том, что контекстные селекторы изменяют все вложенные теги, а дочерние - только те, которые непосредственно вложены. Дочерние селекторы обозначаются знаком >.

div>p {color: blue} - пример стиля в файле CSS

<div>
<p>Весь текст синим <b>цветом</b> </p>
</div> - фрагмент кода HTML-документа

В результате получится, что весь текст окрасится синим цветом, кроме слова, заключенного в тег b, так как он не является дочерним элементом для <div>.

Соседние селекторы

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

b+img {border: 1px solid #993300} - стиль в файле CSS

<p><b>Картинка1<b><img src="/images/pic.jpg"></p> - код в HTML

После этого изображение, которое в HTML-документе находится после тега b будет показываться в рамке. Если вы не знаете как вставлять изображения на веб-страницу читайте тут.

Добавить комментарий

Защитный код
Обновить

Joomla SEF URLs by Artio

Комментарии

  • Модуль VTEM Panorama

    Дмитрий
    Доброго времни суток! Несовсем догоняю как привязать к joomshoping те для каждого товара должен ...
     
  • Плагин Edocs

    sveta
    после перехода с http на https плагин перестал работать. Меняла все пути, которые возможно, но не ...
     
  • Компонент JoomShopping. Полезности

    Димы
    Ух, шикарно, спасибо. Изменил карточку товара. Цену и кнопку "В корзину" разместил слева от ...
     
  • Работа с категориями в K2

    Николай
    Подскажите пожалуйста, пользуюсь Serpstat. Комплексный аудит сайта по метатегам (путь:Аудит сайта ...
     
  • Компонент JoomShopping. Товары и категории

    Валерий
    Здравствуйте. Мне очень нужна Ваша помощь. Как возможно сделать, чтобы форма заказа товара в joomshopping ...