Videre Med CSS
I denne artikel vil jeg forklare lidt videre omkring CSS, denne artikel supplementerer min artikel omkring det at starte på CSS, det kan derfor være en fordel at læse "Start På CSS" artikel.
Denne artikel indeholder, blandt andet, tips og tricks, der effektiviserer nogle opgaver i CSS samt en nogle idéer til optimering.
Flere Klasser I Et Tag
Man behøver ikke at definere alt to gange, et godt eksempel er denne HTML stump.
<div class="menu">
...
</div>
<div class="menu-denied">
...
</div>Normalt ville man have to definitioner, en til "menu" og en til "menu-denied", hvis disse to aligevel indeholder meget af det samme, så der en anden måde som man kan gøre det på, se eksemplet herunder.
<div class="menu">
...
</div>
<div class="menu denied">
...
</div>"menu denied" er teknisk set to forskellige klasser i CSS, disse bliver adskilt af mellemrum.
Videre til CSS, vi har her to forskellige klasser, "menu" og "denied", disse kunne se sådan ud.
.menu {
bakground-color:#400000;
border:1px solid #DAA520;
color:#DAA520;
}
.denied {
bakground-color:#400000;
border:1px solid #DAA520;
color:#FF0000;
}Da der er en del, der er det samme, så hvorfor definere det to gange, i eksemplet herunder vises den optimale løsning.
.menu {
bakground-color:#400000;
border:1px solid #DAA520;
color:#DAA520;
}
.denied {
color:#FF0000;
}Flere Deklerationer I En
Man kan også definere to, eller flere, typer af tags, klasser og / eller id'er, man adkiller ved hjælp af komma i CSS, se eksempel herunder.
body, div, .main, #wrapper {
...
}Forældre Metoden
Man kan også definere forældre til og det element der skal ændres på, det er meget smart da alle kriterier skal opfyldes, man adskiler disse med mellemrum, se eksempel herunder.
ul.submenu li {
padding:3px;
}
ul.submenu {
list-style:none;
margin-left:-30px;
}Min menu er bygget op af denne metode, der er i alt tre "ul" tags på denne side, du kan se det i kildekoden hvis du vil, de eneste steder hvor der kun er to "ul" tags er på forsiden og kontakt siden, der er en artikel omkring menuen som jeg har brugt her i sektionen om HTML, artiklen hedder Simpel Menu Med HTML Og CSS.
Som det kan ses her, så er det et "ul" tag med klassen "submenu", som skal være efterfulgt af et "li" tag, for at det har effekt, i eksemplet viser jeg også at man er nødsaget til at definere "ul.submenu" for sig selv før at det har effekt.
Nedarvning
Det er nemt at nedarve værdier, men man skal lige være opmærksom på hvad det er man laver, og rækkefølgen som man skriver det i, lad os tage et eksempel.
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div>
<h1>
Overskift
</h1>
</div>
</body>
</html>Her har vi tre tags, "body", "div" og "h1", alt hvad der er defineret i "body" bliver nedarvet til "div", som så bliver nedarvet til "h1". Der er undtagelser, men det er op til det stilark et specifikt tag har, for eksempel så har "h1" en specifik tekst størrelse og er defineret som fed skrift, men sådan noget som baggrundsfarve er nedarvet, der ud over er tekst farven også nedarvet. Ved at ændre på CSS definitionen til "body" så ændrer man det hele vejen igennem, med mindre at det bliver overskrevet af et tag stilark.
Der vil altid være et standart stilark, når der ikke er defineret noget andet stilark, dette stilark er browser og / eller bruger specifikt, stol aldrig på standard værdierne, da disse kan være sat af en bruger. Typisk er det hvid baggrund, sort tekst, blå links og lilla links der er besøgt.
Det kan være lidt indviklet at få til at hænge sammen, men når det ser ud som du gerne vil have det, så kan der stadig være forskelle i forhold til de forskellige browsere. Jeg kan nævne at jeg lavede en hjemmeside og testede den i Firefox, hvor den så helt perfekt ud, Chrome og Edge gav lige lidt for mange pixel i bunden, for at være mere præcis så var det ti pixel. Med andre ord, husk at teste i andre browsere end den du bruger personligt.
At Overskrive Tidligere Værdier
Man kan sagtens overskrive værdier som er nedarvet, det ses herunder hvordan at vi overskriver tekst farven fra en orange farve til rød, det eneste der er påkrævet, er at den tekst der skal have farven rød, er at den er i et div tag.
body {
bakground-color:#400000;
border:1px solid #DAA520;
color:#DAA520;
}
div {
color:#FF0000;
}Hvis at teksten er i et hvilket som helst andet sted, end et div tag, så vil den være orange. Input, textarea og select tags er en undtagelse.