1

1.4 Стильдер кестесі

HTML џлкен ќђжаттарыныњ сыртќы тџрін бір стандартќа келтіру маќсатымен ќолмен љњдеу кљп уаќытты алады . Бђл проблеманы шешу џшін World Wide Web Consortium (W3C) консорциуммен ќђралѓан каскадтыќ стильдер кестесін (CSS) ќолдануѓа болады.

Стильдер кестесі файлын ќђру

Мђнда H1, H2, P . italic жѕне P . red стильдері аныќталады. Стиль аныќтамасы класстыњ атымен (мысалы, H1) басталады, ал фигурлы жаќшада стильдіњ параметрі жазылады .

Стильдер кестесі файлына сілтеме

HTML ќђжатын стильдер кестесі файлын ќолданумен бейнелеу џшін ќђжаттыњ таќырып бљлімінде < LINK > операторын орналастыру керек.

HTML ќђжаттарындаѓы стильдер

Стильдер кестесін <STYLE> операторын ќолдана отырып, HTML ќђжатына енгізуге болады. <STYLE> жѕне </STYLE> операторларыныњ арасында стильдер кестесі орналасады.

Стильдер кестелері(style sheets) – ќазіргі кездегі пайдасы зор, ќолданысќа ыњѓайлы HTML жањалыќтарыныњ бірі болып табылады. Ѕдетте ќолдалынып жџрген кестелерге стильдер кестелерініњ ешќандай ќатысы жоќ. Жалпы алѓанда стильдер кестелерініњ ќалпы (шаблоны) мынадай тџрде айќындалады.

Элемент. стиль-аты (ќасиет1: мѕн-маѓына; ќасиет2: мѕн- маѓына...)

Осыныњ нѕтижесінде белгілі бір элемент џшін ќасиеттер жиыны сђраќ ретінде ќойылады, бђдан кейін HTML шектеуліктері алынып тасталынады.

Стильдік бейнелеудіњ негізгі ерекшеліктері оныњ барлыќ элементтерініњ љњделе алатынында, элементтердіњ ішінде тањдалѓан стильдіњ таѓайындалуында. Бђл ќасиетті мђрагерлік деп те атайды.

HTML ережелеріне сай стильдерді пайдаланушы документті атына сѕйкес мета-аныќтама енгізуі тиіс.

<Мета http-equiv= “Content – Style- Type”content= “text/CSS”>

Берілген мысалда «CSS»(Cascading Style Sheets), яѓни каскадтыќ стильдіњ кестесі пайдаланылѓан. Тілдіњ кљмегі арќылы (мысалы JAVA SCRIPT) элементтері ќасиетініњ аныќтауыныњ бір тѕсілі бар екендігі туралы айтып кеткен жљн. Стильді аныќтаудыњ ењ оњай тѕсілі боп, оныњ тањдалѓан элемент џшін берілуі табылады.

<P style = “font-size:10pt; font- style: italic; color: blue.”>

Бђнда ќызѓыл жол џшін шрифт љлшемі, курсив жѕне ѕріптерге кљк тџсті бояу тањдалѓан. Атрибуттардыњ ќасиет пен мѕн-маѓынаныњ атынан айырмашылыѓы:

<STYLE> </style>

Егер атрибут style белгілі бір элементтіњ ќасиетін аныќтаса, элемент STYLE аттары бірдей элементтердіњ ќасиетін аныќтайды. Мысалы:

<STYLE type= “text/css”>

H1{border-width: groove; text-align:center; color: green}

H2 {color: maroon; font-style: italic}

CODE {font-family: Arial;Verdana; background:white}

P {text –indent:10; color: green; font- size:12pt}

P CODE {font- weight: bold;color: violet; font-size:12pt}

</style>

Бђл жаѓдайда барлыќ бет кљлемінде 1 жѕне 2 дѕрежедегі таќырыптар џшін жања стильдер жасалынып жатыр. CODE элементтері џшін шрифт жѕне фон тџсі тањдалады. Ќызыл жол џшін бір жолдыњ шегініс ђзындыѓы, тџсі жѕне ѕріптер љлшемі алынады.

Класстар.

Стильдерге ат ќою жѕне соњѓыларын элементтерімен бірге нђсќау џшін љте ыњѓайлы стильдерді ѕмбебап класстыќ деп атайды. Мысал келтірейік.

<STYLE type=”text/css”>

H1. red1{color:RGB(215;40;40);text-align:center}

</style>

RGB( ) функциясы арќылы тџс тањдалды. Оныњ аргументі ретінде ондыќ сандар пайдаланылѓан. Таќырып тањдау мынадай ережеге сай болуы тиіс.

<H1 Class=”red1”>таќырып мѕтіні </h1>.

Ќаласањыз, red2; red3 класстарын да жасауѓа болады.

Ѕмбебап класстар. Атрибут id.

Пайдаланушыныњ мџмкіндіктерін кењейтіп ќарастыратын ѕмбебап класстардыњ ќолданысы. Ѕмбебап класстар белгілі бір элементпен байланыста болмайды Сізге ѕріптерге сђр тџс беретін формат жасау керек болды дейік.

Бђл форматты “steel” деп атайыќ. Оныњ ішіне стиль кестесін де орналастыруѓа болады #{color:RGB(155;180, 190); FONT-WEIGHT:BOLD}

Љњі мен тџсті дѕл тањдау мџмкін емес. Ѕріптер аќшылдау болса стильге «полужирный» сызбасын нђсќау џшін атрибут іd-ді ќолданѓан жљн. Мысалы:

<H2 id=“steel1” “steel”форматыныњ таќырыбы </h2>

Каскадтыќ стильдер кестелері.

<LINK>

Стильдер кестелері жеке бір файлда немесе Web-беттерінде саќталына алады. Бђндай кестелерді каскадтыќ деп атайды (CSS). Бђлай деп аталуыныњ себебі осы файлдарда (автор,бет, сервер, пайдаланушы стильдері) бір мезетте ќолданыла алады. Стильдер кестелерініњ бетіне ќосылу џшін НЕАD секциясындаѓы LINK элементін ќолдану ќажет.

<LINK href=”файл аты.css.”rel=”stylesheet” type=”text/css”

Бђл жаѓдайда да стильдер кљрсетілген мысалдардаѓыдай ќолданылады. Мысалы CSS файл ќђрамына келесі аныќтамалардыњ енуі мџмкін.

P spec1{color: green; font- variant: small-caps}

P new1 {color: maroon; font-style: italic}

P new2 {color: maroon; font-style: italic}

Осыныњ нѕтижесінде стиль бетінде 3 тџрлі азат жолы пайда болуы мџмкін.Олар:

<DIV> </div>; <SPAN> <span>

Стильдерді ќолданудыњ екі арнаулы элементі бар. Енді солардыњ ѕрќайсысыныњ ерекшеліктерін талдайыќ.

DIV элеметініњ ерекшелігі: Ол элементтерді пайдалану џшін контейнер ретінде ќолданылады.

<HEAD>

<STYLE type= “text/css”>

DIV Аты{ќасиет:мѕн- маѓына.......}

</style>

</head>

<BODY>

<DIV class= «Аты»>

<H1 таќырыбы </h1>

<P> 1-ші азат жол

<P> 2-ші азат жол

</div>

</body>

SPAN элементі керісінше ќђрамында басќа элементтердіњ болѓанын ќалайды.

<HEAD>

<STYLE type= “text/css”>

SPAN Аты { ќасиет: мѕн-маѓына ......}

</style>

</head>

<BODY>

<H1> таќырыбы </h1>

<P> <SPAN class= “Аты”> Мѕтін1 </span> Мѕтін2</p>

</body>

Стильдер кљмегі арќылы жасалѓан Ќасиеттер практикалыќ тђрѓыдан љњдеудіњ сан-алуан нђсќаларын пайдалануѓа мџмкіндік береді.

Баќылау сђраќтары:

1. Классќа аныќтама беріњіз.

2. CSS дегеніміз не?

3. DIV не џшін ќолданылады?

4. SPAN элементі не џшін пайдалынады?