Labs_7_10_CSS
.pdf
8.4 сурет. Стильдік анықтаулар қасиеттері
ӨРІСТЕР МЕН ЖАҚТАУЛАР (Поля и рамки)
border-style – элементті қоршап тұратын жақтау сызықтардың түрін анықтайды. Мəндері
мынадай: |
|
|
|
|
|
none |
– |
жақтау жоқ (келісім бойынша); |
solid |
– |
кəдімгі тұтас жақтау; |
double |
– |
қоссызық; |
groove – |
«ойыс» жақтау сызығы; |
|
ridge |
– |
«дөңес» жақтау сызығы; |
inset |
– |
«ойыс» элемент; |
outset |
– |
«дөңес» элемент. |
|
|
|
border-color – жақтау сызығының түсін анықтайды. Бұл қасиет border-style берілсе ғана жұмыс істейді.
border-width – жақтау сызығының қалыңдығын береді. Бұл қасиет те border-style берілсе ғана жұмыс істейді. Қалыңдығын сан бірліктерімен (пайыздық жазу жоқ) немесе келесі сөздермен беруге болады:
thin – жіңішке - тонкая; medium – орташа - средняя; thick – жуан - толстая.
margin – элементтегі блок шеттерінде бос қалатын өріс енін (ширину поля отступа) береді. Санмен, пайызбен (блок ені негізінде) немесе түйінді сөзбен – auto беріледі. Auto болса, тиімді мəнді браузер өзі анықтайды.
padding – элемент пен жақтау арасындағы қашықтықты береді. Санмен немесе пайызбен (от ширины элемента) беріледі.
Сыртқы түрді анықтау
width – элементтің енін тағайындайды. Санмен, пайызбен немесе auto түйінді сөзімен беріледі. Auto болса, тиімді мəнді браузер өзі анықтайды.
Допускаются числовые, процентные значения и auto. Бұл қасиет <DIV> и <SPAN> элементтері үшін қолданылады, олар элементтерді блокқа біріктіреді.
height – элемент биіктігін тағайындайды. Санмен немесе auto түйінді сөзімен беріледі. Бұл қасиет те <DIV> и <SPAN> элементтері үшін қолданылады.
Бір программа фрагментін толық келтірейік :
8.2 мысал
<HTML>
<HEAD>
<!-- Подключение свойств CSS --> <STYLE type="text/css">
<!-- P {
font-family: "Arial Cyr",Helvetica,sans-serif; font-size: 0.5cm;
11
color: blue; background-color: yellow; }
--> </STYLE>
<TITLE>Пример 4</TITLE> </HEAD>
<BODY bgcolor=white text=black>
<P> Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
<H6 style="color: red; background-color: silver; letter-spacing: 20px">
Тестирование - это форма приема экзамена
</H6>
</BODY>
</HTML>
Бұл программа нəтижесі 8.5- суретте көрсетілген.
Программаның екінші нұсқасы: <HTML>
<HEAD>
<!-- Подключение свойств CSS --> <STYLE type="text/css">
<!-- P
{ font-family: "Arial Cyr",Helvetica,sans-serif; font-size: 0.5cm;
color: blue;line-height:2; background- color:yellow;text-align: center;
}
--> </STYLE>
<TITLE>Пример 4</TITLE> </HEAD>
<BODY bgcolor=white text=black>
<P> Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того, как она выйдет в свет (Лу Гринзоу "Философия программирования").
<H6 style="color:red;background-color:silver;letter-spacing:20px">
Тестирование - это форма приема экзамена</H6> </BODY>
</HTML>
Бұл программа нəтижесі 8.6-суретте көрсетілген.
Сұрақтар
1.Стильдік анықтамаларда қолданылатын өлшем бірліктерін көрсетіңдер. Олар қалай белгіленеді?
2.Типографиялық өлшем бірліктері деп қандай бірліктерді айтады? Неге?
3.Типографиялық пункт нені білдіреді?
4.Сұрақ белгілері орнына дұрыс мəндері болып саналатын нақты цифрлар жазып шығыңдар:
а) 1 пункт = ?.??? мм;
б) 1 пика = ?? пункт;
в) 1 пика = ?.? мм.
5.Кітаптар қаріптердің қандай көлемімен басылады?
6. Ескертпелер үшін қандай қаріп көлемі қолданылады?
7.Қаріптің пайыздық шамасы қандай көлемді негізге алады?
12
8.6 сурет. Жақтаулар үшін стиль түрлері
8.Қаріп көлемін абсолюттік шамамен бергеннен гөрі пайыздық шамамен берген неге дұрысырақ деп саналады?
9.Қаріптің «гарнитурасы» деген не?
10.Серифтік қаріптердің жұмыр қаріптерден айырмашылығы неде?
11.Пропорциональдық қаріптердің ені бірдей қаріптерден айырмашылығы.
12.Қандай мəтіндер үшін серифтік қаріптер қолданылады, ал жұмыр қаріптер ше?
13.Қандай мəтіндер үшін пропорциональдық қаріптер қолданылады, ал ені бірдей қаріптер ше?
14.Сайттар үшін қаріп гарнитурасын (түрін) нақтылап көрсету неге қажет деп саналмайды?
15.CSS анықтауларының қандай түрлерімен төмендегі параметрлер көрсетіледі: а) қаріптің гарнитурасы, көлемі, түсі жəне фоны; б) əріптер арасындағы қосымша қашықтық; в) жолдар ара қашықтығы; г) көлденең туралау тəсілдері;
д) жақтаулар түрі, түсі жəне қалыңдығы; е) элементтің блок шеттерінен шегініс;
ж) элементтен жақтауларға дейінгі қашықтық жəне элементтің ені мен биіктігі.
Тапсырмалар
Төмендегі мəтінді экранға шығаратын программа кодын жасаңдар.
Қалайы солдат
Баяғыда 25 қалайы солдат болыпты. Олардың барлығы да бір анадан – ескі қалайы қасықтан туылған болатын, сондықтан барлығы да бір-біріне бауыр – аға-іні болып келеді. Олардың барлығы да көрікті еді: иықтарында – қаруы, кең жауырынды, мундирлері жасыл мен қызылдан тігілген болатын. Қарасаң, көз тоятын солдаттар еді! Г.-Х. Андерсен
Төмендегі кестеде 7 тапсырма берілген. Осы құжаттың əдемі көрінетін бейнесін жасау керек.
|
|
|
|
|
|
|
8.2 кесте |
|
Тап- |
Қаріп типі |
Мөлшері |
Түсі |
Фон түсі |
Жақтауы |
бос өріс |
Шегініс |
|
сырма |
мөлшері |
|
||||||
01 |
Academy |
medium |
Қара |
Таңдау |
Таңдау |
Таңдау |
Таңдау |
|
02 |
Antiqua |
large |
Таңдау |
Көк |
—"— |
—"— |
—"— |
|
03 |
Arial |
xx-small |
Жасыл |
Таңдау |
—"— |
—"— |
—"— |
|
04 |
Courier |
x-small |
Таңдау |
Көгілдір |
—"— |
–"– |
—"— |
|
05 |
Garamond |
x-large |
Қызыл |
Таңдау |
—"— |
—"— |
—"— |
|
06 |
New York |
xx-large |
Таңдау |
Сұр |
—"— |
—"— |
—"— |
|
07 |
Parsek |
14pt |
Сары |
Таңдау |
—"— |
—"— |
—"— |
|
13
9 лабораториялық жұмыс. CSS құру негіздері
1. Стильдің мұра ретінде берілуі
HTML-кодтың құрылымы сатылы түрде болады. Бар құжат <body>. . .</body> тəгтері ішінде орналасады. Ал <Р> абзацы ішінде <B> тəгімен белгіленген элементтер болуы мүмкін.
Стильдің мұра ретінде берілуі <body> тəгі үшін анықталған стильдің құжаттағы барлық тəгтерге əсер ететіндігін білдіреді. Сəйкесінше егер бір тəг үшін стиль құрылса, онда сол тəг ішіндегі басқа тəгтерге де осы стиль міндетті түрде беріледі.
Мысалы, <Р> тəгі үшін келесі стиль берілген болсын: P
{ color: red; font-size:14pt; font-family: Arial, sans-serif; }
Онда осы абзац ішіне орналасқан <ЕМ> тəгінің элементтері де экранда қызыл түспен, 14 пункт көлемде жұмыр қаріппен шығарылады.
Мысалы: <Р>
Стильдік анықтаулардың <ЕМ> мұралану </ЕМ> қасиеті болады.
Ал егер <ЕМ> тəгі үшін мəтін символдары арасын ашып жазу қажет болса, онда мұндай қасиет қосымша беріледі:
<HTML>
<HEAD>
<TITLE> Қосымша стильлік нұсқаулар </TITLE> <STYLE type="text/css">
<!--
P {color:red;font-size:14pt; font-family:Arial,sans-serif}
--> </STYLE> </HEAD>
<BODY bgcolor=white text=black> <P>
Стильдік анықтаулардың <ЕМ style="letter-spacing: 6рt:"> мұралану </ЕМ> қасиеті болады.
</BODY>
</HTML>
<ЕМ> тəгінің ішкі мəтіні <Р> тəгінің мəтіндері сияқты шығады (14 пункт, қызыл түсті, жұмыр қаріп), ал style="letter-spacing: 6pt" қосымша анықтаудың əсерінен сөздегі əріптердің арасы 6 пункт болып ашылып орналасады.
Сонымен ішкі қосымша тəгте жаңа стильдік анықтаулар кіргізіп қана қоймай, оның ата тегі болып саналатын сыртқы тəгтің де қасиеттерін өзгертуге болады.
Мысалы, келесі мəтіндегі “мұралау” (наследование) сөзі көк түске боялып тұрады.
<HTML>
<HEAD>
<TITLE> Стильлік нұсқауларды қайта анықтау
14
</TITLE>
<STYLE type="text/css"> <!--
P {color: red;font-size:14pt; font-family:Arial,sans-serif} -->
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<P> Стильдік анықтаулардың <ЕМ style="letter-spacing: 6рt: color:blue ">
мұралану </ЕМ> қасиеті болады. </BODY>
</HTML>
2. Контекстік селекторлар
Стильдік анықтауларды, тəгтердің кірістіріліп орналасу реттілігіне сəйкес орындалатындай етіп жазуға болады. Мысалы, <EM> тəгіндегі мəтін түсі ол <H3> тəгінің ішінде орналасқан жағдайда ғана көк болатындай етіп орналастырайық:
<HTML>
<HEAD>
<TITLE>Контекстік селектор
</TITLE>
<STYLE type="text/css"> <!-- H3 EM {color: blue} -->
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H3> Контекстік <EM>селектор </EM></H3> <P> Контекстік <EM>селектор </EM></P> </BODY>
</HTML>
Экранға «селектор» сөзі бірінші қатарда көк түспен (<Н3> тəгінің ішінде), ал екінші қатарда қара түспен (<Р> тəгінің ішінде) шығады. Стильдік анықтауларда үтір қойылмағандығына назар аударыңыз. Бұл контекстік анықтаулардың белгісі. Егер Н3, ЕМ { color: blue } түрінде жазсақ, онда <Н3> тəгімен қатар <ЕМ> тəгі де көк түске боялады, яғни үтір бірнеше тəгтер тобы үшін бірдей болатын ортақ стильді анықтайды.
3. Кластар
Стильдік анықтауларды тəгтерді көрсетпей-ақ жазуға болады. Мұндай жағдайда, берілген стилді нақты тəгке сəйкестендіру үшін, əрбір анықтауға арнайы атау меншіктелуі тиіс. Мұндай стильдік анықтаулар кластар деп аталады. Класс келесі түрде жазылады:
.аты
{сипаттама: мəні;
. . .
сипаттама: мəні;
}
15
Басқаша айтқанда, анықтаулар əдеттегідей жазылады, бірақ тəгтердің аттары орнына .аты конструкциясы қолданылады.
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif; border: solid 0.2cm blue }
Мұнда border: solid 0.2cm blue қатары бір стиль-дік нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді ( мұнда: стиль, жақтау қалыңдығы, жəне оның түсі). Мұндай біріктіруді border сияқты жалпыланды-рылған арнайы стильдік қасиеттерге қолдануға болады.
Стильдік класты тəгпен сəйкестендіру үшін class атрибуты қолданылады:
<Р class=def > текст </P>
Бұл кодтың қалай жұмыс істейтінін қарастырайық.
<HTML>
<HEAD>
<TITLE>Определение класса</TITLE> <STYLE type="text/css">
.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt; margin-left:5%;margin-right:5% } </STYLE>
</HEAD>
<BODY bgcolor=white text=black> <H2>Классы</H2>
<P class=def> Клacc стилевое
определение без привязки к тегу. <P> Вместо указания тега в
определении записывается имя класса. <P class=def>
Перед именем класса ставится точка. </BODY>
</HTML>
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: 16pt;
font-family: Geneva, Helvetica, sans-serif; border: solid 0.2cm blue }
Мұнда border: solid 0.2cm blue қатары бір стиль-дік нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді ( мұнда: стиль, жақтау қалыңдығы, жəне оның түсі). Мұндай біріктіруді border сияқты жалпыланды-рылған арнайы стильдік қасиеттерге қолдануға болады.
Стильдік класты тəгпен сəйкестендіру үшін class атрибуты қолданылады:
<Р class=def > текст </P>
Бұл кодтың қалай жұмыс істейтінін қарастырайық.
<HTML>
<HEAD>
<TITLE>Определение класса</TITLE> <STYLE type="text/css">
.def {font-family:Helvetica;font-size:14pt; border: solid 4pt red;padding: 6pt;
16
margin-left:5%;margin-right:5% } </STYLE>
</HEAD>
<BODY bgcolor=white text=black> <H2>Классы</H2>
<P class=def>
Клacc стилевое определение без привязки к тегу. <P>Вместо указания тега в определении записывается имя класса. <P class=def>
Перед именем класса ставится точка. </BODY>
</HTML>
Құрылған стильдік анықтаулар негізінде кластар құруға болады. Келесі мысалда def класының негізі ретінде <Р> тəгі үшін анықталған стиль алынып, оған қосымша жаңа қасиеттер қосылып жазылған:
<HTML>
<HEAD>
<TITLE>Определение класса</TITLE> <STYLE type="text/css">
P {font-family:Helvetica}
P.def
{text-align: justify; background:#CFB597; font-size:14pt; border:solid 4pt red; padding:6pt;
margin-left:5%;margin-right:5%}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2> Классы(обычный заголовок)</H2> <P> Этот абзац использует стилевое определение для тега Р (рубленый шрифт).
<P class=def>
Этот абзац использует стиль производного класса def
(в определение стиля для тега Р добавлено:красная рамка, поля, цвет фона, выравнивание слева и справа, повышенный размер шрифта).
</BODY>
</HTML>
4. <DIV> жəне <SPAN> тəгтері
Бұл тəгтер CSS үшін маңызды болып табылады. Олар құжаттағы жеке бір бөліктерді ерекшелеп алып, оларға арнайы қасиеттер беру ісін атқарады. Ол үшін керекті элементтерді <DIV>. . .</DIV> немесе <SPAN>. . .</SPAN> тəгтері ішіне орналастыру керек.
Бұлардың айырмашылығы мынада: <DIV> блогынан соң браузер жаңа жолға көшіреді, ал <SPAN> блогы-нан кейін — бұрынғы жолда қала береміз. Сонымен, <SPAN> тəгін пайдалану - бір жолдағы сөздерге не символдарға жеке стильдік қасиеттер тағайындай алады. Осыларға мысал келтірейік.
<DIV> тəгін пайдалану:
<HTML>
<HEAD>
<TITLE> Использование тега DIV</TITLE>
17
<STYLE type="text/css">
.area1
{ color:red; font-weight:bolder; font-size:40pt; background:aqua}
.area2
{color:black; background:#CFB597}
.area3
{color:blue;background:#C0C0C0}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<DIV class=area1><IMG src=vopros.gif> Где</DIV> <DIV сlass=аrеа2>начало того конца,</DIV> <DIV class=area3>которым оканчивается начало? </DIV>
</BODY>
</HTML>
<SPAN> тəгін пайдалану мысалы:
<HTML>
<HEAD>
<TITLE> Использование тега SPAN</TITLE> <STYLE type="text/css">
.area1
{ color:red; font-weight:bolder; font-size:40pt; background:aqua}
.area2
{ color:maroon; background:#CFB597; padding:6pt}
.area3
{ color:blue;background:#C0C0C0; padding:6pt}
</STYLE>
</HEAD>
<BODY bgcolor=white text=black>
<SPAN class=area1><IMG src=vopros.gif>Где</SPAN> <SPAN сlass=аrеа2>начало того конца,</SPAN> <SPAN class=area3>которым оканчивается начало? </SPAN>
</BODY>
</HTML>
5. Абсолюттік түрде орналастыру
CSS арқылы экрандағы элементтерді браузер терезе-сінің сол жақ жоғары бұрышынан бастап нақты координаталар бойынша орналастыра аламыз. Мұндай мүмкіндікке position стильдік қасиетінің absolute мəні арқылы қол жеткізуге болады. Координаталар пиксель бірлігімен left (горизонталь координата) жəне top (вертикаль координата) сөздері арқылы тағайындалады.
Енді мысалдар қарастырамыз.
<HTML>
<HEAD>
<TITLE> Абсолютное позиционирование</TITLE> <STYLE type="text/css">
18
.area1
{ position:absolute; top:10; left:10; color:red; font-weight:bolder; font-size:40pt; background:aqua}
.area2
{position:absolute; top:20; left:150; color:maroon; background:#CFB597; padding:12pt}
.area3
{position:absolute; top:70; left:130; color:blue; background:#C0C0C0;
padding:12pt}
</STYLE>
</HEAD>
<BODY bgcolor = white text = black>
<DIV class =area1> <IMG src=vopros.gif> Где </DIV> <DIV class =area2> начало того конца, </DIV> <DIV class =area3> которым оканчивается начало? </DIV>
</BODY>
</HTML>
Мұнда браузер үш <DIV> тəгімен берілген эле-менттерді көрсетілген координаталар бойынша орналастырып шықты. Элементтер бірінің үстіне бірі шығып тұрғанын байқаған шығарсыңдар.
Ең үстіне, яғни бізге жақын түрде HTML-кодта ең соңғы көрсетілген элемент шығады. Егер <DIV> тəгтерінің орнын ауыстырсақ, онда элементтердің қабаттаса орналасу реттілігі де өзгеріске ұшырай-ды. Дегенмен, CSS элементтерді қабаттастыра орналасу реттілігін жылдам өзгертетін тағы бір мүмкіндікті - Z-index тəсілін де ұсынады.
5. Z-index
Бұл стильдік қасиет экрандағы элементтің қай деңгейде (қай қабатта) орналасуы керек екендігін анықтайды. Мұндағы негізгі деңгейдің нөмірі (элементтер стильдік анықтаусыз-ақ шығатын деңгей) нөлге тең болып саналады. Сəйкесінше, экран қабатын анықтайтын теріс Z- index мəні бар элементтер төменде (алыста), ал оң мəнді элементтер — жоғарыда (жақын) орналасады. Егер элементтердің Z-index мəндері бірдей болса, олар бір қабатта орналасады. Сонымен Z-index мəні үлкен элемент жоғары деңгейде орналасады екен.
Енді мысал қарастырайық.
<HTML>
<HEAD>
<TITLE> Z-index </TITLE> </HEAD>
<BODY bgcolor=white text=black> <H2>Z-index</H2> <HR>
<DIV style= "position:absolute; top:50; left:140; height:130; width:100; background:red; font-size:60; color:white; z-index:3">
Это ближе </DIV>
<DIV style="position:absolute; top:50; left:360; height:30; width:100; background:blue; font-size:30; color:white; z-index:1">
Это дальше</DIV>
<DIV style="position:absolute; top:80; left:270; width:125; z-index:2"> <IMG src=img555.jpg width=125 height=82 alt ="">
19
</DIV>
</BODY>
</HTML>
6. Сатылай орналастыру (каскадирование)
CSS көмегімен тұтынушылар экрандағы ақпаратты ыңғайлы түрде бейнелейтін мүмкіндік алады.
Тек жасалған стильдердің бір-бірімен өзара байланысын жəне тəгтер атрибуттарының жазылуын (олар да стильді анықтайды) браузердің өз стилімен (үнсіз келісім бойынша анықталатын стиль) шатастырып алмау керек.
Жоғарыда айтылғандай, программалаушы HTML-құжатта үш түрлі стиль пайдалана
алады:
·Құрамдас (встроенный - inline). Style атрибуты арқылы тəг ішінде жазылған стиль, ол жеке тəг жұмысын бақылайды.
·Енгізілген (внедренный - embedded). HTML-файл тақырыбында <style>…</style> тəгтері арқылы жа-зылған стиль, ол жеке HTML-құжаттағы стильді бақылайды.
·Байланысқан (связанный - linked). Жеке CSS-файлда жазылған стиль. Ол көптеген HTML-құжаттар стилін бақылай алады. Мұнда стильдік файлға сілтеме жасау үшіни HTMLқұжаттың бас жағына <link> тəгі жазылады.
Бір құжатта осы айтылған үш стильдер механизмі де қолданыла алады. Бұған тəгтердің кəдімгі атрибуттары арқылы берілетін стильді жəне браузердің “келісім бойынша” тағайындалған өз стилін қосайық. Бұлар бір-бірімен қалай əрекеттесер екен, компьютер экранына құжатты шығарарда браузер қай стильді пайдаланады?
Құжатты шығарарда кəдімгі браузер ұстанатын ережелер каскадты, яғни сатылы деп аталады. Бұл браузер үшін ең негізгі стиль – құрамдас стиль деген сөз, одан кейін төмен қарай реті бойынша енгізілген жəне байланысқан стильдер қолданылады.
Сонымен браузер үшін енгізілген жəне байланысқан стильдер бірдей болып саналады, ол тек соңғы қолданылуға байланысты өзгереді.
Стильдік реттілік бойынша ең төменгі сатыда «үнсіз келісім бойынша» стиль тұрады. Оны браузер ешқан-дай стильдік нұсқау болмаған жағдайда қолданады. «Каскадтау - сатылау» ұғымына арғы тегінен берілу – мұралау (наследования) механизмі де жатады, ол бойынша өз стилі жоқ бала-тəг ата-тəгтің стилін қабылдайды (к потомку без собственных стилей применяется стиль родителя).
Кəдімгі атрибуттар арқылы берілген стильдер осы сатылау ережесі бойынша жұмыс істейді.
1 мысал.
<FONT color=red>
<P style=“color:blue”>
Это будет показано синим.
</P>
</FONT>
2 мысал.
<P style=“color:blue”>
Это будет показано синим, а
<FONT color=red>
это будет показано красным.