Bar: 1 version importeret

2022-08-01T13:50:05Z

1 version importeret

Ny side

Selectors er betegnelsen for den måde man bestemmer hvad det er der skal styles i sin CSS-kode. Det kan være [[CSS-class|class]]es eller [[CSS-id|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:

<pre>
.indrykket {
margin-left: 40px;
}
</pre>

Man opretter et id som vist i dette eksempel:

<pre>
#menu {
background-color: #E0E0E0;
border:1px solid black;
}
</pre>

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

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

<pre>
p {
font-family: "verdana", "arial", sans-serif;
}
</pre>

===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-Tag]]s, [[li-Tag]]s og [[td-Tag]]s til samme font og størrelse:

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

Man kan også skabe sammenhænge mellem forskellige tags, se [http://www.w3schools.com/cssref/css_selectors.asp www.w3schools.com Selectors].

==Specielle egenskaber på tags==
Enkelte tags har specielle egenskaber der kan styres med CSS. Det er specielt [[a-Tag|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:

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

{{webdesign}}
[[Kategori:CSS Egenskaber]]

CSS-selectors - Versionshistorie

Bar: 1 version importeret