Βασική Γλώσσα Γραμμάτων CSS

CSS Γλώσσα

CSS rules consist of two main parts: the selector, and one or more declarations.

selector {declaration1; declaration2; ... declarationN }

The selector is usually the HTML element you need to change the style of.

Each declaration consists of a property and a value.

Properties (property) are the style attributes (style attribute) you want to set. Each property has a value. Properties and values are separated by a colon.

selector {property: value}

The following line of code defines the text color of the h1 element as red and sets the font size to 14 pixels.

In this example, h1 is the selector, color and font-size are properties, red and 14px are values.

h1 {color:red; font-size:14px;}

The following illustration shows the structure of the above code:

CSS Γλώσσα

Tip:Please use curly braces to enclose the declarations.

Different ways of writing values and units

In addition to the English word 'red', we can also use the hexadecimal color value #ff0000:

p { color: #ff0000; }

To save bytes, we can use the abbreviated form of CSS:

p { color: #f00; }

We can also use RGB values in two ways:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

Please note that when using RGB percentages, even when the value is 0, you must write the percentage symbol. However, in other cases, you do not need to do this. For example, when the size is 0 pixels, there is no need to use the px unit after 0 because 0 is 0 regardless of the unit.

Remember to write the quotes

Tip:If the value is several words, you need to enclose the value in quotes:

p {font-family: "sans-serif";}

Multiple declarations:

Tip:If you need to define more than one declaration, you must separate each declaration with a semicolon. The following example shows how to define a centered paragraph with red text. The last rule is that you do not need to add a semicolon because a semicolon in English is a separator, not an end symbol. However, most experienced designers add a semicolon at the end of each declaration, which is beneficial because it minimizes the possibility of making mistakes when adding or removing declarations from existing rules. It looks like this:

p {text-align:center}; color:red;}

Πρέπει να περιγράψετε μια ιδιότητα ανά γραμμή, ώστε να βελτιώσετε τη διαβάσιμότητα της οριστικής περιγραφής στυλ, όπως εδώ:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Χώροι και κεφαλαία-μικρά

Οι περισσότερες τάσεις περιέχουν περισσότερες από μια γραμμή κανόνων και οι περισσότεροι κανόνες περιέχουν περισσότερες από μια δήλωση. Η χρήση πολλαπλών δηλώσεων και χώρων καθιστά τις τάσεις πιο εύκολες στην επεξεργασία:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Η παρουσία κενών δεν επηρεάζει τη λειτουργία του CSS στον πλοηγό, όπως και με το XHTML, το CSS δεν είναι ευαίσθητο στις κεφαλαία και μικρές γραμμές. Ωστόσο, υπάρχει μια εξαίρεση: αν συνεργάζεται με το έγγραφο HTML, τα ονόματα κλάσης και id είναι ευαίσθητα στις κεφαλαία και μικρές γραμμές.