Webseiten mit HTML und CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ansprechen
antwort
beispiel
bereich
bessere methode
code
container
definieren
dokument
eigenschaft
element
folgenden code
header
inhalt
klasse
punkt
ratgeber
tag
url
zeile
-
Sehr geehrte Forum,
Nutzer durch ein Projekt bin ich dabei wieder mich mit dem Thema HTML und CSS aus einander zusetzen und nun bin ich an einer Stelle angelangt wo ich nicht mehr weiter kommen.
Der Knacktag/punkt">punkt ist die Formatierung mit CSS ich habe folgenden Code in den Editor eingegeben
<html>
<head>
<title></titele>
</head>
<body>
<h1>Eine SEHR große Überschrift</h1>
<p>Ich biin ein <b>Absatz</b>. <i>Text</i> sollte immer in <u>Absätzen</u>stehen.<br>
Ich bin eine Zeile tiefer.</p>
<h2>Ich bin nicht ganz so wichtig<h2>
<ul>
<li>Ein Aufzählungspunkt</li>
<li>Noch einer</li>
</ul>
</body>
</html>
Zwischen den Tags </title> und </head> habe ich folgenden Code hinzugefügt
<style type="text/css">
und hier ist genau das Problem wenn ich diesen Code <style type="text/css"> eingebe dann ist das Fenster leer und ohne diesen Code ist alles da
jetzt meine Frage was ist verkehrt ?
Ich würde mich sehr auf eine schnelle Antwort freuen.
MfG
pierre-verley
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hey. Wenn du CSs verwenden willst, musst du es filgendermasen anwenden:
<style type="text/css"> Hier CSS </style>
-
Ok vielen Dank und wie? sorry wenn ich so blöd frage
-
Hallo,
sorry wenn ich mich einmische :)
der Code an sich ist korrekt.
Dieser Code muss jedoch geschlossen werden. ALSO:
<style type="text/CSS">
Hier der CSS
</style> (hier wieder der code geschlossen).
Denk daran den Code übersichtlich zu halten :)
PS: Die Erklärung ähnelt sich wie bei cannadesign :) -
Vielen Dank für die Antwort wäre es möglich mir ein Beispiel zunennen wie ich den Code schließen müsste?
-
pierre-verley schrieb:
Vielen Dank für die Antwort wäre es möglich mir ein Beispiel zunennen wie ich den Code schließen müsste?
Fast jeder geöffnete HTMl Tag zb <head> muss am Ende auch wieder geschlossen werden </head> dies macht man mitn einfachen Backslash. Allerdings gibt es einige Angaben in HTML wo man den Tag gleich wieder schliesst, zum Beispiel IMG Tags. ;) Dieser sieht dann so aus.
<img src="link" />
lg -
Hallo
Es geht um folgenden Abschnitt
5.5 Style Sheets im HEAD notieren
Das Festlegen der CSS - Eigenschaften im BODY oder Tags (genannt Inline - CSS) ist ja schön und gut, dem entsprechenden Element wird die entsprechende Eigenschaft (z.B. Schriftart) zugewiesen. Aber was ist, wenn du z.B. alle Überschriften deines Dokuments besonders gestalten möchtest? Ist ja sehr umständlich dies bei jeder Überschrift neu zu notieren! Bei 2 oder 3 wäre es ja noch OK, aber bei 50 oder 100? Hierfür gibt es eine bessere Methode, du notierst die Eigenschaften im HEAD, so werden bei Änderung zum Beispiel alle Absätze oder bestimmte Überschriften gleich anders gestaltet.
Ich zeige das dir wieder an einem Beispiel namens "lern11.html". Kopiere bitte den Inhalt von "lern2.html" (siehe oben) in dieses Dokument. Es müsste dann so aussehen:
[ Beispiel ] [ Screenshot ]
<html>
<head>
<title>Überschriften, Absätze, Zeilenumbrüche, Aufzählungen ...</title>
</head>
<body>
<h1> Eine SEHR große Überschrift</h1>
<p>Ich bin ein <b>Absatz</b>. <i>Text</i> sollte immer in <u>Absätzen</u> stehen.<br>
Ich bin eine Zeile tiefer.</p>
<h2>Ich bin nicht ganz so wichtig</h2>
<ul>
<li>Ein Aufzählungspunkt</li>
<li>Noch einer!!</li>
</ul>
</body>
</html>
Dieses Dokument eignet sich gut zum Gestalten, da viele verschiedene Tags vorkommen...
OK, wo kommen die Anweisungen hin? Wie schon gesagt in den HEAD, am besten nach dem abgeschalteten </title> und vor </head>, also so:
... Aufzählungen ...</title>
<style type="text/css">
</style>
</head>
<body>
<h1> Eine SEHR große ...
Notiere den <style> - Tag (neu) dorthin und gib als Attribut type="text/css" an. Natürlich das Ausschalttag nicht vergessen!
Jetzt sind wir so weit:
... <style type="text/css"> ...
Setzte noch ein paar HTML - Kommentare (<!-- Kommentar -->). Sie dienen dazu, dass ältere Browser, die Style Sheets noch nicht kennen, die folgenden Anweisungen ignorieren:
... <style type="text/css">
<!--
CSS - Stilanweisungen
-->
</style>
OK, das war jetzt recht viel Neues, aber zu kapieren gibt's da nicht viel - merke dir einfach diese Förmlichkeit!
Nun können wir fröhlich mit unseren Anweisungen loslegen. Du kannst alle schon besprochenen Werte benutzen. Jetzt ändern wir einmal die Überschrift H1! Sie soll die Schriftgröße 20 Punkt bekommen. Schreibe dazu erstmal den Tag, h1:
... <!--
H1
--> ...
Dahinter notierst du ein geschweiftes Klammerpaar {} , lasse am besten ein Leerzeichen hinter H1 Platz:
H1 { }
In die Klammern kommen die Attribute und Werte von CSS rein - du kennst ja schon einige. Wir legen wie versprochen die Schriftgröße 20 Punkt fest:
H1 {
Font-size: 20pt;
Ich habe alles so ein gegeben wie es hier dargestellt ist wo ich einfach nicht weiter komme -
pierre-verley schrieb:
Wenn du den Ratgeber den du benutzt hast postest, aber nicht genau, was du gemacht hast, bringt das genau null. Der Ratgeber wird schon stimmen.
Ich habe alles so ein gegeben wie es hier dargestellt ist wo ich einfach nicht weiter komme
Es wird an dir liegen. Zum Beispiel hast du auch im ersten Post geschrieben:
<title></titele>
Offensichtlich beim Schliessen vertippt.
Ich denke es liegt einfach an einem Verständnisproblem:
pierre-verley schrieb:
Du hast das wichtige weg gelassen und das unnötige geposted. Diese Pfeile sind Notizen, beachte diese einfach nicht.
... <!--
H1
--> ...
pierre-verley schrieb:
Du hast eine offene Klammer { nicht wieder geschlossen. Da sollte noch eine Zeile mit } hin.
H1 {
Font-size: 20pt;
Ich werde versuchen das allgemein zu erklären.
Wenn dir das alles zu viel wird, poste doch bitte deinen Code und ich werde versuchen dir zu erklären, was alles falsch ist.
Im body definierst du die ganzen Elemente. Als Beispiel nehmen wir einen einfachen <div> Tag.
<body> <div>Inhalt</div> </body>
Im head wird wie schon erwähnt ein Style bereich geöffnet:
<head> <style type="text/css"> </style> </head>
Im style bereich kann nun das CSS angesprochen werden. Dafür gibt es grundsätzlich 3 Möglichkeiten.
Zum einen kann jedes div Element angesprochen werden. Davon würde ich abraten, aber theoretisch möglich. Ich verwende dies immer um den body zu definieren:
body{ padding: 0px; margin: 0px; }
Und das zeigt eigentlich auch, dass jedes HTML Element schon Eigenschaften hat, die überschrieben werden können. Ein body hat einen Rand, diesen möchte ich entfernen, damit der Bildschirm voll ausgefüllt werden kann.
Dies kann ohne probleme beim body angewendet werden, weil es nur einen gibt.
Die zweite Möglichkeit wäre über eine ID. Wird aber auch eher selten verwendet, da ID's einzigartig sein können. Dies ist meistens im zusammenspiel mit JavaScript. Ich vergebe zum Beispiel meinem Header eine ID, die nur einmal vor kommt. Diese kann ich dann auch via CSS ansprechen.
<div id="header">Inhalt</div>
#header{ color: #ccc; }
Die gängigste Methode wird aber über Klassen sein. Damit kannst du mehrere Objekte ansprechen. Diese müssen auch nicht den gleichen HTML Tag besitzen, zum Beispiel ein div und ein Link.
<div class="beispiel">Inhalt</div> <a href="a" class="beispiel">Inhalt</div>
Über das CSS kannst du das via Punkt ansteuern.
.beispiel{ color: #ccc; }
Also zur Wiederholung:
Wenn du kein Vorzeichen hast, sprichst du ein HTML Element an, mit einem # eine ID und mit einem Punkt eine Klasse. Danach öffnest du mit Klammern {} und schreibst die CSS Eigenschaften rein. Also Position, Farbe usw.
Das sollte für den Beginn alles klären, aber wenn dich das Thema noch weiter interessiert:
Wenn ich viele Elemente auf einmal ansprechen will, zum Beispiel eine ganze Navigation, besteht diese aus Links. Ich schliesse diese Links aber in einem container ein.
<div id="navigation_container"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> <a href="#">Link 4</a> </div>
Theoretisch könnte ich auch jedem Link die gleiche Klasse geben und so alle auf einmal ansprechen, aber es gibt noch eine bessere Methode. Und zwar spreche ich alle Elemente im Container an. Dieser Container ist übrigends auch eindeutig, also einmalig und definiere ich deshalb über eine ID.
#navigation_container > a{ background-color: #ccc; }
Jetzt wird es vermutlich ein wenig verwirrend. Der Pfeil > bedeutet alle Elemente im Container. Danach folgt das a. Und wie du dich erinnerst spricht man damit HTML-Elemente an. Also alle a-Elemente (Links) im Container. So könnten unendlich viele Links folgen, ohne, dass du jeden definieren musst.
Mal angenommen du willst jeden Link abwechselnd machen. Mit Klassen wäre das so:
<div id="navigation_container"> <a class="Klasse1">Link 1</a> <a class="Klasse2">Link 2</a> <a class="Klasse1">Link 3</a> <a class="Klasse2">Link 4</a> <a class="Klasse1">Link 5</a> </div>
Die Klasse wechselt immer ab. Das ist aber eine unschöne Lösung. Was wenn du z.B. zwischen Link 2 und 3 noch einen zusätzlichen einfügen wollen würdest? Dann müsstest du alle folgenden Links abändern, weil die Reihenfolge zerstört wird.
Du kannst mit CSS auch abwechselnd Eigenschaften verteilen:
#navigation_container a:nth-child(even) { background: #CCC; } #navigation_container a:nth-child(odd) { background: #FFF; }
So kannst du die ganzen Klassen streichen und hast eine saubere Lösung.
Beitrag zuletzt geändert: 10.11.2014 13:23:18 von c143 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage