ГлоссарийӘдетте бірнеше файлдарға арналған стильдер басқа бір жеке файлға бөлек жазылады. Мұндай файл типі (кеңейтілуі) css болып жазылады. Мысалы, style.css файлына мынадай стильдерді жазайық: BODY {margin-left: 40рх;} Hl,H2,H3,H4,H5,H6 {text-align: right; color: red; font-family: "Arial Cyr", Geneva, sans-serif; } Осы стильдерді іске қосу үшін HTML-файлдың тақырып <head>...</head> бөлігіне мынадай сілтеме орналастыру керек: <LINK rel=stylesheet type="text/css“ href=style.css> Осы стильдік файлға бірнеше HTML-құжаттар сілтеме жасай алады. Осы файлға бір өзгеріс енгізу ішкі сілтемелері бар ондаған парақтарға әсер етеді. Мынадай стильдік анықтау body {margin-left: 40рх;} барлық жолдар үшін сол жақ шеттен 40 пиксель шегініс береді. Міне, HTML тіліндегідей кесте қолданбай, өріс көрсетпей, стиль арқылы ғана осындай мүмкіндіктер жасауға болады екен. Аралас стильдерді пайдалану Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тәсілі бар екен: • жеке тәг үшін анықтау; • HTML-файлының тақырыбында анықтау; • басқа CSS файлында стильді анықтау. Енді осы тәсілдерді араластыра пайдаланып көрейік. Олардың қайсысы басым екенін мысалдар арқылы қарастырайық. Бірнеше мысалдар келтірейік. CSS анықтаулары жоқ құжат
1-сурет. Программанәтижесі
Төмендегі мысалда тақырыптар қара түспен ақ фон арқылы жазылады. <HTML> <HEAD> <TITLE> 1 мысал </TITLE> </HEAD> <BODY bgcolor=white text=black> <H1> 1 тақырып </H1> <H2> 2 тақырып </H2> <HЗ> 3 тақырып </HЗ> </BODY> </HTML> Жеке тәг үшін CSS анықтау Төмендегі код алғашқы екі тақырыпты қара түспен, ал соңғысын қызыл түспен бейнелейді. <HTML> <HEAD> <TITLE> 2 мысал </TITLE> </HEAD> <BODY bgcolor=white text=black> <H1> 1 тақырып </H1> <H2> 2 тақырып </H2> <H3 style="color:red"> 3 тақырып </H3> </BODY> </HTML>
2-сурет. Программа нәтижесі CSS-файлдағы CSS-анықтаулар prim.сss файлының ішкі мәтіні: H1,H2,H3 { color: green; }
Енді осы файлды пайдаланатын HTML-құжат коды мен оның бейнесін қарастырайық. <HTML> <HEAD> <!-- prim.css файлын іске қосу. - - > <LINK rel=stylesheet type="text/css" href-prim.css> <STYLE type="text/css"> <!-- H1,H2,H3 { color: blue; } -->
<TITLE> 4 мысал </TITLE> </HEAD> <BODY bgcolor=white text=black> <H1> 1 тақырып </H1> <H2> 2 тақырып </H2> <H3 style="color:red"> 3 тақырып </H3> </BODY> </HTML> 3-сурет. Программа нәтижесі
<HTML> <HEAD> <STYLE type="text/css"> <!-- H1,H2,H3 { color: blue; } --> </STYLE> <!-- prim.css файлын іске қосу --> <LINK rel=stylesheet type="text/css" href=prim.css> <TITLE> 5 мысал </TITLE> </HEAD>
<BODY bgcolor=white text=black> <H1> 1 тақырып </H1> <H2> 2 тақырып </H2> <H3 style="color:red"> 3 тақырып </H3> </BODY> </HTML> Сонымен, CSS арқылы мыналар атқарылады: 4-сурет. Программа нәтижесі
· өрістер, шегіністер, қаріп мөлшері (көлемі) және типі, мәтін түсі мен фоны, т.б. парақтың жекелеген элементтері (азат жолтар, сөздер, әріптер) үшін беріледі. · жүздеген файлдардан тұратын толық сайт үшін оның безендірілуін HTML-кодқа тимей, тек бір ғана CSS файлын түзету арқылы өзгерту; · HTML-құжаттың ішкі тәгтері санын азайтып, оның ішкі ақпараттық мазмұнын браузер экранының сыртқы түсінен бөліп жеке стильдер түрінде жазып шығу. CSS – Cascading Style Sheets (Стильдердің сатылы кестелері) —гипермәтіндік мәліметтер мазмұнын олардың экрандағы бейнелену формасынан бөліп орындауға мүмкіндік беретін құрал болып табылады. Қазіргі WWW-сайттарын безендіруді стильдердің сатылы кестелерінсіз көзге елестету қиын. Стильдердің сатылы кестелері мынадай мүмкіндіктер береді: • WWW-парағын безендіруді оның мазмұнынан бөліп тәуелсіз орындау; • Стандартты HTML тілі мүмкіндіктерін түбегейлі түрде кеңейту; CSS технологиясы, мысалы, объектілерді абсолюттік орналастыру ісін орындай алады, яғни объектілерді экранға нақты координаталар арқылы қажетті орынға шығаруға болады. Мұндағы объектілік модельдің координатасын программада өзгерту экрандағы сол элементтің орнын ауыстыра алады. Олардың ара қашықтықтарын өзімізге ыңғайлы болып табылатын өлшемдердің бірі - мм, см немесе дюйм, пункт арқылы беруге де болады. CSS сценарийлермен қосыла отырып, гипермәтіндік парақтарды кәсіби программаларда жасалған мультимедиялық өнімдерден айнымайтын динамикалық әрі интерактивті деңгейде көрсетуге мүмкіндік береді. «Скриптер» немесе «сценарийлер» – гипер-мәтіндерді түрлендіре алатын арнайы программалау тілінде жазылған программалық кодтар. JavaScript – кодтарын HTML- мәтіндеріне енгізе отырып, құжаттарды түрлендіре алатын, көпшілікке арналған тіл. Сценарийлер енгізілген CSS статикалық HTML-тілін динамикалық жаңа күйге келтіретін қосымша мүмкіндіктер жиыны. • CSS арқылы HTML-тілінің экрандағы элементтерді бейнелеудің көптеген тәсілдеріне жауапты тәгтер мен олардың атрибуттарын алып тастау жолымен файлдың жалпы көлемін кішірейте аламыз (мысалы, мынадай тәгтер: <font>, <center>, <в>, <i>, <s>, <U> т. б.; атрибуттар: align, color, bgcolor, size, width, height, т. с. с.); • HTML тілінің тәгтері мен атрибуттарына қарағанда, CSS кестелері сайттың сыртқы түрін басқарудың жеңіл тәсілдерін береді; • бір файлдағы стиль сипаттамаларын өзгерту арқылы жүздеген гипермәтіндік парақтардың сыртқы түрлерін бірден өзгерте аламыз. Стильді бір тәгтің параметрлері ішіне жазуға болады. Ол үшін BODY ішіндегі кез келген тәгке (BODY тәгіне де) STYLE атрибуты қолданылады. Бұларды "инлайндық" стиль кестелері деп атайды. STYLE атрибуты арқылы - Жеке тәг стилі; - Жеке HTML-файлы стилі; - Бірнеше HTML-файлдарына арналған стиль; - Аралас стильдерді пайдалану атқарылады.
Бақылау сұрақтары: 4. CSS қысқартылған сөзі қалай жіктеледі? 5. CSS технологиясының атқаратын қызметін сипаттаңыз. 6. Тәгте стильді қандай атрибут арқылы беруге болады? 4. Төменде келтірілген жазулардың қайсысы азат жолтағы мәтіннің түсін қызыл етіп көрсетеді? а) <Р color = red>; б) <Р color = #FF0000>; в) <Р color = rgb(255,0,0)>; г) <Р style ="color: red">; д) <Р style ="color: #FF0000">; е) <Р style="color:rgb(255,0,0)">. 6. Қандайарнайы HTML-блогында<?????>...</?????>стильдіксипаттамаларжазылады? 7. Төмендекелтірілгенстильдіксипаттамалардыңқайсысықатесізжазылған? а) Р {color = red; font-size=l cm}; б) Р {color = red, font-size=l cm}; в) Р {color:red font-size:1 cm}; г) Р {color:red, font-size: 1cm}; д) P {color:red; font-size:1cm}. 7. Қандай тәгте файлға стильдік анықтаулар мен сілтеме жазылады, ол қандай атрибутпен беріледі? Бұл атауларды сұрау белгілерінің орнына жазыңыз: <???? rel = stylesheet type="text/css"????=file.css> 8. Стильдік сипаттамалар берілуінің қандай тәсілдерін білесіз? Осы үш тәсілді салыстырыңыз, олардың әрқайсысының атқаратын қызметін көрсетіңіз.
|
</STYLE>
<style> және <link> тәгтерін басқаша тәртіппен орналастырайық.
