TIPS
by
NETtMAN

wie ist die Grammatik von CSS beschaffen ?


 
 
 
 
 
 
 
 
 Weil CSS in den Vereinigten Staaten Amerikas entstand, wird grundsätzlich die gesamte Grammatik in amerikanischer Sprache genutzt. CSS ist eines von vielen HTML-Elementen und dient zum Einstellen der Eigenschaften aller anderen HTML-Elemente. Es kann auf 3 verschiedene Arten eingefügt werden.

  • innerhalb des einzustellenden Elementes als style-Attribut. Beispiel :
    <a href="#" style="color:green;"> green me !</a>
  • als Referenz (im HEAD-Bereich des HTML) auf eine externe Datei mit den CSS Anweisungen. Beispiel :
    <link rel="stylesheet" href="pfad/dateiname.suffix" type="text/css" />
  • innerhalb des style-TAG´s. Beispiel :
    <style>
    CSS-Anweisungen
    </style>


  • CSS-Anweisungen bestehen immer aus 3 Teilen :

  • Die Elementbezeichnung nebst Spezifikation (Einschränkung) insgesamt genannt : SELEKTOR
  • Eine der Eigenschaften
  • Die Wertangabe für diese Eigenschaft


  • Beispiel :
    span.nurdieser#kennung{color:red;}

    "span" ist ein HTML-Element. ".nurdieser" ist eine erfundene Klasse. "#kennung" ist eine erfundene ID. Die öffnende geschwungene Klammer leitet die einzelnen Definitionen ein (es können beliebig viele gesetzt werden). "color:" ist eine von vielen möglichen Eigenschaften. Jede Eigenschaft muss mit einem Doppelpunkt enden. "red;" ist ein Wert für die Eigenschaft "color". Das Semikolon hinter dem Wert zeigt lediglich an, das die Wertvergabe für diese Eigenschaft hier endet und eine weitere Definition direkt dahinter folgen kann. Erst die schließende geschwunge Klammer signalisiert, das hier die Änderungen für dieses Element "span" endet. Direkt darauf folgend können beliebig viele weitere Elemente, nach diesem Schema, beschrieben werden.


     
     
     
     
     
     
     
     
     Weil aber eine derartige Folge von CSS-Anweisungen kein gut leserliches Bild ergibt, machen sich die scripter zunutze, das Absätze, Zeilenumbrüche, Tabulatoren und Leerzeichen keine Bedeutung für den CODE haben. Diese können also, zur besseren Lesbarkeit, den Text gliedern.

    Beispiel :
    span.nurdieser#kennung
    {
    color:red;
    width:50%;
    height:300px;
    }
    p.nurdieser#kennung
    {
    color:red;
    width:50%;
    height:300px;
    }
    div.nurdieser#kennung
    {
    color:red;
    width:50%;
    height:300px;
    }

    Dies ist nur ein Vorschlag. Einrückungen ergeben möglicherweise Neben-Information zu Bezügen. Vor, zwischen und hinter allen Elementen, Einschränkungen, Attributen, Trennzeichen ( ":" ";" "{" "}") und Wertangaben können ebenfalls Zeilenumbrüche, Absätze, Tabulatoren und Leerzeichen gesetzt werden. Allein die Wertangaben müssen direkt mit den jeweiligen Einheiten verbunden sein( 50% statt 50 % ).


     
     
     
     
     
     
     
     
     Als globale Rahmenbedingungen für das CSS kann mit Hilfe von @Regeln (At-Regeln) einer der folgenden Körper angegeben werden:

    @media, @font-face, @page und @import

    "media" kann zusätzlich zum rel-link im HEAD ( s. Beispiel oben ) optional angefügt sein. Es legt fest, auf welcher Art Medium dieses CSS wirken soll. Tatsächlich wirkt es dann nicht mehr auf die übrigen Medienarten, als da wären: screen, print , handheld (kennen leider nicht alle Browser - bedeutet : handy´s), braille (3D-Druck Blindenschrift), embossed (3D-Druck Blindenschrift), projection (Beamer), tty (Textverarbeitung), tv (Fernsehen), aural (akkustisch), all. Folglich könnte eine, nur für den Drucker bestimmte, CSS-Datei so eingebunden werden:

    <link rel="stylesheet" href="pfad/dateiname.suffix" type="text/css" media="print" />
    oder
    <link rel="stylesheet" href="pfad/dateiname.suffix" type="text/css" media="screen and (max-width : 680px)" />

    Der "@media" Rahmen lässt sich also zusätzlich einschränken und kann auch mehrfach eingesetzt werden um verschiedene Geräte zu berücksichtigen. mit der Bedingung "and" wird festgelegt, das dieses CSS nur auf Geräten wirkt, wenn die in Klammern angegebene Eigenschaft nebst Wert zutrifft. Folgende Eigenschaften können ausserdem mit Wertangaben versehen werden :

    @media screen and (min-width : 123px)
    @media screen and (width : 123px)
    @media screen and (max-height : 123px)
    @media screen and (min-height : 123px)
    @media screen and (height : 123px)
    @media screen and (min-width: 450px) and (max-width: 950px)
    @media screen and (device-width : 123px)
    @media screen and (min-device-width : 123px)
    @media screen and (max:device-width : 123px)
    @media screen and (device-height : 123px)
    @media screen and (min-device-height : 123px)
    @media screen and (max-device-height : 123px)
    @media screen and (color : 24)
    @media screen and (min-color : 24)
    @media screen and (max-color : 24)
    @media screen and (scan)
    @media screen and (grid)
    ... um nur die wichtigsten zu nennen. Möglich sind auch Angaben, wie min- oder max- gefolgt von : aspect-ratio, device-aspect-ratio, monochrom oder resolution. Und alle diese Bedingungen können durch "and" miteinander kombiniert werden.

    Innerhalb des style-TAG´s kann eine solche AT-Regel einen Teil-Bereich einnehmen. Sie wird dann wie folgt eingefügt :
    @media screen and (min-width : 123px)
    {
    Hier kommen jetzt die gewöhnlichen CSS-Anweisungen rein !
    }

    Es wird ein zusätzlicher Behälter durch das nochmalige Einbinden innerhalb geschweifter Klammern gebildet.

    Die At-Regel für "media handheld" ist heutzutage relativ wichtig, weil viele Leute meist das Handy zum surfen nutzen. Da sie kaum in gängigen Browsern unterstützt wird, ist anzuraten, dem HTML-Dokument im HEAD-Bereich folgende Zeile hinzuzufügen :

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" />

    Dadurch wird dem Browser mitgeteilt, das eine speziell skalierte Webseite präsentiert werden soll, welche zudem etwas anders mit LINK´s umgeht. Obendrein sollte ein "@media screen" diverse mögliche Größenverhältnisse abgleichen. Handy´s haben zumeist weniger als 800px Bildschirmbreite.

    Die nächste At-Regel lautet :
    @font-face
    {
    font-family: 'Clearblockcircular-3DFX';
    src: url('sets/Clearblockcircular-3DFX.eot?#iefix') format('embedded-opentype'), url('sets/Clearblockcircular-3DFX.woff') format('woff'), url('sets/Clearblockcircular-3DFX.ttf') format('truetype'), url('sets/Clearblockcircular-3DFX.svg#Clearblockcircular-3DFX') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    hier gleich Mal als vollwertiges Gebilde, wie es direkt in den CSS-Fluss eingefügt werden kann. Dazu muss es allerdings auch die entsprechenden Dateien auf dem Server geben - in denen das Aussehen des Fonts vermerkt ist. Und :

    Der Font wird lediglich geladen und steht somit zur Verfügung. Damit er in bestimmten Elementen auch angezeigt wird, muss zusätzlich dem Element die entsprechende Eigenschaft zugewiesen werden. Wenn dies für das "body" Element vorgenommen wird, so sind auch alle anderen darin befindlichen Elemente gemeint. "body" ist der tragende Behälter für die meisten anderen Elemente und vererbt einige bei ihm eingestellte Eigenschaften.

    Beispiel :
    body {font-family: 'Clearblockcircular-3DFX';}

    Eine weitere AT-Regel lautet :
    @page
    {
    size: portrait;
    }

    Anstelle von "size: portrait;" kann auch "size: landscape;" oder "margin: 10px;" oder "margin[-top][-left][-right][-bottom]: 10px;" zum Einstellen der Seiten-Ränder angegeben werden. Die Angaben in den eckigen Klammern sind optional einsetzbar.

    Die At-Page-Regel steuert die Darstellungsweise auf dem Drucker. Die Seitenränder können weiterhin vom Anwender im Menü : "Drucken"des Browsers verändert werden.

    Bleibt noch die AT-Regel : @import url('pfad/dateiname.suffix');

    Mit dieser Regel können Dateien mit Style-Anweisungen eingefügt werden. Genaugenommen entspricht dies dem rel-link aus dem HEAD-Bereich des HTML ( s. Beispiel oben ). Ebenso wie in dem rel-link kann das Medium, auf dem dieses Style-Sheet wirken soll, angegeben werden.

    @import url('pfad/dateiname.suffix') print;

    Dieser Import ist also nur für Drucker gültig. Auf dem Bildschirm sind die eingesetzten Style-Anweisungen nicht wirksam. Folgender Import wäre nur auf dem Bildschirm wirksam :

    @import url('pfad/dateiname.suffix') screen;

    Ideen, Tips und Andachten für ein optimales CSS ( einschließlich SEO )




     
     
     
     
     
     
     
     
     CSS ist nicht immer einfach zu erstellen. Je nach Ihren Fähigkeiten und Ihrer Erfahrung, kann CSS-scripting manchmal zu einem Alptraum werden, vor allem, wenn Sie nicht sicher sind, welche Selektoren bei welchen Elementen tatsächlich angewandt werden.

    Weiter unten sind einige der nützlichsten CSS Tricks, Tipps, Ideen, Methoden, Techniken und Kennzeichnungslösungen aufgelistet. Es werden auch einige grundlegende Techniken, die Sie wahrscheinlich in jedem Entwicklungs-Projekt nutzen können, aber schwer zu finden sind, vorgestellt. Es ist eine Library, ein Handbuch, absichtlich online - damit es jederzeit leicht zu Rate gezogen werden kann.

    Programmierer, Designer, Entwickler, Informatiker und Laien wissen es wirklich sehr zu schätzen. Noch dazu gibt es die einfache Möglichkeit, den Fundus zu erweitern durch Anbringung von Kommentaren jedweden Seitenbesuchers.

    Grundsätzlich ist es ratsam, vor dem Erstellen von CSS-Definitionen, das gesamte HTML-Gerüst einer neuen Website zuerst anzufertigen. Erst danach wirken Sie auf die gegebenen Elemente mit Hilfe von CSS ein. Das hat sich als erfolgreichste Methode herausgestellt. Und dieses CSS könnte mit einem von Ihnen erstelltem "master.css" eingeleitet werden. Dieses "master.css" ist eine eigenständige Datei mit den CSS-Anweisungen, die für alle HTML-Elemente die optimalen DEFAULT-Einstellungen festlegen. Sie wissen ja : Hernach folgende andere CSS-Anweisungen überschreiben einfach diese Grundeinstellungen. Die optimalen DEFAULT-Einstellungen sorgen sicher dafür, das ihr CSS sich auf alle Browser gleich auswirkt. Das ist nämlich leider nicht automatisch so. Die Browser haben ohnehin eine Vielzahl DEFAULT-Werte für die verschiedenen Elemente gesetzt, nicht jedoch Browser-A genau so wie Browser-B. Deshalb passiert es manchmal, das eine Webseite bei Herrn Meyer mit Browser-A anders aussieht als bei Frau Krüger mit Browser-B. Ein "master.css" kann diese Differenzen ausgleichen. Es kann sogar einige Browser-Bug´s bereinigen. So binden Sie es ein :

    @import url ("pfad/master.css");
    Elemente { Eigenschaften : Werte ; }
    u.s.w.

    Halten Sie sich eine Bibliothek von hilfreichen CSS-Klassen. Klassen können einem Element mehrfach zugewiesen werden, z. B. :

    class="links_oben links_unten rand_klein rahmen_rot rund"

    Dies sind fünf verschiedene Klassen-Zuweisungen auf einmal. Sie brauchen nur durch ein Leerzeichen voneinander getrennt werden. Daher kommt es auch, das Klassen-Bezeichnungen keine Leerzeichen enthalten dürfen, weil ein Leerzeichen das Ende der Klassenbezeichnung signalisiert.

    Die Klassen könnten so definiert sein :

    .links_oben {top:0px; left:0px;}
    .links_unten {bottom:0px; left:0px;}
    .rand_klein {margin:5px;}
    .rahmen_rot {border:1px solid yellow;}
    .rund {border-radius: 20%;}

    Dieses Reduzieren auf wenige Eigenschaften wird Ihnen viel Tipparbeit ersparen und : da diese Klassen digital in einer Bibliothek versammelt sind, brauchen Sie fast gar nicht tippen, sondern können die jeweils benötigten mittels Copy & Paste einfügen.

    Noch schlauer ist es, die Style-Sheets in Absätze einzuteilen : Globale Stile - (Körper, Absätze, Listen, etc.), Kopfzeile, Seitenstruktur, Überschriften, Textstile, Navigation, Formulare, Kommentare, Fusszeile, Extras. Unterteilen Sie solche Bereiche mit, zum Glück, auffälligen Kommentaren. Wie kann man kommentieren ?

    /* KOMMENTARTEXT */

    Als Kommentartext können alle Zeichen genutzt werden, so das sich Markierungsartige Einträge ergeben können. Z. B. so :

    /* -------------((((((((( KOPFBEREICH )))))))))--------------- */

    Solche Unterteilungen in Bereiche werden nicht nur im CSS der aktuell zu entwickelnden Webseite, sondern auch in Ihrer Bibliothek gleichermaßen für Ordnung sorgen. Ein sortieren nach Alphabet erleichtert nochmals das Wieder-Finden und spart somit Zeit.

    Webseiten werden nie in einem Stück "Zeit" und leider auch nicht in "kurzer Zeit" erstellt. Daher ist eine Aufteilung des Scriptes in Bereiche mehrfach sinnvoll und nützlich. Jedes Mal, wenn sie weiter an dem Script arbeiten, brauchen Sie nur wenig Zeit, um sich zurecht zu finden. Webseiten müssen gewartet und aktualisiert werden. Auch dann finden Sie sich schnell zurecht.

    Schützen Sie Ihr Dokument vor struktureller Aufgeblasenheit. Nicht zu viele DIV´s einsetzen. Oft wird von anderen Entwicklern geraten DIV´s in sogenannte WRAPPER einzubinden, um bestimmte Verhaltensweisen hierin zu vereinen. WRAPPER sind weitere DIV´s (Behälter) innerhalb dessen eine Vielzahl von Unter-DIV´s eingebettet sein können. Auch eine riesenmenge von Tabellen und Tabellenzellen werden gern empfohlen. Verzichten Sie darauf und überlegen Sie sich lieber eine Lösung mit nur CSS. Das ist fast immer möglich. Man muss es nur geschickt formulieren.

    WRAPPER und andere Einbettungen gehen zu Lasten der Performance. Manchmal sogar zu Lasten des SEO´s. Wir erreichen lieber das Gegenteil.

    Ebenfalls zu Lasten des SEO´s gehören "versteckte Elemente". Diese wurden mit einem negativen Wert weit nach links oder weit nach oben, also außerhalb des Bildschirmbereiches, oder mit Unsichtbarkeit belegt. Suchmaschinen merken sowas und bewerten das meist negativ. Andererseits kann man dann kein Element einblenden, welches vorher noch nicht zu sehen war. Macht doch nichts. Dann plaziert man es halt am untersten Rand der Webseite und springt auf Wunsch dorthin mit einem LINK der auf einen Anker zielt : "#unsichtbar". Der Browser wird angewiesen, die Seite bis zum benannten "#" Zeichen zu scrollen.

    a [href ^ = "http"]:not([href * = "meineseite.de"])::after {content: "\2197"; }

    Verwenden Sie diesen Eintrag im CSS um LINK´s zu externen Seiten mit einem Pfeil nach Nord-Osten zu kennzeichnen. Das ist eine einfache Möglichkeit, Ihre Seitenbesucher schon vor dem Klick zu informieren, ob dieser Link auf der aktuellen Seite geöffnet wird oder zu einem fremdem Internet-Auftritt führt. Natürlich muss "meineseite.de" mit ihrer URL ersetzt werden.

    Das sollte nicht geschehen.

    Sehen Sie nun was Sie davon haben !
    14.6.16 07:26
     


    bisher 0 Kommentar(e)     TrackBack-URL

    Name:
    Email:
    Website:
    E-Mail bei weiteren Kommentaren
    Informationen speichern (Cookie)



     Smileys einfügen
    Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

     responsive menu
     rauf
      runter