Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Казахский национальный университет им. аль-Фараби

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Labs_7_10_CSS

.pdf

Скачиваний:

Добавлен:

24.03.2015

Размер:

1.06 Mб

Скачать

☆

1 / 41 2 3 4 > Следующая >>>

7 лабораториялық жұмыс

HTML тілінде CSS кестелерін пайдалану

CSS – Cascading Style Sheets (стильдердің сатылы кестелері) HTML-тəгтерге қосымша безендіру жəне де жазуды жеңілдету қасиеттерін беретін мүмкіндіктер жиыны. Стильдер енгізілген статикалық HTML тілі сайтты динамикалық жаңа күйге келтіре алады. STYLE түйінді сөзін (атрибутын) енгізу арқылы мынадай жұмыстар атқарылады:

-жеке тəгке арналған стильді пайдалану;

-жеке HTML-файлға арналған стиль беру;

-бірнеше HTML-файлдарға арналған стиль енгізу;

-стильдерді аралас түрде пайдалану.

7.1. Жеке бір тəг үшін жазылған стиль

Мысалы, <P> тəгі арқылы нақты бір абзац қалай бейнеленетінін былай көрсете аламыз:

<Р style="font-size:1.5cm; color:green">

Бұл абзацқа стильдік анықтау тəсілі қолданылып отыр.

Стиль style атрибутымен беріледі. Мұнда браузерге абзацты көлемі 1.5 сантиметр болатын жасыл əріптермен жазуға нұсқау берілген (7.1 сурет).

Стильді анықтау мынадай түрде жазылады:

сипаттама: мəні; font-size: 1.5cm; color: green;

Əрбір анықтаулар бір-бірінен «;» символы арқылы бөлініп жазылады. Style атрибутын оның параметрлері арқылы əрбір тəгке қолдана аламыз. Енді стильдер қолданылатын бір мысалды толығырақ қарастырайық.

1 мысал:

<HTML>

<HEAD>

<TITLE> Жеке тəг стилі

</TITLE>

</HEAD>

<H2>	Бір тəг үшін жазылған стиль
</H2>
<HR>
<UL>
<LI> Бұл қарапайым мəтін.		7.1 сурет
<LI	style="color: red; font-size: 1cm;
font-style: italic">
Биіктігі 1 см қисайтылған қызыл əріптер.
<LI	style="margin-left: 2cm">

Сол жақ шеттен 2 сантиметр шегініс. </UL>

</BODY>

</HTML>

7.2. Жеке HTML-файлына арналған стиль

Стильді тек бір тəг үшін немесе бірнеше тəгтер үшін бір рет жазылған анықтаулар HTML-

құжатының басынан соңына дейін əсер ететіндей етуге болады.

Мысалы, барлық тəгтер атауларын тізіп, стильдік анықтауларды құжаттың тақырып бөлігіне орналастыру қажет.

Стильдік анықтаулар немесе селекторлар мынадай блок ішіне жазылады

жəне HTML-комментарий ретінде жазылады.

2 мысал:

<HTML>

<HEAD>

<TITLE> Жеке файлға арналған стиль </TITLE> <STYLE type="text/css">

<!-- H1,H2,H3,H4,H5,H6

{

text-align: right; color:red;

font-family: "Arial Cyr", Geneva, sans-serif;

}

--> </STYLE>

</HEAD>

<BODY bgcolor=#DFF0D5 text=black> <H2> Жеке файл стилі </H2> <HR>

<P> Бұл қарапайым мəтін <H3> Бұл тақырып </H3> <P> Бұл да қарапайым мəтін

</BODY

</HTML>

Браузер мұндағы тақырыптарды жұмыр қаріппен (рубленый қаріп) қызыл түсте оң жақ шетке туралап орналастырады. Браузердің мұндай əрекетін мынадай кодтар атқарады (3 мысал):

3 мысал

<STYLE type="text/css"> <!--

Н1,Н2,НЗ,Н4,Н5,Н6

{

text-align: right; color: red;

font-family: "Arial Cyr", Geneva, sans-serif;

}

--> </STYLE>

Бұл мысалда үш сипаттама былай берілген:

•	text-align: right;	–	оң жақ шетке туралау;
•	color: red;	–	түсі қызыл;
•	font-family: "Arial Cyr",	–	жұмыр қаріптер түрлері.
	Geneva, Helvetica, sans-serif;

Тақырыптар Arial Cyr қарпімен берілуі тиіс (егер тұтынушы компьютерінде ол бар болса). Егер ол қаріп болмаса, браузер келесі көрсетілген Geneva, Helvetica қаріптерін немесе əйтеуір бір жұмыр қаріпті («sans-serif») пайдаланады. Егер бір де бірі табылмаса, «үнсіз келісім бойынша қаріпті» (по умолчанию), көбінесе Times New Roman қарпін қолданады.

7.3. Бірнеше HTML-файлдарға арналған стиль

Əдетте бірнеше файлдарға арналған стильдер басқа бір жеке файлға бөлек жазылады. Мұндай файл типі (кеңейтілуі) .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> бөлігіне мынадай сілтеме орналастыру керек:

Осы стильдік файлға бірнеше HTML-құжаттар сілтеме жасай алады. Осы файлға бір өзгеріс енгізу ішкі сілтемелері бар ондаған парақтарға əсер етеді.

Мынадай стильдік анықтау body {margin-left: 40рх;}

барлық жолдар үшін сол жақ шеттен 40 пиксель шегініс береді. Міне, HTML тіліндегідей тəг қолданбай, өріс көрсетпей, стиль арқылы ғана осындай мүмкіндіктер жасауға болады екен.

7.4. Аралас стильдерді пайдалану

Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тəсілі бар екен:

•жеке тəг үшін анықтау;

•HTML-файлының тақырыбында анықтау;

•басқа CSS файлында стильді анықтау.

Енді осы тəсілдерді араластыра пайдаланып көрейік. Олардың қайсысы басым екенін мысалдар арқылы қарастырайық.

CSS анықтаулары жоқ құжат

Төмендегі мысалда тақырыптар қара түспен ақ фон арқылы жазылады ().

4мысал:

<HTML>

<HEAD> <TITLE> 1 мысал </TITLE> </HEAD>

<BODY bgcolor=white		text=black>
<H1> 1 тақырып		</H1>
<H2> 2	тақырып	</H2>
<HЗ> 3	тақырып </HЗ>
</BODY>		7.2 сурет
</HTML>

Жеке тəг үшін CSS анықтау

Төмендегі код алғашқы екі тақырыпты қара түспен, ал соңғысын қызыл түспен бейнелейді. 5 мысал (7.3 сурет):

<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>

<HEAD> тəгіндегі CSS-нұсқаулар

Төменде (6 мысал) алғашқы екі тақырып көк, ал соңғысы – қызыл болып шығады.

6 мысал:

<HTML> 7.3 сурет <HEAD>

<STYLE type="text/css"> <!--

H1,H2,H3

		{
		color: blue;
	-->	}
	</STYLE>
	<TITLE> 3 мысал </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H1> 1 тақырып</H1>
<H2>		2 тақырып </H2>
<H3		style="color:red">
</BODY>		3 тақырып </H3>
</HTML>
CSS-файлдағы CSS-анықтаулар
Алдын ала жазылған prim.сss файлының			7.4 сурет
ішкі мəтіні:			7.4 сурет
ішкі мəтіні:
H1,	H2,	H3
{

color: green;

}

Енді осы файлды пайдаланатын HTML-құжат коды мен оның бейнесін қарастырайық.

7 мысал: <HTML> <HEAD>

<!-- H1,H2,H3

{

color: blue;

}

--> </STYLE>

<TITLE> 4 мысал </TITLE> </HEAD>

	<H1> 1 тақырып </H1>
	<H2> 2 тақырып </H2>	7.5 сурет
	<H3 style="color:red"> 3 тақырып </H3>	7.5 сурет
	<H3 style="color:red"> 3 тақырып </H3>
	</BODY>
	</HTML>
	Енді <style> жəне <link> тəгтерін басқаша тəртіппен орналастырайық.
	8 мысал:
	<HTML>
	<HEAD>
	<STYLE type="text/css">
	<!--
	H1,H2,H3
	{
	color: blue;
	}
	-->

</STYLE>

<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 арқылы мыналар атқарылады:

·өрістер, шегіністер, қаріп мөлшері (көлемі) жəне типі, мəтін түсі мен фоны, т.б. парақтың жекелеген элементтері (абзацтар, сөздер, əріптер) үшін беріледі.

·жүздеген файлдардан тұратын толық сайт үшін оның безендірілуін HTML-кодқа тимей, тек бір ғана CSS файлын түзету арқылы өзгерту;

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

Сұрақтар

1.CSS қысқартылған сөзі қандай мағына береді?

2.CSS технологиясының атқаратын қызметі.

3.Бір тəгтегі стиль қандай атрибут арқылы беріледі?

4.Төмендегі мысалдардың қайсысы абзацтағы мəтіннің қызыл түсін тағайындайды?

а) <Р color = red>;

б) <Р color = #FF0000>;

в) <Р color = rgb(255,0,0)>; г) <Р style ="color: red">;

д)	<Р style ="color: #FF0000">;
е)	<Р style="color: rgb(255,0,0)">.

5.HTML-тілінің қандай арнаулы блогында стильдік сипаттаулар орналасады?

6.Төмендегі стильдік сипаттаулардың қайсысында қате жоқ?


а) Р {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.Стильдік сипаттамаларды жазудың үш тəсілін көрсетіңдер. Оларды салыстырып, əрқайсысының атқаратын жұмысын көрсетіңдер.

Тапсырмалар

1. Жоғарыдағы тапмырмаларды орындағаннан кейін төмендегі сұрақтарға жауап беріңдер:

•Қай CSS-сипаттама басты рөл атқарады: жеке тəгтегі жазылғаны ма немесе HTML-программаның <HEAD> бөлігінде жазылғаны ма?

•Қай CSS-сипаттама басты рөл атқарады: HTML-программаның <HEAD> бөлігінде жазылғаны ма немесе жеке CSS-файлда орналасып, құжатпен <LINK> тəгі арқылы байланысқаны ма? Олардың

орналасу реттілігі жұмыс нəтижесіне əсер ете ме?

2.Жоғарыда көрсетілген үш стильді де пайдаланып, 1.5 суретте көрсетілген құжатты жасап шығыңдар. Осы құжатта:

•негізгі түстер: ақ фондағы қара символдар болсын (оларды əрбір тəсіл үшін өз қалауларың бойынша өзгертіңдер);

•құжаттағы барлық элементтер үшін сол жақ пен оң жақтағы бос орындар ені 2 см;

•абзацтар оң жақ шетке тураланады;

•тақырыптар оң жаққа тураланып, қызыл түсті жұмыр қаріппен жазылады;

•қисайтылып (курсив) жазылған терминдер жасыл түспен берілуі тиіс.

7.6 сурет. 2 тапсырма үшін берілген құжат

St1.ss:

BODY {margin-left:60рх;} Hl,H2,H3,H4,H5,H6

{

text-align: right; color: red;

font-family: "Palatino Linotype", Baltica, Times New Roman;

}

<HTML>

<HEAD>

<TITLE>Стиль для отдельного файла</TITLE> <STYLE type="text/css">

<!-- H1,H2,H3,H4

{

text-align: right; color:red;

font-family: "Arial Cyr", Geneva, Helvetica, sans-serif;

}

-->

</STYLE>

</HEAD>

<H2> Приватные и публичные программы </H2> <HR>

<H3> Приватные программы </H3>

<h4> Приватными программами я называю те, которые будут использоваться только вами (их разработчиками) или очень ограниченным кругом других людей, чьи навыки, требования и компьютеры хорошо известны. </h4>

<H2> Публичные программы </H2>

<h4> Публичные программы — прямая противоположность приватным. Они распространяются среди большого числа людей. <h4>

</BODY

</HTML>

8 лабораториялық жұмыс

CSS қасиеттеріне шолу

Стильдік əр түрлі анықтаулар жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару кезінде кітаптар соңында берілетін анықтамаларды пайдалану қажет.

Стильдегі оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:

·қаріп (қаріп);

·түстер;

·мəтін;

·өрістер мен жақтаулар (поля и рамки);

·сыртқы түрлері.

Стильдерде қолданылатын өлшем бірліктері төменде көрсетілген.

		8.1 кесте

Белгіленуі	Атауы	Мысалы
in	Дюйм	<Р style="font-size:1in">
cm	Сантиметр	<Р style="font-size: 1cm">
mm	Миллиметр	<P style="font-size:1mm">
рх	Пиксел	<Р style="font-size:1px">
pt	Пункт	<Р style="font-size:1pt">
рс	Пика	<Р style="font-size:1pc">
%	Пайыз	<Р style="font-size :1%">

Пункттер мен пикалар — типографиялық өлшем бірліктері, олар қаріп көлемін немесе оның кеглін береді.

Word-та, мысалы, бұл параметр 8-ден 72 пт-ке дейін. Бұл кегльдің пунктпен берілген мөлшері. 1 типографиялық пт = 1/72дюйм= 0,375 мм. Бұл символдың өз мөлшері емес, оның “ұпай” («очко») мөлшері, яғни типографиядағы сол символды (литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен үлкен. Мысалы, кеглі 10 қаріптің бас əрпінің көлемі 7 пункт шамасында болады.

Кітап шығаруда – мəтін көлемі 10 немесе 12 пт болады. Тақырыптар үшін — үлкенірек кегль, ал сілтемелер мен ескертпелер үшін кішірек (əдетте 8 пт) мəндері қолданылады.

Пика – үленірек өлшем бірлігі, 1 пика = 12 пт.

Пайыздық өлшем (процентный отсчет) негізгі мөлшерге байланысты болады. Қаріптер үшін

— ағымдағы мəн негізге алынады. Пайызды пайдалану ыңғайлы болып саналады. Егер программалаушы браузердегі қаріп көлемін стильдерде пайызбен беріп отырса, олар пропорциональ түрде өзгереді.

font-family қаріп түрі (шрифт типі)

Бұл стильдік қасиет қаріптің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын (родовое имя) көрсетеді:

serif	– шығыңқы қаріп (с засечками – серифный);
sans-serif	– жұмыр қаріп (без засечек – рубленый);

monospace – ені бірдей қаріп (моноширинный қаріп – символдарының ендері бірдей).

Это шрифт с засечками.

8.1 сурет. Серифтік қаріп

Это рубленый шрифт.

8.2 сурет. Жұмыр қаріп

Это моноширинный шрифт.

8.3 сурет. Бірдей енді қаріп

Гарнитура — бір қаріп символдарының сызылымдары жиыны (набор начертаний символов одного шривта).

Бұл – тіке жəне курсивтік сызылым, қарайтылуы (жирность), литер ені (қысыңқы, қалыпты, созылмалы) жəне кеглі əр түрлі болуы мүмкін деген сөз.

Қаріптер серифтік (шығыңқы - с засечками) и жұмыр (рубленые - без засечек) болады. Шығыңқы қаріп —Times гарнитурасы, жұмыр қаріп — Helvetica немесе Arial гарнитурасы.

Серифтік қаріптер жеңіл оқылады. Төменгі сериф көзге жылы көрінеді. Жұмыр қаріптер тек тақырыптар үшін қажет.

Серифтік қаріп негізгі мəтін үшін, ал жұмыр — тақырыптар немесе майда ескертпелер үшін керек.

Тағы екі топ: пропорциональ жəне ені бірдей (моноширинные) қаріптер бар.

Бірдей енді қаріптер баспа машинкасындай етіп басады. Олар мынадай тəгтерден пайда болады: <PRE>, <CODE>, <ТТ>, <SAMP>, <KBD>.

Кəдімгі мəтін пропорциональ қаріппен басылады. Оларда əр түрлі символдар ені əр түрлі, 1 – енсіз, ж – енді.

Пропорциональ қаріп бірдей енді қаріпке қарағанда жеңіл оқылады. Пропорциональ қаріп негізгі мəтін үшін, ал бірдей енді қаріп — программалар үшін қажет болып саналады

Times жəне Helvetica гарнитуралары — пропорциональ. Courier гарнитурасы - бірдей енді қаріп .

Кез келген графикалық операциялық жүйеде үш стандартты гарнитура бар, Windows үшін:

Times Roman —		серифтік қаріп;
Arial —	жұмыр қаріп;
Courier	—	бірдей енді қаріп.

Үнсіз келісім бойынша (по умолчанию) браузер қалыпты мəтін үшін Times Roman қаріпін, ал программалар үшін – Courier қарпін (бірдей енді) пайдаланады.

Сайт үшін өз гарнитураңды көрсету қажет емес, ондай қаріп компьютерде болмаса, ол иероглифке айналып кетеді. Жергілікті (локальды) гипермəтін үшін кез келген қаріп жарайды. Ал Интернет желісі үшін тек топты ғана көрсету жеткілікті шығар немесе қаріпі қоса жіберіп, оны орнату ережесі де бірге берілуі тиіс.

font-family қасиеті үшін бір емес, бірнеше қаріп көрсеткен абзал (үтір арқылы бөліп), мысалы:

Н1,Н2,Н3,Н4,Н5,Н6

{ font-family: "Arial Cyr", Geneva, Helvetica, sans-serif; }

Браузер алдымен Arial Cyr қаріпін іздейді, таба алмаса - Geneva, соңынан - Helvetica, ешқайсысы да болмаса, əйтеуір бір жұмыр қаріп табады (sans-serif).

Егер қаріп аты бірнеше сөзден тұрса, ол міндетті түрде қос тырнақшаға алынады. font-size

font-size қасиеті қаріптің абсолюттік немесе салыстырмалы мөлшерін береді. Салыстырмалы түрде бергенде, пайыздық өлшем қолданылады (ағымдағы қаріп - негізгі) немесе мынадай түйінді сөздер қою керек:

larger – ірілеу - крупнее; smaller – шағындау - мельче.

Абсолюттік мөлшерде келесі өлшем бірліктерінің бірін көрсету керек: in, cm, mm, px, pt, pc.

Мынадай түйінді сөздерді де пайдалануға болады:
xx-small	– өте майда	– сверхмелкий;
x-small	– майдалау	– очень мелкий;
small	– майда	– мелкий;
medium	– орташа	– седний;
large	– ірі	– купный;
х-large	– ірілеу	– очень крупный;
xx-large	– өте ірі	– сверхкрупный.

Көбінесе осындай салыстырмалы шамаларды берген дұрыс болып саналады.

Түстерді тағайындау

Стильдік қасиеттер түстерді тағайындаудың үш түрлі тəсілін береді: · түйінді сөз, мысалы, white;

·он алтылық RGB-код, мысалы, #eee5d8;

·ондық RGB-код, мысалы, rgb(255,64,0); color – элемент түсін анықтайды.

background-color – элемент шығарылатын маңайдағы фон түсін анықтайды. мысалы, стиль үшін мынадай фрагмент енгізуге болады:

8.1мысал

<HTML>

<HEAD>

<STYLE type="text/css">

<!-- P

{

font-family: "Arial Cyr",Helvetica,sans-serif; font-size: 0.5cm;

color: blue; background-color: yellow; }

--> </STYLE>

<TITLE> 4 мысал </TITLE> </HEAD>

<P>Тестирование - это защитная сеть вокруг вашей программы, последняя и, порой, единственная надежда на серьезное повышение ее качества до того,как она выйдет в свет(Лу Гринзоу "Философия программирования").

Тестирование - это форма приема экзамена </H6> </BODY>

</HTML>

Бұл жұмыс нəтижесі 8.4 суретте келтірілген.

Мəтіндерді анықтау

letter-spacing – əріптер арасындағы аралықты қосымша анықтау үшін керек, normal түйінді сөзін немесе нақты мəн беруге болады, минус таңбалы мəн де болады (символдар бірінің үстіне бірі жазылады). Пайыздық тəсіл қолданылмайды.

line-height – жолдар аралығын тағайындайды (интерлиньяж). Абсолюттік биіктікті берсе де болады (14pt), жол аралығын (1.4) немесе жол биіктігінің пайызымен де (200%) көрсетіледі.

Мысалы, жоларалық екі интервал:	line-height: 200%;
line-height: 2 ; немесе

normal түйінді сөзімен де берсе болады.

text-align – мəтінді көлденең туралау тəсілін көрсетеді (способ горизонтального выравнивания). Оның мынадай мəндері қолданылады:

left	– сол жақ шетке туралау;
right	– оң жақ шетке туралау;
center	–	ортаға туралау;
justify	–	екі шетін де туралау (по ширине).
Соңғы мəнді	justify қолдану қиын, өйткені ұзын сөзді тасымалдауды браузер білмейді

(мысалы, орысша немесе қазақша мəтіндерді).

1 / 41 2 3 4 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
24.03.201541.59 Кб24Kursovoi Olzhas.docx
#
24.03.20151.11 Mб85KZтест каз.КАЗГУ 250 2005 по общ ФФиП.rtf
#
24.03.20152.55 Mб32Lab.pdf
#
08.03.2016880.05 Кб21Lab1 - Student_RU_Pozlevich.docx
#
10.11.2019878.08 Кб15Laboratorni_roboti_Osnovi_programuvannya_dlya_R...doc
#
24.03.20151.06 Mб28Labs_7_10_CSS.pdf
#
23.11.201973.22 Кб4lab_Access_1.doc
#
24.03.20152.97 Mб19lect07.pdf
#
24.03.2015120.83 Кб14Lecture 1.doc
#
24.03.20151.52 Mб14Lecture material weeks 1-15.pdf
#
06.12.20181.67 Mб17Lecture_2-137.doc