HTML: Elemente von einer CSS-Formatierung ausschließen

Hallo Leute,

ich habe jetzt folgendes Problem: Ich habe eine Seite mit einer Übreschrift und dann einer Liste (Aufzählungen) und noch einen Div-Container mit Text. Da ich auf der ganzen Seite außer in der Überschrift (h1) eine bestimmte Schrift (Trebuchet MS) und eine bestimmte Schriftgröße und Zeilenabstand (95%/115%), habe ich die Formatierung auf den ganzen Body angewandt. Mein Problem ist aber jetzt dass die Überschrift (logischerweise) auch mit formatiert wird. Das mit der Schriftartrt ist ja ganz einfach - das geht, aber wegen der Schriftgröße habe ich es schon mit "font-size:100%" versucht, aber dadurch wird die Schrift nur richtig klein (wie Größe 12) (der Zeilenabstand geht komischerweise mit "normal" wieder zurückzusetzen).

Die Frage: Wie kann ich die Überschrift aus der body-Formatierung ausschließen (Ich möchte nicht ewig probieren bei wieviel Prozent die Schrift wieder richtig groß ist...)?

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

FaronWeissAlles

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer

30.05.2013, 18:35

Man kann nicht sagen "Formatiere body, aber nicht Untergeordnete h1". h1 musst du dann überschreiben, das gilt dann für alle h1.

Was in dem Zusammenhang sehr interessant ist, und dir ggf. gut helfen kann, sind Kombinationen verschiedener CSS-Elemente, sodass man sagen kann "Formatiere alle h1, die Unterelement von einem bestimmten div sind" oder "Formatiere alle h1, die ein bestimmtes Attribut auf einen bestimmten Wert gesetzt haben". Eine ganze Liste mit möglichen Patterns findest du hier: http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Wenn du auf die Links neben der Tabelle klickst, gibts auch Beispiele. Das ganze funktioniert bereits in CSS2, also wird von jedem Browser unterstützt

Nickname2013

Fragesteller

30.05.2013, 20:08

Ok. Cool! Das mit den Unterelementen wusste ich schon, aber das mit den Attributen ist mal nicht schlecht sich anzugucken...

cba321

30.05.2013, 18:19

Du könntest vielleicht auch einen div-Container erstellen, der die ganze Seite außer die Überschrift beinhaltet, und diesen formatieren...

Nickname2013

Fragesteller

30.05.2013, 18:26

Das hab ich mir auch schon gedacht - aber ich wollte dann trotzdem mal wissen ob es da eine Möglichkeit gibt... ;)

cba321

30.05.2013, 18:30

@Nickname2013

Nee, ausschließen geht nicht...

rawhide

30.05.2013, 18:20

Wenn du den ganzen Body formatiert hast, kannst du ein Element darin nicht einfach ausschließen. Nur überschreiben, wie du es ja auch schon getan hast.

Nickname2013

Fragesteller

30.05.2013, 18:34

Ok. Aber warum wird die Überschrift auf einmal so winzig wenn ich eingebe:

font:100%/100% Times New Roman;

Guck bitte auch mal in den geposteten Code rein ;)

rawhide

30.05.2013, 18:40

@Nickname2013

Weil die Grundlage der 100% die Body-Font ist und nicht die Default-Font.

Nickname2013

Fragesteller

30.05.2013, 20:07

@rawhide

Aah... ok.

sharkATX

30.05.2013, 18:20

Poste doch mal den CSS-Code. Dann wirds leserlicher.

Nickname2013

Fragesteller

30.05.2013, 18:30

...
<style type="text/css">
  body { margin:75px; margin-top:40px; margin-bottom:0px; font:95%/115% Trebuchet MS; }
  h1 { width:80%; height:40px; background:#DCDDE4; border:thin solid; font-family:Times New Roman; line-height:normal; text-shadow:white 2px 2px; }
  ul,ol { margin-left:-17px; }
  #it { font-style:italic; font-weight:lighter; }
  #pl { height:0px; }
  ul#s li#zo { margin-left:0px; }
  ul#s li { list-style-type:none; margin-left:-20px; }
  ul#s li:before { content:"- "; }
  ul#o { list-style-type:none; margin-left:-37px; }
  div#info { width:40%; height:auto; vertical-align:top; margin-top:40px; border:thin solid; }
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<center>
<h1>Checkliste – Quelleninterpretation (Textquelle)</h1>
</center>
<div id="content">
...Mehrere Aufzählungen...
</div>

<div id="info">
...Text/Absatz...
</div>

</body>
</html>

Als Schrift habe ich Times New Roman. Ich schreibe eine Kurzgeschichte und habe mehrere Absätze

...zur Frage

Excel 2010: Schriftgröße durch bedingte Formatierung ändern

Kann ich bei Excel 2010 mit Hilfe einer bedingten Formatierung die Schriftgröße ändern? Also z.B. wenn in einer Zelle die Zahl 15 steht, soll die Schriftgröße sich auf 20 verändern. Ob die Schrift in "fett" oder "kursiv" angezeigt werden soll lässt sich ändern, nur die Einstellungen für Schriftart und Schriftgrad sind grauhinterlegt, also ich kann sie nicht anklicken und auswählen.

...zur Frage

JSON in editierbaren HTML Table?

Hallo zusammen,

ich versuche zur Zeit folgende JSON-Datei in eine editierbare, dynamische HTML-Table einzulesen, aber scheitere leider schon beim einlesen der JSON-Datei.

{
 "listenPort": 25565,
 "backendServerMappings": [
   {
    "mappingDomain": "example.com",
    "backendServerAddress": "192.168.1.10",
    "backendServerPort": 25565
   },
   {
    "mappingDomain": "ftb.example.com",
    "backendServerAddress": "192.168.1.20",
    "backendServerPort": 25565
   }
 ]
}

Als HTML habe ich folgenden Schnipsel schon im Internet gefunden, welcher aber die JSON nicht richtig einliest:

<html lang="de"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Cleanstone Configuration</title> 
  <script src= "https://code.jquery.com/jquery-3.5.1.js"></script> 
   <style> 
    table { 
      margin: 0 auto; 
      font-size: large; 
      border: 1px solid black; 
    } 
  
    h1 { 
      text-align: center; 
      color: #006600; 
      font-size: xx-large; 
      font-family: 'Gill Sans',  
        'Gill Sans MT', ' Calibri',  
        'Trebuchet MS', 'sans-serif'; 
    } 
  
    td { 
      background-color: #E4F5D4; 
      border: 1px solid black; 
    } 
  
    th, 
    td { 
      font-weight: bold; 
      border: 1px solid black; 
      padding: 10px; 
      text-align: center; 
    } 
  
    td { 
      font-weight: lighter; 
    } 
  </style> 
</head> 
  
<body> 
  <section> 
    <h1>Minecraft Cleanstone Configuration</h1> 
  
    <!-- TABLE CONSTRUCTION-->
    <table id='table'> 
      <!-- HEADING FORMATION -->
      <tr> 
        <th>Domain</th> 
        <th>Server Address</th> 
        <th>Server Port</th> 
      </tr> 
  
      <script> 
        $(document).ready(function () { 
  
          // FETCHING DATA FROM JSON FILE 
          $.getJSON("config.json",  
              function (data) { 
            var student = ''; 
  
            // ITERATING THROUGH OBJECTS 
            $.each(data, function (key, value) { 
  
              //CONSTRUCTION OF ROWS HAVING 
              // DATA FROM JSON OBJECT 
              student += '<tr>'; 
              student += '<td>' +  
                value.mappingDomain + '</td>'; 
  
              student += '<td>' +  
                value.backendServerAddress + '</td>'; 
  
              student += '<td>' +  
                value.backendServerPort + '</td>'; 
  
              student += '</tr>'; 
            }); 
              
            //INSERTING ROWS INTO TABLE  
            $('#table').append(student); 
          }); 
        }); 
      </script> 
  </section> 
</body> 
  
</html>

Ich würde auch gerne die json-Datei editieren können und auch abspeichern können. Wie genau ist das möglich?

Ich bedanke mich schonmal im Voraus und entschuldige mich für ggf. unklare Ausdrucksweisen.

...zur Frage

Frage zur Formatierung in HTML (Bild, h1, h2) nebeneinander?

Hallo Liebe Community, ich habe ein Problem mit HTML... Könnte mir bitte jemand helfen.

Und zwar übe ich gerade ein bisschen mit HTML, und mir ist gerade aufgefallen, dass wenn in im Header ein Bild, eine Überschrift

und eine Zweite Überschrift habe, diese untereinander stehen, ich meine... Das wusste ich ja... Aber nun möchte ich wissen, wie ich diese drei nebeneinander darstellen kann... Ich habe leider auch nichts im Internet gefunden...
Skript:

...
xxx yyy

...

Ich habe auch schon alles in CSS versucht, aber habe es nicht hinbekommen...

mfg Alexander

...zur Frage

Buch Schreiben- Normen und Standarts

Ich möchte ein Buch DinA5 schreiben mit der Schriftart: Georgia (und evtl. Verdana oder ähnliches die Kapitel) Bei welcher Schriftgröße müsste ich da bleiben, also in welcher Schriftgröße sind die meisten Bücher geschrieben? Welche Formatierung haben sie? (SEITENRÄNDER) und was für einen Zeilenabstand? Was lässt sich gut lesen? Kennt ihr die Normen und Standards von Büchern? Was sollte ich noch beachten? Bitte um Hilfe!

...zur Frage

Formatierung Bewerbung falsch?

Hallo Zusammen,ich habe gestern eine Email für eine Bewerbung verschickt, leider wird die Email auf unterschiedlichen Systemen/Programmen unterschiedlich dargstellt. Teilweise rote Schrift, andere Schriftgrösse....Sollte ich im Unternehmen und darauf hinweisen, nicht das die Denken ich arbeite total schlampig...seltsamerweise sieht bei mir alles in Ordnung aus und ich habe es extra als reinen Text ohne html verschickt....Was meint ihr?

...zur Frage

Html Login?

Hallo, ich habe folgenden Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
<link rel="stylesheet" href="style.css">
</head>
<body>


<div class="center">
    <h1>Anmelden</h1>
    <form method="post">
    


<div class="txt_field">
    <input type="text" required>
    <label>Benutzername</label>
</div>


<div class="txt_field">
    <input type="password" required>
    <label>Passwort</label>
</div>
<div class="pass">Passwort vergessen?</div>
<input type="submit" value="Anmelden">
<div class = "signup_link">
  Noch kein Nutzer?  <a href="regis.html">Registrieren</a>


</form>
</div>


</body>
</html>

Dies ist der CSS Code:

body {
    margin: 0;
    padding: 0;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: linear-gradient(120deg, #2980b9, #8e44ad);
}


.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Leider klappt nicht alles. Hab ich was falsch gemacht=

...zur Frage

HTML Tag als Text darstellen?

Hallo. Ich möchte den Tag <h1> nicht als Tag darstellen, sondern als Text. Wie geht das und macht man das in HTML selber oder in CSS?

Hintergrund: Ich versuche gerade eine Seite zu schreiben, wo HTML erklärt wird. Dort gibt es dann einen Satz bzw. Absatz, der wie folgt lautet:

"Die Sprache HTML beschreibt, wie der Browser (oder ein anderes Programm, wie z. B. ein Text-Editor) die Auszeichnungen des Textes zu „verstehen“ hat, nicht, wie er sie dann in der Darstellung umsetzt. So besagt <h1> zwar, dass eine Überschrift folgt, nicht aber, in welcher Schriftgröße oder Schriftschnitt diese darzustellen ist – hier haben sich nur gewisse übliche Standardeinstellungen eingebürgert, die aber nicht Teil der HTML-Spezifikation sind."

Das Problem ist nun, dass im zweiten Satz ab <h1> alles danach als Überschrift groß und fett geschrieben wird (und in einer neuen Zeile), weil er das alles, was danach folgt, als "Überschrift" kennzeichnet bzw. tagt. Das will ich aber nicht. Ich will, dass es als normaler Text dargestellt wird und alles danach auch. Wie genau mache ich das?

...zur Frage

6pt Zeilenabstand in cm? (OPEN OFFICE)

Hallo Leute,

für ein Referat brauche ich einen Zeilenabstand von 6pt nach jeder Überschrift und jedem Absatz. Ich arbeite mit Open Office Writer. Über "Format" -> "Absatz" -> "Einzüge und Abstände" habe ich ein Eingabenfeld für Abstände gefunden. Diese ist allerdings in cm angegeben. Kann mir jemand sagen, wieviel 6pt in cm sind? Oder weiß jemand, wie ich anderweitig auf die Formatierung in pt bei Open Office gelange?

Vielen Dank!

...zur Frage

Dark-Mode White-Mode Schalter Position verschieben?

Guten Abend, ich benötige Hilfe bei einer Website, die ich derzeit programmiere. Ich versuche einen "Dark-Mode" An-Aus Schalter hinzuzufügen. Dabei stoße ich derzeit auf ein Problem: Ich würde den betreffenden 'Knopf' zum ändern der Hintergrundfarbe gerne an den oberen, rechten Seitenrand verschieben, jedoch finde ich nicht den richtigen Befehl an der richtigen Stelle dazu. Ihr kennt euch sicherlich besser mit so etwas aus. Vielen Dank schon mal im Voraus.

(Entschuldigung für die fehlende Formatierung, die Nachricht hätte sonst zu viele Zeichen) + (CSS-Datei befindet sich in den Kommentaren)

Hier der Code der HTML-Seite:

<html lang="de">
<head>
<meta charset=utf-8>
<title>Test-Titel(Tab)</title>
<link rel="Stylesheet" href="TestSeite.css">
</head>
<body>

<form>

<!-- LOGO -->

<div class="Logo">

<a href="https://www.google.com/"> <img src="ImpressumsSymbol (sklein).png"> </a>

</div>

<!-- ----- -->

<!-- HIER BEFINDET SICH DIE FRAGE -->

<input id="dark-mode" class="toggle" type="checkbox" name="Dark mode" role="switch" value="on">

<div class="curtain"></div>

<!-- UEBERSCHRIFT -->

<div class="Ueberschrift">

<h1> <b> ÜBERSCHIRFT </b> </h1>

<h2> IMPRESSUM </h2>

</div>

<!-- ----- -->

<!-- BUTTONS -->

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<a href="https://www.google.com/" class="btn-flip" data-front="TEXT" data-back="TEXT"></a>

<!-- ----- -->

<!-- KONTAKT -->
<div class="Impressum">

<h2> <u> TEXT </u> </h2>

</div>

<center>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
<br>
TEXT
</p>
<p>
TEXT
<br>
TEXT
</p>

<p> TEXT </p>

</center>
<!-- ----- -->
<!-- IMPRESSUM -->
<div class="Impressum">

<h2> <u> IMPRESSUM </u> </h2>

<h3>TEXT</h3>

<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p> TEXT
<br>
TEXT
</p>

<p>
<strong>
TEXT
</strong>
<br>
TEXT
</p>

<h2>TEXT</h2>
<p> TEXT
<br>
TEXT
<br>
TEXT
</p>
<p>
<a href="https://www.google.com/" class="link">TEXT</a>

</p>
<p>
TEXT
</p>

<h3>Haftung für Inhalte</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

<h3>TEXT</h3>
<p>
TEXT
</p>
<p>
TEXT
</p>

</div>

<!-- ----- -->





</form>

</body>

</html>

...zur Frage

Wieso funktioniert das stylen des div-Conatiners nicht?

Guten Abend zusammen,

wie ihr aus meinen vorherigen Fragen herauslesen könnt, übe ich gerade das programmieren. Ich habe jetzt sehr viel über das stylen (css) bzw. positionieren des div-containers recherchiert. Es taucht immer wieder das selbe Problem bei mir auf:

Es funktioniert nicht, spricht: ich kann weder das Element positionieren noch in irgendeiner Form stylen.

Unten ist mein Beispiel; wie immer kopiere ich nur den wichtigsten Code um euch den Rest zu ersparen. Hierbei wird nur das <h1> ausgegeben und leider nichts weiteres. Ich müsste noch erwähnen, dass ich mit Visual Studio programmiere und dabei einmal eine Seite mit index.html programmiere und stylen auf einem weiterem Fenster im Visual Studio tue.

Das ist der Code im Fenster index.html:

<body>

<h1>Hallo</h1>

</div>

</body>

Das ist der Code im Fenster sytle.css (wobei die Überschrift seltsamerweise rot angestrichen ist und daneben die Zahl 5 steht; ich weiß leider nicht ob das etwas zu bedeuten hat):

#Hallo {

width: 100px;

height:150px

position: relative;

top: 70px;

left: 80px;

background: blue;

}

Eventuell hat jemand von euch eine Idee wo das Problem liegen könnte.

Vielen Dank für eure Mühen im voraus !

...zur Frage

Welche Schriftgröße, Buchstabenabstand, Zeilenabstand, Wortabstand und Seitenrand soll ich nehme?

Hallo, ich sollte eine Hausarbeit machen, die morgen abzugeben ist, mit dieser bin ich auch schon fertig. Momentan habe ich den normalen Seitenrand, einfachen Zeilenabstand, normalen Wort- und Buchstabenabstand, sowie Schriftgröße 12. Es sollen mindestens 4 Seiten sein nach oben ist es offen, ich habe 5. Es ist aber nichts vorgegeben von Schriftgroeße oder der Gleichen, daher meine Frage. Vielleicht ist es ja psychologisch besser wenn es einfach mehr Seiten sind, wegen groeßerer Schrift oder so. und er denkt ich haette noch mehr gemacht, was meint ihr?

Danke fuer alle ernst gemeinten Antworten

...zur Frage

JavaScript / jQuery - Warum funktioniert das nicht?

Hallo,

ich möchte hier Absatz 2-5 eine Klasse ('abschnitt') geben und deren Text ändern zu 'neuer jQuery Text'.

Wieso funktioniert das hier nicht?

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    'use strict';

    document.onload = function() {
      for (var i = 1; i < document.querySelectorAll('p').length; i++) {
        document.querySelectorAll('p')[i].classList.add('abschnitt');
        $('.abschnitt').text('neuer jQuerytext');
      }
    }
  </script>
  <script></script>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <br>
  <h1> Überschrift </h1>
  <h2 id="ü2"> Überschrift h2 </h2>
  <p id="p1"> Absatz 1 </p>
  <p id="p2"> Absatz 2</p>
  <p> Absatz 2</p>
  <p> Absatz 3</p>
  <p> Absatz 4</p>
  <p> Absatz 5</p>
</body>
</html>

...zur Frage

Welches Maß ist die Schriftgröße bei Word/Excel etc.

Auf welche Einheit bzw auf welchen Maßstab ist die Skalierung der Schrift zurückzuführen. Habe mir grade Gedanken gemacht, ob man eine bestimmte Schriftgröße (gerechnet meinetwegen auf DIN A 4) einer in Millimeter/Zentimeter messbaren (ausgedruckten) größe zuordnen kann. Es liegt mir irgendwie am nächsten dass es sich um Millimeter handele - Schriftgröße 8 sind aber nie und nimmer 8 Millimeter, genauso wie 36 größer als 3,6 Zentimeter sein dürfte.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen