{"id":882666,"date":"2023-10-22T22:14:11","date_gmt":"2023-10-23T03:14:11","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/20-grundlegende-css-tipps-fur-designer\/"},"modified":"2023-10-22T22:14:11","modified_gmt":"2023-10-23T03:14:11","slug":"20-grundlegende-css-tipps-fur-designer","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/20-grundlegende-css-tipps-fur-designer\/","title":{"rendered":"20 grundlegende CSS-Tipps f\u00fcr Designer"},"content":{"rendered":"<p>Die Beherrschung der Kunst der Cascading Style Sheets (CSS) ist bahnbrechend.  Egal, ob Sie ein Anf\u00e4nger sind, der in die Gew\u00e4sser des Webdesigns eintaucht, oder ein erfahrener Profi, der seine F\u00e4higkeiten verbessern m\u00f6chte, das Verst\u00e4ndnis von CSS ist nicht verhandelbar. <\/p>\n<p>Willkommen zu unserem vollst\u00e4ndigen Leitfaden \u201e20 grundlegende CSS-Tipps f\u00fcr Designer\u201c.  Dieser Blogbeitrag ist Ihre zentrale Anlaufstelle und soll Ihnen dabei helfen, die Komplexit\u00e4t von CSS einfach und sicher zu meistern.  Wir haben eine Liste mit 20 wichtigen CSS-Tipps zusammengestellt, die jeweils anhand von Beispielen erkl\u00e4rt werden, damit Sie effizientere, reaktionsf\u00e4higere und optisch ansprechendere Webdesigns erstellen k\u00f6nnen. <\/p>\n<p>Von der Beherrschung des CSS-Box-Modells, der Positionierung und \u00dcberg\u00e4nge bis hin zur Nutzung der Leistungsf\u00e4higkeit von Pseudoelementen und dem Verst\u00e4ndnis der Bedeutung der browser\u00fcbergreifenden Kompatibilit\u00e4t sind Sie bei uns genau richtig.  Wir tauchen ein in die Welt der CSS-Resets, Kurzschrifteigenschaften, Medienabfragen und vielem mehr. <\/p>\n<p>Egal, ob Sie eine einfache Website entwerfen oder an einem komplexen Webentwicklungsprojekt arbeiten, diese CSS-Tipps dienen als praktischer Leitfaden und stellen sicher, dass Ihre Designs in der \u00fcberf\u00fcllten digitalen Landschaft hervorstechen.<\/p>\n<h5>1. Verwenden Sie CSS-Reset<\/h5>\n<p>CSS Reset tr\u00e4gt dazu bei, Browser-Inkonsistenzen zu reduzieren, indem es eine saubere \u00dcbersicht f\u00fcr Styling-Elemente bietet.  Sie k\u00f6nnen beispielsweise Folgendes verwenden <a rel=\"noopener nofollow\" target=\"_blank\" href=\"https:\/\/meyerweb.com\/eric\/tools\/css\/reset\/\">CSS-Reset von Eric Meyer:<\/a><\/p>\n<pre name=\"code\" class=\"css\">\r\nhtml, body, div, span, applet, object, iframe,\r\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\r\na, abbr, acronym, address, big, cite, code,\r\ndel, dfn, em, img, ins, kbd, q, s, samp,\r\nsmall, strike, strong, sub, sup, tt, var,\r\nb, u, i, center,\r\ndl, dt, dd, ol, ul, li,\r\nfieldset, form, label, legend,\r\ntable, caption, tbody, tfoot, thead, tr, th, td,\r\narticle, aside, canvas, details, embed, \r\nfigure, figcaption, footer, header, hgroup, \r\nmenu, nav, output, ruby, section, summary,\r\ntime, mark, audio, video {\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 0;\r\n    font-size: 100%;\r\n    font: inherit;\r\n    vertical-align: baseline;\r\n}<\/pre>\n<h5>2. Verwenden Sie abgek\u00fcrzte Eigenschaften<\/h5>\n<p>Mithilfe von Verkn\u00fcpfungseigenschaften k\u00f6nnen Sie saubereren Code schreiben und Zeit sparen.  Anstatt zum Beispiel zu schreiben: <\/p>\n<pre name=\"code\" class=\"css\">\r\nmargin-top: 10px;\r\nmargin-right: 20px;\r\nmargin-bottom: 10px;\r\nmargin-left: 20px;<\/pre>\n<p>Du kannst schreiben:<\/p>\n<pre name=\"code\" class=\"css\">\r\nmargin: 10px 20px;\r\n<\/pre>\n<h5>3. Verwenden Sie CSS-Variablen<\/h5>\n<p>Mit CSS-Variablen, auch benutzerdefinierte Eigenschaften genannt, k\u00f6nnen Sie bestimmte Werte speichern, um sie im gesamten CSS wiederzuverwenden.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n:root {\r\n    --main-color: #c06c84;\r\n}\r\n\r\nbody {\r\n    background-color: var(--main-color);\r\n}<\/pre>\n<h5>4. Verwenden Sie Flexbox und Grid f\u00fcr Layouts<\/h5>\n<p>Flexbox und Grid sind leistungsstarke CSS-Layoutsysteme.  Sie k\u00f6nnen die Erstellung komplexer Designs erleichtern.  So erstellen Sie beispielsweise einen einfachen Flex-Container:<\/p>\n<pre name=\"code\" class=\"css\">\r\n.container {\r\n    display: flex;\r\n}<\/pre>\n<h5>5. Verwenden Sie Medienabfragen f\u00fcr responsives Design<\/h5>\n<p>Mit Medienabfragen k\u00f6nnen Sie unterschiedliche Stile f\u00fcr unterschiedliche Ger\u00e4te oder Bildschirmbreiten anwenden.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n@media (max-width: 600px) {\r\n    body {\r\n        background-color: lightblue;\r\n    }\r\n}<\/pre>\n<h5>6. Nutzen Sie den Wasserfall zu Ihrem Vorteil<\/h5>\n<p>CSS steht f\u00fcr Cascading Style Sheets. Wenn Sie verstehen, wie Kaskadierung funktioniert, k\u00f6nnen Sie effizienteren Code schreiben.  Sie k\u00f6nnen beispielsweise globale Stile festlegen und diese dann f\u00fcr bestimmte Elemente oder Komponenten \u00fcberschreiben. <\/p>\n<h5>7. Spezifit\u00e4t verstehen<\/h5>\n<p>Die CSS-Spezifit\u00e4t bestimmt, welche CSS-Regel Browser anwenden.  Sie wird basierend auf der Anzahl der ID-Selektoren, Klassenselektoren und Typselektoren berechnet.  Beispielsweise weist ein ID-Selektor eine h\u00f6here Spezifit\u00e4t auf als Klassenselektoren und Typselektoren. <\/p>\n<h5>8. Verwenden Sie Pseudoklassen und Pseudoelemente<\/h5>\n<p>Mit Pseudoklassen und Pseudoelementen k\u00f6nnen Sie bestimmte Teile eines Elements formatieren.  Sie k\u00f6nnen beispielsweise den Hover-Status einer Schaltfl\u00e4che formatieren: <\/p>\n<pre name=\"code\" class=\"css\">\r\nbutton:hover {\r\n    background-color: blue;\r\n}<\/pre>\n<h5>9. Verwenden Sie CSS-Funktionen<\/h5>\n<p>Mit CSS-Funktionen k\u00f6nnen Sie Ihren Code dynamischer gestalten.  Mit der Funktion calc() k\u00f6nnen beispielsweise Werte berechnet werden: <\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    width: calc(100% - 80px);\r\n}<\/pre>\n<h5>10. Verwenden Sie Kommentare, um Ihren Code zu organisieren<\/h5>\n<p>Kommentare k\u00f6nnen Ihnen und anderen helfen, Ihren Code besser zu verstehen.  Sie k\u00f6nnen verwendet werden, um Teile Ihres CSS zu trennen und so die Navigation zu erleichtern.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n\/* This is a comment *\/\r\nbody {\r\n    background-color: white;\r\n}<\/pre>\n<h5>11. Verwenden Sie das Box-Modell<\/h5>\n<p>Das CSS-Box-Modell ist die Grundlage des Layout-Designs in CSS.  Es besteht aus R\u00e4ndern, R\u00e4ndern, Innenabst\u00e4nden und dem eigentlichen Inhalt.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.box {\r\n    width: 300px;\r\n    border: 15px solid green;\r\n    padding: 50px;\r\n    margin: 20px;\r\n}<\/pre>\n<h5>12. Positionierung verstehen<\/h5>\n<p>Mithilfe von CSS-Positionierungseigenschaften (statisch, relativ, fest, absolut und fest) k\u00f6nnen Sie das Layout von Elementen steuern.  Um beispielsweise ein Element relativ zu seiner normalen Position zu positionieren: <\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    position: relative;\r\n    top: 20px;\r\n    left: 30px;\r\n}<\/pre>\n<h5>13. Verwenden Sie em- und rem-Einheiten<\/h5>\n<p>em und rem sind skalierbare Einheiten in CSS.  em ist relativ zur Schriftgr\u00f6\u00dfe seines n\u00e4chstgelegenen \u00fcbergeordneten Elements, w\u00e4hrend rem relativ zur Schriftgr\u00f6\u00dfe des Stammelements ist. <\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    font-size: 2em; \/* 2 times the font-size of the parent element *\/\r\n}<\/pre>\n<h5>14. Verwenden Sie :before und :after Pseudoelemente<\/h5>\n<p>Diese Pseudoelemente k\u00f6nnen verwendet werden, um Inhalte vor oder nach dem Inhalt eines Elements einzuf\u00fcgen.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element:before {\r\n    content: \"Before\";\r\n}\r\n\r\n.element:after {\r\n    content: \"After\";\r\n}<\/pre>\n<h5>15. Verwenden Sie Herstellerpr\u00e4fixe f\u00fcr browser\u00fcbergreifende Kompatibilit\u00e4t<\/h5>\n<p>Herstellerpr\u00e4fixe stellen sicher, dass CSS-Eigenschaften in verschiedenen Browsern funktionieren.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    -webkit-transform: rotate(30deg);\r\n    -moz-transform: rotate(30deg);\r\n    -ms-transform: rotate(30deg);\r\n    transform: rotate(30deg);\r\n}<\/pre>\n<h5>16. Verwenden Sie den \u00dcbergang f\u00fcr fl\u00fcssige Animationen<\/h5>\n<p>Die \u00dcbergangseigenschaft kann \u00c4nderungen an CSS-Eigenschaften \u00fcber einen bestimmten Zeitraum animieren.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    transition: background-color 0.5s ease;\r\n}\r\n\r\n.element:hover {\r\n    background-color: red;\r\n}<\/pre>\n<h5>17. Verwenden Sie RGBA f\u00fcr Transparenz<\/h5>\n<p>Mit der RGBA-Funktion k\u00f6nnen Farben mit Alpha-Transparenz eingestellt werden.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    background-color: rgba(255, 0, 0, 0.5); \/* semi-transparent red *\/\r\n}<\/pre>\n<h5>18. Verwenden Sie die Transformation f\u00fcr 2D- und 3D-Transformationen.<\/h5>\n<p>Die Transformationseigenschaft kann zum Drehen, Skalieren, Neigen oder Verschieben eines Elements verwendet werden.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    transform: rotate(30deg);\r\n}<\/pre>\n<h5>19. Verwenden Sie @import, um externes CSS einzubinden<\/h5>\n<p>Mit der @import-Regel k\u00f6nnen Sie externe CSS-Dateien einbinden.<\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n@import url(\"styles.css\");\r\n<\/pre>\n<h5>20. Gehen Sie sparsam mit !important um<\/h5>\n<p>Die wichtige Regel \u00fcberschreibt andere Deklarationen, kann jedoch das Debuggen erschweren, da sie die nat\u00fcrliche Kaskade in Ihren Stylesheets unterbricht.  Verwenden Sie es sparsam und nur bei Bedarf. <\/p>\n<p><strong>Beispiel:<\/strong><\/p>\n<pre name=\"code\" class=\"css\">\r\n.element {\r\n    color: red !important;\r\n}<\/pre>\n   ","protected":false},"excerpt":{"rendered":"<p>Die Beherrschung der Kunst der Cascading Style Sheets (CSS) ist bahnbrechend. Egal, ob Sie ein Anf\u00e4nger sind, der in die Gew\u00e4sser des Webdesigns eintaucht, oder ein erfahrener Profi, der seine F\u00e4higkeiten verbessern m\u00f6chte, das Verst\u00e4ndnis von CSS ist nicht verhandelbar. Willkommen zu unserem vollst\u00e4ndigen Leitfaden \u201e20 grundlegende CSS-Tipps f\u00fcr Designer\u201c. Dieser Blogbeitrag ist Ihre zentrale [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":882667,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/56-design-6-768x432-1.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/882666"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=882666"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/882666\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/882667"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=882666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=882666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=882666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}