---

Jeg er begyndt at sætte mig mere ind i mulighederne med css og er stødt på
et par spørgsmål.

1)
Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang mens
class kan fremkomme flere gange i på samme side?

2)
Jeg kan godt lave diverse egenskaber så fx <div> men hvad betyder det når
der står et # i css filen fx. "div#titel {" eller når der er en "*" foran?

3)
Hvad betyder det når der står flere html-tags i en css defination som fx
"div#titel ul ul li {" ?

4)
Inden du afslutter en defination med } skal der så lige inden være et ";"
tegn eller er det kun imellem definationerne der skal være det?


/Magnus

---

Magnus skrev:

> 1)
> Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang
> mens class kan fremkomme flere gange i på samme side?

<div id="..."></div> suppleret med #...{}
og <div class="..."></div> suppleret med ....{} giver samme resultat.

> 4)
> Inden du afslutter en defination med } skal der så lige inden være et ";"
> tegn eller er det kun imellem definationerne der skal være det?

Nej, det er ikke nødvendigt til sidst. Det er kun mellem definitionerne det
er nødvendigt.

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

"Magnus" <magnusFJERN@arnason.dk> skrev i en meddelelse
news:43959093$0$67257$157c6196@dreader2.cybercity.dk...
> Jeg er begyndt at sætte mig mere ind i mulighederne med css og er stødt på
> et par spørgsmål.
>
> 1)
> Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang
> mens class kan fremkomme flere gange i på samme side?

- yes. ID kun en gang på hver side, class mange gange på hver side. Så en
global menu kan du give ID mens links i teksten eller tilsvarende
formattering kan du give class

> 2)
> Jeg kan godt lave diverse egenskaber så fx <div> men hvad betyder det når
> der står et # i css filen fx. "div#titel {" eller når der er en "*" foran?

- * har jeg aldrig set foran, men hvis der står ex: /* .tabel (og en masse
egenskaber)*/ "gælder" det ikke i style-shettet. /**/ bruges til at indsætte
kommentarer i style-shettet (f.eks: /* menuen begynder her */), for
browseren læser ikke det, der står mellem /* og */. Det betyder så, at hvis
du vil se hvordan siden ser ud uden et bestemt formattering, kan du sætte
/**/ omkring det ...

- div#titel har jeg heller aldrig helt forstået, men det er vist noget med
at så gælder #titel kun, hvis det står i en div, en her er der nok nogen,
der kan præciserer

> 3)
> Hvad betyder det når der står flere html-tags i en css defination som fx
> "div#titel ul ul li {" ?

- hvis du f.eks. laver en .menuramme som du sætter din navigation ind i kan
du også lave en .menuramme a og en .menuramme a:hover og så behøver du ikke
tildele dine links class'es for så vidt de optræder i "menurammen"

> 4)
> Inden du afslutter en defination med } skal der så lige inden være et ";"
> tegn eller er det kun imellem definationerne der skal være det?

- det gør ingen forskel

ras

---

Magnus skrev:

> 1)
> Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang mens
> class kan fremkomme flere gange i på samme side?

Korrekt. Jeg bruger class til det hele undtagen lokale ankre som
man skal kunne springe til inden for samme side. De skal jo være
unikke.

> 2)
> Jeg kan godt lave diverse egenskaber så fx <div> men hvad betyder det når
> der står et # i css filen fx. "div#titel {" eller når der er en "*" foran?

div#titel betyder at man kun sætter egenskaberne for titel hvis
den ligger inden i en div (og titel skal være unik). Med en
class-løsning i stedet for en id-løsning ser det sådan ud:

div .titel

> 3)
> Hvad betyder det når der står flere html-tags i en css defination som fx
> "div#titel ul ul li {" ?

At man giver flere elementer samme opsætning i ét hug i stedet
for at skrive det samme mange gange.

> 4)
> Inden du afslutter en defination med } skal der så lige inden være et ";"
> tegn eller er det kun imellem definationerne der skal være det?

Det er kun mellem definitionerne at det kræves. Væn dig til at
sætte det afsluttende kolon alligevel. Dels forøger det chancen
for at man altid husker det, og dels - og ikke mindst - så undgår
man en træls fejl hvis man bytter om på rækkefølgen af linjerne.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Magnus skrev:

>> 4)
>> Inden du afslutter en defination med } skal der så lige inden være et ";"
>> tegn eller er det kun imellem definationerne der skal være det?

Bertel Lund Hansen skrev som svar:

> Det er kun mellem definitionerne at det kræves. Væn dig til at
> sætte det afsluttende kolon alligevel. Dels forøger det chancen
> for at man altid husker det, og dels - og ikke mindst - så undgår
> man en træls fejl hvis man bytter om på rækkefølgen af linjerne.

Hvis man har et langt stylesheet og til sidst fjerner alle de unødvendige
semikolonner (;) fylder det faktisk lidt mindre. Har selv prøvet det da jeg
optimerede mit stylesheet via Websiteoptimization.com.

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

Ja selvfølgelig. En Byte per overflødigt ;.
På en længere CSS side kan du måske spare 30 Bytes eller målt i
download tid med modem omkring 0,01 sekund.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

On Tue, 6 Dec 2005 14:45:29 +0100, "David Trasbo" <datra@mail.dk>
wrote:

>Hvis man har et langt stylesheet og til sidst fjerner alle de unødvendige
>semikolonner (;) fylder det faktisk lidt mindre. Har selv prøvet det da jeg
>optimerede mit stylesheet via Websiteoptimization.com.

---

David Trasbo skrev:

> Hvis man har et langt stylesheet og til sidst fjerner alle de unødvendige
> semikolonner (;) fylder det faktisk lidt mindre. Har selv prøvet det da jeg
> optimerede mit stylesheet via Websiteoptimization.com.

Den sølle besparelse er længe spist op den dag du er nødt til at
sende CSS-filen afsted igen (mindst én gang) fordi der pludselig
var en sær fejl efter at du havde rettet i det - for ikke at tale
om den spildtid det koster.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

David Trasbo skrev:

>> Hvis man har et langt stylesheet og til sidst fjerner alle de unødvendige
>> semikolonner (;) fylder det faktisk lidt mindre. Har selv prøvet det da
>> jeg
>> optimerede mit stylesheet via Websiteoptimization.com.

Bertel Lund Hansen skrev som svar:

> Den sølle besparelse er længe spist op den dag du er nødt til at
> sende CSS-filen afsted igen (mindst én gang) fordi der pludselig
> var en sær fejl efter at du havde rettet i det - for ikke at tale
> om den spildtid det koster.

Da jeg, som sagt, arbejdede med Websiteoptimization.com, som jeg iøvrigt kan
anbefale, fjernede jeg til sidst alle de overflødige ;'er, og da
stylesheetet er temmelig omfattende fyldte det så meget mindre bagefter, at
jeg ikke fik nogen "dit-stylesheet-fylder-for-meget"-advarsel.

Måske er det bare en af de ting man skal afgøre med sig selv? Jeg mener:
Hvis man nu ikke lige er den skarpeste kniv i skuffen og redigerer sit
stylesheet tit, og stylesheetet iøvrigt fylder ubetydeligt lidt, så er det
man sikkert kan undvære at springe de unødvendige ;'er over.

Hvis man derimod er et samuraisværd i skuffen (...) laver stylesheetet en
gang for alle, og stylesheetet iøvrigt fylder *rigtig* meget, så er det man
nok godt kan undvære disse.

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

David Trasbo skrev:

> Måske er det bare en af de ting man skal afgøre med sig selv?
> Jeg mener: Hvis man nu ikke lige er den skarpeste kniv i
> skuffen

Mange tak.

> Hvis man derimod er et samuraisværd i skuffen (...) laver
> stylesheetet en gang for alle, og stylesheetet iøvrigt fylder
> *rigtig* meget, så er det man nok godt kan undvære disse.

Den der tror at man nogen sinde har redigeret en fil for sidste
gang, er ikke et samuraisværd i skuffen. Hvad han så er, vil jeg
overlade til læseren.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen:

>> Måske er det bare en af de ting man skal afgøre med sig selv?
>> Jeg mener: Hvis man nu ikke lige er den skarpeste kniv i
>> skuffen
>
> Mange tak.

Hvad mener du med: "Mange tak"? Det var ærlig talt ikke ment som nogen
personlig fornærmelse.

>> Hvis man derimod er et samuraisværd i skuffen (...) laver
>> stylesheetet en gang for alle, og stylesheetet iøvrigt fylder
>> *rigtig* meget, så er det man nok godt kan undvære disse.
>
> Den der tror at man nogen sinde har redigeret en fil for sidste
> gang, er ikke et samuraisværd i skuffen. Hvad han så er, vil jeg
> overlade til læseren.

Jeg mener bare at hvis man kommer til et tidspunkt hvor man synes at
stylesheetet er færdigt kan man fjerne dem. Men jeg vil altså kalde det her
en nyttesløs diskoussion. Men det eller ej.

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

David Trasbo skrev:

> Jeg mener bare at hvis man kommer til et tidspunkt hvor man synes at
> stylesheetet er færdigt kan man fjerne dem.

Jeg har flere gange hevet gamle filer frem som jeg ikke havde
regnet med at jeg skulle ændre i mere. Hvis ikke de er
strukturerede ordentligt, kan det være et mas at hitte rede i.

Og måske kommer der en dag hvor andre overtager ens arbejde, og
så det dobbelt slemt.

Under alle omstændigheder er det en god vane at gøre sine filer
så nemme at håndtere som muligt, også selv om man måske ikke skal
bruge dem igen. Når det sidder på rygmarven, sparer man en masse
overvejelser og evt. ærgrelse over at man 'vidste' forkert.

Nu nedbryder fjernelsen af de sidste semikoloner selvfølgelig
ikke strukturen i en fil, men det er en detalje som man lige så
godt kan vænne sig til altid at gøre på én måde, og 'besparelsen'
ved at fjerne dem er latterlig, både tidsmæssigt og
størrelsesmæssigt.

Fjerner du også kommentarlinjer når du 'optimerer'?

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen skrev:

> Og måske kommer der en dag hvor andre overtager ens arbejde, og
> så det dobbelt slemt.

Jeg har aldrig prøvet at lade nogle overtage mit arbejde, men på det punkt
kan jeg godt se hvad du mener.

> Fjerner du også kommentarlinjer

Jo, men det er kun hvis jeg laver en selvstændig fil, som læser stylesheetet
og indsætter kommentarer og lign.

-----
Eks.:

Stylesheetet kan se sådan her ud:

body{border:dashed} /* ID: 1 */

Og den selvstændige fil laver det så om til:


body{
border: dashed;
}
Kommentar: "border: dashed" vises ikke ens i alle browsere.

Eks. slut.
-----

> når du 'optimerer'?

--
David Trasbo.
Vær en god Usenet-bruger. http://usenet.dk/netikette.

---

Bertel Lund Hansen wrote:
> div#titel betyder at man kun sætter egenskaberne for titel hvis
> den ligger inden i en div (og titel skal være unik). Med en
> class-løsning i stedet for en id-løsning ser det sådan ud:

Det betyder nærmere, at man sætter egenskaberne for en div, som har
id'en "titel". Men det var måske også det du mente

> div .titel

Den sætter jo egenskaber, for et vilkårligt element med klassen "titel",
som ligger indeni en div. Der skulle nok have stået:
div.titel
istedet

>>3)
>>Hvad betyder det når der står flere html-tags i en css defination som fx
>>"div#titel ul ul li {" ?
>
>
> At man giver flere elementer samme opsætning i ét hug i stedet
> for at skrive det samme mange gange.

Så skal der stå komma imellem, hvis det skulle gælde:
div#titel, ul, li {

--
http://www.skovenborg.frac.dk

---

David Trasbo skrev:

> Hvis man derimod er et samuraisværd i skuffen (...) laver
> stylesheetet en gang for alle, og stylesheetet iøvrigt fylder
> *rigtig* meget, så er det man nok godt kan undvære disse.

Jeg tror ikke den slags optimeringer giver ret meget i praksis.
Hvis man har et monsterstort css-ark, er der formentlig langt bedre
grund til at tjekke det igennem for overflødige og redundante
oplysninger.

Jeg lavede lige et eksperiment med nogle css-ark (tilknyttet samme
side) fra et større site (det er ikke mine egne, men nogle hvor jeg
vidste at der ville være noget at forbedre):

Originalen var som samlet fil på knap 9 kb (9117 bytes)
Efter en tur gennem TopStyles Stylesweeper - med anmodning om at
benytte shorthands (FONT/MARGIN/PADDING mv), kombinere dublerede
regler o.l. kom filen ned på 6.25 kb (6406 bytes)

Herefter gik jeg filen igennem i hånden - bare en hurtig tur for at
fjerne oplagte redundante oplysninger (det er ikke alle der kan
fjernes maskinelt). Det fik filen ned på 5.6 kb / 5708 bytes.

Så bad jeg Topstyle gå endnu hårdere til værks, og fjerne
overflødige mellemrum. Det gav en ny størrelse på 5.06 kb / 5184
bytes - og sluttelig bad jeg så Topstyle om at fjerne overflødige
semikoloner. Det fik filen ned på 4.99 kb / 5113 bytes.

Ud af en samlet besparelse på 3.9 kb eller 44 % udgør semikolonerne
blot 71 bytes - altså 1.7 % af besparelsen.

En mulig besparelse der ikke er undersøgt i eksemplet her, er at
knytte css-koden mere sammen med strukturen af html-siden -
forstået på den måde at man sørger for at opbygge html-koden på en
måde så man kan bruge kontekstuelle selektorer (#menu a) i stedet
for at bruge ekstra klasser (a.menu). Det kan ikke alene spare css-
kode, men også en del html-kode (fordi man ikke behøver at tildele
klasser til nær så mange elementer).
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen wrote:


> Jeg lavede lige et eksperiment med nogle css-ark (tilknyttet samme
> side) fra et større site (det er ikke mine egne, men nogle hvor jeg
> vidste at der ville være noget at forbedre):

<snip snip>

Man må sørme sige, du tager opgaven alvorligt.
Godt nok.
For dem, der ikke lige har Stylesweeper ved hånden,
har jeg i artiklen
http://www.webdesign101.dk/www/artikler/bandwidthreduction.html
et par links til online tjenester, jeg har prøvet.
--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk

---

Magnus skrev dette den 06-12-2005 14:22:
> Jeg er begyndt at sætte mig mere ind i mulighederne med css og er stødt på
> et par spørgsmål.
>
> 1)
> Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang mens
> class kan fremkomme flere gange i på samme side?
>
> 2)
> Jeg kan godt lave diverse egenskaber så fx <div> men hvad betyder det når
> der står et # i css filen fx. "div#titel {" eller når der er en "*" foran?
>
Hvis der i css-filen står div#titel, gælder definitionen kun for den
div, der har id'et "titel".
Hvis der stod f.eks div.titel, ville den gælde for den div, som har
class'en "titel".
* er et wildcard, der betyder "alt". F.eks vil * ul gælde for alle ul,
som ligger under noget andet.
> 3)
> Hvad betyder det når der står flere html-tags i en css defination som fx
> "div#titel ul ul li {" ?
>
Det betder at definitionen kun gælder for de <li>, der er indenfor en
<ul>, som er indenfor en <ul>, som igen ligger i en <div id="titel">.
Du kan evt. prøve at lave en side og så supplere med
en "div#titel ul li" definition der er en lille smule anderledes, så
skulle du gerne kunne se forskel.

--
Michael Haase

---

Nej, derudover har ID en større specificitet end class.
Dvs. at hvis du definerer forskellige indstillinger for f.eks.
font-family i en class og en ID og sætter begge på samme element vil
indstillingerne i ID altid vinde.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

On Tue, 6 Dec 2005 14:22:31 +0100, "Magnus" <magnusFJERN@arnason.dk>
wrote:

>1)
>Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang mens
>class kan fremkomme flere gange i på samme side?

---

"Magnus" <magnusFJERN@arnason.dk> writes:

> 1)
> Forskellen på "class" og "id" er det kun at id kun kan benyttes en gang mens
> class kan fremkomme flere gange i på samme side?

Ikke kun, men ellers er det rigtigt.

I CSS vælger man på "id" med "#" foran og på "class" med "." foran.

> 2)
> Jeg kan godt lave diverse egenskaber så fx <div> men hvad betyder det når
> der står et # i css filen fx. "div#titel {" eller når der er en "*" foran?

#navn udvælger objektet med id="navn". Hvis det bruges sammen med andre
udvælgelser, fx tagnavnet "div", så betyder "div#titel":
en div med id = 'titel'
Da id'er skal være unikke, så "div"'et i "div#titel" kun vigtigt hvis
man vil bruge samme stylesheet til forskellige side, og elementet med
id="titel" ikke er en div på alle siderne.


"*" udvælger alle elementer, lige som "div" udvælger elementer med
tagnavn "div". Dvs:

* { font-size: 100% }

sætter font-size på *alle* elementer.

> 3)
> Hvad betyder det når der står flere html-tags i en css defination som fx
> "div#titel ul ul li {" ?

Det læse bagfra som:
et "li" element
inde i et "ul" element
inde i et "ul" element"
inde i et "div" element med id="titel"

> 4)
> Inden du afslutter en defination med } skal der så lige inden være et ";"
> tegn eller er det kun imellem definationerne der skal være det?
>
>
> /Magnus
>
>

--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'