CSS: CSS einbinden

15. Mai 2016 von | Kategorie(n): Programmierung
Schlagwörter: // // //

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

<img src="beispielBild.png" style="border-radius: 12px;" />

2. CSS-Block

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

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:

img {
    border-radius: 12px;
}

HTML-Datei:

<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css" /> 
    </head>
    <body>
       <img src="beispielBild.png" />
    </body>
</html>

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)
Diesen Post teilen:
Facebooktwittergoogle_plusredditpinterestlinkedinmail

Schreibe einen Kommentar

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

19 + = 25