CSS-selectors

Fra Holstebro HTX Wiki
Skift til: navigering, søgning

Selectors er betegnelsen for den måde man bestemmer hvad det er der skal styles i sin CSS-kode. Det kan være classes eller id'er, det kan være de enkelte tags (mest effektivt) og det kan være enkelte egenskaber.

classes og id'er

Når man opretter en class eller et id i CSS giver man det et valgfrit navn, og forskellen er hvilket tegn der står foran navnet.

Man opretter en class som vist i dette eksempel:

.indrykket {
  margin-left: 40px;
}

Man opretter et id som vist i dette eksempel:

#menu {
  background-color: #E0E0E0;
  border:1px solid black;
}

Tag-selectors

I CSS-definitionerne kan man sætte enkelt-tags til at have bestemte egenskaber:

Her sættes fonten i alle p-Tags til Verdana (med tilbagefald på Arial og sans-serif, hvis Verdana ikke er installeret på maskinen).

p {
  font-family: "verdana", "arial", sans-serif;
}

Flere tags på en gang

Hvis man vil definere samme egenskaber til flere forskellige tags kan det gøres i en definition.

Her sættes p-Tags, li-Tags og td-Tags til samme font og størrelse:

p, li, td {
  font-family: "verdana", "arial", sans-serif;
  font-size: 12px;
}

Man kan også skabe sammenhænge mellem forskellige tags, se www.w3schools.com Selectors.

Specielle egenskaber på tags

Enkelte tags har specielle egenskaber der kan styres med CSS. Det er specielt link-tagget der er interessant, hvor man kan style hvordan det skal se ud når det ikke er besøgt, når man bevæger musen over, og når linket er besøgt, så man kan få det udseende man ønsker.

De 3 egenskaber hedder:

  • link
  • hover
  • visited

Der er en 4. egenskab - active. Det er sjældent den giver mening i en browser, så den er det normalt ikke nødvendigt at forholde sig til.

Man kan definere de 3 link-selectors som følger:

a:link {
  text-decoration: none;
  color: RoyalBlue;
}
a:hover {
  text-decoration: underline;
  color: Blue;
}
a:visited {
  text-decoration: none;
  color: DarkBlue;
}