<!DOCTYPE html>
<html lang="de-AT">
    <head>
        <meta charset="utf-8" />
        <title>CSS-Grundlagen</title>
        <link rel="stylesheet" type="text/css" href="./styles/hybrid.css" />
        <script src="./script/jquery-3.3.1.min.js"></script>
        <script src="./script/highlight.pack.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>

    <body>
        <h2>Kommentare in CSS</h2>
        <p>
            Kommentare in CSS werden mit "<b>/*</b>" begonnen und mit "<b>*/</b>" beendet.<br />
            Kommentare können sich über mehrere Zeilen erstrecken.<br />
            <br />
            Code-Beispiel:
        </p>
        <pre>
            <code>
                /* Dieses ist ein Einzeiliger Kommentar */

                /*
                    Und 
                    hier
                    ist 
                    ein
                    Mehrzeiliger Kommentar
                */
            </code>
        </pre>

        <h2>CSS - SYNTAX</h2>
        <p>
            <div class="syntax">
                <b>Selektor</b> {Eigenschaft: Wert; [Eigenschaft: Wert; ...]}<br />
            </div>
            <br />
            Werden mehrere Eigenschaftsdefinitionen angegeben, so können diese zur besseren Übersichtlichkeit auf mehrere Zeilen aufgeteilt werden.<br />
            <br />
            <div class="syntax">
                    <b>Selektor</b><br />
                    {<br />
                        &nbsp;&nbsp;&nbsp;Eigenschaft: Wert;<br />
                        &nbsp;&nbsp;&nbsp;Eigenschaft: Wert;<br />
                        &nbsp;&nbsp;&nbsp;...;<br />
                    }<br />
            </div>
            <br />
            Code-Beispiel:
        </p>
        <pre>
            <code>
                h1
                {
                    color: red;
                    background-color: grey;
                }
            </code>
        </pre>

        <h2>Einbinden von CSS</h2>
        CSS kann auf drei verschiedene Arten eingebunden werden:

        <h3>Inline Styles</h3>
        <p>
            Unter Inline Styles versteht man die direkte Einbindung der CSS-Eigenschaften in ein einzelnes HTML-Element.<br />
            <br />
            Code-Beispiel:
        </p>
        <pre>
            <code>
                &lt;h1 style="color: red; background-color: grey;"&gt;Überschrift&lt;/h1&gt;
            </code>
        </pre>

        <h3>Internal Style Sheet</h3>
        <p>
            Unter Internal Style Sheet versteht man die Einbindung der CSS-Eigenschaften im Style-Tag innerhalb des HEAD-Bereichs.<br />
            <br />
            Code-Beispiel:
        </p>
        <pre>
                <code>
                    &lt;html&gt;
                    &nbsp;&nbsp;&nbsp;&lt;head&gt;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;style&gt;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: red;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: grey;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt;
                    &nbsp;&nbsp;&nbsp;&lt;/head&gt;
                    &nbsp;&nbsp;&nbsp;&lt;body&gt;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Überschrift&lt;/h1&gt;
                    &nbsp;&nbsp;&nbsp;&lt;/body&gt;
                    &lt;/html&gt;
                </code>
        </pre>

        <h3>External Style Sheet</h3>
        <p>
            Bei der External Style Sheet werden die CSS-Eigenschaften nicht mehr direkt in den HEAD-Bereich des HTML-Dokuments geschrieben, sondern in eine eigene Datei. Diese Datei wird nun über das LINK-Tag in den HEAD-Bereich der HTML-Datei eingebunden.<br />
            <br />
            Code-Beispiel:
        </p>
        CSS-Datei (beispielstyle.css):<br />
        <pre>
            <code>
                h1
                {
                    color: red;
                    background-color: grey;
                }
            </code>
        </pre>
        HTML-Datei:
        <pre>
            <code>
                &lt;html&gt;
                &nbsp;&nbsp;&nbsp;&lt;head&gt;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;link rel="stylesheet" type="text/css" href="beispielstyle.css"&gt;
                &nbsp;&nbsp;&nbsp;&lt;/head&gt;
                &nbsp;&nbsp;&nbsp;&lt;body&gt;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Überschrift&lt;/h1&gt;
                &nbsp;&nbsp;&nbsp;&lt;/body&gt;
                &lt;/html&gt;
            </code>
        </pre>
    </body>

</html>
© 2018 by Robert Krenn Meine Home-Page , Alle Recht vorbehalten. Gedacht als mein persönliches Hilfsmittel im Rahmen meiner Ausbildung am BBRZ zum IT-Informatiker. Hilfsmittel: w3schools.com