CSS: CSS einbinden

Vorweg direkt: Nach dem letzten längeren Tutorial kommt jetzt ein kürzeres geflogen 😉
Es gibt 3 verschiedene Arten, CSS einzubinden. Die stelle ich dir im folgenden vor. Zwei Möglichkeiten kennst du sogar schon…

1. Direkt am HTML-Objekt

<br />
&lt;img src=&quot;beispielBild.png&quot; style=&quot;border-radius: 12px;&quot; /&gt;<br />

2. CSS-Block

<br />
&lt;html&gt;<br />
    &lt;head&gt;<br />
        &lt;style type=&quot;text/css&quot;&gt;<br />
        img {<br />
            border-radius: 12px;<br />
        }<br />
        &lt;/style&gt;<br />
    &lt;/head&gt;<br />
    &lt;body&gt;<br />
       &lt;img src=&quot;beispielBild.png&quot; /&gt;<br />
    &lt;/body&gt;<br />
&lt;/html&gt;<br />

Der CSS-Block wird in den Kopf des Dokuments geschrieben. Der Inhalt funktioniert, wie bereits beschrieben (⇒ CSS: Wie funktioniert es?).

3. CSS-Datei

In der Datei befindet sich nichts anderes als der Inhalt des CSS-Blocks. 😉 Allerdings muss die Datei im head eingebunden werden und die Endung css haben (z.B. style.css).

CSS-Datei:

<br />
img {<br />
    border-radius: 12px;<br />
}<br />

HTML-Datei:

<br />
&lt;html&gt;<br />
    &lt;head&gt;<br />
        &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; type=&quot;text/css&quot; /&gt;<br />
    &lt;/head&gt;<br />
    &lt;body&gt;<br />
       &lt;img src=&quot;beispielBild.png&quot; /&gt;<br />
    &lt;/body&gt;<br />
&lt;/html&gt;<br />

Das link-Element bindet die CSS-Datei ein. Dabei müssen wir mit dem rel-Attribut auch sagen: Binde einen Stylesheet ein. href kennst du schon von den Links in HTML. Hier gelten dieselben Regeln. Mit type wird nun noch angekündigt, welche Sprache du verwendest (hier CSS :D).

 

I’m out… 😉

<Tim Poerschke />

Was denkst du über diesen Post?
  • Gut (0)
  • Hilfreich (0)
  • Nicht gut (0)
  • Lustig 😀 (0)

von | Kategorie: Programmierung
Schlagwörter: // // //

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

7 + 1 =