Зертханалық жұмыс № 11
Тақырыбы: CSS құру негіздері. Стильдің мұра ретінде берілуі. Сыртқы түрлері
Мақсаты: HTML тілінде CSS-ті қолдану технологияларын білу.
Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.
Жұмыстың орындалу реті:
1. Теориялық материалды игеру.
2. Жұмыстың орындалуы.
3. Бақылау сұрақтары.
Зертханалық жұмыстың орындалуына есеп беру формасы:
1. Зертханалық жұмыс номері
2. тапсырма
3. Бағдарлама мәтіні.
4. Тестілеу нәтижесі.
5. Бақылау сұрақтарына жауап беру.
Әдістемелік нұсқау
Стильдің мұра ретінде берілуі
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>
Стилдердің мұралану
<EM style="letter-spacing: 6рt:">
қасиеті бар
</EM>
</BODY>
</HTML>
1-сурет. Программа нәтижесі
<ЕМ> тәгінің ішкі мәтіні <Р> тәгінің мәтіндері сияқты шығады (14 пункт, қызыл түсті, жұмыр қаріп), ал style="letter-spacing: 6pt" қосымша анықтаудың әсерінен сөздегі әріптердің арасы 6 пункт болып ашылып орналасады.
Сонымен ішкі қосымша тәгте жаңа стильдік анықтаулар кіргізіп қана қоймай, оның ата тегі болып саналатын сыртқы тәгтің де қасиеттерін өзгертуге болады.
Мысалы, келесі мәтіндегі “мұралау қасиеті бар” сөзі көк түске боялып тұрады.
<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>
Стилдік анықтаудың
<EM style="letter-spacing:6рt;
color:blue">мұралау қасиеті бар</EM>
</BODY>
</HTML>
2-сурет. Программа нәтижесі
.
Тапсырмалар және Бақылау сұрақтары:
2.Мұраланатын стильді алдын ала анықтау мүмкін бе? Егер мүмкін болса қалай?
3. <Р> тәгі үшін Р{color:red} стилі берілген. Келесі кодтарға сәйкес «күрделі» сөзі қандай түспен шығарылады:
а)<Н1>Бұл күрделі мысал</Н1>;
б)<Н1>Это<SPAN style="Color:Blue">күрделі</SPAN>мысал.</Н1>; в)<Р>Бұл күрделі мысал.</Р>; г)<Р>Бұл<SPANstyle="color:blue">күрделі</SPAN>мысал.</Р>; д)<Р>Бұл<FONT color= blue>күрделі</SPAN>мысал.</Р>; е)<Р>Это<SPAN style =”font-size:smaller”>күрделі</SPAN>мысал.</Р>.
Блиц-тест
1.CSS-те стильдердегі вorder-width сипаттамасы нені анықтайды:
A) жақтау сызықтарының қалыңдығын
B) элементті қоршап тұратын түзу сызықтар типін
C) жақтау сызықтарының енін
D) жақтау сызықтарының биіктігін
E) жолдағы мәтіндер енін
2. CSS-те стильдердегі margin сипаттамасы нені анықтайды:
A) элементтердегі блок шеттерінде бос қалатын өріс енін
B) элементтер алдында қалатын бос өріс енін
C) элементтер артында қалатын бос өріс енін
D) элементтердің астыңғы жағындағы бос өріс енін
E) элементтердің үстіңгі жақтағы бос өріс енін
3.CSS-те гарнитура дегеніміз:
A) Бір қаріп символдарының сызылымдары жиыны
B) Кестені жақтау сызығының түсін өзгертуге мүмкіндік беретін атрибут
C) CCS файлдарын сақтайтын арнайы бума
D) Мультимедиалық файлдарды оқуға мүмкіндік беретін программа
E) Кестелерді құруға мүмкіндік беретін атрибут
4.CSS-тегі қаріп стильдері:
A) Font-family, font-size
B) Size, color
C) Courier, background
D) Font-size, color
E) Font-size, background
6.CSS-тегі түс стильдері:
A) Color, background-color
B) Font-family, font-size
C) Size, color
D) Font-size, color
E) Font-size, background
7.CSS-тегі мәтін стильдері:
A) Letter-spacing, line-height, text-align
B) Font-family, font-size
C) Size, color, line-height
D) Color, background-color
E) Font-size, color
8.CSS-тегі жақтаулар мен өрістер стильдері:
A) Border-style, border-color, border-width, margin, padding
B) Font-family, font-size
C) Size, border-style, color
D) Font-size, color, border-width, margin, padding
E) Font-size, background
9.CSS-те Font-size стилі бізге қандай мүмкіндік береді?
A) Қаріптің абсолюттік немесе салыстырмалы мөлшерін береді
B) Қаріп түрін өзгертуге мүмкіндік береді
C) Фонның түсін өзгертуге мүмкіндік береді
D) Сілтеме жасауға мүмкіндік береді
E) Тізімдерді құруға мүмкіндік береді
10.CSS-те әріптер арасындағы қашықтықты анықтау үшін қандай стиль қолданылады?
A) Letter-spacing
B) Font-family
C) Background
D) Line-height
E) Border-style
11.CSS-те жолдар аралығын (интервалын) тағайындау үшін қандай стиль қолданылады?
A) Line-height
B) Font-family
C) Background
D) Letter-spacing
E) Border-style
12.CSS-те мәтінді көлденең туралау тәсілін көрсететін стиль:
A) Text-align
B) Background
C) Letter-spacing
D) Line-height
E) Border-style
13. CSS-те элементті қоршап тұрған жақтау сызықтардың типін анықтайтын стиль:
A) Border-style
B) Font-family
C) Background
D) Letter-spacing
E) Line-height
14. CSS-те Letter-spacing стилі бізге қандай мүмкіндік береді?
A) Әріптер арасындағы аралықты анықтау
B) Жолдар аралығын тағайындау
C) Мәтінді көлденең туралау тәсілін көрсетету
D) Элементті қоршап тұрған жақтау сызықтардың түрін анықтау
E) Қаріп түрін өзгерту
15. CSS-те Border-style стилі бізге қандай мүмкіндік береді?
A) Элементті қоршап тұрған жақтау сызықтардың түрін анықтау
B) Жолдар аралығын тағайындау
C) Мәтінді көлденең туралау тәсілін көрсетету
D) Әріптер арасындағы аралықты қосымша анықтау
Әдебиеттер:
1. Б.Бөрібаев., Г.А.Мадьярова. Web технологиялар. Оқулық.Алматы,2011
2. Дузбаева Р.М. Основы создания HTML-документов. Уч. пособ. для студентов. –
Алматы, КБТУ 2003. –82 с.
3. Нидерст Дж. Web-мастеринг для профессионалов. –СПб.:Питер, 2001. –576