Головна сторінка Випадкова сторінка
КАТЕГОРІЇ:
АвтомобіліБіологіяБудівництвоВідпочинок і туризмГеографіяДім і садЕкологіяЕкономікаЕлектронікаІноземні мовиІнформатикаІншеІсторіяКультураЛітератураМатематикаМедицинаМеталлургіяМеханікаОсвітаОхорона праціПедагогікаПолітикаПравоПсихологіяРелігіяСоціологіяСпортФізикаФілософіяФінансиХімія
Стаття 10 Свобода вираження поглядів
Дата добавления: 2015-10-18; просмотров: 710
|
|
1. Бірнеше HTML-файлдарға арналған стильдерді пайдаланып, стильдер кестесін құру керек.
2.Жұмыстың мысалдарын мұқият меңгерген соң келесі сұрақтарға жауап беріңіз:
· Қандай CSS-нұсқаулар басымдау: жеке тәгте жазылғанба, әлде HTML- программаның<HEAD>бөлімінде орналасқанба?
· Қандай нұсқаулар басымдау: HTML-программаның<HEAD>бөлімінде жазылғанба, әлдежеке CSS-файлында орналасқан және құжатпен<LINK>тәгі арқылы байланысқан ба? Нәтиже осы жазулардың орналасу ретіне тәуелді бола ма?
Зертханалық жұмыс № 10.2
Тақырыбы:CSS қасиеттеріне шолу. Қаріп. Түстер. Мәтін.Өрістер мен жақтаулар. Сыртқы түрлері.
Мақсаты:HTML тілінде CSS-ті қолдану технологияларын білу.
Қажет құралдар мен қойылатын талаптар: дербес компьютер, Блокнот(Hotepad) және Internet Explorer программалары, сонымен бірге компьютерде қолданушы ретінде жұмыс жасай білу керек.
Жұмыстың орындалу реті:
1. Теориялық материалды игеру.
2. Жұмыстың орындалуы.
3. Бақылау сұрақтары.
Зертханалық жұмыстың орындалуына есеп беру формасы:
1. Зертханалық жұмыс номері
2. Тапсырма
3. Бағдарлама мәтіні.
4. Тестілеу нәтижесі.
5. Бақылау сұрақтарына жауап беру.
Әдістемелік нұсқау
CSS қасиеттеріне шолу
Стильдік әр түрлі анықтаулар жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару кезінде кітаптар соңында берілетін анықтамаларды пайдалану қажет.
Стильдегі оның қасиеттерін мынадай топтарға бөліп беру қалыптасқан:
· қаріп (шрифт);
· түстер;
· мәтін;
· өрістер мен жақтаулар (поля и рамки);
· сыртқы түрлері.
Пункттер мен пикалар – типографиялық өлшем бірліктері, олар қаріп көлемін немесе оның кеглін береді.
Word-та, мысалы, бұл параметр 8-ден 72 пт-ке дейін. Бұл кегльдің пунктпен берілген мөлшері. 1 типографиялық пт = 1/72дюйм= 0,375 мм. Бұл символдың өз мөлшері емес, оның “ұпай” («очко») мөлшері, яғни типографиядағы сол символды (литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен үлкен. Мысалы, кеглі 10 шрифтің бас әрпінің көлемі 7 пункт шамасында болады.
Кітап шығаруда – мәтін көлемі 10 немесе 12 пт болады. Тақырыптар үшін – үлкенірек кегль, ал сілтемелер мен ескертпелер үшін кішірек (әдетте 8 пт) мәндері қолданылады.
Пика – үлкенірек өлшем бірлігі. 1 пика = 12 пт.
Пайыздық өлшем (процентный отсчет) негізгі мөлшерге байланысты болады. Шрифтер үшін – ағымдағы мән негізге алынады. Пайызды пайдалану ыңғайлы болып саналады. Егер программалаушы браузердегі шрифт көлемін стильдерде пайызбен беріп отырса, олар пропорционал түрде өзгереді.
font-family қаріп түрі(шрифт типі)
Бұл стильдік қасиет шрифтің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын (родовое имя) көрсетеді:
serif – шығыңқы шрифт (с засечками – серифный);
sans-serif – жұмыр шрифт (без засечек – рубленый);
monospace – ені бірдей қаріп (моноширинный шрифт – символдарының ендері бірдей). Гарнитура – бір қаріп символдарының сызылымдары жиыны.
Бұл – тіке және курсивтік сызылым, қарайтылуы (жирность), литер ені (қысыңқы, қалыпты, созылмалы) және кеглі әр түрлі болуы мүмкін деген сөз.
Шрифтер серифтік (шығыңқы - с засечками) и жұмыр (рубленые - без засечек) болады. Шығыңқы шрифт —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.
Түс - Стильдік қасиеттер түстерді тағайындаудың үш түрлі тәсілін береді:
· түйіндісөз, мысалы, white;
· он алтылық RGB-код, мысалы, #eee5d8;
· ондық RGB-код, мысалы, rgb(255,64,0) Color – Элемент түсін анықтайды. background-color
Элемент шығарылатын маңайдағы фон түсін анықтайды.
мысалы, стиль үшін мынадай бөлік енгізуге болады:
<HTML>
<HEAD>
<!—CSS қасиеттерінқосу -->
<STYLE type="text/css">
<!--{
-->
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
color: blue;
background-color: yellow; }
</STYLE>
<TITLE>4 Мысал</TITLE>
</HEAD>
Мәтін үшін letter-spacing
Әріптер арасындағы аралықты қосымша анықтау үшін қажет. Normal түйінді сөзін немесе нақты мән беруге болады, минус таңбалы мәнде болады (символдар бірінің үстіне бірі жазылады). Пайыздық тәсіл қолданылмайды.
line-height
Жолдар аралығын тағайындайды (интерлиньяж). Абсолюттік биіктікті берседе болады (14pt), жол аралығын (1.4) немесе жол биіктігінің пайызыменде (200%) көрсетіледі. Мысалы, жол аралық екі интервал:
line-height: 2 немесе line-height: 200%. normal сөзімен де берсе болады. text-align
Мәтінді көлденең туралау тәсілін көрсетеді.
Келесі мәндер қолданылады: left – сол жақ шетке туралау; right – оң жақ шетке туралау;
center – ортаға туралау;
justify – екі шетін де туралау (по ширине).
Соңғы мәнді justify қолдану қиын, өйткені ұзын сөзді тасымалдауды браузер білмейді (мысалы, орысша немесе қазақша мәтіндерді). Өрістер мен жақтаулар
border-style
Элементті қоршап тұратын жақтау сызықтардың түрін анықтайды. Мынадай мәндер бар:
none – жақтау жоқ (үнсіз келісім бойынша);
solid – кәдімгі тұтас сызық;
double – екі сызық;
groove – «қысылған» шекара; ridge – «томпақ» шекара; inset – «қысылған» элемент; outset –«томпақ» элемент. border-color
Жақтау сызығының түсін анықтайды. Бұл қасиет border-style берілсе ғана жұмыс істейді.
border-width
Жақтау сызығының қалыңдығын береді. Бұл қасиет те border-style берілсе ғана жұмыс істейді. Қалыңдығын сан бірліктерімен (пайыздық жазу жоқ) немесе келесі сөздермен беруге болады:
thin – жіңішке; medium– орташа; thick – жуан . margin
Элементтегі блок шеттерінде бос қалатын өріс енін береді. Санмен, пайызбен (блок ені негізінде) немесе түйінді сөзбен – auto беріледі. Мәні Auto болса, тиімді мәнді браузер өзі анықтайды.
padding
Элемент пен жақтау арасындағы қашықтықты анықтайды. Санмен немесе пайызбен (от ширины элемента) беріледі.
Бір программа бөлігін толық келтірейік:
<HTML>
<HEAD>
<!—CSS қасиеттерін қосу -->
<STYLE type="text/css">
<!--
font-family: "Arial Cyr",Helvetica,sans-serif;
font-size: 0.5cm;
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>
Бұл программа нәтижесі келесі бетте орналасқан.
CSS кейбірпараметрлер
Кейбір параметр шрифті
font-weight: [ bold | normal | number] – шрифтің семіздігі font-style: [normal | italic | oblique] – шрифтің еңкейгіші font-size: number – шрифта өлшемі
font-family: name – шрифтін гарнитурасы
color: number – шрифтіңтүсі
background-color: number – етектің түсі
background: url – етектің мәтіндігі
Абзацтың кейбір параметрлері
text-align: [ left | right | center | justify] - текістеу text-indent: number – қызыл жолдың шектеуі line-height: number - интерлиньяж
letter-spacing: number - трекинг
padding-left: number – мәтіннің сол жағынан шектеу padding-right: number – мәтіннің оң жағынан шектеу padding-top: number – мәтіннің үстінен шектеу padding-bottom: number – мәтіннің төменнен шектеу margin-left: number – сол жақтағы шекарамен шектеу margin-right: number – оң жақтағы шекарамен шектеу
margin-top: number – үстіңгі жақтағы шекарамен шектеу
margin-bottom: number – төменгі жақтағы шекарамен шектеу
CSS қолдану мысалы
Барлық сілтеме жағдайларына түс тағайындап және былай істейміз, барлық жағдайдағы сілтемелер асты сызылмасын, ал курсор сілтеменің үстінде ғана асты сызылсын.
A:link {COLOR: #0000CC; text-decoration: none} A:visited {COLOR: black; text-decoration: none} A:active {COLOR: red; text-decoration: none}
A:hover {COLOR: #6666FF; text-decoration: underline}
- (link) сілтемесі - көктүс (#0000CC);
- қатынасусілтемесі (visited) – қаратүс (black);
- активтісілтеме (active) – қызылтүс (red);
- тышкан куроры сонын үстінде болғандағы кезкендегі сілтеме (hover) – ашықкөк (#6666FF);
CSS қолдана отырып біз белгілей алып немесе эффектті сілтемеге лайықты етуімізге болады.
Бұл үшін text-decoration қасиетті қолданып, мына келесі мәндерге ие болады:
none – реттеусіз underline – астын сызу overline – сызық үстінен
line-through – астынан сызу
blink – кірпік қағу
Тәжірбелік тапсырмалар
| <== предыдущая лекция | | | следующая лекция ==> |
| Стаття 4 Заборона рабства і примусової праці | | | Фінансування |