HTML Hilfe bei Stylesheet (.css)?

... komplette Frage anzeigen

2 Antworten

Ok, ich helfe dir mal ;)

Um den CSS Code zu schreiben, den du als Aufgabe hast, sieht das ganze wie folgt aus:

html, body {
  background-color: #CCC; /*einfarbig reichen 3 Angaben*/
}
table {
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  font-family: "Courier New", Courier, mono;
  font-size: 14pt; /* hier lieber PX, REM oder EM nehmen. Alles andere wird von browser zu browser unterschiedlich interpretiert */
 font-weight: bold; /* renundant - headlines sind immer fett... */
}
ol {
  color: #009900;
  background-color: rgb(170,170,170);
}
ul {
  color: #990000;
}

Um das ganze einzubinden nutzt folgendes Snippet:

<link rel="stylesheet" href="Formatierungen.css" />

Ich schreibe dir noch eine Erklärung in den Kommentar und ein paar kleine Anmerkungen um deine Note zu verbessern ;)

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von weed9r
16.03.2016, 17:07

Stylesheets bindest du in deine Index.html in den Head (<head></head>) ein. und zwar mit folgenden Syntax: 

<link rel="stylesheet" href="path/to/file.css" />

Css ist recht einfach aufgebaut. Das Element, dessen Style du ändern wirst schreibst du als erstes und dann eine klammer:

body {
  attribute: value;
}

Möchtest du mehrere Elemente miteinander verbinden, trennst du sie durch ein Komma:

span, div, p {
  color: red;
}

Willst du es richtig machen, musst du jedem HTML-Element (richtige Bezeichnung ist DOM-Element) eine klasse geben.
Der nachfolgende Code zeigt dir, wie du einem Div eine klasse gibst und diese stylest:

<!-- html -->
<div class="myDiv"></div>
/*css*/
.myDiv {
  attribute: value;
}

Hast du zwei Klassen verbindest du diese wie folgt. Beachte hier, dass kein Leerzeichen zwischen den Klassen ist:

.myClass.myModifier { }
<div class="myClass myModifier"></div>
0
Kommentar von Siebot
16.03.2016, 17:09

Vielen Dank. Sehr nett von die. Ich probier es gleich mal aus. Klingt alles sehr kompliziert. Melde mich eventuell wieder bei dir ;). Vielen Dank
Lg

0
Kommentar von weed9r
16.03.2016, 17:16

Übrigens sind mir ein paar kleine Fehler in dem Markup deiner Index.html aufgefallen.

  1. Es fehlt die HTML5 Deklaration am Anfang(wirklich vor allem anderen): <DOCTYPE html>. Hier bedarf es keines closing-tags
  2. Tabellen nutzt man wirklich nur noch als Tabellen. Besser sind Divs mit Float: left; oder display: table/table-row/table-cell;
  3. Höhen/Breitenangaben macht man nur noch mit CSS. Sowas gehört in kein valides HTML5 Markup. Auch Align löst man mittels css (display: inline-block; float: right;)
  4. Die Darstellung der Listpunkte lässt sich auch mittels CSS lösen. list-style-type ist da das zauberwort
  5. Headlines (h1,h2,h3,h4,h5,h6) Gehören nicht in eine OL/UL. Sie müssen Davor stehen. Innerhalb von ol/ul gibt es nur li. Denn ol/ul definieren sortierte/unsortierte listen und li definiert ein Listitem.
  6. <b></b> nutzt man auch nicht mehr. man macht <span class="bold">text</span> und im CSS span.bold { font-size: bold; }
  7. ein Link mit dem Verweis auf eine E-Mail hat ein prefix mit mailto:info@html.at - dann öffnet sich gleich das E-Mail Programm

Diese Punkte die ich hier geschrieben habe sind Standards die nach W3C festgelegt wurden und an die sich jeder Webentwickler halten sollte, da es Webseiten kleiner, performanter und lesbarer macht. Außerdem hilft es beim SearchEngineOptimizing

Lg weed9r

0
Kommentar von Siebot
16.03.2016, 17:17

Ok, könntest du bitte den aller ersten Schritt noch einmal beschreiben. Das war jetzt ein bisschen zu viel.
Wo muss ich das ganze hineinschreiben?
Danke dir
Lg

0

Grundlegendes zu CSS:

Klasse/class: .{NAME}
ID: #{NAME}

Klassenbeispiel:
.klasse { color: red; background: gray; ... }
ID Beispiel:
#ID { color: red; background: gray; ... }

Die Klasse reicht in CSS eigentlich aus, wofür die ID gebraucht wird, bin ich mir selber noch unsicher.

Einbinden im Head:

<link rel="stylesheet" href="style.css">
Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Sarkophator
16.03.2016, 18:25

> wofür die ID gebraucht wird, bin ich mir selber noch unsicher.

IDs sind für die eindeutige Identifikation zuständig, das heißt also dass es eine ID nur einmal in einem HTML-Dokument geben darf. Alles, was mehrere Elemente übergreifen soll, wird über Klassen gelöst.

0

Was möchtest Du wissen?