20 nützliche CSS-Tipps für Anfänger

In früheren Zeiten waren wir bei der Aktualisierung der Website sehr stark von Entwicklern und Programmierern abhängig, auch wenn sie nur eine untergeordnete ist. Dank des CSS und seiner Flexibilität können Stile unabhängig von den Codes extrahiert werden. Mit einigen Grundkenntnissen in CSS kann auch ein Neuling den Stil einer Website leicht ändern.

Egal, ob Sie sich für CSS interessieren, um Ihre eigene Website zu erstellen, oder einfach nur das Aussehen und Gefühl eines Blogs optimieren - es ist immer gut, mit den Grundlagen zu beginnen, um eine stärkere Grundlage zu erhalten. Werfen wir einen Blick auf einige CSS-Tipps Wir dachten, es könnte nützlich sein Anfänger. Vollständige Liste nach dem Sprung.

1. Benutzen reset.css

   Browser wie Firefox und Internet Explorer können beim Rendern von CSS-Stilen auf unterschiedliche Weise gehandhabt werden. reset.css setzt alle grundlegenden Stile zurück, so dass Sie mit einem leeren, neuen Stylesheets beginnen.

   Hier werden einige häufig verwendet reset.css Rahmenbedingungen - Yahoo Reset CSS, Eric Meyer CSS Reset, Tripoli

2. Verwenden Sie Shorthand CSS

   CSS-Kürzel geben Ihnen eine kürzere Art, CSS-Codes zu schreiben, und vor allem - es macht den Code übersichtlicher und verständlicher.

   Anstatt CSS so zu erstellen

   .Header Hintergrundfarbe: #fff; Hintergrundbild: URL (image.gif); Hintergrundwiederholung: keine Wiederholung; Hintergrundposition: oben links; 

   Es kann in folgenden Bereichen eine kurze Handhabe sein:

   .Kopfzeile Hintergrund: #fff-URL (image.gif) Keine Wiederholung oben links

   Mehr - Einführung in die CSS-Kurzbeschreibung, Nützliche CSS-Abkürzungseigenschaften

3. Verstehen Klasse und ICH WÜRDE

   Diese beiden Selektoren verwirren häufig Anfänger. In CSS, Klasse wird durch einen Punkt dargestellt "." während Ich würde ist ein Hash '# ". Kurz gesagt Ich würde wird für einen Stil verwendet, der einzigartig ist und sich nicht wiederholt, Klasse auf der anderen Seite kann wiederverwendet werden.

   Mehr - Klasse vs. ID | Wann Klasse, ID | verwendet werden soll Klasse und ID zusammen anwenden

4. Kraft von

5. a.k.a-Linkliste ist sehr nützlich, wenn sie korrekt mit verwendet werden
   oder
   , insbesondere um ein Navigationsmenü zu gestalten.

   • Vergessen , Versuchen

     Einer der größten Vorteile von CSS ist die Verwendung von

     um vollständige Flexibilität in Bezug auf das Styling zu erreichen.

     sind anders als

     , wo Inhalte innerhalb eines gesperrt sind

     Zelle. Es ist sicher, die meisten zu sagen Layouts sind mit Hilfe von erreichbar und ordentliches Styling, vielleicht mit Ausnahme massiver Tabelleninhalte. Mehr - Tische sind tot, Tabellen Vs. CSS, CSS vs. Tabellen CSS-Debugging-Tools Es ist immer gut, eine sofortige Vorschau des Layouts zu erhalten, während das CSS angepasst wird. Dies hilft, CSS-Stile besser zu verstehen und zu debuggen. Folgende kostenlose CSS-Debugging-Tools können Sie in Ihrem Browser installieren: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar und Firebug. Vermeiden Sie überflüssige Selektoren Manchmal kann Ihre CSS-Deklaration einfacher sein, wenn Sie Folgendes kodieren: ul li … ol li … Tabelle tr td … Sie können bis auf nur verkürzt werden li … td … Erläuterung: wird nur innerhalb existieren oder und und wird nur drinnen sein es ist also wirklich nicht nötig, sie wieder einzusetzen. Wissen !wichtig Jeder mit gekennzeichnete Stil !wichtig wird unabhängig davon verwendet, wenn sich darunter eine Überschreibregel befindet. .Seite Hintergrundfarbe: blau! wichtig; Hintergrundfarbe: rot; Im obigen Beispiel, Hintergrundfarbe: blau wird angepasst, weil es mit markiert ist !wichtig, selbst wenn es einen gibt Hintergrundfarbe: rot; darunter. !wichtig wird in Situationen verwendet, in denen Sie einen Stil erzwingen möchten, ohne etwas zu überschreiben. Dies funktioniert jedoch möglicherweise nicht in Internet Explorer. Ersetzen Sie Text durch Bild Dies ist in der Regel üblich zu ersetzen Titel von einem textbasierten Titel zu einem Bild. So machen Sie es. h1 text-indent: -9999px; Hintergrund: URL ("title.jpg") keine Wiederholung; Breite: 100px; Höhe: 50px; Erläuterung: Text-Gedankenstrich: -9999px; wirft Ihren Texttitel aus dem Bildschirm, ersetzt durch ein von Hintergrund: … mit einem festen Breite und Höhe. CSS-Positionierung verstehen Der folgende Artikel vermittelt Ihnen ein klares Verständnis für die Verwendung der CSS-Positionierung - Position: … Mehr - Lernen Sie die CSS-Positionierung in zehn Schritten CSS @einführen vs Es gibt zwei Möglichkeiten, eine externe CSS-Datei aufzurufen - bzw. mit @einführen und . Wenn Sie sich nicht sicher sind, welche Methode Sie verwenden sollen, finden Sie hier einige Artikel, die Ihnen bei der Entscheidung helfen. Mehr - Unterschied zwischen @import und link Formulare in CSS gestalten Webformulare können mit CSS einfach entworfen und angepasst werden. Diese folgenden Artikel zeigen Ihnen wie: Mehr - Tabellenloses Formular, Garten bilden, Noch mehr Formularsteuerelemente gestalten Lass dich inspirieren Wenn Sie sich nach einer hübsch gestalteten CSS-basierten Website umsehen oder einfach nur nach einer guten Benutzeroberfläche suchen, finden Sie hier eine CSS-Website, die wir empfehlen: CSS Remix CSS-Schönheit CSS Elite CSS Mania CSS-Leck Halten Sie die CSS-Codes sauber Wenn Ihre CSS-Codes unordentlich sind, werden Sie am Ende verwirrt codieren und haben Schwierigkeiten, den vorherigen Code zu referenzieren. Für den Anfang können Sie die richtige Einrückung erstellen und sie richtig kommentieren. Mehr - 12 Grundsätze, um Ihren Code sauber zu halten, CSS-Codes online formatieren Typografie-Messung: px vs em Sie haben Probleme bei der Wahl, wann Sie die Maßeinheit verwenden möchten px oder em? Die folgenden Artikel können Ihnen ein besseres Verständnis der Typografieeinheiten vermitteln. CSS-Browser-Kompatibilitätstabelle Wir alle wissen, dass jeder Browser CSS-Stile auf unterschiedliche Weise darstellen kann. Es ist gut, eine Referenz, ein Diagramm oder eine Liste zu haben, die die gesamte CSS-Kompatibilität für jeden Browser anzeigt. CSS-Supporttabelle: # 1, # 2, #3, # 4. Entwerfen Sie Mehrspalten in CSS Haben Sie Probleme, die linke, mittlere und rechte Säule richtig auszurichten? Hier sind einige Artikel, die helfen könnten: Auf der Suche nach dem Heiligen Gral Faux-Säulen Hauptgründe, warum Ihre CSS-Spalten durcheinander geraten Kleine Boxen (Beispiele) Mehrspaltige Layouts klettern aus dem Kasten heraus Absolute Spalten Erhalten Sie einen kostenlosen CSS-Editor Dedizierte Editoren sind immer besser als ein Notizblock. Hier sind einige, die wir empfehlen: Mehr - Einfaches CSS, Notizblock ++, Ein Style-CSS-Editor Grundlegendes zu Medientypen Es gibt wenige Medientypen, wenn Sie CSS mit deklarieren . Druck, Projektion und Bildschirm sind einige der am häufigsten verwendeten Typen. Wenn Sie sie richtig verstehen und verwenden, wird der Zugriff für die Benutzer verbessert. Im folgenden Artikel wird erläutert, wie mit CSS-Medientypen verfahren wird. Mehr - CSS- und Medientypen, W3-Medientypen, CSS-Medientypen, CSS2-Medientypen 20 nützliche iPhone-Apps für Entwickler und Designer 20 nützliche SVG-Tools für bessere Grafiken 20 ultraleichte und elegante Schriftarten für Webdesigner Nächste Artikel 20 Nützliche Add-Ons für die Firefox-Seitenleiste Vorheriger Artikel 20 nützliche Apps, um Instagram optimal zu nutzen