Класс бойынша селекторлар

Жоғ арыда айтып ө ткен мысалымызда қ ызғ ылт тү сті мə тінде азатжолжасап, ондай id тек қ ана біреу болады деп кө рсеттік. Ал егер де біз екі неодан да кө п азат жолда қ ызғ ылт тү сті мə тін болуын қ аласақ не болады? Олү шін HTML-де class деген параметр бар, class-тың мә нісі ретінде соның атауы кө рсетіледі.

Html-парақ қ а тағ ы да екі азат жол қ осып, оларғ а class=”pink” қ осамыз:

< html>

< head>

< title> CSS class< /title>

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

< /head>

< body>

< h1> Бұ л бірінші дең гейлі тақ ырып< /h1>

Бұ л жерде жай мə тін

< h2> Бұ л екінші дең гейлі тақ ырып< /h2>

Бұ л жерде жай мə тін

< p> Жай азат жол< /p>

< pid=«pink»> Идентификаторлы азат жол< /p>

< p class=«pink»> (class) pink класы мен азат жол< /p>

< p class=«pink»> (class) pink класы мен азат жол< /p>

< /body>

< /html>

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

body{

background: blue;

color: white;

}

h1{

color: red;

}

h2{

color: yellow;

}

p{

color: black;

}

p#pink{

color: pink;

}

p.pink{

color: pink;

}

Бұ ндай класпен азат жолдарды қ алғ анымызша жасауғ а болады.

Осы аралық тағ ы қ орытындыны шығ арсақ:

- Егер барлық бірдей (ұ қ сас) элементтерге (мысалы, барлық h1 тақ ырыптарғ а) бір стиль қ ою керек болса, онда селектор тек қ ана мына элементтен тұ рады(мысалы, p{color: black; })

- Егер де элемент (кез келген: азат жол, тақ ырып жə не т.б.) басқ аларынан ерекшеленуі қ ажет болса, онда оғ ан (id) идентификаторы қ осылып, стильдер кестесіндегі бө лгіш ретінде тор (#) белгісі қ олданылады. Мысалы, p#pink{color: pink; }

- Егер бетте бірдей стильдегі бірнеше элемент болса, онда оларғ а (class) класы қ осылып, стильдер кестесіндегі бө лгіш нү кте (.) белгісі болады. Мысалы: p.pink{color: pink; }

- Идентификатордың класқ а қ арағ анда біраз артық шылығ ы бар. Сондық тан қ андай да бір элемент ү шін класс та, идентификатор да кө рсетілсе, онда идентификатор стилі қ олданылады.

Жоғ арыда айтып ө ткендей, идентификаторлар мен кластарды html-дің кез келген элементімен беруге болады. Бірақ кө бінесе былай болады: ә деттетү рлі элементтерді бір ғ ана стильмен, мысалы, жасыл тү спен белгілегімізкеледі. Осындай жағ дайда бірың ғ айланғ ан селекторды қ олдануғ а болады.Ондай селекторларда элемент аты кө рсетілмейді, класс немесеидентификатор жə не атау белгісі ретінде нү кте немесе тор кө рсетіледі.

Мысалы:

.red{

color: red;

}

#yellow{

color: yellow;

}

Сө йтіп, қ андайэлементке (тақ ырып, азат жолнесілтемеге) class=”red” берсек те, мə тін тү сі қ ызыл болады. Тек бір элементке id=”yellow” береаламыз жə не бұ л элемент мə тінінің тү сі сары болады.

Мә нмə тіндік селектор

Бізде мынадай кодпен html-парақ ша бар делік:

< html>

< head>

< title> Элемент бойынша селекторлар< /title>

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

< /head>

< body>

< p> Бұ лмə тіназатжолтаорналасқ ан< /p>

Бұ лжаймə тін.

< i> Бұ лмə тінкө лбеуә ріппенбелгіленген< /i>

< p> Бұ лмə тіназатжолдаорналасқ ан, бірақ < i> бұ лбө лігікө лбеуә ріппенбелгіленген< /i> < /p>

< /body>

< /html>

Мə тіндекө лбеуә ріптің (курсив) белгіленуінқ алап, онысарытү скебояймыз. Сонда біз стильдер кестесіне элемент бойынша селектор жазамыз:

i{

color: green;

}

Қ азір біздің html-парақ мынадай кө ріністе:

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

p i{

color: green;

}

Бізбұ лстильді p элементінен i элементінеауыстырдық. Бұ ндаэлементаттарынбір-біріненбосаралық жер (пробел) ажыратады. Осындайселекторлар мә нмə тіндік селектор деп аталады. Енді біздің бетіміз браузердемынадай кө рініс табады: