Рассмотрим на практике работу с различными css селекторами. Пример семантической вёрстки вкладок - табов к статье Вы можете посмотреть здесь.

Верстаем семантические вкладки с помощью списка определений (dl - dt - dd).

HTML:

 

<dl id="tabs" class="tabs">
<dt>CSS3 transitions</dt>
<dd>
    <div>
        <h3>
            CSS3 transitions and 2D transforms
        </h3>
        <p>
            For richer user interfaces it is often desirable to include some animation to make an effect smoother
            or more appealing, or effects such as rotating elements and text. Traditionally in HTML pages the
            primary means to add animations was to use JavaScript to adjust the desired CSS property value over a
            given period of time. This works but can be slower as the JavaScript code is not hardware or software
            accelerated. What's more, using JavaScript for animations creates more code to maintain. It has not
            been possible to apply effects such as text at an angle without resorting to using images or SVG.
        </p>
    </div>
</dd>
<dt>
        Pseudo-class :nth-of-type()
</dt>
<dd>
    <div>
        <h3>
            Pseudo-class :nth-of-type()
        </h3>
        <p>
            The :nth-of-type() pseudo-class represents an element that has an+b siblings with the same expanded
            element name before it in the document tree, for any zero or positive integer value of n, and has a
            parent element.
        </p>
    </div>
</dd>
<dt>Pseudo-classes :enabled </dt>
<dd>
    <div>
        <h3>Pseudo-classes :enabled</h3>
        <p>The :enabled pseudo-class represents user interface elements that are in an enabled state. </p>
    </div>
</dd>
<dt>Pseudo-class :last-child </dt>
<dd>
    <div>
        <h3>
            Pseudo-class :last-child
        </h3>
        <p>The :last-child pseudo-class represents an element that is the last child of some other element.
        Same as :nth-last-child(1).</p>
    </div>
</dd>
</dl>

 

Свой выбор мы остановили на html теге dl – списке определений.

Тег dl – список определений:

Дочерние теги:

  • dt – название термина;
  • dd – следует за dt, может быть несколько, определение термина.

Используя для имен вкладок (наших определений) тег dt, а для содержимого тег dd - мы устанавливаем логические связи названий вкладок с их содержимым – один из приёмов той самой «семантической вёрстки».

Далее будем именовать список определений dlродительским контейнером, элементы dt, dd – его дочерними элементами.

Так же будем именовать dtвкладкой, dd, dd>divсодержимым вкладки согласно их назначению.

Присвоим списку определений dl id="tabs" class="tabs".

Верстаем css для вкладок:

Вначале зададим общее оформление родительскому элементу dl:

CSS:

.tabs{
        margin: 15px auto;
        padding: 0;
        width: 90%;
        position: relative;
        min-width: 600px;
     }

Зададим для содержимого вкладок dl.tabs динамическую ширину width: 90%;, но, чтобы избежать «сплющивания» содержимого вкладок на маленьких разрешениях экрана и при сворачивании окна, определим минимально возможную длину min-width: 600px; (в зависимости от Вашего дизайна).

Так как вкладки dt мы будем располагать с помощью абсолютного позиционирования, укажем контейнеру dl.tabs position: relative;.

Скроем содержимое dd наших вкладок , используя селектор для выборки исключительно дочерних элементов >:

CSS:

.tabs>dd{
         display: none;
     }

Но, после загрузки страницы, отобразим посетителю первую вкладку, для этого используем преимущество css правил, определённых с указанием id элемента, над css правилами, определёнными с указанием класса элемента (вот для чего мы задали тегу dl id и класс).

CSS:

#tabs>dt:first-child + dd{
        display: block;
     }

Разберём приведённый пример:

«показать» (display: block;) элемент dd (+ dd), который следует за первым дочерним элементом dt (dt:first-child) контейнера с id: #tabs (#tabs>dt:first-child)

Какие селекторы были использованы:

  • > - выбрать только дочерние элементы (dt) в контексте указанного контейнера(dl);
  • + - выбор следующего соседнего элемента (для dt -> dd согласно нашей вёрстке);
  • :first-child – псевдо – класс, обозначающий первый дочерний элемент (dt:first-child) в контексте указанного контейнера #tabs (в нашем случае, первым дочерним элементом будет первый элемент dt в родительском контейнере #tabs).

Выполним сброс стилей (обнулим отступы) для всех дочерних элементов dt,dd:

CSS:

.tabs>dt,.tabs>dd{
        padding: 0;
        margin: 0;
     }

По наведению мышки на контейнер .tabs скроем содержимое dd всех дочерних «вкладкок»:

CSS:

.tabs:hover>dd{
        display: none;
    }

Здесь мы использовали псевдо-класс :hover - указанные правила применяются к элементу по наведению мыши.

Отобразим содержимое dd вкладки, на которую наведен курсор мыши, используя преимущество правил указанных через id элемента, над правилами, указанными с использованием класса элемента.

CSS:

#tabs>dt:hover + dd,#tabs>dd:hover{
        display: block;
     }

Разберём приведённый пример:

«Показать» (display: block;) содержимое элемента dd (dt:hover + dd), который следует за дочерним элементом dt контейнера id:#tabs, когда на вкладку dt наведен курсор мыши (dt:hover + dd), а так же «показать» содержимое дочернего элемента dd контейнера #tabs (#tabs>dd), в области которого находится курсор мыши (#tabs>dd:hover). Последнее правило требуется для того, чтобы содержимое вкладки «не пропадало», когда курсор мыши покидает вкладку dt и переходит к её содержимому dd.

Определяем внешний вид вкладок:

CSS:

#tabs>dt{
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 1%;
        width: 24.25%;
        height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-align: center;
        text-overflow: ellipsis;
        o-text-overflow: ellipsis;
        background: #fff;
        border: 1px solid red;
        border-bottom: none;
        line-height: 20px;
        font-size: 1em;
     }

Позиционируем наши дочерние «вкладки» dt абсолютно, относительно верхнего левого угла контейнера dl: #tabs (position: absolute; top: 0; left: 1%;), задаем ширину и высоту вкладки dt (так как наших вкладок dt всего 4, то разделим 100% на 4 и отнимем 0.75% на отступы между вкладками dt, получаем ширину одной вкладки dt: width: 24.25%;). Приукрасим внешний вид вкладок dt: выровняем их содержимое по центру, запретим отображение содержимого, которое выходит за границы элемента (overflow: hidden;), и, если такое произошло, поставим автоматически троеточие за «урезанным» названием вкладки dt (text-overflow: ellipsis;) (а для большей совместимости с оперой: повторяем (o-text-overflow: ellipsis;)), запретим «перенос» содержимого на следующую строку (white-space: nowrap;),сменим стандартный курсор на курсор руки (cursor: pointer), подскажем посетителю что нужно «навести», «щелкнуть» по нашей вкладке dt.

При наведении мыши на «вкладку» dt изменим её фон и цвет подписи, а так же сделаем начертание шрифта полужирным:

CSS:

#tabs>dt:hover{
 	background: #ff0000;
    color: #fff;
    font-weight: bold;
}

Теперь с помощью применения селектора следующего элемента + установим поочерёдно положение на экране (левый отступ) для каждой вкладки dt:

Вторая вкладка dt:

CSS:

#tabs>dt:first-child + dd + dt{
        left: 25.5%;
     }

Разберём приведённый пример для второй вкладки dt:

Назначим «отступ» 25.5% от левого угла контейнера #tabs для второй вкладки dt, которая следует после содежимого dd первой вкладки dt(dt:first-child + dd + dt).

Третья вкладка:

CSS:

     #tabs>dt:first-child + dd + dt  + dd + dt{
        left: 50%;
     }

Четвёртая вкладка:

CSS:

     #tabs>dt:first-child + dd + dt  + dd + dt + dd + dt{
        left: 74.5%;
     }

Стилизуем содержимое (dd) вкладок :

CSS:

#tabs>dd{
        width: 100%;
        padding: 21px 0;
        overflow: hidden;
}

Сделаем отступ от верхней границы в 21px (именно padding, а не margin, что позволит нам при выделении вкладки dt с помощью мыши одновременно выделять содержимое (dd>div) вкладки (#tabs>dt:hover + dd,#tabs>dd:hover).

И небольшой фикс для IE 7.0:

Разместите этот код в окружении условных комментариев в head секции страницы:

HTML:

<!--[if IE 7.0]>
  <style type="text/css">
    #tabs>dd>div{ margin-top: 21px;}
  </style>
  <![endif]-->

А теперь поработаем над визуализацией содержимого (dd>div) вкладок.

CSS:

#tabs>dd>div{
        border: 1px solid red;
        overflow: hidden;
        padding: 20px 10px;
        overflow: hidden;
}

Задаём отступы для дочерних div ов в дочернего содержимого dd контейнера #tabs (#tabs>dd>div), возьмём «в рамочку» (border: 1px solid red), и запретим показ содержимого за границами элемента (overflow: hidden).

Итак, мы создали вкладки (tabs, табы), при помощи css 2.1 и html вёрстки без javascript а, используя широкую практику селекторов, при этом наши вкладки имеют чёткие логические связи, организованные с помощью списка определений. В следующей статье мы рассмотрим стилизацию вкладок с помощью селекторов и возможностей CSS 3.0. А так же «позаботимся» о сохранении выделения активной вкладки, когда мышка не находится в области вкладок, и сохранения выделенной вкладки после перезагрузки страницы (возможностью добавления страницы с активной просматриваемой вкладкой в избранное).

Пример семантической вёрстки вкладок - табов к статье Вы можете посмотреть здесь.

Интересная информация: кроме работы есть ещё и приятные минуты отдыха, для всех поклонников фантастики советую обратить внимание на книгу Андрея Белянина Ааргх в эльфятнике, приятного Вам чтения!

Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:

Комментарии   

 
0 #2 al 24.03.2012 19:06
Цитирую Сергей:
Hi.
Спасибо за интересный материал.
А как сделать, чтобы вкладки переключались не по наведению, а по нажатию курсора мыши ?

Тут нужно js с обработчиком событий onclick
Цитировать
 
 
0 #1 Сергей 01.02.2012 18:28
Hi.
Спасибо за интересный материал.
А как сделать, чтобы вкладки переключались не по наведению, а по нажатию курсора мыши ?
Цитировать
 

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


Яндекс.Метрика