MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

Als Nächstes werden wir uns eingehender mit der CSS-Syntax befassen und untersuchen, wie Eigenschaften und ihre Werte zu Deklarationen, Mehrfachdeklarationen zu Deklarationsblöcken und Deklarationsblöcke und Selektoren zu vollständigen CSS-Regeln werden. Abgerundet wird der Artikel durch einen Blick auf andere CSS-Syntaxfunktionen wie Kommentare und Leerzeichen.

Prerequisites:

Grundlegende Computerkenntnisse, installierte Basissoftware, Grundkenntnisse im Umgang mit Dateien, HTML-Grundlagen (Einführung in HTML) und eine Vorstellung von der Funktionsweise von CSS.

Objective:

Grundlegende Syntaxstrukturen von CSS im Detail lernen.

Hinweis: CSS ist eine deklarative Sprache, deren Syntax relativ einfach und leicht verständlich ist. Darüber hinaus verfügt es über ein sehr nützliches System zur Fehlerbehebung, mit dem Sie Fehler machen können, ohne alles zu beschädigen. Beispielsweise werden nicht verstandene Deklarationen im Allgemeinen einfach ignoriert. Der Nachteil ist, dass es schwieriger sein kann zu verstehen, wo Fehler herkommen. Lesen Sie weiter und alles wird irgendwann klar.

Im Grunde besteht CSS aus zwei Bausteinen:

  • Eigenschaften: Vom Menschen lesbare Erkennungsmerkmale, die angeben, welche Stilmerkmale (z. B. Schriftart, Breite, Hintergrundfarbe) Sie ändern möchten.
  • Werte: Jede angegebene Eigenschaft erhält einen Wert, der angibt, wie Sie diese Stilmerkmale ändern möchten (z. B. wie Sie Schriftart, Breite oder Hintergrundfarbe ändern möchten).

Eine mit einem Wert gepaarte Eigenschaft wird als CSS-Deklaration bezeichnet. CSS-Deklarationen werden in CSS-Deklarationsblöcke eingefügt. Schließlich werden CSS-Deklarationsblöcke mit Selektoren gepaart, um CSS-Regelsätze (oder CSS-Regeln) zu erstellen.

A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. And finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules).

Bevor wir uns mit der Theorie und den schriftlichen Erklärungen beschäftigen, schauen wir uns ein konkretes Beispiel an (wir haben in unserem vorherigen Artikel etwas sehr Ähnliches gesehen)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mein CSS Experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist mein erstes CSS Beispiel</p>

    <ul>
      <li>Das ist</li>
      <li>eine Liste</li>
    </ul>
  </body>
</html>

Und die CSS Datei:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

Die Kombination dieser beiden ergibt folgendes Ergebnis:

Syntax im Detail

CSS Deklarationen

Das Festlegen von CSS-Eigenschaften auf bestimmte Werte ist die Kernfunktion der CSS-Sprache. Die CSS-Maschine berechnet, welche Deklarationen für jedes einzelne Element einer Seite gelten, um es entsprechend zu gestalten und zu gestalten. Die Eigenschaft und der Wert in jedem Paar sind durch einen Doppelpunkt (:) getrennt.

Es gibt mehr als 300 verschiedene Eigenschaften in CSS und nahezu unendlich viele verschiedene Werte. Nicht alle Paare von Eigenschaften und Werten sind zulässig. Für jede Eigenschaft ist eine bestimmte Liste gültiger Werte definiert.

Wichtig: Wenn eine Eigenschaft unbekannt ist oder ein Wert für eine bestimmte Eigenschaft nicht gültig ist, wird die Deklaration als ungültig betrachtet und von der CSS-Maschine des Browsers vollständig ignoriert.

Wichtig: In CSS (und anderen Webstandards) wurde die US-Rechtschreibung als Standard festgelegt, um Unsicherheiten zu vermeiden. Zum Beispiel sollte color immer als color buchstabiert werden. Wenn Sie es colour buchstabieren, funktioniert es nicht.

Aktives Lernen: Entdecke die Deklarationen

Im obigen Beispiel gibt es fünf separate CSS-Deklarationen. Können Sie die ungültige (falsche oder falsche) Erklärung identifizieren und herausfinden, warum sie ungültig ist? Das CSS wird nachfolgend wiederholt, um es einfacher zu finden:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

CSS Deklarationsblöcke

Deklarationen werden in Blöcken gruppiert, wobei jeder Satz von Deklarationen von einer öffnenden geschweiften Klammer ({) und einer schließenden (}) umbrochen wird.

Die Deklarationen innerhalb eines Deklarationsblocks müssen durch Semikolons (;) getrennt werden, da der Code sonst nicht funktioniert (oder zumindest zu unerwarteten Ergebnissen führt). Die letzte Deklaration eines Blocks muss nicht mit einem Semikolon abgeschlossen werden. Dies wird jedoch häufig als guter Stil angesehen, da das Hinzufügen nicht vergessen wird, wenn der Block mit einer anderen Deklaration erweitert wird.

Hinweis: Blöcke können manchmal verschachtelt sein. In solchen Fällen müssen öffnende und schließende Klammern logisch verschachtelt sein, genauso wie die Tags verschachtelter HTML-Elemente. Das häufigste Beispiel, auf das Sie stoßen, sind @ -Regeln, Blöcke, die mit einem @ -Identifikator wie @media, @font-face, usw. beginnen (Siehe CSS-Anweisungen unten).

Hinweis: Ein Deklarationsblock kann leer sein - dies ist absolut gültig.

Aktives Lernen: Wo sind die Deklrationsblöcke?

Können Sie im folgenden CSS-Codeblock die drei separaten CSS-Deklarationsblöcke identifizieren?

h1 {
  color: blue;
  background-color: yellow;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

CSS Selektoren und Regeln

Ein Puzzelteil fehlt uns - wir müssen klären, wie wir unseren Deklarationsblöcken mitteilen können, auf welche Elemente sie angewendet werden sollen. Dazu wird jedem Deklarationsblock ein Selektor vorangestellt - ein Muster, das mit einigen Elementen auf der Seite übereinstimmt. Die zugehörigen Erklärungen werden nur auf diese Elemente angewendet. Der Selektor und der Deklarationsblock werden als Regelsatz oder oft einfach nur als Regel bezeichnet.

Selektoren können sehr kompliziert werden - Sie können festlegen, dass eine Regel mehreren Elementen entspricht, indem Sie mehrere durch Kommas getrennte Selektoren (eine Gruppe) einschließen, und Selektoren können miteinander verkettet werden. Zum Beispiel möchte ich jedes Element mit der Klasse "blah" auswählen, aber nur, wenn es sich in einem <article> -Element befindet und nur, während der Mauszeiger darüber bewegt wird. Keine Sorge, mit zunehmender Erfahrung mit CSS werden die Dinge klarer, und im nächsten Artikel, Selectors, werden wir die Selektoren ausführlich erläutern.

Ein Element kann von mehreren Selektoren abgeglichen werden, daher können mehrere Regeln eine bestimmte Eigenschaft mehrmals festlegen. CSS legt fest, welche Vorrang vor den anderen haben und angewendet werden müssen. Dies wird als Kaskadenalgorithmus bezeichnet, und Sie erfahren mehr über die Funktionsweise von Kaskade und Vererbung.

Aktives Lernen: Endeckte die Selektoren-Gruppe

Können Sie im folgenden CSS-Block die Regel identifizieren, die für zwei verschiedene Elementtypen gilt?

h1 {
  color: blue;
  background-color: yellow;
}

p, li {
  color: red;
}

li {
  text-decoration: underline;
}

CSS-Anweisungen

CSS-Regeln sind die Hauptbausteine ​​eines Stylesheets - der häufigste Block, den Sie in CSS sehen werden. Es gibt aber auch andere Arten von Blöcken, auf die Sie gelegentlich stoßen werden - CSS-Regeln sind eine Art von CSS-Anweisungen. Die anderen Typen sind wie folgt:

  • At-rules are used in CSS to convey metadata, conditional information, or other descriptive information. They start with an at sign (@), followed by an identifier to say what kind of rule it is, then a syntax block of some kind, ending with a semi-colon (;). Each type of at-rule, defined by the identifier, will have its own internal syntax and semantics. Examples include: Specific syntax example:
    @import 'custom.css';
    This at-rule imports another CSS file into the current CSS.
  • Nested statements are a specific subset of at-rule, the syntax of which is a nested block of CSS rules that will only be applied to the document if a specific condition is matched:
    • The @media at-rule content is applied only if the device which runs the browser matches the expressed condition.
    • The @supports at-rule content is applied only if the browser actually supports the tested feature.
    • The @document at-rule content is applied only if the current page matches some conditions.
    Specific syntax example:
    @media (min-width: 801px) {
      body {
        margin: 0 auto;
        width: 800px;
      }
    }
    
    The above nested statement only applies the nested rule when the page's width exceeds 800 pixels.

You'll learn more about some types of at-rules and nested statements at appropriate places in the course.

Important: Any statement which isn't a ruleset, an at-rule, or a nested statement is invalid and therefore ignored.

Beyond syntax: make CSS readable

You now understand the basics of CSS syntax: you write some rules and if you write them incorrectly, they are just ignored. However, there are some best practices to make your CSS code easier to use and maintain.

White space

White space means actual spaces, tabs and new lines. You can add white space to make your stylesheets more readable.

In the same manner as HTML, the browser tends to ignore much of the whitespace inside your CSS; a lot of the whitespace is just there to aid readability for humans. In our first example below we have each declaration (and rule start/end) on its own line — this is arguably a good way to write CSS, as it makes it easy to maintain and understand:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but it is somewhat harder to read:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

The code layout you choose is usually a personal preference, although when you start to work in teams, you may find that the existing team has its own style guide that specifies an agreed convention to follow.

One area where you do need to be careful of whitespace in CSS is around the properties and their values. For example, the following is valid CSS:

margin: 0 auto;
padding-left: 10px;

But the following is invalid:

margin: 0auto;
padding- left: 10px;

0 and auto are two separate values, so 0auto is not recognised as a valid value for the margin property. The browser does not recognise padding- as a valid property. So you should always make sure to separate distinct values from one another by at least a space, but keep property names together as one unbroken string.

Comments

As with HTML, you are encouraged to make comments in your CSS, to help you understand how your code works when coming back to it after several months, and to help others understand it. Comments are also useful for temporarily commenting out certain parts of the code for testing purposes, for example if you are trying to find which part of your code is causing an error.

Comments in CSS begin with /* and end with */.

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

Shorthand

Some properties like font, background, padding, border, and margin are called shorthand properties — this is because they allow you to set several property values in a single line, saving time and making your code neater in the process.

For example, this line:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left (the same order as an analog clock). There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

Does the same thing as all these:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Whereas this line:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Does the same thing as all these:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

We won't attempt to teach these exhaustively — you'll come across many examples later on in the course, and you are advised to look up the shorthand property names in our CSS reference to find out more.

What's next

At this point, you should now understand the fundamentals of CSS syntax necessary to write a working style sheet that's easy to maintain over time. In the next article we will dig deep into CSS selectors, looking at the different ones available and how they work.

In this module

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: mellang
Zuletzt aktualisiert von: mellang,