You: <p> mit anderer Schriftart / Zeilenabstand

Hallo,

im untenstehenden Beispiel verstehe ich den Kontext nicht.

Ich definiere one und two in der style section im Head Bereich? Ist das richtig?

Kann ich da, wo p id= steht, auch font-family etc. schreiben?

Danke!

#one {
  font-family:Arial,sans-serif; 
  font-size: 2em; 
  color:blue;
}

#two {
  background-color: blue;
  border-radius: 5px;
  color: yellow;
}
    <p id="one">Ein formatierter Absatz.</p>
    <p id="two">Ein anderer formatierter Absatz.</p>
  1. Hallo,

    kennst du schon https://wiki.selfhtml.org/wiki/CSS/Tutorials

    Gruß
    Jürgen

  2. @@You

    Ich definiere one und two in der style section im Head Bereich? Ist das richtig?

    Nein. Du deklarierst Stile, die auf one und two angewendet werden sollen.

    Kann ich da, wo p id= steht, auch font-family etc. schreiben?

    In einem style-Attribut, ja. Das solltest du aber nicht tun.

    LLAP 🖖

    --
    Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
    1. Hallo Gunnar,

      In einem style-Attribut, ja. Das solltest du aber nicht tun.

      Für einen Neuling ist die Bemerkung „Das solltest du aber nicht tun“ ohne Begründung wenig hilfreich. Bricht dann ein Brand aus?

      To You

      CSS-Browser-Standard: Alle HTML-Tags, in deinem Fall <p> haben CSS default-Eigenschaften. Also etwa margin-top und margin-bottom, die mir jetzt nicht näher bekannt sind.

      CSS-Projekt - wichtiger: Ich möchte aber, dass für ein Projekt (mehrere HTML-Dokumente) der obere Rand (margin-top) 0 und der untere .5em sei. Außerdem möchte ich links und rechts keinen Rand.

      Also schreibe ich in die Datei basis.css:

      p { margin: 0 0 .5em 0; } /* oben rechts unten links (Uhrzeiger) */
      

      Kenner wissen, dass <p> links und rechts ohnehin keinen Rand haben, Anfänger sind dann aber überrascht, dass <ul> und <li> einrücken, also nehme ich Redundanzen in Kauf.

      Die basis.css ändert den Standard des Browsers und wird so in jedes Dokument eingebunden:

      <!DOCTYPE html>
      <html lang="de">
      <head>
      ...
        <link rel=stylesheet href="css/basis.css">
      
        <style>
          p {
            margin-bottom: 1em;
          }
        </style>
      ...
      </head>
      

      CSS-Einzelseite - wichtigerer: Nach der basis.css kann dann per <style> festgelegt werden, dass die <p> Tags dieser Seite aber einen größeren unteren Rand haben.

      CSS-Tag - am Wichtigsten: Wenn innerhalb der Seite ein <p> davon abweichen soll, ist das so zu schreiben:

      <p style="margin-bottom:2em">...</p>
      

      CSS-Diktator - am Wichtigstensten: Es könnte sein, dass man nachträglich alle unteren Ränder im ganzen Projekt einheitlich setzen möchte, ohne die einzelnen Dokumente zu ändern. Dann müsste der Eintrag in der basis.css so aussehen:

      * { margin-bottom: 3em ! important; }
      

      Linuchs

      1. Hallo,

        In einem style-Attribut, ja. Das solltest du aber nicht tun.

        Für einen Neuling ist die Bemerkung „Das solltest du aber nicht tun“ ohne Begründung wenig hilfreich. Bricht dann ein Brand aus?

        die Antwort findet man hinter dem dritten Link auf der von mir verlinkten Seite:

        Beachten Sie: Durch das direkte Festlegen von Formaten, umgangsprachlich auch „Inline-Style“ genannt, gehen viele Vorteile verloren. Der Wartungsaufwand steigt während sich die Flexibilität verringert. Inline-Styles sind an ein Element gebunden und können nicht an zentraler Stelle bearbeitet werden.

        Gruß
        Jürgen

      2. Hallo,

        Alle HTML-Tags, in deinem Fall <p> haben CSS default-Eigenschaften.

        Bitte lass dir von Matthias den Unterschied zwischen „tag“ und „Element“ erklären!

        Gruß
        Kalk

      3. @@Linuchs

        In einem style-Attribut, ja. Das solltest du aber nicht tun.

        Für einen Neuling ist die Bemerkung „Das solltest du aber nicht tun“ ohne Begründung wenig hilfreich.

        Wenn ich gerade auf dem Sprung bin (in die Scheinbar in diesem Fall) und keine Zeit habe für ausschweifen Erläuterungen, darf die gern jemand anderes ergänzen.

        CSS-Browser-Standard: Alle HTML-Tags, in deinem Fall <p> haben CSS default-Eigenschaften.

        In dem Satz stimmen einige Begriffe nicht; die „Tags“ wurden ja schon angesprochen.

        Außerdem: Alle Elemente haben alle CSS-Eigenschaften. Alle CSS-Eigenschaften haben Default-Werte, welchen gelten, wenn nirgends (weder Browser-Stylesheet noch Autoren-Stylesheet noch Nutzer-Stylesheet) etwas angegeben ist. Für margin-top und margin-bottom bspw. ist das der Wert 0.

        Für margin-top und margin-bottom für p-Elemente ist im Browserstylesheet allerdings ein Wert angegeben: üblicherweise 1em. Prinzipiell kann jeder Browser in seinem Browser-Stylesheet andere Vorgaben machen; da von „Browser-Standard“ zu sprechen ist gewagt. Allerdings haben sich die Browser-Stylesheets in den letzten Jahren sehr aneinander angeglichen.

        CSS-Diktator - am Wichtigstensten: Es könnte sein, dass man nachträglich alle unteren Ränder im ganzen Projekt einheitlich setzen möchte, ohne die einzelnen Dokumente zu ändern. Dann müsste der Eintrag in der basis.css so aussehen:

        * { margin-bottom: 3em ! important; }
        

        Vom Syntaxfehler mal abgesehen: Nein, das sollte man nicht tun! Wie Harry Roberts zu sagen pflegt: “Never use !important in anger!”

        Wenn man alle unteren Ränder im ganzen Projekt einheitlich setzen möchte, dann sollte man das ohne !important tun und unerwünschte anderslautende Deklarationen aus dem Stylesheet entfernen.

        Mit lobotomized owl selector * + * anstatt * könnte das sogar sinnvoll sein.

        LLAP 🖖

        --
        Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
      4. Hallo Linuchs,

        kein HTML-Tag hat die von dir beschriebenen Eigenschaften. Und CSS-Tags gibt es auch nicht. Vor allem ist deine angegebene Reihenfolge der Wichtigkeit unsinnig. Vielleicht meinst du aber auch die Priorität.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
  3. Ich definiere one und two in der style section im Head Bereich? Ist das richtig?

    Ja, wenn du HTML meinst.

    Kann ich da, wo p id= steht, auch font-family etc. schreiben?

    Ja, mit dem style-Attribut

    <p id="one" style="font-family:Arial,sans-serif;">Ein formatierter Absatz.</p>
    

    Linuchs

    1. Besten Dank für die Super Hilfen.

      Ich wollte die page sowieso aus einem anderen Programm generieren lassen; daher ist der Aspekt einer zentralen css Datei nicht entscheidend.

      1. Moin,

        Ich wollte die page sowieso aus einem anderen Programm generieren lassen; daher ist der Aspekt einer zentralen css Datei nicht entscheidend.

        wenn dir Performance und Wartbarkeit egal sind …

        Viele Grüße
        Robert

        1. Die Frage ist wie man per Programm verschiedene Arten von Absätzen ermöglicht.

          Das scheint mir per style am einfachsten.

          Sonst müsste ich ja im css die Formatierung mit einem neuen fortlaufenden Namen generieren (umständlich) und diesen Namen per id= im <p> einbinden.

          1. Moin,

            Die Frage ist wie man per Programm verschiedene Arten von Absätzen ermöglicht.

            indem man CSS-Klassen verwendet.

            Das scheint mir per style am einfachsten.

            Ist es aber nicht.

            Sonst müsste ich ja im css die Formatierung mit einem neuen fortlaufenden Namen generieren (umständlich) und diesen Namen per id= im <p> einbinden.

            Nein, siehe oben. Das hättest du auch schon gelesen, wärst du @JürgenB gefolgt.

            Viele Grüße
            Robert

            1. @@Robert B.

              indem man CSS-Klassen verwendet.

              Was es gar nicht gibt, das kann man nicht verwenden.

              LLAP 🖖

              --
              Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an.
          2. Hallo You,

            verschiedene Arten von Absätzen ermöglicht.

            Durch Verwendung entsprechender Selektoren (siehe Wiki)

            Das scheint mir per style am einfachsten.

            Nein.

            Sonst müsste ich ja im css die Formatierung mit einem neuen fortlaufenden Namen generieren (umständlich) und diesen Namen per id= im <p> einbinden.

            Es wird sich ja nicht jeder Absatz von allen anderen unterscheiden. Deshalb sind ids sicher nicht notwendig, eine Klasse tut es z.B. auch. Genaueres lässt sich sagen, wenn man das konkrete HTML kennt.

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.