Onkel Hannes: html und body Deklarationen in der CSS-Datei

Hallo, liebe Leute,

ich sehe in vielen ausgelagerten CSS-Dateien bei den allgemeinen Deklarationen immer Folgendes:

  
html  
{  
...  
}  
  
body  
{  
...  
}  
  
html body  
{  
...  
}  

Jedoch unterscheiden sich die Stylesheets durch die Platzierung verschiedenster Werte innerhalb dieser 3 Angaben. Die font-family und line-height steht bei manchen unter html, bei anderen unter body. Die Höhe der Seite steht bei manchen unter body, bei anderen unter html body u.s.w.

Meine Frage: Bei obiger Anordnung ... WO kommt WAS korrekterweise hin? Welche ANgaben sollen bei html stehen, welche bei body und welche bei html body?

Danke und viele liebe Grüße

Euer Onkel Hannes

  1. Meine Frage: Bei obiger Anordnung ... WO kommt WAS korrekterweise hin? Welche ANgaben sollen bei html stehen, welche bei body und welche bei html body?

    sowohl html alsauch body sind html elemente - beide können im standardkonformen modus margin, padding oder eine hintergrundfarbe haben - meistens werden für html und body die selben eigenschaften defintiert

    die voreinstellung zb für die schriftgröße ist in den meisten browser für html und body identisch (100%) - wenn du also 16px im browser eingestellt hast und body 200% bekommt, hast du 32px schriftgröße - wenn du im html 200% einstellst und im body nichts, hast du auch 32px schriftgröße - prinzipiell ist es egal in welches der beiden elemente du die angaben für schrift machst, da das head-element sowieso "tabu" ist und nicht dargestellt wird sind zwangsläufig html und body ineinander verschachtelt und teilen sich quasi die eigentschaften bzw vererben diese

    eine unterschiedliche höhe oder breite für html und body kann aber durchaus sinn haben

    1. meistens werden für html und body die selben eigenschaften defintiert

      Bei beiden reinschreiben? Das heißt, SO wäre es gut? =>

        
      html  
      {  
      font-family:Verdana, sans-serif;  
      font-size:100.01%;  
      line-height:1.5em;  
      background:rgb(254,254,254);  
      color:rgb(001,001,001);  
      }  
      body  
      {  
      font-family:Verdana, sans-serif;  
      font-size:100.01%;  
      line-height:1.5em;  
      background:rgb(254,254,254);  
      color:rgb(001,001,001);  
      }  
      
      

      Und wozu ist dann das "html body" da? Was kommt DORT rein?

      eine unterschiedliche höhe oder breite für html und body kann aber durchaus sinn haben

      Das hab ich mir eh gedacht, aber welchen zB?

      1. Hi,
        bleib doch bitte bei _einem_ Pseudonym.

        Bei beiden reinschreiben? Das heißt, SO wäre es gut? =>

        nein - entscheide Dich für ein Element und formatiere das andere nur bei Bedarf, z.B. um einen weiteren Hintergrund anzugeben.

        Und wozu ist dann das "html body" da?

        damit selektierst Du nur body, allerdings mit einer höheren Spezifität.

        freundliche Grüße
        Ingo

      2. meistens werden für html und body die selben eigenschaften defintiert

        Bei beiden reinschreiben? Das heißt, SO wäre es gut? =>

        wie schon ingo sagt: entscheide Dich für ein Element (steht in meinem post übrigesn auch so drinnen - in der mitte des zweiten absatzes)

      3. Hallo.

        eine unterschiedliche höhe oder breite für html und body kann aber durchaus sinn haben
        Das hab ich mir eh gedacht, aber welchen zB?

        Zum Beispiel gestalterische. <html> und <body> sind ja ineinander verschachtelte Container, die man recht frei gestalten kann. Vielfach spart man sich damit weitere Container, häufig in Form von <div>-Elementen.
        Dass viele "Designer" der Meinung sind, <html> und <body> sollten möglichst neutralisiert und das Layout dann mittels <div>-Elementen umgesetzt werden, ist bedauerlich bis ärgerlich.
        MfG, at

    2. Hallo,

      da das head-element sowieso "tabu" ist und nicht dargestellt wird

      Du weißt aber schon, dass man das head-Element ebenfalls anzeigen lassen kann? Ich hab den Link nicht mehr, aber irgendwer hat hier im Forum mal ein Beispiel dafür gebracht. Dies nur so am Rande, da das sowieso sinnlos ist.

      Gruss,
      OhneName

      1. @@OhneName:

        Du weißt aber schon, dass man das head-Element ebenfalls anzeigen lassen kann? […] da das sowieso sinnlos ist.

        Warum sollte?

        Es kann durchaus sinnvolle Anwendungen dafür geben:

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"  
        
        >  
        
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"  
        
        >  
        
         <head profile="http://dublincore.org/documents/dcq-html/">  
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
          <title>TEST</title>  
          <link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />  
          <meta name="DCTERMS.modified" content="2008-07-11" />  
          <style type="text/css">  
        [code lang=css]head  
        {  
         display: block;  
        }  
          
        head *  
        {  
         display: none;  
        }  
          
        head meta[name="DCTERMS.modified"]  
        {  
         display: block;  
         padding: 10px;  
         border-bottom: 1px solid silver;  
        }  
          
        head meta[name="DCTERMS.modified"]:after  
        {  
         content: "letzte Änderung: " attr(content);  
        }
        

        </style>
         </head>
         <body xml:lang="und" lang="und">
          <h1>Lorem ipsum</h1>
          <p>Lorem ipsum dolor sit amet</p>
         </body>
        </html>[/code]

        Live long and prosper,
        Gunnar

        --
        Erwebsregel 208: Manchmal ist das einzige, was gefährlicher als eine Frage ist, eine Antwort.