Пример ЦСС коментара - Како коментарисати ЦСС

Коментари се користе у ЦСС-у да објасне блок кода или да направе привремене промене током развоја. Коментирани код се не извршава.

И једноструки и вишелинијски коментари у ЦСС-у почињу са /*и завршавају се */, а у листу стилова можете додати колико год желите коментара. На пример:

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

Такође можете своје коментаре учинити читљивијим тако што ћете их стилизовати:

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

Организовање ЦСС-а са коментарима

У већим пројектима ЦСС датотеке могу брзо да повећају величину и постају тешке за одржавање. Може бити корисно организовати ЦСС у засебне одељке са садржајем како бисте олакшали проналажење одређених правила у будућности:

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

Још мало о ЦСС-у: ЦСС синтакса и селектори

Када говоримо о синтакси ЦСС-а, говоримо о томе како су ствари постављене. Постоје правила о томе шта где иде, како бисте могли доследно да пишете ЦСС, а програм (попут прегледача) може да га протумачи и правилно примени на страници.

Постоје два главна начина за писање ЦСС-а.

Уграђени ЦСС

Специфичности ЦСС-а Специфичност: ЦСС трикови

Инлине ЦСС примењује стил на један елемент и његову децу, све док се не наиђе на други стил који замењује први.

Да бисте применили уграђени ЦСС, додајте атрибут „стиле“ ХТМЛ елементу који желите да измените. Унутар наводника укључите листу парова кључ / вредност раздвојене тачком и зарезом (сваки одвојени двотачком) који указују на стилове које треба поставити.

Ево примера уграђеног ЦСС-а. Речи „Један“ и „Два“ имаће жуту боју позадине, а црвену боју текста. Реч „Три“ има нови стил који замењује први и имаће позадину зелене и текст цијан боје. У примеру, примењујемо стилове на ознаке, али стил можете применити на било који ХТМЛ елемент.

 One Two Three 

Интерни ЦСС

Иако је писање уметнутог стила брз начин за промену једног елемента, постоји ефикаснији начин примене истог стила на више елемената странице одједном.

Интерни ЦСС има своје стилове назначене у ознаци и уграђен је у ознаку.

Ево примера који има сличан ефекат као претходни пример „инлине“, осим што је ЦСС издвојен у своје подручје. Речи „Један“ и „Два“ подудараће се са divбирачем и биће црвени текст на жутој позадини. Речи „Три“ и „Четири“ такође ће се подударати са divселектором, али се такође подударају са .nested_divселектором који се односи на било који ХТМЛ елемент који се односи на ту класу. Овај специфичнији селектор поништава први и они се на крају појављују као цијан текст на зеленој позадини.

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

Горе приказани селектори су изузетно једноставни, али могу бити прилично сложени. На пример, могуће је применити стилове само на угнежђене елементе; односно елемент који је подређен другом елементу.

Ево примера где наводимо стил који треба применити само на divелементе који су директно подређени другим divелементима. Резултат је да се „Два“ и „Три“ појављују као црвени текст на жутој позадини, али „Један“ и „Четири“ остају непромењени (и највероватније црни текст на белој позадини).

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

Спољни ЦСС

Сви стајлинги имају свој документ који је повезан у ознаку. Додатак повезане датотеке је.css