Zuweisung gitl für ganzen Text

RedDrag · 23 Juli 2008

Hi an alle,

ich hab heute mit CSS angefangen und schon die erste Frage:
Mein HTML-Code sieht so aus:

.......
<body>
blablablablablablablablabla
blablablablablablablablabla
</body>
.......

und der CSS-Code so:

html, body
#Text1 {font:italic 1cm Helvetica; color:#FFCCDD}

Wieso wendet er den CSS-Code auch auf die zweite geschriebene Zeile an bzw. wie kann ich es so einstellen, dass er es nur für die erste Zeile anwendet, ohne, dass ich der zweiten Zeile extra nochwas zuweisen muss?

ich hoffe ihr könnt mir helfen

lg RD

prm · 23 Juli 2008

Weil du die Zuweisung für drei Elemente gemacht hast:
Nämlich für html, body und den #Text1.
Wenn du in den CSS-Angaben html und body rauslöschst, dann wird es so wie du dir es vorstellst.

Noch einige Tipps, die du als Anfänger beachten solltest:

Gewöhne dir bei den ID-Bezeichnungen Kleinschreibweise an. Kann sonst je nach Doctype zu Problemen führen.

Code:

<p id="..."

solltest du vermeiden.

Entweder ergibt sich die Formatierung von p automatisch durch Vererbung aus dem body oder du definierst für p die CSS-Angaben.
Denkbar ist auch, dass du eine CSS-Klasse definierst.
ID's dürfen auf einer Seite nur einmal vorkommen. Klassen dagegen mehrmals.

Zur Schriftgröße:
Hier solltest du nicht cm, sondern eine relative Schriftgröße wie z.B. "em" verwenden. Das hat u.a. Vorteile im IE 6, der absolute Größen wie cm nicht skalieren kann, wenn der Benutzer die Schrift größer oder kleiner stellen will.

Auch für dich mein Einsteiger-Tipp:
Friedels Homepage - Anleitungen für HTML-Autoren und mehr

RedDrag · 23 Juli 2008

Das mit dem kleinschreiben wusste ich schon lange, aber trotzdem danke.
Das mit der Schriftgröße wusste ich auch schon nur ich hab den ganzen font Bereich von der Webseite, wo ich das lerne, kopiert, um nicht extra alles einzutippen.

Entweder ergibt sich die Formatierung von p automatisch durch Vererbung aus dem body oder du definierst für p die CSS-Angaben.
Denkbar ist auch, dass du eine CSS-Klasse definierst.
ID's dürfen auf einer Seite nur einmal vorkommen. Klassen dagegen mehrmals.

kannst du das bitte nochmal erklären das verstehe ich noch nicht ganz:?.

prm · 24 Juli 2008

Die meisten Angaben, die du dem body zuweist, vererben sich auf die nachfolgenden Elemente. Wenn du also im Body eine Schrift definierst, dann schlägt das automaitsch auf alle nachfolgenden Elemente, so auf p durch.

Beispiel:

Code:

body {
font-family: Verdana;
font-size: 12px;
color: #000099;
}

Somit ist die Schrift auf deiner gesamten HP immer in Verdana, 12px groß und blau. Wenn du im HTML-Teil also schreibst:

Code:

<p>Dies ist ein normaler Absatz</p>

wird eben die Schrift von p auch blau dargestellt und du musst nicht gesondert auf einen ID verweisen.

Angemommen, du willst jetzt ausnahmsweise einige Absätze in rot und fett schreiben, weil du einen Text besonders hervorheben willst.
Dafür definierst du eine Klasse, die mehrmals im HTML-Teil aufgerufen werden kann:

Code:

.rotfett {
color: #0000ff;
font-weight: bold;
}

Du musst dabei lediglich die Angaben ändern oder ergänzen, die von der Generaldefinition im body abweichen sollen. Hier also Schriftfarbe und Schriftgewicht. Du könntest ebenfalls noch eine größere Schrift, einen Rahmen, einen Hintergrund oder ähnliches hier angeben.

Im HTML-Teil sieht das dann so aus:

Code:

<p>In diesem Absatz steht normaler Text</p>
<p class="rotfett">In diesem Absatz steht wichtiger Text.
Er ist deshalb rot und fett. Ursache: Beim Element p wird noch die Klasse "rotfett" aufgerufen</p>
<p>Jetzt folgt wieder normaler Text ohne Klassenaufruf.</p>

Das ganze funktioniert auch mit einzelnen Wörtern, indem du statt den -Tag verwendest.
Einzelheiten hierzu siehe auch Friedels Homepage - Anleitungen für HTML-Autoren und mehr

Hättest du generell lieber schwarze statt blaue Schrift, dann ändere einfach den Farbwert im body.

ID's sind sogenannte "idendifier". Sie dürfen auf einer Seite nur einmal vorkommen. In der Regel sind das übergeordnete Div's in den sich dann weitere Elemente wie Textabsätze befinden. Wenn du z.B. ein dreispaltiges Layout hast, dann vermwendet man üblicherweise für jede Spalte einen eigenen Div, z.B. #links, #mitte #rechts. Per CSS wird dann definiert wie diese Div's positioniert und angeordnet werden, welche Hintergrundfarbe, Schriftfarbe usw. sie haben. Definierst du für solch einen Div als Schriftfarbe grün, dann ist der Text in allen Absäzten grün, obwohl im body blau steht. Insofern haben die Angaben in einer untergeordneten Ebene Vorrang vor den Angaben der übergeordneten Ebene.

Efchen · 24 Juli 2008

prm schrieb:
Weil du die Zuweisung für drei Elemente gemacht hast:
Nämlich für html, body und den #Text1.

Da steht aber doch was anderes: "html, body #Text1".
Das gilt für das Element html (und somit für alle untergeordneten Elemente, deswegen wird alles gleich) und für alle Elemente mit der ID "Text1", die unterhalb des body liegen. Es sind also nur Zuweisungen für zwei Elemente.
Oder hat das Newline die selbe Bedeutung wie ein Komma?

Gewöhne dir bei den ID-Bezeichnungen Kleinschreibweise an. Kann sonst je nach Doctype zu Problemen führen.

Hast Du dafür eine Quelle? Ich schreibe IDs und Klassennamen oft mit Klein- und Großbuchstaben, habe dabei nie Probleme gehabt.

Code:
Code:

<p id="..."

solltest du vermeiden.

Warum? Da spricht doch gar nichts dagegen. Klar, eine ID kann nur einmal auf einer Seite vorkommen, aber wenn das eingehalten wird, ist dieser Code doch einwandfrei.

Code:

<p id="footer">(C) blabla</p>

wäre eine passende Anwendung.
Kann natürlich nur für diesen einen Textabsatz gelten.

Gruß,
-Efchen

prm · 24 Juli 2008

Zitat:
Gewöhne dir bei den ID-Bezeichnungen Kleinschreibweise an. Kann sonst je nach Doctype zu Problemen führen.
Hast Du dafür eine Quelle? Ich schreibe IDs und Klassennamen oft mit Klein- und Großbuchstaben, habe dabei nie Probleme gehabt.

Ich bin mir nicht sicher, ob das auch für die ID-Bezeichnungen gilt. Aber danach gehe ich davon aus wenn XHTML verwendet wird. Müsstest du konkret mal testen/validieren: SELFHTML: HTML/XHTML / XHTML und HTML / Unterschiede zwischen XHTML und HTML

Warum? Da spricht doch gar nichts dagegen. Klar, eine ID kann nur einmal auf einer Seite vorkommen, aber wenn das eingehalten wird, ist dieser Code doch einwandfrei.

Code:
(C) blabla
wäre eine passende Anwendung.
Kann natürlich nur für diesen einen Textabsatz gelten.

Das geht natürlich und es spricht in der Tat nichts dagegen, wenn der ID einmalig bleibt und man dies auch berücksichtigt. Ich halte es allerdings für schlecht, wenn sich Anfänger diese Schreibweise angewöhnen. Denn gewöhnlich kommt ein p-Element ja mehrmals innerhalb einer Seite vor, so dass die Klasse m.E. die bessere Wahl wäre. Selbst wenn sie nur einmal angewandt wird. Aber es gibt auch bei CSS oft mehrere Wege um ans Ziel zu kommen.

Efchen · 24 Juli 2008

prm schrieb:
Ich bin mir nicht sicher, ob das auch für die ID-Bezeichnungen gilt.

Wenn Du Dich damit (wie auch der Link zeigt) auf die allgemeine Kleinschreibung in XHTML beziehst, dann kann ich Dir sagen, dass sich das nicht auf selbstgewählte ID/Klassennamen bezieht. Wie in der von Dir verlinkten Seite ja auch steht:

Für XHTML wurde festgelegt, dass alle Elementnamen und Attributnamen klein geschrieben werden. Das Gleiche gilt auch für die festen Wertzuweisungen wie center.

Also nur Tags, deren Attribute und feste Wertzuweisungen, hier ist wohl sowas wie align="center" gemeint, wobei align="CENTER" nicht erlaubt ist.
Meine Seiten mit Großbuchstaben in ID/Klassennamen sind valide.

Aber es gibt auch bei CSS oft mehrere Wege um ans Ziel zu kommen.

Okay, einverstanden. Der Satz ist gut und ich lass das mal so stehen :-)

RedDrag · 26 Juli 2008

okey und wie mach ich es, dass die Zuweisung von dem Body nicht für alles gilt?:

body {background-image:url("hpHintergrund2.jpg");}
h1 {text-align:center;}
h2 {text-align:center;}
.div1 {background-image:url("xpertvision1.jpg"); margin:0px; padding:10px;}
.div2 {background-image:url("xpertvision2.jpg"); margin:30px; padding:10px;}

prm · 26 Juli 2008

Dann musst du das, was von den body-Angaben nicht gelten soll in den entsprechenden Elementen anders definieren.
Angenommen du hast im body eine Schriftgröße von 12px und willst für die Navi 15px, dann gibst du eben für die Navi diese 15px an.

RedDrag · 26 Juli 2008

ja hab ich hier beim background-image für die Klassen ja auch gemacht, aber zeigt trotzdem nur den Hintergrund von Body an.

body {background-image:url("hpHintergrund2.jpg");}
h1 {text-align:center;}
h2 {text-align:center;}
.div1 {background-image:url("xpertvision1.jpg"); margin:0px; padding:10px;}
.div2 {background-image:url("xpertvision2.jpg"); margin:30px; padding:10px;}

prm · 26 Juli 2008

Hast du die Bilder hochgeladen, stimmt der Pfad, ist die Dateibezeichnung korrekt, Groß-/Kleinschreibung identisch?

Gibt es einen Link zu deiner HP? Wäre besser, wenn man sich das im Originalzusammenhang ansehen könnte.

RedDrag · 26 Juli 2008

Ich habe gerade gemerkt, dass ich ein Blank vergessen habe:lol:.
Sorry für den Post.

Zuweisung gitl für ganzen Text

RedDrag

Guest

prm

Aktives Mitglied

RedDrag

Guest

prm

Aktives Mitglied

Efchen

Guest

prm

Aktives Mitglied

Efchen

Guest

RedDrag

Guest

prm

Aktives Mitglied

RedDrag

Guest

prm

Aktives Mitglied

RedDrag

Guest

Neueste Beiträge