Уеб Стыле Схеетс
CSS типс & Трицкс

':target' Псеудо-класа

URL обично указује на страници. Али кад URL завршава "# несто" он циља на специфичан елемент у тој страници. Броусери уобичајено пробати како бисте били сигурни да је циљана елемент је видљиво и ако је могуће на врху екрана.

Са ':target' селектор, можете додати одређени стил циљне елеменат, тако да се добије више пажње.

Ипак, можете учинити нешто више. Можете сакрити или приказати елемената заснива се на томе да ли су они циљна или не. Испод је један пример. То показује мали мени са четири ставке и сваки предмет је повезан на неки текст. Али на први је приказана без текста. Сваки предмет је линк на елемент са циљне ИID (итем1 #, # итем2 ...) и оне елементе видљиве су једино ако су мета тренутни URL.

Покушајте да кликнете на ставку менија и гледати на локацији траку прегледача како бисте видели тренутну URL.

Ево како то ради. Постоје два важна дела, изворни HTML и 'display' имовине. Прво HTML документа. То има неке везе и са одговарајућим елементима ID:

<p>
  <a href="#item1">item 1</a>
  <a href="#item2">item 2</a>
  <a href="#item3">item 3</a>
  <a href="#default">clear</a>

<div class="items">
  <p id="item1">... item 1...
  <p id="item2">... item 2...
  <p id="item3">...
  <p id="default"><!-- by default, show no text -->
</div>

Стил први правила сакрили све P унутар DIV, али онда да замени да за P да је садашња циљам:

div.items p {display: none}
div.items p:target {display: block}

То је све. На примеру горе иде на то додати мало боје, маргине, границе, итд, тако да изгледа више као мени. Можете погледати изворни код ове странице да видим како је то учинио.

Заправо, ми додата ':not(:target)', како би обезбедила да се само CSS3 претраживача ће сакрити елемент. Тако је боље ових правила су:

div.items p:not(:target) {display: none}
div.items p:target {display: block}

А картица интерфејса

Кад сте разумели горе, то није тако тешко играти око и створити прави "картица" Интерфејс: скуп правила стилу не само да показује различите садржаја на основу којих је дугме притиснут, али и промене изгледа дугме сама .

Овде је пример. Он не користи 'display: none', али 'z-index'. Ако желите знати како то ради, само направи "преглед извора" ...

Признање

Ова страница се заснива на оригиналној идеји бы Даниел Глазман. Види објашњење у својој "блог" од 9. јануар 2.003 и његов демо за 13. јануар.

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices