kaxigt.com

10 grundläggande lektioner i CSS

Välkommen till nionde lektionen!

Du har säkert sett på många hemsidor hur plötsligt texten mitt i en mening kan ändra färg och storlek. Eller att man använder samma boxar flera gånger på samma sida trots att Du säkert vet att man inte kan använda ett unikt ID mer än en gång per dokument.

Hur fungerar då allt detta? Vi ska nu kika lite på hur man kan gruppera olika html-element.

• Grupperingar med div
• Grupperingar med ID
• Grupperingar med class
• grupperingar med span

Grupperingar med DIV

<div> används när man vill gruppera ett eller flera blockelement. <div> är i sig själv ett så kallat block-level element, ibland kallat boxelement.

Med <div> märkningen har du också möjlighet att formatera större delar i ditt webbdokument.
De olika <div>attributen är följande:

align 
class
dir
id
lang
onclick
ondblclick
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
title

Ett <div>block måste alltid avslutas med </div>.

<div>märkningen omfattar alltid ett begränsat område, men det är Du som bestämmer hur stort detta område ska vara och se ut.

För att veta vilket område du vill begränsa använder man sig av ett ID – ett unikt namn. Det här ID får då bara förekomma en gång per dokument.

Css-syntax kan se ut så här:

1. #box {width:300px;}

<div id="box">innehåll i boxen </div>

Eftersom <div> är ett block-nivå-element går det alldeles utmärkt att för varje <div> lägga in och/eller koppla till andra block-element.

Du kan som exempel använda <div> inom taggarna blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th utan att nagga på validiteten.

Inuti ett <div>block kan du därutöver använda följande taggar:

a, acronym, address, applet, b, basefont, bdo, big, blockquote, br, button, center, cite, code, dfn, dir, div, dl, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, hr, i, iframe, img, input isindex, kbd, label, map, menu, noframes, noscript, object, ol, p, pre, q, s, samp, script, select, small, span, strike, strong, sub, sup, table, textarea, tt, u, ul, var

<div id="box">
<h2>En rubrik</h2>
<ul>
<li>lista</li>
</ul>
</div>

Grupperingar med ID

När man ska identifiera en eller flera grupper är det bra att använda ett ID. Exempel på ID-grupperingar kan vara dessa.

#fet {color:#333; font-size:26px; font-weight:bold;>

och HTML:

<h2 id="fet">En stor fet rubrik</h2>

Resultatet:

En stor fet rubrik

Styla en lista med ID

CSS-koden:

#fet1 {list-style-type: none; color:yellow; font-size:14px; font-weight: bold; background-color: #000;margin: 0px; padding: 0px;}

Resultatet:

• En lista med fet gul stil och svart bakgrund
• En lista med fet gul stil och svart bakgrund
• En lista med fet gul stil och svart bakgrund

Minns att du bara får använda 1 unikt ID per dokument.

Grupperingar med class

En annan bra märkning som kan kopplas till det mesta är class. Detta är ett bra attribut om du exempelvis vill skapa boxar som ska återkomma på din sida. Vad du gör då är att skapa en class-märkning i din cssmall:

.box {max-width:700px; width:100%; height:100px; background-color:#000; color:#fff; padding:10px 10px;}

Och html-koden är denna:

<div class="box">lite innehåll i boxen</div>

Resultatet:

Class attributet kan med fördel även användas på en text. Låt oss använda samma egenskaper och värden som vi hade när vi grupperade med ID.

Skillnaden är att istället för karaktären # lägger vi till en punkt och skriver in class i html-koden. På så vis kan vi använda denna märkning hur många gånger vi vill.

.fet {color:#333; font-size:26px; font-weight:bold;}

<h2 class="fet">En stor rubrik</h2>

Resultatet:

En stor fet rubrik

Avgränsa textblock

Vi kanske vill avgränsa ett textblock – då är classmärkningen ypperlig att använda. Kika på följande koder och exempel:

CSS-koden:

.text {color:blue; font:14px/150% arial,verdana, serif;}

HTML:

<p class="text">lite text</p>

Resultatet:

Eftersom vi har lagt till class-attributet .text till denna paragraf (stycke) så blir all text inom p-taggarna blp.

Gruppera med span

När vi ändå talar om text kan man med span märkningen också avgränsa en del av texten.

Genom att till exempel kapsla in texten mellan span attributet och sedan lägga till class=”text” får du den att kunna se ut så här om du inte hellre tycker om röd text vill säga.

Css-syntax:

1. .textred {color:red;}
2. .textgreen {color:green;}

Du använder span så här i html-koden:

<p>Här tänker jag göra <span class="textred">lite färgad text</span> mitt i meningen och sedan <span class="textgreen">ändra denna</span></p>

Resultatet:
Här tänker jag göra lite färgad text mitt i meningen och sedan ändra denna

Faktum är att class är ett ”hjälp-attribut” kan man säga. Med class värdet kan du styla din hemsida väldigt mycket. Class märkningen kan även användas på dina tabeller, mailformulär osv.

Följande attribut är tillåtna med <span>

1. class
2. dir
3. id
4. lang
5. onclick
6. ondblclick
7. onkeydown
8. onkeypress
9. onkeyup
10. onmousedown
11. onmousemove
12. onmouseout
13. onmouseover
14. onmouseup
15. style
16. title

Följande taggar är valida inom <span>taggen:

a, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var

Inne i följande taggar kan du applicera <span>taggen:

a, acronym, address, applet, b, bdo, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins, kbd, label, legend, li, noframes, noscript, object, p, pre, q, s, samp, small, span, strike, strong, sub, sup, td, th, tt, u, var

Allmänna egenskaper för ID, div, class och span

I lektion nummer 10 – den sista och avslutande – ska vi granska pseudo-class, parent och first-child genealogin.

Välkommen dit!