Wie kann ich Schrift und Hintergrundfarbe des Textfeldes verändern?

Seite 12

1 Günter Leipfinger

Hallo,
ich möchte ein Textfeld in eine bestehende Seite einfügen. Wie muß der Code dazu lauten?

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Malerei2000</title>
   <meta name="description" Der Autor gibt Einblick in sein künstlerisches Schaffen;Malerei, Acrylmalerei Aquarelle Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
	<meta name="Keywords" content=Malerei, Acryl, Aquarelle>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link href="../css/zentrale.css" rel="stylesheet"> -->
  <link rel="stylesheet" type="text/css" href="http://www.malerei2000.de/style2000.css">
   
   <link rel="icon" type="image/vnd.microsoft.icon" href="www.malerei2000.de/palette.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
   <header class="pageheader">
      <h1>Herzlich willkommen</h1>
   </header>
   <nav class="navigation">
      <p><a href="http://malerei2000.de/Malerei/Acrylmalerei/album/index.html">Acrylmalerei</a></p>
	     
      <p><a href="http://malerei2000.de/Malerei/Aquarelle/album/index.html">Aquarelle</a></p>
	   <p><a href="bilderliste3d.html">Bildinformationen</a></p>
	   
     <p><a href="http://www.malerei2000.de/Kontakt.html">Kontakt</a></p>
      <p><a href="http://www.malerei2000.de/impressum.html">Impressum</a></p>
      <p><a href="http://gb.webmart.de/gb.cfm?id=1331502l" http:="" gb.webmart.de=>Gästebuch</a></p>     
	   <p><br><br><br>
        <script "text/javascript" src="https://www.whomania.com/count/lxl"></script><br>
         <br>     
	<p id="last-update">Letzte Aktualisierung am<br>
18.05.2016</p>	   
    </nav>

	  
  
   
   <main class="content">
      <h2>Malerei</h2>
      <figure>
        <img src="http://malerei2000.de/illusion.jpg" alt="Malerei">
      </figure>
      <div style="text-align: center"><br>bitte beachten Sie<br>

     <p>10. Ausstellung Feldkirchener Künstler<br>
im Rathaus Feldkirchen<br>
vom 16. Oktober bis 25. Oktober 2018</p>
</div>
																       
      <footer class="contentfooter">      </footer>
   </main>								   
    <aside class="sidebar">
     Die Bilder können käuflich erworben werden.<span>Bei Interesse mail an den</span>
      <p><span><br>
      </span> <a href="http://www.malerei2000.de/Kontakt.html"><span class="Stil1">Künstler</span>         
</html>

Es geht um diesen Text:

10. Ausstellung Feldkirchener Künstler
im Rathaus Feldkirchen
vom 16. Oktober bis 25. Oktober 2018

Wie kann ich Schrift und Hintergrundfarbe des Textfeldes verändern?

2 Jörg Kruse

Die Textfarbe wird mit der CSS-Eigenschaft color definiert:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Textformatierung/color

... die Hintergrundfarbe mit der CSS-Eigenschaft background-color:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Hintergrundfarben_und_-bilder/background-color

Du kannst dem Abschnitt eine Klasse zuordnen:

     <p class="hervorgehoben">10. Ausstellung Feldkirchener Künstler<br>
im Rathaus Feldkirchen<br>
vom 16. Oktober bis 25. Oktober 2018</p>

... so dass du diesen im CSS entsprechend ansprechen kannst:

p.hervorgehoben {
    color: red;
    backgorund-color: yellow;
}

PS: ich habe den Titel des Threads mal angepasst, so dass daraus schon ersichtlich ist, um welche Fragestellung es genau geht.

3 Günter Leipfinger

Danke Jörg, wie muß ich verändern, wenn ich das Textfeld nur 500px breit haben will aber trotzdem zentriert.
Wenn ich schreibe:

p.hervorgehoben
															  {	
	width: 500px;															  
	text-align: center;										  
	font-size: 1em;
	font-weight: bold;
    color: red;
    background-color: yellow;
																  }

ist das Textfeld nun zwar 500px breit, aber nicht mehr zentriert.
Vielleicht auch mit einem Rand um das Textfeld.

4 Jörg Kruse

Ein Zentrieren von Blockelementen wie <p> erreicht man durch "margin: auto"

p.hervorgehoben {
    margin: auto;
    width: 500px;
    /* ... */
}

Einen Rand kann man mit der CSS-Eigenschaft border definieren:

border: 1px solid black;

siehe auch:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/%C3%A4u%C3%9Fere_Gestaltung/Rahmen/border

5 Günter Leipfinger

Vielen Dank!

6 Günter Leipfinger

Nun noch eine kleine Verbesserung. Ich möchte noch den Text

Vernissage am 16.Oktober

hinzufügen aber mit einer geringeren Schriftgröße. Ich habe es so versucht:

p.vernissage
{font-size: 0.7em;}

und dann an der entsprechenden Stelle im Text:

<p class="Vernissage"> Vernissage 16.Oktober
					</p>

jedoch ohne Erfolg

7 Jörg Kruse

"vernissage" und "Vernissage" sind zwei unterschiedliche Klassen (beachte Groß- und Kleinschreibung)

8 Günter Leipfinger

Bitte noch eine kleine Verbesserung:
Der Text

bitte beachten Sie

sollte hervorgehoben werden, z.B. durch Unterstreichen und andere Schriftfarbe.
Wie muß ich da ergänzen. Meine Versuche führten zu nichts

9 Jörg Kruse

Wenn es sich nicht um einen ganzen Absatz, sondern nur um einen Textausschnitt handelt, kann man ein <span> Element verwenden, welches keine Umbrüche erzeugt

<span class="achtung">bitte beachten Sie</span>

Mit text-decoration kann man Textabschnitte unterstreichen

span.achtung {
color: red;
text-decoration: underline;
}

10 Günter Leipfinger

Muß ich da eine neue Klasse definieren?

Seite 12

nach oben weiter >