Синтаксис CSS

На этой странице:

Язык CSS (Cascading Style Sheets, «кас­кад­ные таб­ли­цы сти­лей») при­ме­ня­ет­ся для оформ­ле­ния веб-стра­ниц и не­ко­то­рых дру­гих ре­сур­сов. Код CSS обыч­но раз­ме­ща­ет­ся в от­дель­ном фай­ле, ко­то­рый под­клю­ча­ет­ся к до­ку­мен­ту HTML. В спе­ци­аль­ных слу­ча­ях код CSS так­же мо­жет вклю­чать­ся не­по­средст­вен­но в до­ку­мент HTML.

Пример кода CSS

Рассмот­рим при­мер ко­да CSS, ко­то­рый бу­дет ис­поль­зо­ван в даль­ней­ших объ­яснениях:

h1 {
  color: #900;
  text-align: center;
}(1)

p {
  font-size: 0.9em;
}

Этот код озна­ча­ет сле­дующее:

Основные понятия CSS

Последо­ва­тель­ность ин­струк­ций на язы­ке CSS на­зы­ва­ет­ся таб­ли­цей сти­лей (style sheet). На­при­мер, весь код (1) — это таб­ли­ца стилей.

Простая таб­ли­ца сти­лей со­сто­ит из од­ной или не­сколь­ких час­тей, ко­то­рые на­зы­ва­ют­ся пра­ви­ла­ми. Пра­ви­ло (rule, rule set) за­да­ёт оформ­ле­ние для ка­ко­го-ли­бо эле­мен­та, груп­пы эле­мен­тов или дру­гих ком­по­нен­тов до­ку­мен­та HTML. Таб­ли­ца сти­лей (1) со­сто­ит из двух пра­вил, пер­вое из ко­то­рых за­да­ёт оформ­ле­ние для за­го­лов­ков пер­во­го уров­ня, а вто­рое — для абзацев.

Синтак­сис пра­ви­ла CSS и его со­став­ные час­ти пред­став­ле­ны на рис. 1.

Рис. 1. Правило CSS
Рис. 1.
Правило CSS

Правило на­чи­на­ет­ся с се­лек­то­ра. Се­лек­тор (se­lec­tor) обо­зна­ча­ет, на ка­кие эле­мен­ты (или дру­гие объ­ек­ты) дейст­ву­ет дан­ное пра­ви­ло. На­при­мер, се­лек­тор h1 в таб­ли­це сти­лей (1) обо­зна­ча­ет, что пер­вое пра­ви­ло рас­про­стра­ня­ет­ся на эле­мен­ты h1. Бы­ва­ют бо­лее слож­ные се­лек­то­ры: на­при­мер, се­лек­тор tbody th обо­зна­ча­ет, что на­чи­на­ю­ще­е­ся с не­го пра­ви­ло рас­про­стра­ня­ет­ся на эле­мен­ты th, ко­то­рые вло­же­ны в эле­мент tbody.

За се­лек­то­ром сле­ду­ет блок (block), со­дер­жа­щий ин­струк­ции по оформ­ле­нию. Блок огра­ни­чен фи­гур­ны­ми скоб­ка­ми: «{» и «}».

В блоке со­дер­жит­ся од­на или не­сколь­ко кон­струк­ций, ко­то­рые на­зы­ва­ют­ся объ­яв­ле­ни­я­ми. Объ­яв­ле­ние (de­cla­ra­tion) за­да­ёт ка­кую-ли­бо кон­крет­ную ха­рак­те­рис­ти­ку оформ­ле­ния. На­при­мер, в таб­ли­це стил­ей (1) это объ­явление:

color: #900;

задаёт тём­но-крас­ный цвет тек­ста, а это объ­явление:

font-size: 0.9em;

задаёт умень­шен­ный раз­мер шриф­та. Каж­дое объ­яв­ле­ние за­кан­чи­ва­ет­ся точ­кой с за­пя­той: «;». (В по­след­нем объ­яв­ле­нии точ­ка с за­пя­той не обя­за­тель­на, но её ре­ко­мен­ду­ет­ся ставить.)

Объявление со­сто­ит из свойст­ва и зна­че­ния. Свойст­во (pro­per­ty) ука­зы­ва­ет, на ка­кое ка­чест­во эле­мен­та (цвет, раз­мер, вы­рав­ни­ва­ние и т. д.) дейст­ву­ет объ­яв­ле­ние. Зна­че­ние (value) ука­зы­ва­ет, что имен­но про­ис­хо­дит с этим ка­чест­вом (ка­кой цвет, по ка­ко­му краю вы­рав­ни­ва­ние и т. д.). Меж­ду свойст­вом и зна­че­ни­ем ста­вит­ся двое­то­чие: «:».

В таб­ли­це сти­лей (1) — три свойст­ва: color (цвет тек­ста), text-align (го­ри­зон­таль­ное вы­рав­ни­ва­ние) и font-size (раз­мер шриф­та), их зна­че­ния — со­от­ветст­вен­но #900 («тём­но-крас­ный»), cen­ter («по цент­ру») и 0.9em («90 % от обыч­но­го размера»).

В специ­фи­ка­ции CSS пере­чис­ле­ны все су­щест­ву­ю­щие свойст­ва и до­пус­ти­мые зна­че­ния каж­до­го свойства.

Кроме пра­вил, в таб­ли­це сти­лей мо­гут быть ди­рек­ти­вы (at-rules) — ин­струк­ции, на­чи­на­ю­щи­е­ся с сим­во­ла «@». Ди­рек­ти­вы по­дроб­нее рас­смат­ри­ва­ют­ся в дру­гом разделе.

Пробельные символы в коде CSS

Для улуч­ше­ния на­гляд­но­сти и удобо­чи­та­е­мо­сти таб­лиц сти­лей меж­ду от­дель­ны­ми ком­по­нен­та­ми ко­да мож­но раз­ме­щать про­бель­ные сим­во­лы: про­бел (U+0020), пере­вод стро­ки (U+000A, U+000D), та­бу­ля­цию (U+0009). В част­но­сти, пер­вое пра­ви­ло из таб­ли­цы сти­лей (1) мож­но за­пи­сать так:

h1
{
  color: #900;
  text-align: center;
}

Это же пра­ви­ло мож­но раз­мес­тить на од­ной строке:

h1 {color: #900; text-align: center;}

Рекомен­ду­ет­ся при­дер­жи­вать­ся еди­но­го прин­ци­па раз­ме­ще­ния про­бель­ных сим­во­лов в ко­де. Я пред­по­чи­таю прин­цип, ко­то­рый про­де­монст­ри­ро­ван в таб­ли­це сти­лей (1):