5 svar · 364 visningar · startad av haider
Hej
Jag undrar följande:
h5 a {
vertical-align:middle;
font-weight:normal;
margin-top:5px;
text-decoration: none;
}
Borde inte detta påverka alla a-taggar inne i H5-taggen?
När jag vill koppla en class till en a-tagg, varför räcker det inte med att ange classen i ex. div, utan måste göra det i a-taggen, alltså <a clas="...">.?
Kan man använda <div id="abc"> och sen hänvisa en css till denna ID?
Är det med #abc {} ?
Vad inebär när man skriver ex. div#M1?
Borde inte detta påverka alla a-taggar inne i H5-taggen?
Jo, om jag inte är för trött och ser fel så skall det fungera så.
När jag vill koppla en class till en a-tagg, varför räcker det inte med att ange classen i ex. div, utan måste göra det i a-taggen, alltså <a clas="...">.?
Det beror på att en div är en div, och en länk är en länk, 2 helt olika objekt i dokumentstrukturen.
Du kan ju använda samma teknik som ovan om du vill slippa sätta class på varenda länk i en div, tex
div.links a {
color: #ff0000;
}
...
<div class="links">
<a href="link1.htm">Link #1</a><br />
<a href="link2.htm">Link #2</a><br />
Kan man använda <div id="abc"> och sen hänvisa en css till denna ID?
Är det med #abc {} ?
Vad inebär när man skriver ex. div#M1?
Japp, båda sätten fungerar bra, den andra indikerar att div-elementet med attributet id satt till M1 får den klassen , vet ärligt talat inte varför man gör så, kanske för att det är mer lättöverskådligt när man felsöker/ändrar i koden ?
Någon med mer info kanske kan skriva en rad...
Wow, nej, jag tror att din info var väldigt givande :)
Förresten, om "body" påverkar "div" i css, så ska man väl kunna skriva:
body a { .. .. ... }
eller ska det vara:
div a { .. . .. .. . }
Eller nåt annat?
Japp.
Man behöver inte ange alla taggar "emellan" en "förälder-tagg" och någon av dess "descendants".
Ett annat exempel:
I koden
<table>
<tr>
<td>Normal</td>
</tr>
</table>
<div>
<table>
<tr><td>Annorlunda</td></tr>
</table>
</div>
med CSS:en
div td {color:red}
så blir bara den senare tabellens text röd... Om man har en <!DOCTYPE om ger korrekt CSS-hantering!!! ;)
För i vissa fall, för vissa taggar (som t.ex. td), så kör t.ex. inte MSIE med riktigt riktiga arvsmekanismer om du får upp webbläsaren i "Quirks mode".
Så kör helst med en <!DOCTYPE som ger dig "Standards mode" när du mekar med CSS om du vill vara säker på att det blir lika i så många webbläsare som möjligt...
Förresten, om "body" påverkar "div" i css, så ska man väl kunna skriva:
body a { .. .. ... }
Nja, kan och kan... det är kortare att skriva:
a { ... }
Båda sätten ger samma effekt, det första talar om att alla länkar i bodyn skall se ut på si&så vis. Det andra sättet talar om att alla länkar skall se ut på si&så vis. Och eftersom man bara kan ha länkar i bodyn och dess underelement [div, p, form, table osv] ger det samma resultat. Metod #2 är mindre att skriva så jag brukar välja den :) Jag har faktiskt aldrig sett det 1:a sättet i bruk någonstans.
div a { .. . .. .. . } stylar bara upp de länkar som finns i div-element, inte de som ligger i bodyn. Om man inte anger ngn class för länkarna i följande div's kommer de använda sig av denna class.
Ett litet exempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
background-color: #e0e0e0;
}
a {
color: maroon;
}
div a {
color: red;
}
div.links a {
color: gyellow;
}
a.egen {
color: orange;
}
</style>
</head>
<body>
<a href="#">Body länk</a><br />
<div>
<a href="#">Div länk</a><br />
<a href="#" class="egen">Div länk [egen a-class]</a><br />
</div>
<div class="links">
<a href="#">Div länk [med div class]</a><br />
</div>
</body>
</html>
Hoppas det hjälper.
[edit: kapade doctypen då den strulade till layouten lite]