HTML => Verwendung von HTML mit CSS

Einführung

CSS stellt HTML-Elementen auf der Seite Stile zur Verfügung. Beim Inline-Styling wird das style-Attribut in Tags verwendet und es wird dringend davon abgeraten. Interne Stylesheets verwenden das <style> -Tag und werden zum Festlegen von Regeln für gerichtete Abschnitte der Seite verwendet. Externe Stylesheets können über ein <link> -Tag verwendet werden, das eine externe CSS-Datei verwendet und die Regeln auf das Dokument anwendet. In diesem Thema wird die Verwendung aller drei Anbaumethoden behandelt.

Syntax

<link rel="stylesheet" type="text/css" href="stylesheet.css">
<style></style>

Externes Stylesheet verwenden

Verwenden Sie das link Attribut im head des Dokuments:

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

Sie können auch Stylesheets verwenden, die von Websites über ein Content Delivery Network oder kurz CDN bereitgestellt werden. (zum Beispiel Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Im Allgemeinen finden Sie CDN-Unterstützung für ein Framework auf seiner Website.

Internes Stylesheet

Sie können CSS-Elemente auch intern mit dem <style> -Tag einfügen:

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

Mehrere interne Stylesheets können ebenfalls in ein Programm aufgenommen werden.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Inline-Stil

Sie können ein bestimmtes Element mit dem style Attribut formatieren:

<span style="color: red">This text will appear in red.</span>

Hinweis: Versuchen Sie, dies zu vermeiden - CSS hat zum Ziel, Inhalte von der Präsentation zu trennen.

Mehrere Stylesheets

Es ist möglich, mehrere Stylesheets zu laden:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Beachten Sie, dass spätere Dateien und Deklarationen frühere überschreiben . Wenn general.css enthält:

body {
    background-color: red;
}

und specific.css enthält:

body { 
    background-color: blue;
}

Wenn beide verwendet werden, ist der Hintergrund des Dokuments blau.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

HTML
Verwendung von HTML mit CSS

Suche…