Mit Cascading Style Sheets (CSS) können Sie das Aussehen Ihrer Webseiten verändern. Von Schriftarten und Farben über Abstände bis hin zum Gesamtlayout stehen Ihnen alle Arten von Designwerkzeugen zur Verfügung. Obwohl CSS insgesamt eine komplizierte Sprache ist, gibt es nur zwei grundlegende Konzepte, die Sie verstehen müssen, um zu beginnen.
Alles beginnt damit, dass Sie genau bestimmen, welchen Teil einer Seite Sie formatieren möchten.
Eine CSS-Datei enthält eine Reihe von Regeln, die beschreiben, wie eine HTML-Datei formatiert werden soll. Jede Regel besteht aus zwei Teilen: Was soll gestaltet werden und wie wird es gestaltet. Der erste Teil wird mit einer Reihe von Begriffen gesteuert, die als „Selektoren“ bekannt sind.
Beispiele in diesem Artikel umfassen Stildeklarationen, die jedoch nicht im Mittelpunkt stehen, sondern die Selektoren selbst.
Historisch gesehen gab es drei CSS-Selektorstufen (oder -versionen) mit unterschiedlichem Grad an Browserunterstützung. Im Jahr 2020 stehen diese laut Can I Use alle über 99 Prozent der Nutzer weltweit zur Verfügung.
Level 1 führte die vier grundlegenden Arten von Selektoren ein, die auch heute noch eine große Anzahl von Fällen abdecken.
| Muster | Streichhölzer |
|---|---|
E |
alle E-Elemente |
.c |
alle Elemente mit class="c" |
#myid |
das Element mit id="myid" |
E F |
ein F-Element innerhalb eines E-Elements |
| Pseudoklassen | |
E:link |
ein Hyperlink zu einer Seite, die noch nicht besucht wurde |
E:visited |
ein Hyperlink zu einer bereits besuchten Seite |
E:active |
ein aktuell ausgewählter Hyperlink |
| Pseudo-Elemente | |
E::first-line |
die erste formatierte Zeile eines E-Elements |
E::first-letter |
der erste formatierte Buchstabe eines E-Elements |
Der einfachste Selektor ist der „Typenwähler“. Es zielt auf alle Instanzen eines Elements ab, z. B. auf einen Absatz oder fett gedruckten Text:
p { margin-bottom: 0; } b { font-family: sans-serif; }
Das class-Attribut ermöglicht es, einem HTML-Element weitere Semantik hinzuzufügen, wie beispielsweise einen bestimmten Absatztyp. Solche Elemente können in CSS wie folgt ausgewählt werden:
.intro { font-weight: bold; }
Dieser Selektor würde übereinstimmen:
…
Beachten Sie jedoch, dass es auch passen würde:
…Wenn es nur auf Einleitungsabsätze angewendet werden soll, können Sie den Typselektor und den Klassenselektor kombinieren:
p.intro { font-weight: bold; }
Das HTML-ID-Attribut sollte innerhalb eines Dokuments eindeutig sein, z. B. wenn Sie Folgendes haben:
…
Das sollte das einzige Element mit einer „Inhalts“-ID sein. Mit einem ID-Selektor können Sie auf dieses bestimmte Element in einem Dokument abzielen:
#contents { color: #333; }
Streng genommen ein „Kombinator“, denn bei diesem Selektor dreht sich alles um den Raum zwischen zwei anderen. HTML ist hierarchisch, wie in unserer Übersicht zum DOM erläutert . Ein Nachkommenselektor ermöglicht es, ein Element anhand seines Kontexts innerhalb eines anderen Elements zu identifizieren:
table b { font-weight: normal; }
Pseudoselektoren zielen auf Klassen oder Elemente ab, die nicht explizit existieren, aber trotzdem verfügbar gemacht werden. Betrachten Sie sie als besondere Inhaltsboni:
p::first-line { text-transform: uppercase; }
Verwenden Sie ein Komma, um Selektoren zu einer Liste zusammenzufassen, wenn Sie auf jeden dieselben Regeln anwenden möchten. Anstatt von:
th { padding: 1em; } td { padding: 1em; }
Du kannst schreiben:
th, td { padding: 1em; }
Ein Stylesheet ist eine Reihe von Regeln, die einen Selektor verwenden, um ein Element zuzuordnen, aber was passiert, wenn mehr als eine Regel einem bestimmten Element entspricht? Das resultierende Verhalten wird von der „Spezifität“ bestimmt, die definiert, welche Regel in einem Fall wie zum Beispiel verwendet wird:
p.intro { color: black; } p { color: gray; }
In solchen Fällen wird die Vorrangigkeit der Regel durch ihre Spezifität wie folgt definiert:
Bei der Berechnung der Spezifität wird jede Ebene nur berücksichtigt, wenn zwei Selektoren auf der höheren Ebene die gleiche Punktzahl aufweisen, daher ist „#contents“ spezifischer als „article.news p.author.special“, da erstere bei ID-Selektoren „gewinnt“.
Die nächste Revision von CSS-Selektoren führte Attributselektoren ein, erweiterte Pseudoklassen und Pseudoelemente und fügte zwei neue Kombinatoren hinzu.
| Muster | Streichhölzer |
|---|---|
* |
irgendein Element |
E > F |
ein F-Element-Kind eines E-Elements |
E + F |
ein F-Element unmittelbar vor einem E-Element |
| Attributselektoren | |
E[foo] |
ein E-Element mit einem "foo"-Attribut |
E[foo="bar"] |
ein E-Element, dessen "foo"-Attribut genau "bar" ist |
E[foo~="bar"] |
ein E-Element, dessen "foo"-Attribut eine Liste von durch Leerzeichen getrennten Werten ist, von denen einer "bar" ist |
E[foo|="en"] |
ein E-Element, dessen "foo"-Attribut eine durch Bindestriche getrennte Liste von Werten hat, die mit "en" beginnen |
| Pseudoklassen | |
E:first-child |
ein E-Element, erstes Kind seines Elternteils |
E:lang(fr) |
ein Element vom Typ E in der Sprache "fr" |
| Pseudo-Elemente | |
E::before |
generierter Inhalt vor dem Inhalt eines E-Elements |
E::after |
generierter Inhalt nach dem Inhalt eines E-Elements |
Das „*“ entspricht jedem Element. Es ist nicht oft so nützlich, aber wenn Sie beispielsweise Standardränder zurücksetzen möchten, können Sie dies tun:
* { margin: 0; }
Attributselektoren ermöglichen eine sehr spezifische Ausrichtung auf Stile, die nach dem Attribut eines Elements gefiltert werden:
a[title] { text-decoration: underline dotted; }
Ähnlich dem Nachkommen-Kombinator, aber dieser passt nur auf unmittelbare Kinder, nicht auf Nachkommen weiter unten im Baum. Zum Beispiel passt „ul > li“ hier nur auf den Text „Section 1“ und nicht auf „Section 1.1“:
Section 1
Section 1.1Section 1.2h1 + p { font-weight: bold; }
Dieser Selektor ist oft nützlich für die Kontrolle von Rändern oder einen einleitenden Absatz ohne eine bestimmte Klasse. Dieser Selektor stimmt nur dann mit einem Element überein, wenn es unmittelbar auf ein anderes folgt. Im Beispiel wird hier nur der erste Absatz abgeglichen, nicht der zweite:
Contents
some extra text
Introductory paragraph
Following paragraph
Beachten Sie, dass dieser Selektor bei der Entscheidung, was das nächste Geschwister ist, nur Elemente berücksichtigt – keinen Text.
Einige CSS-Eigenschaften erben ihren Wert von einem Ancestor-Element. In der Praxis bedeutet dies zum Beispiel, dass die Einstellung der Schriftart des Elements „body“ bedeutet, dass auch jeder Absatz, jede Tabelle usw. dieselbe Schriftart verwendet.
Natürlich ist dies genau das, was Sie erwarten würden, aber denken Sie an eine Eigenschaft, die nicht erbt: „Margin“ zum Beispiel. Sie möchten nicht, dass jeder einzelne Absatz oder fett gedruckte Text den gleichen Rand wie das gesamte Dokument hat.
Verwandte: Einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können
Eine gute Faustregel ist, Elemente so allgemein wie sinnvoll anzusprechen – nicht jedes einzelne Element gezielt ansprechen, wenn ein einfacher „Body“-Selektor ausreicht.
In dieser Ebene wurden viele weitere Pseudoklassen hinzugefügt, zusammen mit einigen Attributselektoren und einem neuen Kombinator.
| Muster | Streichhölzer |
|---|---|
E ~ F |
ein F-Element, dem ein E-Element vorausgeht |
| Attributselektoren | |
E[foo^="bar"] |
ein E-Element, dessen "foo"-Attribut mit der Zeichenfolge "bar" beginnt |
E[foo$="bar"] |
ein E-Element, dessen "foo"-Attribut mit der Zeichenfolge "bar" endet |
E[foo*="bar"] |
ein E-Element, dessen "foo"-Attribut die Teilzeichenfolge "bar" enthält |
| Pseudoklassen | |
E:root |
ein E-Element, Wurzel des Dokuments |
E:nth-child(n) |
ein E-Element, das n-te Kind seines Elternteils |
E:nth-last-child(n) |
ein E-Element, das n-te Kind seines Elternteils, gezählt vom letzten |
E:nth-of-type(n) |
ein E-Element, das n-te Geschwister seines Typs |
E:nth-last-of-type(n) |
ein E-Element, das n-te Geschwister seines Typs, gezählt vom letzten |
E:last-child |
ein E-Element, letztes Kind seines Elternteils |
E:first-of-type |
ein E-Element, das erste Geschwister seines Typs |
E:last-of-type |
ein E-Element, letztes Geschwister seines Typs |
E:only-child |
ein E-Element, einziges Kind seines Elternteils |
E:only-of-type |
ein E-Element, nur Geschwister seines Typs |
E:empty |
ein E-Element ohne Kinder (einschließlich Textknoten) |
E:target |
ein E-Element ist das Ziel des verweisenden URI |
E:enabled |
ein Benutzeroberflächenelement E, das aktiviert ist |
E:disabled |
ein Benutzeroberflächenelement E, das deaktiviert ist |
E:checked |
ein Benutzeroberflächenelement E, das überprüft wird |
E:not(s) |
ein E-Element, das nicht mit dem einfachen Selektor s . übereinstimmt |
Sie können Elemente mit einem Attribut auswählen, das mit einem bestimmten Wert beginnt: a[href^="https:"], mit einem bestimmten Wert endet: img[src$=".gif"]oder einen Wert enthält: a[*="value"].
Zusätzliche Pseudoklassen sind „:last-child“, „:empty“ (um ein Element ohne Inhalt abzugleichen) und „:checked“, das ein Element wie eine Checkbox-Eingabe abgleicht, aber nur, wenn es angekreuzt ist.
Ähnlich wie beim Adjacent Sibling Combinator aus Level 2 passt dies zu jedem Geschwister, das nach dem anderen kommt, nicht nur zum nächsten:
h1 ~ p { font-size: 110%; }
Jetzt wissen Sie so ziemlich alles, was Sie wissen müssen, um einen Teil einer Webseite mit CSS auszuwählen. Jetzt können Sie Ihre Seiten mit einer Vielzahl von CSS-Eigenschaften gestalten, die von Farben bis hin zum Layout alles abdecken.
Bildquelle : Pankaj Patel / Unsplash
Während Sie einen grafischen Taschenrechner auf Ihrem Computer verwenden können, kann der Interpreter der Programmiersprache Python auch als Tischrechner verwendet werden. Es ist ein so beliebter Laufwitz in der Python-Community, dass er im offiziellen Tutorial erwähnt wird. So können Sie Python als Taschenrechner verwenden.
Als Programmierer sollten Sie Herausforderungen annehmen, um zu überleben und einige Wunder im Entwicklungs- oder Programmierbereich zu schaffen. Wenn Sie also eine fortgeschrittene Programmiersprache lernen möchten, um Ihre beruflichen Fähigkeiten zu verbessern, ist Java eine der besten Aussichten, die es gibt.
Das Erlernen einer neuen Programmiersprache wie Python wird mühelos, wenn Sie eine umfassende Roadmap haben, die detailliert beschreibt, welche Konzepte Sie als Anfänger lernen müssen und wie Sie weiter vorankommen, um den nächsten Meilenstein zu erreichen. Auch fortgeschrittene Programmierer sollten ihre Grundlagen häufig auffrischen, um eine solide Grundlage für sich selbst zu schaffen.
Heutzutage ist es gängige Praxis, eine Website oder App zu erstellen, die ihre Benutzeroberfläche je nach Browser oder Gerät anpasst. Um dieses Ziel zu erreichen, gibt es zwei Ansätze. Die erste besteht darin, verschiedene Versionen Ihrer Website oder App für verschiedene Geräte zu erstellen. Aber es ist ineffizient und kann zu unvorhersehbaren Fehlern führen.
Das Arbeiten mit Zahlen ist ein wesentlicher Bestandteil der Programmierung. Jede Programmiersprache bietet Unterstützung, um Zahlen auf viele verschiedene Arten zu manipulieren. In diesem Artikel erfahren Sie, wie Sie mit iterativen, logbasierten und stringbasierten Ansätzen die Gesamtzahl der Ziffern in einer Ganzzahl ermitteln.
SQL vs. NoSQL: Was ist die beste Datenbank für Ihr nächstes Projekt?
Solidity ist die Programmiersprache, die von Smart Contracts auf der Ethereum-Blockchain verwendet wird. Es ist eine statisch typisierte, objektorientierte Programmiersprache.
GitHub Badges kann die Lesbarkeit eines Repositorys verbessern, indem es Benutzern eine schnelle Möglichkeit bietet, die Repository-Metriken zu erfassen. Badges können in Ihre README.md eingebettet werden, um anderen Entwicklern die Bedeutung und Notwendigkeit Ihres Projekts zu verdeutlichen. Als Ergebnis erhalten die Leser eine wirklich schnelle Vorstellung vom Repository, indem sie die beigefügten Badges überprüfen.
Ob es sich um eine Datenbankabfrage oder Ergebnisse mathematischer Operationen handelt, die Python-String-Format-Methode bietet eine dynamischere und ansprechendere Möglichkeit, einem Benutzer Ergebnisse zu präsentieren.
Anfang dieses Jahres hat Microsoft die Preview-Version von Visual Studio 2022 in die wilde Programmierwelt gebracht. Das sind gute Neuigkeiten! Es ist eine äußerst beliebte IDE, die jedoch angesichts des Tempos der Veränderungen im DevOps-Ökosystem, in dem sie gedeiht, für eine Optimierung oder vielleicht sogar eine Überarbeitung fällig ist.
Softwaremetriken sind Maße, die verwendet werden, um verschiedene Aspekte Ihrer Software zu quantifizieren. Diese Aspekte können von Kosten, Qualität und Effizienz des Entwicklungsteams reichen.
Als Windows-Benutzer sind Sie wahrscheinlich mindestens einmal auf die Worte .NET Framework gestoßen. Es handelt sich um ein von Microsoft entwickeltes Software-Framework, mit dem Sie C#-, C++-, F#- und Visual Basic-Programme erstellen und ausführen können. Die neueste .NET-Version ist 4.8, aber Ihr Computer benötigt möglicherweise eine ältere Version von .NET (wie .NET 3.5), um einige Apps auszuführen.
Wenn Sie ein Python-Entwickler sind, können Sie von der Vielzahl der verfügbaren Frameworks stark profitieren. Während einige Frameworks am besten für große Ökosysteme geeignet sind, sind andere darauf spezialisiert, bestimmte Entwicklungsziele zu erreichen. Lesen Sie weiter, um die grundlegenden Funktionen, Verwendungen und Unterschiede zwischen zwei Python-Frameworks zu erfahren: Flask und CherryPy.
Viele Programmierer lieben es, knifflige mathematische Probleme mit Code zu lösen. Es hilft, den Geist zu schärfen und die Fähigkeiten zur Problemlösung zu verbessern. In diesem Artikel erfahren Sie, wie Sie mit Python, C++ und JavaScript die kleinsten und größten n-stelligen perfekten Quadrate und Würfel finden. Jedes Beispiel enthält auch eine Beispielausgabe für mehrere verschiedene Werte.
Das Ausführen von Python über das Terminal ist oft unvermeidlich. Wenn Sie Python jedoch zum ersten Mal unter Windows 10 installiert haben, ist die Ausführung über das Windows-Terminal nur möglich, wenn es der Windows-Umgebungsvariablen PATH hinzugefügt wird.
Die if-Anweisung ist die treibende Kraft der logischen Programmierung. Infolgedessen ist ein besseres Verständnis von Python eine wesentliche Ergänzung zu Ihren Python-Programmierkenntnissen.
Tech ist zweifellos die Branche der Zukunft. Wenn Sie einer von Millionen junger Erwachsener sind, die kurz davor stehen, in den ersten Abschnitt Ihrer Karriere einzusteigen, fragen Sie sich vielleicht, was Sie tun sollen, wenn Sie nicht gerne programmieren.
Sie können ein reales Projekt in Python ohne eine virtuelle Umgebung nicht erfolgreich abschließen. Tools wie virtualenvwrapper und virtualenv werden häufig zum Erstellen und Verwalten virtueller Umgebungen für die Webentwicklung verwendet, während Anaconda von Datenwissenschaftlern häufig verwendet wird.
Wenn Sie planen, ein großartiges Webseiten-Layout zu erstellen, müssen Sie sich mit Rändern, Rahmen, Auffüllung und Inhalt auskennen. Jedes Element im Webdesign, ob Bild oder Text, verwendet eine Box mit diesen Eigenschaften. Sie können ganz einfach komplexe Layouts erstellen, indem Sie mit dem Boxmodell herumspielen. In diesem Artikel sezieren wir das CSS-Box-Modell und zeigen Ihnen anhand praktischer Beispiele, wie Sie diese Eigenschaften verwenden.
Suchen Sie nach einer WordPress-Alternative zum Erstellen Ihrer Website? Suchen Sie nicht weiter. Dieser Artikel zeigt Ihnen andere Content-Management-Systeme (CMS), mit denen Sie Ihre Site erstellen können.
Während Sie einen grafischen Taschenrechner auf Ihrem Computer verwenden können, kann der Interpreter der Programmiersprache Python auch als Tischrechner verwendet werden. Es ist ein so beliebter Laufwitz in der Python-Community, dass er im offiziellen Tutorial erwähnt wird. So können Sie Python als Taschenrechner verwenden.
Als Programmierer sollten Sie Herausforderungen annehmen, um zu überleben und einige Wunder im Entwicklungs- oder Programmierbereich zu schaffen. Wenn Sie also eine fortgeschrittene Programmiersprache lernen möchten, um Ihre beruflichen Fähigkeiten zu verbessern, ist Java eine der besten Aussichten, die es gibt.
Das Erlernen einer neuen Programmiersprache wie Python wird mühelos, wenn Sie eine umfassende Roadmap haben, die detailliert beschreibt, welche Konzepte Sie als Anfänger lernen müssen und wie Sie weiter vorankommen, um den nächsten Meilenstein zu erreichen. Auch fortgeschrittene Programmierer sollten ihre Grundlagen häufig auffrischen, um eine solide Grundlage für sich selbst zu schaffen.
Heutzutage ist es gängige Praxis, eine Website oder App zu erstellen, die ihre Benutzeroberfläche je nach Browser oder Gerät anpasst. Um dieses Ziel zu erreichen, gibt es zwei Ansätze. Die erste besteht darin, verschiedene Versionen Ihrer Website oder App für verschiedene Geräte zu erstellen. Aber es ist ineffizient und kann zu unvorhersehbaren Fehlern führen.
Das Arbeiten mit Zahlen ist ein wesentlicher Bestandteil der Programmierung. Jede Programmiersprache bietet Unterstützung, um Zahlen auf viele verschiedene Arten zu manipulieren. In diesem Artikel erfahren Sie, wie Sie mit iterativen, logbasierten und stringbasierten Ansätzen die Gesamtzahl der Ziffern in einer Ganzzahl ermitteln.
Container sind für die Softwareentwicklung, -bereitstellung und -verwaltung in einer virtuellen Umgebung von großem Nutzen. Docker ist im Containerisierungsprozess nützlich, aber nicht die einzige Plattform, die es gibt. Wenn Sie nach Alternativen zu Docker suchen, suchen Sie nicht weiter. Diese Liste zeigt einige funktionsreiche und effiziente Docker-Alternativen, die Sie in Ihrem nächsten Projekt verwenden können.
SQL vs. NoSQL: Was ist die beste Datenbank für Ihr nächstes Projekt?
Das Einbetten von Drittanbieterdiensten in Ihre WordPress-Posts ist eine aufregende Möglichkeit, das Interesse eines Besuchers zu wecken. Eingebettete Inhalte bieten auch visuelle Hinweise, die das Scannen erleichtern. WordPress hat das Hinzufügen dieser Art von Inhalten einfach gemacht.
Node.js ist eine JavaScript-Laufzeitumgebung, mit der Sie JavaScript außerhalb von Webbrowsern ausführen können, was es zu einer beliebten Wahl für die Entwicklung aller Arten von Anwendungen macht. Ein Teil seiner Popularität ist auf die Fülle von NPM-Paketen zurückzuführen, die das Entwicklererlebnis erleichtern sollen.
Solidity ist die Programmiersprache, die von Smart Contracts auf der Ethereum-Blockchain verwendet wird. Es ist eine statisch typisierte, objektorientierte Programmiersprache.
