Frank Mause: Frage zum Wiki-Artikel „CSS“

problematische Seite

Guten Tag,

ich bin gerade dabei , mich in HTML und CSS reinzufuchsen. Habe mein styles in eine css-datei ausgelagert.

Für h2 wird alles korrekt dargestellt.

Wenn ich allerdings einen anderen Hintergrund für h1 haben will funktioniert das für h1 nicht. Habe copy-paste gemacht und bei h1 nur andere Farbwerte eingetragen.

Wo ist der Fehler ?

Hier meine css-Datei:

<!doctype html>
<html lang="de">
  <head>

     <style>

    h1 {
        background-color: red;
       color: white;
       font: 150% cursive;
       border: thin solid black;
    }

    p {
      text-align: center;      
      background-color: red;
      color: lightblue;    	
    }

    h2 {
       background-color: yellow;
       color:red;
       font: 150% cursive;

    border-radius: .5em;
    border-color: black;
    font: 300% cursive;
    margin: 0;
    border: thin solid black;
        }

/* h1, h2{
//	background-color: orange;
	border-color: black;
	border-radius: 2.5em;
 	font: 150% cursive;
	border: thick solid black;
}

    p {
    	text-align: center; 
    	color: blue;
    /*	background-color:lightblue;
    	border-color: black;
    	border-radius: 2.0em ;
  	  	border: thick solid black;*/
    }*/ 

    </style>
  </head>

</html>

akzeptierte Antworten

  1. problematische Seite

    Hallo Frank,

    Habe mein styles in eine css-datei ausgelagert.

    wirklich? Denn der Code, den du hier zeigst, ist ein HTML-Dokument mit eingebettetem CSS.

    Für h2 wird alles korrekt dargestellt.

    Wenn ich allerdings einen anderen Hintergrund für h1 haben will funktioniert das für h1 nicht. Habe copy-paste gemacht und bei h1 nur andere Farbwerte eingetragen.

    Ich habe lange überlegt und konnte mir das nicht erklären. Aber wenn du den nachfolgenden Code wirklich als Stylesheet einbindest, wird mir klar, was da los ist.

    Hier meine css-Datei:

    <!doctype html>
    <html lang="de">
      <head>
    
         <style>
    
        h1 {
            background-color: red;
           color: white;
           font: 150% cursive;
           border: thin solid black;
        }
    

    Der erste Selektor lautet hier: <html lang="de"> <head> <style> h1
    Das ist ungültiges CSS und wird ignoriert, ebenso wie der nachfolgende Regelblock in geschweiften Klammern.

    Eine externe CSS-Datei darf kein HTML enthalten, sondern nur das, was bei dir als Inhalt des style-Elements steht!

    Einen schönen Tag noch
     Martin

    --
    "Malen nach Zahlen" sagten wir im Matheunterricht, wenn es bei der Kurvendiskussion hieß: Zeichnen Sie den Graphen der Funktion ...
  2. problematische Seite

    Hallo Frank,

    ich denke, Martin hat die richtige Erklärung. Ich möchte etwas anderes anmerken:

    /* h1, h2{
    //	background-color: orange;
    	border-color: black;
    	border-radius: 2.5em;
     	font: 150% cursive;
    	border: thick solid black;
    }
    */
    

    Es ist ein beliebter Fehler, den ich auch schon mehrfach gemacht habe.

    /* ... */ ist ein gültiger CSS Kommentar.
    // ... ist keiner. Das ist nur in JavaScript als Kommentar erlaubt.

    Versuche aber nun nicht, zuerst background-color:orange; per /* */ auszukommentieren und DANACH noch die ganze Regel ebenfalls. Kommentare kann man nicht schachteln, der Kommentar würde nach dem ersten */ enden und der Rest stünde als Müll im Stylesheet.

    Einzelne Eigenschaften "kommentiere" ich zumeist so aus, indem ich ein "xxx" vor den Namen der Eigenschaft setze. Damit ist es eine unbekannte Eigenschaft, die dann vom Brauser ignoriert wird. Man sollte sich dann aber auch relativ zügig überlegen, welche dieser "auskommentierten" Eigenschaften überhaupt stehenbleiben sollten.

    Rolf

    --
    sumpsi - posui - obstruxi
    1. problematische Seite

      hallo Rolf,

      so , der "Komentarmüll" is gelöscht. Jetzt steht da nur noch

      h1 {

          background-color: red;
         color: white;
         font: 150% cursive;
         border: thin solid black;
      }
      

      Davon ausgehend, dass dies valider css-code ist, wundere ich mich , dass h1 nicht rot und weiss erscheint.

      In index.html steht:

      <h1> Willkommen bei der Schreinerei Meier im Internet! </h1>

      Qo ist der Fehler ?

      Frank

      1. problematische Seite

        Hallo,

        Qo ist der Fehler ?

        liest du eigentlich, was man dir schreibt?

        Wenn deine CSS-Datei immer noch, wie im Startposting vorgestellt, ein komplettes HTML-Gerüst enthält, ist das falsch und führt dazu, dass der erste Selektor und der dazugehörige Regelsatz ignoriert wird. Da hat nur reiner CSS-Code etwas zu suchen.

        Übrigens: Du plenkst.

        Einen schönen Tag noch
         Martin

        --
        "Malen nach Zahlen" sagten wir im Matheunterricht, wenn es bei der Kurvendiskussion hieß: Zeichnen Sie den Graphen der Funktion ...
      2. problematische Seite

        Hallo Frank,

        herzlich willkommen bei SELFHTML!

        so , der "Komentarmüll" is gelöscht. Jetzt steht da nur noch

        h1 { 
                 background-color: red;
                color: white;
                font: 150% cursive;
                border: thin solid black;
         }
        

        Davon ausgehend, dass dies valider css-code ist, wundere ich mich , dass h1 nicht rot und weiss erscheint.

        In index.html steht:

        <h1> Willkommen bei der Schreinerei Meier im Internet! </h1>

        Qo ist der Fehler ?

        Keine Ahnung, aber Du kannst Deine HTML-Seite selbst mit dem Seiteninspektor [F12] untersuchen.

        Wird alles außer der H1 formatiert?

        Im Stylesheet sollte kein HTML sein, siehe Martins Post!

        Herzliche Grüße

        Matthias Scharwies

        --
        Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
        1. problematische Seite

          Hallo Frank,

          herzlich willkommen bei SELFHTML!

          so , der "Komentarmüll" is gelöscht. Jetzt steht da nur noch

          h1 { 
                   background-color: red;
                  color: white;
                  font: 150% cursive;
                  border: thin solid black;
           }
          

          Davon ausgehend, dass dies valider css-code ist, wundere ich mich , dass h1 nicht rot und weiss erscheint.

          In index.html steht:

          <h1> Willkommen bei der Schreinerei Meier im Internet! </h1>

          Qo ist der Fehler ?

          Keine Ahnung, aber Du kannst Deine HTML-Seite selbst mit dem Seiteninspektor [F12] untersuchen.

          Wird alles außer der H1 formatiert?

          Im Stylesheet sollte kein HTML sein, siehe Martins Post!

          Herzliche Grüße

          Matthias Scharwies

          Nur h1 wird nicht formatiert.

          1. problematische Seite

            Hallo Frank,

            herzlich willkommen bei SELFHTML!

            so , der "Komentarmüll" is gelöscht. Jetzt steht da nur noch

            h1 { 
                     background-color: red;
                    color: white;
                    font: 150% cursive;
                    border: thin solid black;
             }
            

            Davon ausgehend, dass dies valider css-code ist, wundere ich mich , dass h1 nicht rot und weiss erscheint.

            In index.html steht:

            <h1> Willkommen bei der Schreinerei Meier im Internet! </h1>

            Qo ist der Fehler ?

            Keine Ahnung, aber Du kannst Deine HTML-Seite selbst mit dem Seiteninspektor [F12] untersuchen.

            Wird alles außer der H1 formatiert?

            Im Stylesheet sollte kein HTML sein, siehe Martins Post!

            Herzliche Grüße

            Matthias Scharwies

            Nur h1 wird nicht formatiert.

            Das ist schade. Vielleicht solltest Du ein für alle online nachvollziehbares Beispiel präsentieren, mit dem wir hier reproduzieren können, was genau nicht funktioniert. Sollte es keinen öffentlichen Link geben, weil es z.B. ein sehr geheimes, oder nur in einem Intranet verfügbares Projekt sein sollte: dann kannst Du das Problem z.B. via https://codepen.io/pen/ nachvollziehbar machen. Die Chance, dass Du damit der Lösung Deines Themas näher kommst, steigt damit immens.

            Protipp: durch die für so einen „Codepen“ nötige Reduktion der Fragestellung kommt man oft, wenn auch nicht immer, durchaus auch schon selbst auf die Lösung des Problems.

            Geheimtipp: so wird es laufen und hier auch keine Antwort mehr zur Frage folgen.

          2. problematische Seite

            Hallo Frank,

            Wird alles außer der H1 formatiert?

            Im Stylesheet sollte kein HTML sein, siehe Martins Post!

            Nur h1 wird nicht formatiert.

            Verdoppele mal den Regelsatz!

            Wenn's dann funzt, überleg' warum der 1. es nicht tut. (Tipp: Was steht vorher?)

            Herzliche Grüße

            Matthias Scharwies

            --
            Eigentlich hatte ich heute viel vor - jetzt habe ich morgen viel vor!
            1. problematische Seite

              Hallo Frank,

              Verdoppele mal den Regelsatz!

              Wenn's dann funzt, überleg' warum der 1. es nicht tut. (Tipp: Was steht vorher?)

              Herzliche Grüße

              Matthias Scharwies

              Hallo Matthias,

              mit der Verdoppelung des Regelsatzes klappt es.

              Oberhalb des "Original-h1-Satzes" steht nur

              <!doctype html> <html lang="de"> <head>

              Herzliche Grüße

              Frank Mause

              1. problematische Seite

                Hallo Frank,

                und wie Dir schon mehrfach gesagt wurde: Das gehört da nicht hin. Ein Stylesheet (= eine CSS Datei) ist kein HTML Dokument.

                Ein Stylesheet besteht nur aus Regelsätzen und Kommentaren. Kein Schnickschnack drumherum.

                Rolf

                --
                sumpsi - posui - obstruxi