Псевдокластар

CSS-те тө рт псевдокласс бар. Олар сілтемемен жұ мыс жасауғ амү мкіндік береді. Сілтемеде тө рт жағ дай болады: қ арапайым, белсенді, барылатын жə не кө лбеу ә ріп қ осылғ ан. Сілтемелердің жағ дайы қ олдаушымен браузердің ісіне байланысты. Олардың іс-ə рекетіне байланысты тү рлістильдер алады. Осы стильдерді жазу ү шін псевдокластар бар:

• a: link – қ арапайым сілтеме стилін береді

• a: active – белсенді сілтеме стилін береді

• a: visited – барылатын сілтеме стилін береді

• a: hover – кө лбеу ә ріп қ осылғ ан сілтеме стилін береді

Есің ізде болса, сілтеме кө к тү сте жə не асты сызылғ ан болады. Біздің html-парағ ымыздағ ы сілтеме:

< html>

< head>

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

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

< /head>

< body>

< a href=«#»> сілтеме< /a>

< /body>

< /html>

Ол мынадай кө ріністе болады:

Сілте мені жасыл тү ске ө згертіп, астындағ ы сызық ты алып тастайық:

a{

color: green;

text-decoration: none;

}

text-decoration сипаты мə тін астының сызылуын қ амтамасыз етіп, ал оның none мә нісі астындағ ы сызық тың алып тастауғ а жауап береді:

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

a{

color: green;

text-decoration: none;

}

a: hover{

color: red;

}

Браузердегі бетің ізді жаң артсаң ыз, сілтемеге барғ анда оның тү сі жасылдан қ ызыл тү ске ө згергеніне куə боласыз.

Дә ріс 9. HTML тіліндегі кестелер

Жоспар:

- Ү ш бағ аналы кесте;

- Екі қ атарлык есте;

- Жуан шекаралы кесте;

- Шекарасыз кесте;

- Бағ ана тақ ырыбы;

- Қ атар тақ ырыбы;

- Бағ аналарды біріктіру;

- Қ атарларды біріктіру;

- Ұ яшық тарды кең ейту.

Веб-бет жасау барысында кестелерді жасап ү йрену ө те маң ызды. Себебі, кестені мə тінге байланысты тү рлі ө лшемде, тү рлі кө ріністе, шекараларын жуан немесе жің ішке етіп істеу арқ ылы қ олданушығ а қ ұ жатты оң ай оқ уғ а мү мкіндік беріледі.

< table> < /table> тегі арасына кестені қ оямыз. Кестенің ішінежазылатын сө зіміз < td> < /td> тегі арасына жазылады. border = 1 кестешекарасының қ алың дығ ын білдіреді.

< html>

< head>

< title> Кестеқ ою< /title>

< /head>

< body>

< h4> Бірбағ аналыкесте: < /h4>

< table border=«1»>

< td> А< /td>

< /table>

< /body>

< /html>

Сурет 43. Бірбағ аналыкесте

Ү ш бағ аналы кесте

Ү ш бағ аналы кестеде ə р бағ анадағ ы сө зді < td> < /td> тегке орналастырамыз.

< html>

< head>

< title> Кестеқ ою< /title>

< /head>

< body>

< h4> Бірқ атаржə неү шбағ ана: < /h4>

< table border=«1»>

< td> Ана< /td>

< td> Ə же< /td>

< td> Бала< /td>

< /table>

< /body>

< /html>

Сурет 44. Ү шбағ аналыкесте

Екі қ атарлык есте

Бірінші қ атарда орналасатын ү ш сө здің ө з < td> < /td> тегтерінқ атарғ а бө луші < tr> < /tr> тегтің ішіне саламыз. Екінші қ атарда да солай. Кестеміз екіқ атар болу ү шін екі рет < tr> < /tr> тегті пайдаланамыз.

< html>

< head>

< title> Кесте қ ою< /title>

< /head>

< body>

< h4> Екі қ атар жə не ү ш бағ ана: < /h4>

< table border=«1»>

< tr>

< td> Ана < /td>

< td> Ə же < /td>

< td> Бала < /td>

< /tr>

< tr>

< td> Ə ке < /td>

< td> Ата < /td>

< td> Қ ыз < /td>

< /tr>

< /table>

< /body>

< /html>

Сурет 45. Екі қ атарлы кесте