Селекторлар топтасуы

Егер бірнеше селектор ү шін стильдерді хабарлау блоктары сə йкескелсе (мысалы, алғ ашқ ы ү ш дең гейдің тақ ырыптары жасыл тү с болуынқ алаймыз), оларды топтастыруғ а болады. Бұ л ү шін бір стиль қ олданатынселекторларды ү тір (,) арқ ылы санап шығ амыз. Мысалы:

Жасылдан басқ а да тақ ырыптарғ а тү стен ө зге ө лшем бергіміз келеді.Онда біз жай ғ ана стильдер кестесіне жазамыз:

h1, h2, h3{

color: green;

}

Жоғ арыдакө рсетілгендей, тақ ырыптардаə ртү рліө лшемболады, бірақ тақ ырыптардың барлығ ыжасылтү сте:

h1, h2, h3{

color: green;

}

h1{

font-size: 18px;

}

h2{

font-size: 16px;

}

h3{

font-size: 14px;

}

Псевдо элементтер жə не псевдо кластар

Жоғ арыда айтып ө ткендей, CSS HTML элементтеріне қ олданылады. Бірақ HTML-да кө рінбейтін бірнеше элемент бар, дегенмен олар бетте кө рінеді (сө здің алғ ашқ ы ə рпі жə не азат жолдың алғ ашқ ы қ атары). Осындай элементтерді псевдо элементтер деп атайды. Оларғ а HTML элементтері сияқ ты стиль беруге болады.

Псевдоэлементкемыналаржатады:

- first-letter – сө здің алғ ашқ ы ə рпіне стиль береді. Біздің html-парағ ымызда жалғ ыз азат жол болса да, ол былай белгіленеді:

< html>

< head>

< title> Қ ұ жат тақ ырыбы< /title>

< link rel=«stylesheet» type=«text/css» href=«style.css»>

< /head>

< body>

< p>

Азат жол мə тінін жə не алғ ашқ ы ә ріпті қ ызыл тү спен белгіледік.

< /p>

< /body>

< /html>

Азат жолдағ ы алғ ашқ ы ә ріпті қ ызыл тү спен белгілеу ү шін стильдер кестесіне мынаны жазамыз:

p: first-letter{

color: red;

}

Біздің бетімізбраузердебылайкө рінеді:

first-line – азат жолдың алғ ашқ ы қ атарына стиль береміз. Азат жолдағ ы алғ ашқ ы қ атарды кө к тү спен белгілейміз. Оны стильдер кестесінде былай жазамыз:

p: first-letter{

color: red;

}

p: first-line{

color: blue;

}

Ендібіздің бетімізбраузердебылайкө рінеді:

Назар салып қ арасаң ыз, алғ ашқ ы ә ріп қ ызыл тү спен қ алды, себебі ол ү шін бө лек селектор жазылғ ан.

Псевдо элементтер жə не псевдокластар