CSS стильдерін Web-құжатқа енгізу әдістері
CSS стильдер кестесін Web-құжатқа енгізудің бірнеше әдістері белгілі. Олар бір-бірінен мағынасы және мүмкіндіктерімен бөлектенеді. Бұл бөлімде осы әдістерді қарастырамыз.
Браузерлер стильдер тізбегін олардың орындалу приоритетіне қарай төмендегіше қолданады:
- ішкі стильдер (құжатқа <style> атрибуттарымен енген стильдер);
- енгізілген стильдер (құжатқа <body> тегімен енген стильдер);
- глобаль стильдер (құжатқа тақырып бөлімінде <style> тегімен енген стильдер);
- байланысқан стильдер - құжатқа <link> тегімен енген стильдер;
- импорт стильдер - құжатқа <style> тегінің @import қасиетімен енген стильдер.
Браузерлер (Internet Explorer (Microsoft), Opera (Opera Software ASA), Mozilla FireFox (Mozilla Corporation)) Web-құжаттарды талдау жасағанда стильдерді осы приоритет бойынша таңдап алады. Сондықтан серверде Web-жоба үшін тек қана бір CSS стильдер кестесі құрылады.
Ішкі стильдер. CSS стильдер кестесі технологиясы HTML тілінің кез келген тегіне өзіндік стильді визуалды (inline style) енгізе алады. Ішкі стиль мағынасы бойынша HTML тілі тэгінің кеңейтілген түрі болып есептеледі. Стильді анықтау үшін HTML тілі тэгінің «style» атрибутынан пайдаланады. Сонымен қатар ішкі стиль тек қана осы тэг ішінде ғана орындалады.
Мысалы: !doctype html public"-//W3C//Dtd HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Ішкі стиль</title>
</head>
<body>
<р kk-KZ" align="justify" > font-weight: normal;"> мәтін </р>
</body>
</html>
Көрсетілген мысалда стиль <p> тэгінің «style» атрибуты көмегімен енгізілген. Стильдің қасиеттері нүктелі үтірмен бөлектенген. Мәтіннің өлшемі 14, шрифты Helvetica, түсі сия көк болып анықталған.
Жалпы, ішкі стильдерден пайдаланбаған немесе шектелген түрде қолданған дұрыс. Себебі олар Web-құжаттардың жалпы көлемін ұлғайтады. Нәтижеде браузердің Web-құжатты жүктеу уақыты ұзаяды және Web-құжатқа өзгеріс енгізу қиындайды.
Енгізілген стильдер. CSS стильдер кестесі Web-құжаттың негізгі бөлімінде енгізілген стильден пайдаланады. Бұл әдісте стиль HTML-дің тегіне орналасады, сондықтан бұл стильден барлық тэгтер CSS стильдер кестесінің мұрагерлік қасиеті бойынша пайдалана алады.
Мысалы: <!doctype html public"-//W3C//Dtd HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Енгізілген стиль</title>
</head>
<body Times New Roman",serif;
font-size: 14 pt; color: blue;">
<р> мәтін </р>
</body>
</html>
Көрсетілген мысалда Web-құжаттың барлық мәтінінің өлшемі 14, шрифты Times New Roman, түсі көк болып анықталған. Сонымен қатар Times New Roman шрифты Serif эффектімен берілген. Егер тұтынушы компьютерінде бұл шрифт болмаса, онда оны браузер Serif эффекті бар сәйкес шрифтпен алмастырады.
Глобаль стильдер. Бұл әдісте стильдер кестесі Web-құжаттың тақырыбына жазылады. Мағынасы жағынан енгізілген стильге ұқсас. Стильді анықтауда HTML тілі тэгінің «style» атрибутынан емес, <style> тэгінен пайдаланады. Егер Web-құжатта ішкі стиль қолданылса, онда сол тэг CSS стильдер кестесінің полиморфизм қасиетімен сипатталған ішкі стильді алады.
Мысалы: !doctype html public"-//W3C//Dtd HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Глобаль стиль </title>
<style type="text/css">
h1 {
font-family: Helvetica, shadow;
font-size: 14 pt;
color: yellow;
font-weight: normal;
}
</style>
</head>
<body>
<h1> мәтін </h1>
</body>
</html>
Көрсетілген мысалда Web-құжат мәтінінің өлшемі 14, шрифты Helvetica, түсі сары болып анықталған. Сонымен қатар Helvetica шрифты shadow эффектімен берілген.
CSS стильдер кестесі технологиясында аталған әдістерді тәуелсіз қолдануға да, сонымен қатар бірге қолдануға да болады. Web-құжатта бірнеше стильді қолдану мәселесін көрейік. Бұл үшін стильдер кестесін құрамыз.
<!doctype html public"-//W3C//Dtd HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title> Стильдерді қатар қолдану </title>
<style type="text/css">
р {
background-image: url("files/fon1.gif");
background-color:"#e0e0e0";
font-family: "Times New Roman", shadow;
font-size: 12 pt;
color: "#000080";
}
</style>
</head>
<body Arial",serif;
font-size: 16 pt; color: blue;">
<р kk-KZ" align="justify" > font-weight: normal;"> мәтін </р>
</body>
</html>
Көрсетілген мысалда Web-құжаттың фоны глобаль стильдер әдісімен, Web-құжат енгізілген стильдер әдісімен, ал абзац ішкі стильдер әдісімен берілген. Нақты атасақ, негізгі мәтін 16 өлшемді Times New Roman шрифтімен, бас тақырып 16 өлшемді Arial шрифтімен, ал абзац 12 өлшемді Helvetica шрифтімен берілген. Сондай-ақ, негізгі шрифттің түсі тоқ көк, тақырыптың түсі көк, ал абзац сия көкпен берілген.
Достарыңызбен бөлісу: | 
