Websites würden ohne CSS langweilig aussehen, da diese Stilsprache für Textstil, -größe, -farbe und -positionierung auf einer Webseite verantwortlich ist.
Was ist CSS?
Cascading Style Sheets, abgekürzt als CSS, ist eine Sprache, die beschreibt, wie HTML-Elemente auf einem Bildschirm oder Papier angezeigt werden sollen. CSS wurde erstellt von World Wide Web Consortium (W3C) im Jahr 1996.
HTML-Elemente wurden nicht so konzipiert, dass sie Tags enthalten, die beim Formatieren einer Webseite helfen könnten, und Entwickler mussten nur ein Markup für die Seite schreiben. Die Einführung von Tags, wie zum Beispiel beim Start von HTML 3.2, brachte neue Probleme für Entwickler mit sich.
Da Webseiten farbige Hintergründe, unterschiedliche Schriftarten und mehrere Stile haben, wurde das Umschreiben von Code teuer und schmerzhaft. W3C-Schulen haben CSS eingeführt, um diese Herausforderungen zu lösen, und es hat sich im Laufe der Jahre weiterentwickelt.
Warum CSS?
# 1. CSS ist effizient
CSS erspart uns das lästige Hinzufügen von Tags wie Schriftart, Elementausrichtung, Rahmen, Farbe, Hintergrundstil und Größe auf jeder Webseite.
# 2. Sparen Sie Zeit
Sie können das Erscheinungsbild der gesamten Website ganz einfach ändern, indem Sie die externe CSS-Datei ändern.
# 3. Kompatibilität mit mehreren Geräten
Moderne Webbenutzer greifen auf Websites über Geräte mit unterschiedlichen Bildschirmgrößen wie PCs, Tablets und Smartphones zu. CSS macht es einfach, Webseiten zu erstellen, die auf Bildschirmgrößen reagieren.
# 4. Einfach zu wartende Anwendungen
Moderne Webanwendungen entwickeln sich ständig weiter. CSS macht es einfach, einzelne Komponenten oder sogar die gesamte Website zu ändern, ohne die Codebasis zu ändern.
Wie wird CSS mit HTML verwendet, um Websites zu erstellen?
HTML ist eine Standardauszeichnungssprache, die für die Erstellung von Webseiten verwendet wird. Auf der anderen Seite beschreibt CSS, wie (mit HTML erstellte) Webseiten angezeigt werden. Eine mit HTML und CSS erstellte Webseite enthält idealerweise eine HTML-Datei mit Text, Bildlinks und HTML-Tags.
Diese HTML-Datei kann entweder über eine separate CSS-Datei verfügen, die mit einem Link-Tag verknüpft ist, oder interne oder Inline-CSS-Stile verwenden. Eine HTML-Datei kann eine Überschrift wie z und einen mit bezeichneten Absatz . Sie können CSS verwenden, um den Browser anzuweisen, den gesamten Inhalt des Absatzes fett darzustellen oder sogar den Kopfzeileninhalt 1 Pixel groß und in grüner Farbe zu machen.
Wir werden im nächsten Abschnitt demonstrieren, wie HTML und CSS funktionieren.
CSS-Typen
# 1. Externes CSS
Damit CSS als extern klassifiziert werden kann, sollte es eine HTML-Datei und eine separate CSS-Datei mit der Erweiterung .css geben. Zum Beispiel style.css. Die CSS-Datei wird über einen Link-Tag mit der HTML-Datei/dem HTML-Dokument verknüpft.
Beispiel einer externen CSS-Datei:
.main {
text-align:center;
}
.GF {
color:red;
font-size:50px;
font-weight:bold;
}
#TP {
color:blueviolet
font-style:bold;
font-size:20px;
}Die CSS-Datei kann mit folgendem HTML-Dokument verknüpft werden:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class = "main">
<div class ="GF">Geekflare!!!! </div>
<div id ="TP">
Your favourite tech portal
</div>
</div>
</body>
</html>Die Link -Tag verknüpft das externe Stylesheet mit dem HTML-Dokument, während das href -Attribut gibt den Speicherort des externen Stylesheets an.
Die endgültige Webseite wird wie folgt aussehen:
Externes CSS ist der am meisten empfohlene Ansatz, da es einfach ist, wiederverwendbare Komponenten zu erstellen und universelle Änderungen an der Codebasis vorzunehmen.
# 2. Internes CSS
Internes CSS ist ideal, wenn Sie ein einzelnes HTML-Dokument haben, das Sie einzigartig gestalten möchten. Der Stilregelsatz wird innerhalb des Head-Abschnitts auf das HTML-Dokument geschrieben.
Dies ist ein Beispiel für internes CSS:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
.main {
text-align:center;
}
.GF {
color:Red;
font-size:70px;
}
.custom {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GF">Internal CSS Demonstration</div>
<div class ="custom">
The Results
</div>
</div>
</body>
</html>Die gerenderte Webseite wird wie folgt angezeigt:
Internes CSS ist in den meisten Fällen nicht ideal, da es den Code in einem HTML-Dokument so groß macht, was die Ladegeschwindigkeit beeinträchtigt.
# 3. Inline-CSS
Inline-CSS enthält den CSS-Stil innerhalb des Hauptteils. Sie können beispielsweise einen Absatz, eine Überschrift oder sogar ein div mit Inline-CSS formatieren.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style = "color:red; font-size:50px;
font-style:bold; text-align:center;">
Inline CSS Demonstration
</p>
</body>
</html>Das gerenderte Dokument wird wie folgt angezeigt:
Inline-CSS ist nicht ideal, wenn Sie Ihre Webanwendung skalieren möchten, da das Hinzufügen einer CSS-Eigenschaft zu jedem HTML-Tag einige Zeit in Anspruch nimmt.
Entdecken Sie einige der besten Online-Kurse und Bücher, um CSS zu beherrschen.
Build Responsive Websites
In diesem Kurs zum Erstellen responsiver realer Websites lernen Sie, wie Sie responsive Websites mit HTML5 und CSS3 erstellen. Sie benötigen keine Vorkenntnisse in Webentwicklung, um diesen Kurs zu erlernen, der Konzepte wie das Box-Modell, das Lösen von Selektorkonflikten, Positionierungsschemata und Vererbung untersucht.
Es ist auch der ideale Kurs, wenn Sie lernen möchten, wie Sie eine professionelle Website brainstormen, planen, skizzieren, codieren, testen und optimieren.
Advanced CSS and Sass
Der Kurs CSS und Sass für Fortgeschrittene führt Sie in die Funktionsweise von CSS hinter den Kulissen ein, indem er Themen wie Kaskade, Spezifität und Vererbung untersucht.
Der Kurs enthält viele moderne CSS-Techniken zum Erstellen leistungsstarker, reaktionsschneller Webseiten. Der Kurs führt in Saas ein und zeigt, wie man es in Projekten verwendet, während CSS, globale Variablen entworfen und Medienabfragen verwaltet werden.
Es ist auch der ideale Kurs, wenn Sie CSS-Animation lernen möchten, da er @keyframes, Animation und Übergänge berührt.
Learn CSS
Lernen Sie CSS von Codecademy lehrt, wie man CSS verwendet, um HTML visuell in auffällige Websites umzuwandeln. Der Kurs ist in 8 Lektionen aufgeteilt und hat 6 Projekte, um Ihr Verständnis zu testen.
Die wichtigsten Dinge, die Sie in diesem Kurs lernen werden, sind das Hinzufügen von Stilen zu HTML-Elementen, das Verbinden von HTML- und CSS-Dateien und das Erstellen einzigartiger Layouts für Webseiten.
Build Your First Web Page
Die Erstellen Sie Ihre erste Webseite Der Kurs lehrt, wie man HTML5 und CSS3 verwendet, um responsive Websites zu erstellen. Dieser kostenlose Kurs besteht aus 4 Modulen und dauert etwa 10 Stunden. Für diesen Kurs benötigen Sie keinerlei Programmierkenntnisse.
CSS Basics
CSS-Grundlagen wird von W3Cx erstellt. Einige der Dinge, die Sie in diesem Kurs lernen werden, sind: Best Practices im Webdesign, grundlegende CSS-Selektoren und die Auswahl von CSS-Eigenschaften. Der Kurs ist in 5 Module aufgeteilt; Sie benötigen etwa 5 Wochen, um es zu absolvieren, wenn Sie 5-7 Stunden pro Woche lernen.
Introduction to CSS3
Diese Kurs auf CSS3 führt Cascading Style Sheets ein. Der Kurs wird von der University of Michigan vorbereitet und lehrt, wie man CSS-Regeln schreibt, gute Programmiergewohnheiten entwickelt und Code testet. Sie benötigen etwa 12 Stunden, um diesen Kurs abzuschließen, der nach Abschluss mit einem teilbaren Zertifikat geliefert wird.
Intro to HTML and CSS
Diese Einführungskurs in HTML und CSS lehrt, wie man gestylte und gut strukturierte Websites mit HTML und CSS erstellt. Der Kurs lehrt die Lernenden, Websites mit einer baumartigen Struktur zu erstellen und diese dann mit CSS zu gestalten.
Dieser kostenlose Kurs ist für Anfänger geeignet und verwendet ein selbstgesteuertes Lernmodell. Sie benötigen etwa 3 Wochen, um diesen Kurs abzuschließen, der von Branchenexperten unterrichtet wird.
CSS Tutorial
CSS-Tutorial ist ein kostenloser Kurs auf W3schools. Der Kurs ist zum einfachen Verständnis in Kapitel unterteilt. Jedes Kapitel enthält Beispiele und Übungen. Die Plattform verfügt über einen Online-Bereich, in dem Sie mit verschiedenen Konzepten experimentieren können, indem Sie „Versuch es selber"-Taste.
CSS: The Definitive Guide
Das Buch CSS: The Definitive Guide ist hilfreich, wenn Sie die Grundlagen von CSS lernen möchten, von Selektoren und Spezifität bis hin zur Kaskade. Das Buch enthält auch Flexbox-, Positionierungs- und Float-Tricks im Detail.
| Vorschau | Produkt | Rating | PREIS | |
|---|---|---|---|---|
|
CSS: The Definitive Guide: Visuelle Präsentation für das Web | $ 68.06 | Bei Amazon kaufen |
Es ist auch das Buch, das Sie bestellen sollten, wenn Sie lernen möchten, wie Sie mit CSS 2D- und 3D-Transformationen, Übergänge und Animationen erstellen. Der Definitive Guide ist sowohl als Kindle- als auch als Taschenbuchversion erhältlich.
Responsive Web Design with CSS
Dieses Buch über Responsive Webdesign mit HTML5 und CSS lehrt, wie man mit HTML5 und CSS zukunftssichere responsive Websites erstellt.
| Vorschau | Produkt | Rating | PREIS | |
|---|---|---|---|---|
|
Responsives Webdesign mit HTML5 und CSS: Erstellen Sie zukunftssichere responsive Websites mit den neuesten… | $ 30.36 | Bei Amazon kaufen |
Nachdem Sie die Tricks aus diesem Buch gelernt haben, werden die von Ihnen erstellten Websites einwandfrei auf Desktops, Tablets und Mobiltelefonen ausgeführt. Das Buch ist in einem leicht verständlichen Format geschrieben und als Taschenbuch und im Kindle-Format erhältlich.
HTML and CSS
Dieses Buch über HTML und CSS ist ideal für alle, egal ob Sie Hobbyist, Student oder Profi sind.
| Vorschau | Produkt | Rating | PREIS | |
|---|---|---|---|---|
|
HTML und CSS: Websites entwerfen und erstellen | $ 17.99 | Bei Amazon kaufen |
Der Autor liefert den Inhalt dieses Buches durch Informationsgrafiken und Lifestyle Fotografie um verschiedene Konzepte leicht verständlich zu machen. Die Ressource wird in einer einzigartigen Struktur präsentiert, die es einfach macht, durch alle Kapitel zu blättern.
Modern CSS
Dieses Buch zu Modern CSS: Master the Key Concepts of CSS for Modern Web Development lehrt CSS anhand von Codebeispielen, Diagrammen und Screenshots.
| Vorschau | Produkt | Rating | PREIS | |
|---|---|---|---|---|
|
Modernes CSS: Meistern Sie die Schlüsselkonzepte von CSS für die moderne Webentwicklung | $ 37.99 | Bei Amazon kaufen |
Das Buch führt in den ersten Kapiteln Farben, Selektoren, Boxmodelle, Kombinatoren und Spezifität ein. Das Buch führt dann in die Gestaltung von Text, Positionierung, Farbverläufe, Rahmen, Z-Index und Stapelkontexte ein. Sie lernen auch fortgeschrittene Themen wie Übergänge, Animationen, Transformationen, Flexbox und CSS-Raster kennen.
Final Words
Die Rolle von CSS in modernen Websites kann nicht genug betont werden. CSS macht Webseiten nicht nur optisch ansprechend, sondern erleichtert auch die Navigation auf verschiedenen Webseiten.
Das Erlernen von CSS kann einfach sein, wenn Sie die oben aufgeführten Ressourcen verwenden. Einige dieser Kurse sind kostenlos, während andere kostenpflichtig sind.
Als nächstes können Sie auschecken CSS-Spickzettel für Entwickler und Designer.
