Príklad komentára CSS - Ako komentovať CSS

Komentáre sa v CSS používajú na vysvetlenie bloku kódu alebo na dočasné zmeny počas vývoja. Komentovaný kód sa nespustí.

Jednoriadkové aj viacriadkové komentáre v CSS sa začínajú /*a končia tým */, že do svojej šablóny štýlov môžete pridať ľubovoľný počet komentárov. Napríklad:

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

Štylizovaním komentárov môžete tiež zvýšiť ich čitateľnosť:

/* *** * 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. *** */

Organizácia CSS s komentármi

Vo väčších projektoch môžu súbory CSS rýchlo narastať a bude ťažké ich udržiavať. Môže byť užitočné usporiadať vaše CSS do samostatných častí s obsahom, aby ste v budúcnosti ľahšie našli určité pravidlá:

/* * 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 ***/

Trochu viac o CSS: Syntax a selektory CSS

Keď hovoríme o syntaxi CSS, hovoríme o tom, ako sú veci usporiadané. Existujú pravidlá o tom, čo sa kam týka, takže môžete písať CSS konzistentne a program (napríklad prehľadávač) ho môže interpretovať a správne ho použiť na stránku.

Existujú dva hlavné spôsoby písania CSS.

Vložené CSS

Špecifiká špecifickosti CSS: Triky CSS

Inline CSS aplikuje štýl na jeden prvok a na jeho podriadené prvky, kým nenastane iný štýl, ktorý prepíše prvý.

Ak chcete použiť vložený CSS, pridajte atribút style do prvku HTML, ktorý chcete upraviť. V úvodzovkách uveďte zoznam dvojíc kľúč / hodnota (každý oddelených dvojbodkou), oddelených bodkočiarkou, označujúcich štýly, ktoré chcete nastaviť.

Tu je príklad vloženého CSS. Slová „Jeden“ a „Dva“ budú mať žltú farbu pozadia a červenú farbu textu. Slovo „tri“ má nový štýl, ktorý má prednosť pred prvým, a bude mať farbu pozadia zelenú a farbu textu azúrovú. V tomto príklade aplikujeme štýly na značky, ale štýl môžete použiť na akýkoľvek prvok HTML.

 One Two Three 

Interné CSS

Aj keď písanie vloženého štýlu predstavuje rýchly spôsob zmeny jedného prvku, existuje efektívnejší spôsob, ako použiť rovnaký štýl na veľa prvkov stránky naraz.

Interný CSS má svoje štýly uvedené v značke a je vložený do značky.

Tu je príklad, ktorý má podobný efekt ako „vložený“ príklad vyššie, s výnimkou toho, že CSS bol extrahovaný do svojej vlastnej oblasti. Slová „Jeden“ a „Dva“ sa budú zhodovať s divvoličom a budú mať červený text na žltom pozadí. Slová „tri“ a „štyri“ sa budú zhodovať aj so divselektorom, ale zhodujú sa tiež so .nested_divselektorom, ktorý sa vzťahuje na akýkoľvek prvok HTML, ktorý odkazuje na túto triedu. Tento konkrétnejší selektor prepíše prvý a nakoniec sa zobrazia ako azúrový text na zelenom pozadí.

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

Vyššie uvedené selektory sú mimoriadne jednoduché, môžu však byť dosť zložité. Napríklad je možné použiť štýly iba na vnorené prvky; to znamená prvok, ktorý je potomkom iného prvku.

Tu je príklad, keď určujeme štýl, ktorý by sa mal použiť iba na divprvky, ktoré sú priamym potomkom iných divprvkov. Výsledkom je, že „dva“ a „tri“ sa zobrazia ako červený text na žltom pozadí, ale „jeden“ a „štyri“ zostanú nedotknuté (a najpravdepodobnejšie čierny text na bielom pozadí).

 div > div { color: red; background: yellow; } One Two Three Four 

Externé CSS

Všetky štýly majú svoj vlastný dokument, ktorý je prepojený v značke. Prípona prepojeného súboru je.css