Comentariile sunt folosite în CSS pentru a explica un bloc de cod sau pentru a face modificări temporare în timpul dezvoltării. Codul comentat nu se execută.

Atât comentariile simple, cât și cele pe mai multe linii din CSS încep cu /* și se termină cu */și puteți adăuga în foaia de stil câte comentarii doriți. De exemplu:

/* This is a single line comment*/
.group:after {
  content: "";
  display: table;
  clear: both;
}

/*
  This is
  a multi-line
  comment
*/

De asemenea, puteți face comentariile mai ușor de citit stilizându-le:

/*
***
* SECTION FOR H2 STYLE 
***
* A paragraph with information
* that would be useful for someone
* who didn't write the code.
* The asterisks around the paragraph 
* help make it more readable.
***
*/

Organizarea CSS cu comentarii

În proiecte mai mari, fișierele CSS pot crește rapid în dimensiuni și pot deveni greu de întreținut. Poate fi util să vă organizați CSS în secțiuni distincte, cu un cuprins, pentru a facilita găsirea anumitor reguli în viitor:

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Globals
*  4.0 - Color Palette
*  5.0 - Header
*  6.0 - Body
*    6.1 - Sliders
*    6.2 - Imagery
*  7.0 - Footer
*/

/*** 1.0 - Reset ***/

/*** 2.0 - Fonts ***/

/*** 3.0 - Globals ***/

/*** 4.0 - Color Palette ***/

/*** 5.0 - Header ***/

/*** 6.0 - Body ***/
h2 {
  font-size: 1.2em;
  font-family: "Ubuntu", serif;
  text-transform: uppercase;
}

/*** 5.1 - Sliders ***/

/*** 5.2 - Imagery ***/

/*** 7.0 - Footer ***/

Un pic mai multe despre CSS: Sintaxă și selectoare CSS

Când vorbim despre sintaxa CSS, vorbim despre modul în care lucrurile sunt aranjate. Există reguli despre ceea ce merge unde, atât pentru a putea scrie CSS în mod consecvent, cât și pentru un program (cum ar fi un browser) să-l poată interpreta și aplica corect pe pagină.

Există două moduri principale de a scrie CSS.

CSS în linie

Specificații privind specificitatea CSS: Trucuri CSS

Inline CSS aplică stilarea unui singur element și a copiilor săi, până când se întâlnește un alt stil care suprascrie primul.

Pentru a aplica CSS inline, adăugați atributul „style” la un element HTML pe care doriți să îl modificați. În interiorul ghilimelelor, includeți o listă delimitată de punct și virgulă de perechi cheie / valoare (fiecare la rândul său separate prin două puncte) care indică stilurile de setat.

Iată un exemplu de CSS inline. Cuvintele „One” și „Two” vor avea o culoare de fundal de culoare galbenă și text de culoare roșie. Cuvântul „Trei” are un stil nou care îl înlocuiește pe primul și va avea o culoare de fundal verde și o culoare de text cyan. În exemplu, aplicăm stiluri <div> etichete, dar puteți aplica un stil oricărui element HTML.

<div style="color:red; background:yellow">
  One
  <div>
    Two
  </div>
  <div style="color:cyan; background:green">
    Three
  </div>
</div>

CSS intern

În timp ce scrierea unui stil în linie este o modalitate rapidă de a schimba un singur element, există o modalitate mai eficientă de a aplica același stil multor elemente ale paginii simultan.

CSS intern are stilurile sale specificate în <style> tag-ul și este încorporat în <head> etichetă.

Iată un exemplu care are un efect similar cu exemplul „inline” de mai sus, cu excepția faptului că CSS a fost extras în propria sa zonă. Cuvintele „One” și „Two” se vor potrivi cu div selector și să fie text roșu pe un fundal galben. Cuvintele „Trei” și „Patru” se vor potrivi cu div selector, de asemenea, dar se potrivesc, de asemenea .nested_div selector care se aplică oricărui element HTML care face referire la acea clasă. Acest selector mai specific îl înlocuiește pe primul și ajung să apară ca text cyan pe un fundal verde.

<style type="text/css">
  div { color: red; background: yellow; }
  .nested_div { color: cyan; background: green; }
</style>

<div>
  One
  <div>
    Two
  </div>
  <div class="nested_div">
    Three
  </div>
  <div class="nested_div">
    Four
  </div>
</div>

Selectorele prezentate mai sus sunt extrem de simple, dar pot deveni destul de complexe. De exemplu, este posibil să aplicați stiluri numai elementelor imbricate; adică un element care este un copil al unui alt element.

Iată un exemplu în care specificăm un stil căruia ar trebui să i se aplice numai div elemente care sunt un copil direct al altora div elemente. Rezultatul este că „Two” și „Three” vor apărea ca text roșu pe un fundal galben, dar „One” și „Four” vor rămâne neafectate (și cel mai probabil text negru pe un fundal alb).

<style type="text/css">
  div > div { color: red; background: yellow; }
</style>

<div>
  One
  <div>
    Two
  </div>
  <div>
    Three
  </div>
</div>
<div>
  Four
</div>

CSS extern

Toate stilurile au propriul document care este legat în <head> etichetă. Extensia fișierului legat este .css