CSS - Grundlagen

Aus WikiSchool

Achtung: Klassenprojekt
Dieser Artikel wird zur Zeit von einer Schulklasse bearbeitet. Wir bitten darum, Korrekturen, Ergänzungen, Anfragen, Anregungen, Kritik und Kommentare nicht in den Artikel selbst, sondern nur auf der Diskussionsseite zu vermerken oder direkt an den jeweiligen Autor/die jeweilige Autorin zu richten (siehe die Artikel-Versionsgeschichte). Nach Abschluss des Projekts wird dieser Vermerk wieder entfernt. Weitere Informationen siehe Klassenprojekt.

[Bearbeiten] Info zum Projekt

Diese Kurzeinführung in CSS ist ein Teil des Klassenprojekts Einstieg ins Programmieren - digitale Mitschrift und wurde vorwiegend von SchülerInnen erstellt.

Inhaltsverzeichnis


[Bearbeiten] Allgemein

Ein Vorteil von CSS ist, dass man Formatierungen extern auslagern kann. Das heißt, man hat eine Datei (Casding Stylsheet Document) wo alle Formatierungen von allen Tags drin stehen. Diese Datei wird als .css abgespeichert.

Wie z.B.:

body {background-image: url(bilder/background1.jpg);

      font-family:Verdana, Helvetica, Arial, sans-serif;}	
h1 {font-weight:300; color:#0000FF;}

Ein CSS – Tag besteht aus:
Selektor: {Element: Wert} z.B. body {background-color:#FF0000}

Formateigenschaften intern definieren im „head“ oder auslagern. Intern definiert: 

<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 {color:red; font-size:48px; }
</style>
</head>

oder Formateigendschaften in einer ausgelagerten DAtei: 

<head>
<title>Externe Css Datei</title>
<link rel="stylesheet" type="text/css" href="xxxx.css" />
</head>


Kommentare innerhalb einer CSS – Sheet werden so angeschrieben: /* Anmerkung */

[Bearbeiten] Selektortypen

Es gibt:

  • Universalselektor: 
* {font–family: Arial;}
Bewirkt, dass alle Texte mit der Schriftart „Arial“ geschrieben werden.
  • Verschachtelte Tags: 
p i  {font-size: 16pt; font-weight: bold;}
  • Class 
.wichtig {background-color: #1155EE; font-weight: bold}
Class wird aufgerufen mit “span und div”
<span class=“wichtig“> ... </span>
  • Pseudoclass 
a: link {color: #00FF00; text-decoration: underline}
a: visited
a: hover
a: active
a: focus
Von „http://www.wikischool.de/wiki/CSS_-_Grundlagen“
Eingeloggt werbefrei.



Links

Originelle Geschenke und Geschenkideen online finden.
Persönliche Werkzeuge