html und css; wie kann ich den inhalt direkt im html dokument formatieren?

Hallo,

mitlerweile ist es üblich mit css dateien die Formatierung vorzunehmen.

früher konnte direkt in der html datei der entsprechende Absatz oder Schrift formatiert werden.

Nehmen wir mal an ich habe foglenden Text.

<p>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

</p>

Zwar ist dieser nun durch html 5 automatisch als Absatz formatiert.

Mir geht es aber um die direkte Formatierung. wie muss ich den Quellcode ändern um diesen Absatz direkt im html dokument zu ändern bzw, anzugeben.

1 Antwort

Mayahuel

31.05.2023, 19:01

um die direkte Formatierung.

mit Inline-CSS

<p style="color: red; font-size: 1.2em">

Oder besser, da zentral gesteuert:

<style>
p {color: red; font-size: 1.2em}
</style>

um bestimmte Tags anzusprechen, werden selektoren verwendet:

https://wiki.selfhtml.org/wiki/CSS/Selektoren

Hallo! hier der Text:

Vielen Dank für jede sinnvolle Übersetzung schon mal im Vorhinein!

...zur Frage

Komischer Text?

Hallo, also mein Lehrer hat in meine Abgabe für mein Layout einen komischen Lateinischen Text geschrieben, er lautet "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet." Ist das eine Bewertung? Warum auf Latein?? Google Übersetzer gibt nichts Sinnvolles. Ich hatte nie Latein.

...zur Frage

Englischer Lebenslauf - Wie Gymnasium schreiben?

Wie schreibe ich auf englisch, dass ich Gymnasium X besucht habe?:

EDUCATION

School Name, Location — Degree

MONTH 20XX - MONTH 20XX

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.

...zur Frage

Wie kann man in css box shadowing nur oben und unten erhalten?

Hallo

Ich mache gerade eine Website und habe das Problem, dass ich das box shadowing Attribute in css immer auf alle vier Seiten des Containers erhal, ich will es aber nur oben und unten.

Hier der HTML-Code:

<div class="content">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>

Und hier der CSS-Code :

.content {

background-color: #48cae4;

padding: 5%;

box-shadow: inset 0 0 10px #132124;

}

...zur Frage

Js Funktion funktioniert nicht?

Ich bekomme immer diese Fehlermeldung: Uncaught TypeError: Cannot read properties of null (reading 'setAttribute')

at OnClick ((Index):16:25)

at HTMLButtonElement.onclick ((Index):33:33)

Code:

<!DOCTYPE html>

<head>

<title>Document</title>

const TextElement = document.getElementById("text");

function OnClick() {

TextElement.setAttribute('style', 'color: red;');

}

</script>

<style>

#text {

color: black;

}

</style>

</head>

<body>

<div id="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi, et placeat, asperiores reprehenderit praesentium esse possimus quia sed tempore, unde autem illo. Illum, voluptate laboriosam. Doloribus unde mollitia necessitatibus dicta?</div>

<button onclick="OnClick()">button</button>

</body>

</html>

Danke

...zur Frage

Warum ist bei Templates oft als Platzhalter ein Text auf Latein?

"Hier fängt Ihr Text an. Klicken Sie hier und fangen Sie an zu tippen. Porro quisquam est qui dolorem ipsum quia dolor sit amet consectetur adipisci."

Um ein Beispiel zu nennen. Habe ich bereits in vielen Vorlagen für PowerPoint, Homepage etc gesehen...

...zur Frage

Brauche dringend eine Übersetzung zu einem lateinischen Text!

Guten Abend liebe GF Community

Ich wollte eine Seite auf tumblr duplizieren und auf einmal erschien ein total komischer text auf latein. Ich kann mir überhaupt nicht erklären wieso und finde es sehr eigenartig. Jetzt möchte ich unbedingt wissen was in diesem text drin steht, leider beherrsche ich kein bisschen latein und google konnte mir nicht helfen. Hier der Text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae luctus nisi. Donec accumsan vehicula tempor. In volutpat condimentum justo nec volutpat. Ut imperdiet laoreet pharetra. Quisque vitae luctus ligula, ut tristique turpis. Quisque aliquam orci quis ipsum iaculis vestibulum. In placerat nibh tellus, tincidunt dapibus felis fermentum sed. Praesent non nisl lorem. Nam commodo nunc eget nunc suscipit lobortis. Vestibulum non ornare libero. Praesent pharetra feugiat tortor, sit amet mattis elit malesuada non. Vestibulum pretium vehicula venenatis. Nullam consectetur turpis vel tincidunt tempor. Praesent fringilla dui lorem, eu molestie justo aliquet vel. Ut nibh tortor, malesuada et sapien consectetur, auctor scelerisque ante. Etiam adipiscing purus eu ultricies consectetur.

Integer sed nulla est. Duis consectetur luctus felis tempus mollis. Quisque nec posuere mi. Sed scelerisque vestibulum justo. Vivamus faucibus porta metus id ultricies. Curabitur scelerisque nulla eget ipsum cursus fermentum. Aenean cursus at nunc quis laoreet. Cras sodales sapien et feugiat laoreet. Proin semper varius augue, vitae consequat nunc sollicitudin sit amet. Vivamus porta egestas odio, non ultricies arcu ultrices et. Nunc gravida luctus lobortis. Sed mi justo, eleifend sed dolor vitae, congue semper massa. Ut sit amet lobortis tortor. Nullam sed nunc sit amet ligula rutrum porta.

Integer vitae arcu nec justo feugiat consectetur sit amet quis neque. Pellentesque viverra massa vel velit faucibus lacinia. Cras ante risus, malesuada quis luctus vel, sodales eu risus. Morbi quis dictum lacus, consequat molestie turpis. Nunc et lacus facilisis, mattis neque quis, auctor ipsum. Etiam ac velit elit. Fusce ut accumsan sem, non pharetra augue.

...zur Frage

Wie kann ich mit css die zwei div container untereinander mit Abstand dazwischen anzeigen lassen?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt {
         margint top: 50px;
         }
         .b1 {
         float: left;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
         .b2 {
         float: both;
         width: 400px;
         padding: 20px 0;
         color: #01DF01;
         border-bottom-width: 3px;
         border-style: solid;
         width: 50;
         height: 30;
         background-color: #fff;
         }
      </style>
   </head>
   <body>
      <div class="haupt">
         <div class="b1">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
         <div class="b2">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br>
            sed diam nonumy eirmod tempor invidunt ut labore et<br>
            dolore magna aliquyam erat, sed diam voluptua.<br>
            At vero eos et accusam et justo duo dolores et
         </div>
      </div>
   </body>
</html>

...zur Frage

Wie bekomme ich es hin, das die Kästen beim verkleinern des Fensters über die gesamte Länge geht?

Ich habe bisher das:

und verkleinert sieht es so aus:

Aussehen soll es aber so:

Hier mein Code:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
      <style>
         header {
         text-align: center;
         font-size: 3em;
         padding: 5px;
         color: #fff;
         background-color: #FFBF00;
         }
         .wrapper { display:flex }
         @media screen and (max-width:620px) {
         .wrapper {display:block }
         }
         nav {
         width:15%;
         text-align: center;
         font-size: 2em;
         padding-right: 60px;
         color: #fff;
         background-color: #819FF7;
         margin-right: 10px;
         margin-bottom: 150px;
         }
         a {color: #fff }
         li {list-style: none }
         article {
         width:70%;
         color: #BDBDBD;
         }
         aside {
         color: #fff;
         width: 15%
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #01DFD7;
         margin-bottom: 150px;
         }
         footer {
         text-align: center;
         font-size: 1em;
         padding: 10px;
         padding-right: 60px;
         background-color: #D8D8D8;
         color: #A4A4A4;
         }
      </style>
   </head>
   <body>
      <header><h2>Header</h2></header>
      <div class="wrapper">
           <nav>
            <ul>
               <li><a href="" target="_blank">Link 1</a></li>
               <li><a href="" target="_blank">Link 2</a></li>
               <li><a href="" target="_blank">Link 3</a></li>
               <li><a href="" target="_blank">Link 4</a></li>
            </ul>
         </nav>
         <article>
            <h3>Lorem Ipsum</h3>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
               magna aliquyam erat, sed diam voluptua. At vero eos et
               accusam et justo duo dolores et ea rebum. Stet clita kasd
               gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
               amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
               sed diam nonumy eirmod tempor invidunt ut labore et dolore
            magna aliquyam.</p>
         </article>
         <aside>
            <h2>About</h2>
            <p>Lorem ipsum dolor<br>
               sit ametr,<br>
               consecteteuer<br>
               adipiscing elit.
            </p>
         </aside>
      </div>
      <footer>
         <p>&copy; </p>
      </footer>
   </body>
</html>

...zur Frage

Automatische Zeilenumbrüche bei HTML verhindern?

Hoi, bin mit HTML Zugange und möchte einen Text verfassen. Er soll mit h1 Anfangen, wie auf dem Bild zB "01/", und dann direkt dahinter in h3 "Lorem Ipsum", oder dann der Titel des Services. Allerdings direkt dahinter und ohne Zeilenumbruch. Wie geht das?

...zur Frage

wie ist mein HTML Projekt?

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

</style>

<body>

<H1>Willkommen auf meiner ersten Seite</H1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet, minima rem maiores molestiae possimus sunt aperiam blanditiis. Veritatis impedit rerum, corrupti debitis veniam maxime deleniti, atque earum, aspernatur iure voluptate. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam tenetur ratione mollitia velit, quasi blanditiis ipsa amet magnam doloremque quam quod porro voluptatibus. Voluptate ipsa ratione maxime labore quo veniam?</p>

<button>login</button>

<h1>Was erwartet sie hier auf der seite?</h1>

<p>Auf dieser seite erhalten sie hilfe von unseren Fachleuten aus der pychologie <hr>wir arbeiten seit 30 Jahren mit unseren team und haben menschen aus der

Krise geholfen

</p>

<p>in unserer 1 stunden Therapie versuchen wir auf den grund ihre schweren <br>depression zu finden</p>

<hr>

<a class="mylink" href="#">Impressum</a>

<a class="mylink" href="#">Kontakt</a>

<a class="mylink" href="#">Datenschutz</a>

</footer>

</body>

</html>

...zur Frage

HTML/CSS Hilfe - zwei Textfelder mit Bild nebeneinander?

Wie löse ich das Problem? Oben mein derzeitiger Stand - unten der Wunschzustand :)

HTML

<div id="main2">
   <div class="col1">
      <h3>Vivamus nec</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
   </div>
   <div class="col2">
      <h3>Lorem ipsum</h3>
      <img src="UE05/pic1.jpg" alt="spring flowers"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
   </div>

Wie würdet ihr das mit CSS lösen?

...zur Frage

HTML Mailto Betreff und mehrere Empfänger?

Hallo zusammen,
ich habe Probleme mit einem mailto tag in html.

Eigentlich sollte ein Empfänger 1 und 2 nach dem Aktivieren dort stehen, so wie ein Betreff und Text.

<a href="mailto:__senderaddress__,?cc=newsletter@test.de?subject=Newsletter_unsubscribe;?body=Lorem%20Ipsum,%0D%0A%0D%0Adolor%20sat.">Aktivieren</a>

Mir wird nur die ganze Zeit alles flasch gesetzt

__senderadress__ ist ein Platzhalter der im Finalen verschicken durch das System ersetzt wird.

Bei dem Empfänger Feld steht gerade __senderadress__ das wird im Test auch richtig ersetzt.

Im CC Feld jedoch das "newsletter@test.de?subject=Newsletter_unsubscribe; ?body=Lorem Ipsum,; dolor sat."

Ich stehe glaube ich ein wenig auf dem Schlauch...

...zur Frage

Drupal Zeilenumbruch

Hallo Leute,

bin gerade dabei mit Drupal eine Homepage zu gestalten. Das Problem ist halt, dass wenn ich einen Text auf die Startseite schreibe dann hat er keinen Zeilenumbruch.

Beispiel:

Ist: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."

Soll: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."

Bin noch ein totaler Anfänger und habe schon gegooglet aber leider nichts gefunden.

Vielen Dank für eure Hilfe!

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen