Mikael Brevik

PHP, MySQL, CSS, XHTML, JavaScript

Effektiviser CSS og (X)HTML

Dato 08. Mar. 2006 Kategori CSS / (X)HTML

Denne artikkelen handler litt om hvordan du kan effektivisere CSS-en din litt. Bak uttrykket å effektivisere mener jeg og styre mest mulig igjennom CSS og kalle frem til minst mulig klasser og id-er. På den måten kan du styre mye mer igjennom CSS og endre til et totalt nytt design uten å måtte knote noe særlig / ikke i det hele tatt med (X)HTML kodene dine. Artikkelen sier også litt om hvordan du kan endre stil på forskjellige elementer. For at du skal dra noe særlig stor nytte av teksten, burde du kunne noe grunnleggende CSS og litt HTML, men det er ikke noe krav. Du kan sikkert lære litt basic CSS ut av dette og.

Forskjellen mellom class og id

Jeg kan forklare litt om hva forskjellen er mellom class="" og id="". For at det skal funke bra i alle nettlesere, d.v.s. validere, så skal en id være unik. Den skal altså ikke kalles på flere enn en gang for hvert dokument. Så har du noe som er unikt på siden så skal det ha id="". Eksempel på dette er en header-, wrapper-, eller menydiv (les: divisjon).

Da kan du selv tenke deg når class skal brukes; når det er et element som forekommer flere ganger per dokument. Eksempel på dette er headers (h1, h2 osv) eller divisjoner med innhold.

Mindre klasser og id-er

Jeg kommer med en oppfordring som gjør at det går mye enklere om du skal skrive en lang side i (X)HTML. Bruk mindre klasser og id-er på elementer/tags. Om du må skrive class="className" for hver h4 tag i et dokument kan det bli mye. Derfor kan du tenke litt langt og dele opp i ytre og indre oppdelinger. Med dette mener jeg at du har alltid et ytre hovedelement som ligger utenfor de som kommer ofte. Eksempel på hva jeg mener i html:

<div id="wrapper">
<div id="topper">
<h1>My headertop number one</h1>
<a href="http://mikaelb.net/#">topperlink</a></div>
<div id="content">
<h2>My sub-header1</h2>
Here is my test text. It is very well put.
And <a href="http://mikaelb.net/#">this is a regular link</a>.</div>
<div id="contentTwo">
<h2>My sub-header2</h2>
Here is my test text under another division.
<a href="http://mikaelb.net/#">This is NOT a regular link</a>.</div>
</div>

Der har vi helt vanlig (X)HTML som et eksempel på hvordan du kan ha det. Og her kan du se et eksempel på hvordan mange ville ha hatt det:

<div id="wrapper">
<div id="topper">
<h1>My headertop number one</h1>
<a href="http://mikaelb.net/#">topperlink</a></div>
<div id="content">
<h2 class="header2">My sub-header1</h2>
Here is my test text. It is very well put.
And <a href="http://mikaelb.net/#">this is a regular link</a>.</div>
<div id="contentTwo">
<h2 class="header2">My sub-header2</h2>
<p class="lookingDifferent">Here is my test text under another division.
<a class="unusualLink" href="http://mikaelb.net/#">This is NOT a regular link</a>.</p></div>
</div>

Og de mener kanskje de trenger en id/class for hvert element de skal endre på. Men det stemmer ikke! Det hadde tatt mye lengre tid om jeg skulle ha fortsatt slik som i andre eksempel om det hadde vært en stor side. I mitt eksempel helt øverst, tar det kortere tid å skrive og mulighetene for endring er mye, mye større.

Her er et eksempel på hvordan jeg kan style effektivt til øverste eksempel:

div#wrapper {
background-color: #CDCDCD;
width: 500px;
border: 1px solid black;
}
div#topper {
width: 99%;
margin: 0px auto;
background-color: #F1F1F1;
}
/* her vil alle headers bli satt til RØD tekst farge */
h1, h2, h3, h4, h5, h6 {
color: red;
}
/* Her vil kun h1 i topper divisjonen endre farge */
div#topper h1 {
color: green;
}
/* da har dere kanskje skjønt poenget, men tar noen eksempler til */
/*setter default link stil */
a:link, a:visited {
color: yellow;
text-decoration: none;
}
a:hover, a:active {
color: blue;
text-decoration: underline;
}
/*
Men om jeg vil endre linkstilen kun under divisjonen
med id contentTwo så kan jeg gjøre det slik:
*/
div#contentTwo a:link, div#contentTwo a:visited {
color: #666666;
text-decoration: underline;
}
div#contentTwo a:hover, div#contentTwo a:active {
color: #666666;
text-decoration: none;
}
/* da gjelder ikke dette noen andre a-tags enn de i contentTwo */

Med det lille eksempelet tror jeg dere fatter hovedpoenget. Som dere kanskje skjønner vil dette skape mye mer dynamikk i sidene deres. Det blir lettere for dere å endre noe senere. Dere gjør dere selv en tjeneste for å si det slik!

Du ser formen, det er et ytre element som styrer hvordan det som er inni skal se ut. Formen av dette er, om det er id: #elementId tag-i-elementet { /*style */ }. Du kan gå inn flere nivåer og, om du har f.eks en a inni en divisjon og en a inni et paragraf kan du ha forskjellige med å bruke følgende: #elementId tag-i-elementet>inni-div-eller-p { /*style */ }. Der bruker du altså "krokodille" klemmen > som viser hva som er inni hva. Dette fungerer fint i Opera så langt som jeg vet, men er ikke sikker på om IE < = 6 (under og lik 6) takler dette. Men det er det jo bare til å teste ut!

Ellers tenkte jeg at jeg skulle gjennomgå noen gode måter å effektivisere styling av former. For dere som ikke er så inne på html, kan jeg gjøre et kjapt eksempel:

<form> <input type="text" name="tekst" />
<input type="text" name="tekst2" />
<input type="checkbox" value="Check" name="tekst2" />
<input type="submit" name="submit" value="Send" />

Om man skulle style disse kunne man bare ha brukt input { /*style*/ } ikke sant? Men hva om jeg skal style de forskjellige typene i forskjellige måter? Submit knappen skal for eksempel ha padding, og text skal ha en grå bakgrunn. Checkboxen skal ha svarte kanter. Hva gjør jeg? Jeg kunne alltids ha lagt en klasse på hvert enkelt element. Men det er jo ikke noe hendig om jeg skal forandre ting senere og ikke er det noe raskt om jeg skal skrive lange, lange former. Da har jeg noen tips til dere her. Dere kan bruke [] klemmer til å vise til særtegn/attributs i elementene!

Eksempel:

input[type="submit"] {
padding: 4px;
font-size: 15px;
}
input[type="checkbox"] {
border: 1px solid #000000;
}
input[type="text"] {
background-color: #CDCDCD;
}

Håper dere skjønner strukturen for dette siden jeg ikke kommer til å gå noe nærmere inn på det denne gangen.

Slutt

Da var det ikke så mye mer og skrive. Det gikk kanskje litt i harelabb, og ble litt mye eksempler. Men personlig liker jeg godt å lære igjennom å se på eksempler så slik ble det nå en gang. Gikk ikke innpå alt som var, men om jeg får spørsmål om å utdype noe så skal jeg gjøre så godt jeg kan i å forlenge og eventuelt forklare.

Håper dere lærte noe!

2 responser om “Effektiviser CSS og (X)HTML”

Viktig å huske at attribute-selectors ikke støttes i IE, (input[type=text]) samt at du ikke trenger å bruke hermetegn rundt verdien i attributten.

I tillegg er det stor forskjell mellom descendant selectors (eks: body p { } ) og child-selectors (eks: body > p { } ). I første eksempel vil _alle_ p elementer med body som overliggende element få egenskapene, mens i andre eksempel vil _kun_ de p-elementene med body som første overliggende element få egenskapene.

bza skrev dette 10 Mars, 2006 20:42 - Sitér
Takk for de tilleggsopplysningene. Jeg var ikke klar over at du ikke behøvde "" rundt attributtene. At det ikke støttes i IE skriver jeg i artikkelen, men kanskje jeg ikke presiserer det godt nok. Samme med body > p og body p. Jeg forklarer kanskje forskjellen litt dårlig. Så takk for at du presiserer det.

Vi får forresten håpe på at IE7 har støtte for attribute-selectors.

Mikaelb skrev dette 11 Mars, 2006 13:48 - Sitér

Legg igjen respons

Info om posten

Innlegget ble postet 08.03.06 17:39 og ligger under kategorien CSS / (X)HTML. Du kan abonnere på kommentarene ved å bruke RSS 2.0 feed. Du kan legge til kommenter, eller trackback fra din blogg/side.