Mar
Den stora hemligheten med CSS
Kategorier: CSSVad är det som gör separation av innehåll och presentation enkelt? CSS har en hemlighet som inte många verkar känna till. Det är ingen hemlighet i sig, eftersom svaret finns att finna överallt även om det oftast är inlindat i tråkiga rekommendationer, specifikationer och knepiga texter.
Är ni beredda? Här kommer det: Det spelar ingen roll utseendemässigt vilket HTML-element du väljer.
Först behöver ett par saker klargöras. Det finns undantag, det gör det alltid, och i det här fallet är undantagen tabeller och formulär.
Som jag skrivit i en tidigare artikel om CSS och boxmodellen består alla HTML-element på en sida av boxar / lådor / fyrkanter. Alla dessa fyrkanter går att få likadana till utseendet med hjälp av CSS (förutom tabeller och formulärelement). Det är detta du ska komma ihåg när du kodar HTML och styr presentation med CSS.
Det spelar ingen roll utseendemässigt vilket HTML-element du väljer.Det som skiljer mellan olika element är oftast displayvärdet (block eller inline), margin, padding och eventuellt en border. Olika webbläsare ger element olika värden beroende på hur de programmerats men i slutändan är det du som styr detta med din CSS. Du behöver inte lägga en UL inuti en DIV för att sedan lägga en border och lite padding på divven. Du kan göra det direkt på UL-elementet och det kommer att se exakt likadant ut. Du behöver inte lägga en länk i en DIV för att kunna ge den ett visst utseende, du kan ge a-elementet utseendet på en gång.
Vad är då skillnaden på element som är block respektive inline? Den största skillnaden är att block-element genererar en radbrytning och att det går att sätta bredd, höjd och vertikal margin på dem. Det går inte på inline-element, där styrs bredd och höjd av innehållet medan margin bara går att påverka i sidled.
Ta en titt på följande exempelsida och fundera på vilka olika element som används innan du tittar på källkoden. Alltså:
Det spelar ingen roll utseendemässigt vilket HTML-element du väljer.Om du minns detta när du gör en HTML-sida nästa gång kan jag nästan garantera att din kod kommer att bli renare, mindre och mer lättläst än tidigare.
TYCKTE DU OM ARTIKELN?
