Avatar billede stig69 Nybegynder
05. maj 2008 - 13:10 Der er 6 kommentarer

nedarving og optimering af CSS

Egentlig et spørgsmål jeg skulle have stillet for lang tid siden.

Spørgsmålet går på, hvorledes nedarving skal foregå og om jeg kan opsætte mit stylesheet mere optimalt. Er det korrekt det jeg laver?

Således begynder jeg de fleste af mine stylesheets:

body { }

html,body {
  height:100%;
  background-color:#ffffff;

}
html,body,table, h1, h2, h3, h4, h5, h6, p, input {
  font: normal normal normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color:#4b4b4b;
  margin:0;
  padding:0;
}
h1 { font-size: 20px; line-height:24px margin:0 0 8px 0;  }
h2 { font-size:12px; line-height:16px; margin:0 0 15px 0; }
h3 { font-size:12px; font-weight:bold; margin:0 0 5px 0; }
h4 { }
h5 { font: normal normal normal 17px/21px Georgia, Palantino, serif; margin:0; }
h6 { font-size:10px; color:#000000; margin:0; }

p { margin:0 0 20px 0; }
Avatar billede roenving Novice
05. maj 2008 - 13:18 #1
Ja, øhm, øh ...

-- det ligner en rimelig generisk opsætning, så det kan man nok ikke klage nok over ...

-- men skrifttypen hedder vel palatino (og jeg skriver med vilje også med småt begyndelsesbogstav !-)

-- hvorfor har du den tomme body-selektor først ?-)
Avatar billede stig69 Nybegynder
05. maj 2008 - 13:26 #2
@ roenving. Lige dig jeg skulle bruge :-)

Mine tanker går på om h1, h2, h3 osv. automatisk nedarver fra body, som nedarver fra html. Eller arver de fra body?

Kunne man skrive så ledes i stedet (jeg kunne vel bare teste..):

body { }

html,body {
  height:100%;
  background-color:#ffffff;

}
html,body,table{
  font: normal normal normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color:#4b4b4b;
  margin:0;
  padding:0;
}
h1 { font-size: 20px; line-height:24px margin:0 0 8px 0;  }
h2 { font-size:12px; line-height:16px; margin:0 0 15px 0; }
h3 { font-size:12px; font-weight:bold; margin:0 0 5px 0; }
h4 { }
h5 { font: normal normal normal 17px/21px Georgia, Palantino, serif; margin:0; }
h6 { font-size:10px; color:#000000; margin:0; }

p { margin:0 0 20px 0; }

Og tak for fund af stavefej!
Avatar billede w13 Novice
05. maj 2008 - 13:40 #3
Ja, du skulle vist godt kunne rette:

html,body,table, h1, h2, h3, h4, h5, h6, p, input {
  font: normal normal normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color:#4b4b4b;
  margin:0;
  padding:0;
}

til:

html,body,table,input{
  font: normal normal normal 11px/14px Verdana, Geneva, Arial, Helvetica, sans-serif;
  color:#4b4b4b;
  margin:0;
  padding:0;
}

Da det (vistnok?) kun er table og input som har problemer. (Ikke engang sikker på at table har længere?)
Avatar billede roenving Novice
05. maj 2008 - 13:43 #4
-- lige h-tags er jeg usikker på, specielt fordi browserne bruger forskellige teknikker (ie. margin og padding !-) til at lave de typiske afstande, som den slags elementer har til andre elementer ...

-- og ja, du må nok teste, men prøv at kigge på w3cs dtd'er og standard stylesheets, f.eks. html4 (transitional): http://www.w3.org/TR/html4/loose.dtd og http://www.w3.org/TR/CSS21/sample.html, jeg fandt ikke ved en hurtig gennemgang af dem tegn på, at h-tags ikke skulle arve, men der er mange detaljer, der ikke er gjort rede for ...

-- og heller ikke tabellers manglende nedarvning af tekstformattering udover font-family er beskrevet præcist (og er i øvrigt ikke fuldstændig konsistent på tværs af browserne !-)
Avatar billede w13 Novice
05. maj 2008 - 14:00 #5
Når jeg laver hjemmesider i sidste nye version af IE, FF, Safari, Opera, Netscape og mange andre, behøver jeg ikke sætte font-family for mine H-tags. De nedarver altså body's font-family.
I hvert fald i de nyeste browsere.
Avatar billede stig69 Nybegynder
05. maj 2008 - 14:06 #6
plejer at have problemer med margin og padding, af den grund nulstiller jeg det hele og sætter så margin på hvert enkelt tag. Så plejer det også at se ens ud i diverse browsere

Tak for svar til jer begge.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester