Selektory

Selektory są to zwykłe elementy HTML, do których odnosi się informacja o stylach. Jednak możemy być bardziej dokładni…

Tworzenie klas

Przez przypisanie elementom klas możesz używać nazw klas, aby określić styl:

  <STYLE TYPE="text/css">
    H1.classname { ..... }
    .class2  {informacja o stylu dla wszystkich elementów o klasie}
  </STYLE>
.....
  <H1>Ten tekst będzie określony przez powyższą informację o stylu.</H1>
  <H2>Także i ten tekst</H1>

Tworzenie identyfikatora ID

Możliwe jest użycie atrybutu id dla określenia informacji o stylu. Element jest identyfikowany przez umieszczenie kodu ID=NameOfYourChoice w otwierającym tagu. Informacja o stylu jest wtedy wyrażana przez użycie formy elementname#ID_Name { .... }
Przykład:

<STYLE> 
	#id1 { color:green}	(cały tekst w dowolnym elemencie z identyfikatorem ID=id1 będzie zielony)
	H1#id2 { color:blue}	(wszystkie elementy H1 z ID=id2 są niebieskie)
</STYLE>
.....
  <P ID=id1>zielony tekst</P>
  <H2 ID=id2>niebieski tekst</h2>

Selektor kontekstowy

Możesz ustalić, że styl będzie nadawany jedynie tym elementom, które mają pewnych “przodków” (elementy, w których są zawarte). W CSS2 selektor kontekstowy nosi nazwę selektora potomka (descendant selector)
n.p.

  H1 EM { styleinfo }; 		/* cały tekst w EM w ramach tagu H1 */
  UL UL LI { styleinfo };	/* wszystkie elementy LI w ramach dwóch definicji wykazów UL */
  .classname H1 { styleinfo };	/* cały tekst H1 zawarty w elementach z */
  #IDname H1 { styleinfo };	/* cały tekst H1 w ramach elementów z ID=IDname */
  DIV.IDname H1 { styleinfo };	/* cały tekst H1 w ramach tagów DIV z ID=IDname */

Selektor uniwersalny

Wartości uniwersalne możemy nadawać na poziomie BODY albo stosując uniwersalny selektor z gwiazdką:
* { color : red } /* cały tekst będzie czerwony */
*.classname {color : red } /* wszystkie elementy o klasie classname będą czerwone */
H1 * PRE { color:red } /* wszystkie bloki PRE zawarte w H1 będą czerwone */

Selektor dziecka

Element jest dzieckiem w stosunku do innego elementu, jeśli jest w nim zawarty i jest o jeden szczebel niżej w hierarchii. Na przykład, w <h1> <h3> </h3> </h1>, H3 jest dzieckiem H1, ale wszystko w ramach H3 jest dzieckiem H3, a nie H1. Jeśli chcemy , aby wszystkie H3, które są dzieckiem w stosunku do H1, były czerwone, użyjemy

H1 > H3 { color : red }

Elementy przystające

Aby określić styl dla elementów H3, które bezpośrednio następują po H1, użyj kodu H1 + H3 { color : red }.

Wpłynie to na <H1>...</H1> <H3>ten tekst</H3>

Selektor atrybutów

Style możemy nadawać elementom, które mają określone wartości jakichś atrybutów. Ogólna forma ma postać
elementname[attribute relationship value] { styleinfo }
,gdzie relationshipjest jednym z

  • = : dodanie stylu, gdy atrybut ma dokładnie wartość value.
  • ~= : dodanie stylu, gdy atrybut zawiera wyraz value na liście wartości rozdzielonych spacjami.
  • |= : dodanie stylu, gdy atrybut zawiera wyraz value na liście wartości zawierających łączniki (np. w nazwach kodowych języków).
  • bez relacji : gdy użyjemy formy elementname[attribute] { styleinfo } styl zostanie dodany bez wględu na wartość atrybutu.

Przykłady :

 H1[id="the top heading"] {color : red}
 H1[id~=top] {color : red}

Powyższe style miałyby ten sam efekt w <H1 id="the top heading">

Leave a Reply