Lesen Sie weiter unten für eine vollständige Erklärung, wie Cascading Stylesheets funktionieren. Wir zeigen unsere Apps oben auf der Seite an, damit sie leicht zu finden und zu verwenden sind. Wenn Sie diesen Artikel per E-Mail oder Feed lesen, klicken Sie sich durch zu Komprimieren Sie Ihr CSS.
Wenn Sie nicht gerade Websites entwickeln, verstehen Sie Cascading Style Sheets möglicherweise nicht vollständig (CSS). CSS ist eine Stylesheet-Sprache, die verwendet wird, um das Aussehen und die Formatierung eines geschriebenen Dokuments zu beschreiben HTML or XML. CSS kann verwendet werden, um die Stile für verschiedene Elemente wie Schriftart, Farbe, Abstand und Layout festzulegen. Mit CSS können Sie die Präsentation Ihres HTML-Dokuments von seinem Inhalt trennen, wodurch es einfacher wird, den visuellen Stil Ihrer Website zu pflegen und zu aktualisieren.
CSS-Sprachstruktur
Die Wähler ist das HTML-Element, das Sie formatieren möchten, und die Resorts und Wert Definieren Sie die Stile, die Sie auf dieses Element anwenden möchten:
selector {
property: value;
}Zum Beispiel macht das folgende CSS all <h1> Elemente auf einer Seite haben eine rote Farbe und eine Schriftgröße von 32px:
CSS
h1 {
color: red;
font-size: 32px;
}Ausgang
Überschrift
Sie können auch CSS für eine eindeutige ID für ein Element angeben:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}Ausgang
Oder wenden Sie eine Klasse auf mehrere Elemente an:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}Ausgang
Ich möchte hervorheben ein Wort im span-Tag.
Sie können CSS auf drei Arten in Ihr HTML-Dokument einbinden:
- Inline-CSS mit der
style-Attribut für ein HTML-Element - Internes CSS, mit a
<style>Element in der<head>Ihres HTML-Dokuments - Externes CSS, das eine separate .css-Datei verwendet, die mit Ihrem HTML-Dokument verknüpft ist
<link>Element in der<head>Ihres HTML-Dokuments
Responsives CSS
CSS ist unglaublich flexibel und kann verwendet werden, um die Anzeige von Elementen basierend auf der Bildschirmauflösung anzupassen, sodass Sie denselben HTML-Code haben, ihn aber erstellen können ansprechbar zur Geräteauflösung:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}CSS-Komprimierung
Sie können im obigen Beispiel sehen, dass es einen Kommentar, eine Medienabfrage und mehrere Stile gibt, die Leerzeichen und Zeilenvorschübe verwenden, um die Ansicht des CSS zu organisieren. Es ist eine gute Praxis, Ihr CSS auf Ihrer Website zu verkleinern oder zu komprimieren, um die Dateigröße und damit die Zeit zu reduzieren, die zum Anfordern und Rendern Ihres Designs benötigt wird. Es ist kein geringer Betrag … bei einigen der oben genannten Beispiele können Sie über 50 % Ersparnis sehen.
Viele Serverkonfigurationen bieten Tools, die CSS automatisch im laufenden Betrieb komprimieren und die minimierte Datei zwischenspeichern, sodass Sie dies nicht manuell tun müssen.
Was ist SCSS?
Freches CSS (SCSS) ist ein CSS-Präprozessor, der der CSS-Sprache zusätzliche Funktionalität und Syntax hinzufügt. Es erweitert die Fähigkeiten von CSS, indem es die Verwendung von Variablen, Mixins, Funktionen und anderen Features ermöglicht, die in Standard-CSS nicht verfügbar sind.
SCSS-Vorteile
- Verbesserte Wartbarkeit: Durch die Verwendung von Variablen können Sie Werte an einem Ort speichern und sie in Ihrem Stylesheet wiederverwenden, was die Pflege und Aktualisierung Ihrer Stile erleichtert.
- Bessere Organisation: Mit Mixins können Sie Stilgruppen gruppieren und wiederverwenden, wodurch Ihr Stylesheet übersichtlicher und leichter lesbar wird.
- Erweiterte Funktionalität: SCSS enthält viele Features, die in Standard-CSS nicht verfügbar sind, wie Funktionen, Kontrollstrukturen (z. B. if/else) und arithmetische Operationen. Dies ermöglicht ein dynamischeres und ausdrucksstärkeres Styling.
- Bessere Leistung: SCSS-Dateien werden in CSS kompiliert, was die Leistung verbessern kann, indem die Menge an Code reduziert wird, die vom Browser analysiert werden muss.
SCSS-Nachteile
- Lernkurve: SCSS hat eine andere Syntax als Standard-CSS, und Sie müssen diese neue Syntax lernen, bevor Sie sie effektiv verwenden können.
- Zusätzliche Komplexität: Obwohl SCSS Ihr Stylesheet übersichtlicher und pflegeleichter machen kann, kann es auch zusätzliche Komplexität in Ihre Codebasis einbringen, insbesondere wenn Sie mit den neuen Funktionen und der Syntax nicht vertraut sind.
- Werkzeuge: Um SCSS zu verwenden, benötigen Sie einen Compiler, um Ihren SCSS-Code in CSS zu übersetzen. Dies erfordert zusätzliche Einrichtung und Werkzeuge, was für einige Entwickler eine Eintrittsbarriere darstellen kann.
In diesem Beispiel unten verwendet der SCSS-Code Variablen zum Speichern von Werten ($primary-color und $font-size), die im gesamten Stylesheet wiederverwendet werden können. Der aus diesem SCSS-Code generierte CSS-Code ist äquivalent, enthält jedoch nicht die Variablen. Stattdessen werden die Werte der Variablen direkt im CSS verwendet.
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}Ein weiteres Feature von SCSS, das in diesem Beispiel demonstriert wird, sind verschachtelte Stile. Im SCSS-Code ist die h1 Stile sind innerhalb der verschachtelt body Stile, was in Standard-CSS nicht möglich ist. Wenn der SCSS-Code kompiliert wird, werden die verschachtelten Stile im CSS-Code zu separaten Stilen erweitert.
Insgesamt bietet SCSS viele Vorteile gegenüber Standard-CSS, aber es ist wichtig, die Kompromisse zu berücksichtigen und das richtige Tool für Ihr Projekt basierend auf Ihren Anforderungen und Einschränkungen auszuwählen.
Weitere Artikeln Martech Zone Inhalt
