CSS тілі. CSS деген не?

1. CSS синтаксисі, шрифті, түсі, фоны, өрістер мен жақтаулары
2. СSS .тегі стильдер, контекстік селекторлар, класстар
3. СSS.те объектіні орналастыру
CSS – Cascading Style Sheets (Стильдердің сатылы кестелері) —гипермәтіндік мәліметтер мазмұнын олардың экрандағы бейнелену формасынан бөліп орындауға мүмкіндік беретін құрал болып табылады.
CSS сценарийлермен қосыла отырып, гипермәтіндік парақтарды кәсіби програм-маларда жасалған мультимедиялық өнім-дерден айнымайтын динамикалық әрі ин-терактивті деңгейде көрсетуге мүмкіндік береді.
Скриптер», немесе «сценарийлер» –гипер-мәтіндерді түрлендіре алатын арнайы програм-малау тілінде жазылған программалық кодтар.
Сценарийлер енгізілген CSS статикалық HTML-тілін динамикалық жаңа күйге келтіретін қосымша мүмкіндіктер жиыны.
• CSS арқылы HTML-тілінің экрандағы элемент-терді бейнелеудің көптеген тәсілдеріне жауапты тэгтер мен олардың атрибуттарын алып тастау жолымен файлдың жалпы көлемін кішірейте аламыз (мысалы, мынадай тэгтер: ,
, <в>, , , т. б. ; атрибуттар: align, color, bgcolor, size, width, height, т. с. с.);
• HTML тілінің тэгтері мен атрибуттарына қараған-да, CSS кестелері сайттың сыртқы түрін басқарудың жеңіл тәсілдерін береді;
• бір файлдағы стиль сипаттамаларын өзгерту арқы-лы жүздеген гипермәтіндік парақтардың сыртқы түр-лерін бірден өзгерте аламыз.
Стильді бір тэгтің параметрлері ішіне жазуға болады. Ол үшін BODY ішіндегі кез келген тэгке (BODY тэгіне де) STYLE атрибуты қолданылады. Бұларды "инлайндық" стиль кестелері деп те атайды.
1. Мальчук Е.В., Самоучитель HTML и CSS – М.:
2. Гончаров А. HTML в примерах. – СПб.: Питер,
3. Шафран Э. Создание Web страниц. – СПб: Питер,
4. ПитерКом, 1998. Айзекс А. Dynamic HTML BHV.
        
        CSS  ТІЛІ
Жоспар
1. CSS синтаксисі, шрифті, түсі, фоны, өрістер мен жақтаулары
2. СSS - тегі стильдер, контекстік селекторлар, класстар
3. ... ... ... - Cascading Style Sheets (Стильдердің сатылы кестелері) -- ... ... ... ... ... ... ... бөліп орындауға мүмкіндік беретін құрал болып табылады.
CSS сценарийлермен қосыла отырып, гипермәтіндік ... ... ... ... ... өнім-дерден айнымайтын динамикалық әрі ин-терактивті деңгейде көрсетуге мүмкіндік береді. ... ... - ... түрлендіре алатын арнайы програм-малау тілінде жазылған программалық кодтар.
Сценарийлер енгізілген CSS статикалық HTML-тілін динамикалық жаңа күйге келтіретін қосымша мүмкіндіктер ... ... ... ... элемент-терді бейнелеудің көптеген тәсілдеріне жауапты тэгтер мен олардың атрибуттарын алып тастау жолымен файлдың жалпы көлемін кішірейте аламыз (мысалы, ... ... , , , , , т. б. ; ... align, color, bgcolor, size, width, height, т. с. ... HTML ... тэгтері мен атрибуттарына қараған-да, CSS кестелері сайттың ... ... ... ... ... ... бір файлдағы стиль сипаттамаларын өзгерту арқы-лы жүздеген гипермәтіндік парақтардың сыртқы түр-лерін бірден өзгерте аламыз.
Стильді бір ... ... ... ... ... Ол үшін BODY ішіндегі кез келген тэгке (BODY тэгіне де) STYLE атрибуты қолданылады. Бұларды "инлайндық" ... ... деп те ... CSS ... ... ... ... өрістер мен жақтаулары.
Стильді бір тэгтің параметрлері ішіне жазуға болады. Ол үшін BODY ішіндегі кез келген тэгке (BODY тэгіне де) STYLE ... ... ... ... ... ... деп те атайды.
STYLE атрибуты арқылы мыналар атқарылады:
- Жеке тэг стилі
- Жеке ... ...
- ... ... ... ...
- Аралас стильдерді пайдалану
1.1. Жеке бір тэг үшін жазылған ... ... тэгі ... ... бір ... ... ... былай көрсете аламыз:

Бұл абзацқа стильдік анықтау тәсілі қолданы-лып отыр.
Стиль style атрибутымен берілген. Мұнда браузерге абзацты көлемі 1.5 ... ... ... ... жазуға нұс-қау берілген.
Стильді анықтау мынадай түрде жазылады:
сипаттамасы:мәні;
font-size:1.5cm;
color:green;
Әрбір анықтаулар бір-бірінен символы арқылы ... ... ... ... оның параметрлері арқылы әрбір тэгке қолдана аламыз.
Енді стильдер қолданылатын толығырақ бір мысал қарастырайық.


Жеке тэг ... ...
Бір тэг үшін ... ...
... Бұл қарапайым мәтін.

Биіктігі 1 см қисайтылған қызыл әріптер.

Сол жақ ... 2 ... ... ... ... ... код нәтижесі:
Жеке HTML-файлына арналған стиль
Стильді тек бір тэг үшін немесе бірнеше тэгтер үшін бір жазылған ... ... ... ... дейін әсер ететіндей етуге болады.
Мысалы, барлық тэгтер атауларын тізіп, стильдік анықтауларды құжаттың тақырып бөлігіне орналастыру қажет.
Стильдік ... ... ... мынадай блок ішіне жазылады
. . .
және HTML-комментарий ретінде жазылады.
Стильдік анықтау форматы:
Тэг аты (немесе бірнеше ... ... үтір ... бөлініп жазылады)
{
сипаттама: мәні;
...
сипаттама: мәні;
}
Мысалы:


Жеке файлға арналған стиль





Жеке файл ... ... Бұл ... ... Бұл ...
Бұл да қарапайым мәтін


Бұл мысалда үш сипаттама былай берілген:
* text-align: right; - оң жақ ... ... color: red; - түсі ... ... "Arial Cyr", - жұмыр
Geneva, sans-serif; ... ... Arial Cyr ... ... тиіс ... ... компьютерінде ол бар болса). Егер ол қаріп (шрифт) бол-маса, браузер келесі көрсетілген Geneva, Helvetica қаріптерді немесе әйтеуір бір ... ... ( ) ... Егер бір де бірі ... ... по ... яғни ... Times New Roman қарпін қолданады.
Бірнеше 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-құжаттар сілтеме жасай алады. Осы ... бір ... ... ішкі ... бар ... ... әсер етеді.
Мынадай стильдік анықтау
body {margin-left: 40рх;}
барлық жолдар үшін сол жақ шеттен 40 пиксель шегі-ніс ... ... HTML ... ... қолданбай, өріс көрсетпей, стиль арқылы ғана осындай мүмкін-діктер жасауға болады екен
Аралас стильдерді пайдалану
Сонымен HTML-кодтары үшін стильдерді пайдаланудың үш тәсілі бар ... жеке тэг үшін ...
* ... ... анықтау;
* басқа CSS файлында стильді анықтау.
Енді осы тәсілдерді араластыра ... ... ... ... басым екенін мысалдар арқылы қарастырайық.
Бірнеше мысалдар келтірейік.
CSS анықтаулары жоқ құжат
Төмендегі мысалда тақырыптар қара түспен ақ фон арқылы ... 1 ...
... 1 ...
2 ...
3 ... ...
0000
CSS файлындағы CSS-анықтаулар
prim.сss файлының ішкі мәтіні:
H1,H2,H3
{
color: ... осы ... ... ... коды мен оның ... ... ... 4 мысал


1 тақырып
2 тақырып

3 тақырып


0000
және ... ... ... ...







5 мысал


1 тақырып
2 тақырып
3 тақырып

... CSS ... ... ... ... шегіністер, қаріп мөлшері (көлемі) және типі, мәтін түсі мен фоны, т.б. парақтың жекелеген элементтері (абзацтар, сөздер, ... үшін ...
· ... ... тұратын толық сайт үшін оның безендірілуін HTML-кодқа тимей, тек бір ғана CSS ... ... ... ... ... ішкі ... ... азайтып, оның ішкі ақпараттық мазмұнын браузер экранының сыртқы түсінен бөліп жеке стильдер түрінде жазып шығу.
II. CSS қасиеттеріне ... әр ... ... жазуда 70-тен аса оның түрлі қасиеттерін көрсетуге болады. Жалпы жұмыс атқару ... ... ... ... анықтамаларды пайдалану қажет.
Стильдегі оның қасиеттерін мынадай ... ... беру ... ... ...
· түстер;
· ... ... мен ... (поля и рамки);
· сыртқы түрлері.
Өлшем бірліктері
Стильдік нұсқауларда пайдаланылатын өлшем бірліктері төменде ... ... (12 пт ... мен ... -- типографиялық өлшем бірліктері, олар қаріп көлемін немесе оның кеглін береді.
Word-та, мысалы, бұл параметр 8-ден 72 ... ... Бұл ... ... берілген мөлшері. 1 типографиялық пт = 1/72дюйм= 0,375 мм. Бұл символдың өз ... ... оның ... () ... яғни типографиядағы сол символды (литер) ойып орналастыратын матрица биіктігі. Оның мөлшері литер мөлшерінен үлкен. Мысалы, кеглі 10 шрифтің бас әрпінің ... 7 ... ... болады.
Кітап шығаруда - мәтін көлемі 10 ... 12 пт ... ... үшін -- ... кегль, ал сілтемелер мен ескертпелер үшін кішірек (әдетте 8 пт) ... ... -- ... ... ... 1 пика = 12 ... ... (процентный отсчет) негізгі мөлшерге байланысты болады. Шрифтер үшін -- ... мән ... ... ... ... ыңғайлы болып саналады. Егер программалаушы браузердегі шрифт көлемін стильдерде пайызбен беріп отырса, олар пропорциональ түрде ... ... түрі ... ... ... қасиет шрифтің гарнитурасы атын (мысалы, Arial) немесе оның топ атауын (родовое имя) көрсетеді:
serif - шығыңқы ...... - ... - ... ... (без ... - рубленый);
monospace - ені бірдей қаріп (моноширинный шрифт - ... ... ...
Гарнитура -- бір қаріп символдарының сызылымдары ... ... ... ... ... ... - тіке және ... сызылым, қарайтылуы (жирность), литер ені (қысыңқы, қалыпты, созылмалы) және ... әр ... ... ... ... ... серифтік (шығыңқы - с засечками) и жұмыр (рубленые - без засечек) болады. Шығыңқы шрифт -- Times гарнитурасы, ... ... -- ... ... Arial ... ... ... оқылады. Төменгі сериф көзге жылы көрінеді.
Жұмыр шрифтер тек тақырыптар үшін қажет.
Серифтік ... ... ... ... ал ... -- тақырыптар немесе майда ескертпелер үшін керек.
Тағы екі топ: пропорциональ және ені ... ... ... ... ... баспа машинкасындай етіп басады. Олар мынадай тэгтерден пайда болады: , , , , .
Кәдімгі мәтін пропорциональ шрифтпен басылады. Оларда әр ... ... ені әр ... 1 - ... ж - енді.
Пропорциональ шрифт моноенді шрифтке қарағанда жеңіл оқылады. Пропорциональ шрифт негізгі ... ... ал ... шрифт -- программалар үшін қажет болып саналады
Times және Helvetica гарнитуралары -- пропорциональ.
Courier гарнитурасы - моноенді ... ... ... ... операциялық жүйеде үш стандартты гарнитура бар, Windows үшін:
Times Roman -- ... ... -- ... шрифт;
Courier -- моноенді шрифт.
Үнсіз келісім бойынша (по ... ... ... мәтін үшін Times Roman шрифтін, ал программалар үшін - Courier ... ... ... үшін өз гарнитураңды көрсету қажет емес, ондай шрифт компьютерде болмаса, ол иероглифке айналып кетеді. Жергілікті ... ... үшін кез ... ... ... Ал Интернет желісі үшін тек топты ғана көрсету жеткілікті ... ... ... қоса ... оны ... ережесі де бірге берілуі тиіс.
font-family қасиеті үшін бір емес, бірнеше шрифт көрсеткен абзал (үтір арқылы бөліп), ... ... "Arial Cyr", Geneva, ... ... ... ... Arial Cyr ... іздейді, таба алмаса - Geneva, соңынан - Helvetica, ешқайсысы да болмаса, әйтеуір бір жұмыр ... ... ... ... аты ... ... тұрса, ол міндетті түрде қос тырнақшаға алынады
font-size
font-size қасиеті шрифтің абсолюттік немесе салыстырмалы ... ... ... ... ... ... ... қолданылады (ағымдағы шрифт - негізгі) немесе мынадай түйінді сөздер қою керек:
larger - ірілеу - ... ... - ... - ... мөлшерде келесі өлшем бірліктерінің бірін көрсету керек: in, cm, mm, px, pt, pc.
Мынадай түйінді сөздерді пайдалануға ... өте ... ... ірі;
small
- ұсақ;
medium
- орта;
large
- ірі;
х-large
- мейлінше ірі;
xx-large
- өте ірі.
Осындай салыстырмалы өлшем ... ... ... ... тұтынушы өзіне ұнаған мөлшерді жеңіл таңдап ала алады.
Түс
Стильдік қасиеттер ... ... үш ... ... ... ... сөз, ... white;
· он алтылық RGB-код, мысалы,
#eee5d8;
· ондық RGB-код, мысалы,
rgb(255,64,0)
color
Элемент түсін анықтайды.
background-color
Элемент шығарылатын ... фон ... ... ... ... үшін ... ... енгізуге болады:






Пример 4

Мәтін үшін ... ... ... ... анықтау үшін керек. normal түйінді сөзін немесе нақты мән беруге болады, минус таңбалы мән де болады (символдар бірінің үстіне бірі ... ... ... қолданылмайды.
line-height
Жолдар аралығын тағайындайды (интерлиньяж). Абсолюттік биіктікті берсе де болады (14pt), жол ... (1.4) ... жол ... ... де (200%) ... ... ... екі интервал:
line-height: 2
немесе ... 200%. ... ... де ... ... ... ... тәсілін көрсетеді (способ горизонтального выравнивания).
Мынадай мәндер қолданылады:
left - сол жақ ... ... ... - оң жақ ... ... ... - ортаға туралау;
justify - екі ... де ... (по ... ... justify ... ... ... ұзын сөзді тасымалдауды браузер білмейді (мысалы, орысша немесе қазақша мәтіндерді).
Өрістер мен жақтаулар
border-style
Элементті қоршап тұратын жақтау ... ... ... ... ... ... - рамки нет (по умолчанию);
solid - обычная сплошная граница;
double - двойная линия;
groove - ... - ... - ... - элемент.
border-color
Жақтау ... ... ... Бұл ... ... берілсе ғана жұмыс істейді.
border-width
Жақтау сызығының қалыңдығын береді. Бұл қасиет те border-style берілсе ғана жұмыс істейді. Қалыңдығын сан ... ... жазу жоқ) ... ... ... ... ... - жіңішке - ... - ... - ... ... - жуан - ... ... блок шеттерінде бос қалатын өріс енін (ширину поля отступа) береді. Санмен, пайызбен (блок ені негізінде) немесе ... ... - auto ... Auto ... ... ... ... өзі анықтайды.
padding
Элемент пен жақтау арасындағы қашықтықты береді. Санмен немесе пайызбен (от ширины элемента) беріледі.
Бір программа фрагментін толық келтірейік :



... 4
... ... - это ... сеть ... ... программы, последняя и, порой, единственная надежда на серьезное повышение ее ... до ... как она ... в свет (Лу Гринзоу "Философия программирования"). ... - это ... ... ... ... ... нәтижесі келесі бетте орналасқан.-635381000






Пример 4


Тестирование - это защитная сеть ... ... ... последняя и, порой, единственная надежда на серьезное повышение ее качества до ... как она ... в свет (Лу ... ... ...

Тестирование - это форма приема экзамена


0000
Негізгі әдебиет: [1]-311-4610б, [2]-158-359б.
Қосымша әдебиет: [] - б, [] - ... ... ... ... ... ... ... беріледі.
+ Стильдер кестесіндегі қандай күйлерді анықтауға болады?
+ Стильдер кестесіндегі синтаксис ережелері.
+ Сыртқы желі туралы айтыңыз.
+ DIV элементі.
+ SPAN элементі.
+ ... ... ...
+ CSS атрибуты дегеніміз не?
2. СSS - тегі стильдер, контекстік селекторлар, класстар
HTML-кодтың құрылымы сатылы ... ... Бар ... . . . тэгтері ішінде орналасады. Ал абзацы ішінде тэгімен белгіленген ... ... ... мұра ... ... тэгі үшін ... стильдің құжаттағы барлық тэгтерге әсер ететіндігін білдіреді. Сәйкесінше егер бір тэг үшін стиль құрылса, онда сол тэг ... ... ... де осы стиль міндетті түрде беріледі.
Мысалы, тэгі үшін ... ... ... ... {color: red; ... ... Arial,sans-serif}
Онда осы абзац ішіне орналасқан тэгінің эле-менттері де экранда қызыл түспен, 14 пункт көлемде жұмыр ... ... ... ... ... ... ... бұл фрагмент нәтижесі мынадай болады:
0000
Егер тэгі үшін мәтін символдары арасын ашып жазу ... ... онда ... ... қосымша беріледі:


Дополнительное стилевое указание







Стилевые определения обладают свойством

наследования


... ... ішкі ... ... мәтіндері сияқты шығады (14 пункт, қызыл түсті, жұмыр қаріп), ал style="letter-spacing: 6pt" қосымша анықтаудың әсерінен сөздегі әріптердің арасы 6 ... ... ... ... ... ішкі ... ... жаңа стильдік анықтаулар кіргізіп қана қоймай, оның ата тегі болып саналатын сыртқы тэгтің де ... ... ... ... келесі мәтіндегі "мұралау" (наследование) сөзі көк түске боялып тұрады.


Переопределение стилевых свойств

...
... ...
... селектор


Экранға сөзі бірінші қатарда көк түспен ( тэгінің ішінде), ал ... ... қара ... ( ... ... шығады. Стильдік анықтауларда үтір қойылмағандығына назар аударыңыз. Бұл ... ... ... Егер Н3, ЕМ { color: blue } ... жазсақ, онда тэгімен қатар тэгі де көк түске боялады, яғни үтір бірнеше тэгтер тобы үшін ... ... ... ... ... Кластар
Стильдік анықтауларды тэгтерді көрсетпей-ақ жазуға болады. Мұндай жағдайда, берілген стилді нақты тэгке сәйкестендіру үшін, әрбір анықтауға арнайы атау меншіктелуі ... ... ... ... ... деп аталады. Класс келесі түрде жазылады:
.аты
{ сипаттама: мәні;
. . .
сипаттама: мәні;
}
Басқаша айтқанда, анықтаулар әдеттегідей ... ... ... аттары орнына .аты конструкциясы қолданылады.
Мысалы, def атты стильдік класс жазып шығайық:
.def
{color: red; font-size: ... Geneva, ... ... solid 0.2cm blue ... border: solid 0.2cm blue ... бір ... нұсқауда бірнеше параметрлердің қызметін жазуды көрсетеді ( мұнда: стиль, жақтау қалыңдығы, және оның түсі). Мұндай ... border ... ... ... ... ... ... болады.
Стильдік класты тэгпен сәйкестендіру үшін class атрибуты қолданылады:
текст
Бұл кодтың қалай ... ... ... ...
... ...
border: solid 4pt red;padding: 6pt;
margin-left:5%;margin-right:5% }



Классы

Клacc — стилевое определение
без привязки к тегу.
Вместо ... тега в ... ... имя ... ... класса ставится точка.


Бұл кодтың нәтижесі:
0000
Құрылған стильдік анықтаулар негізінде кластар құруға болады. Келесі мысалда def класының негізі ретінде тэгі үшін ... ... ... оған ... жаңа ... ... ...


Определение класса

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



Классы(обычный заголовок)
Этот абзац ... ... ... для ... Р ... шрифт).

Этот абзац использует
стиль производного класса
“def”
(в определение ... ... Р ... ... цвет ... ... и
справа, повышенный
размер шрифта).


0000
4. және тэгтері
Бұл тэгтер CSS үшін маңызды болып табылады. Олар құжаттағы жеке бір ... ... ... ... ... қасиеттер беру ісін атқарады. Ол үшін керекті элементтерді . . . ... . . . ... ... ... ... ... айырмашылығы мынада: блогынан соң браузер жаңа ... ... ал ... ... -- ... жолда қала береміз. Сонымен, тэгін пайдалану - бір жолдағы сөздерге не символдарға жеке стильдік қасиеттер ... ... ... ... келтірейік.
тэгін пайдалану:


Использование тега DIV
...
{ ... ... ... ...
{ ... background:#CFB597}
.area3
{ color:blue;background:#C0C0C0}



Где
начало того конца, ... ... ...

... ... пайдалану мысалы:


Использование тега SPAN
...
{ ... ... ... ...
{ ... background:#CFB597;
padding:6pt}
.area3
{ ... ... ... того ... ... оканчивается начало?



0000
Абсолюттік түрде орналастыру
CSS арқылы экрандағы элементтерді браузер терезе-сінің сол жақ ... ... ... нақты координаталар бойынша орналастыра аламыз. Мұндай мүмкіндікке position стильдік қасиетінің absolute мәні арқылы қол жеткізуге болады. Координаталар пиксель ... left ... ... және top (вертикаль координата) сөздері арқылы тағайындалады.
Енді мысалдар қарастырамыз.


Абсолютное позиционирование
.area1
{ position:absolute; top:10; ... ... ... ...
{ ... top:20; ... background:#CFB597;
padding:12pt}
.area3
{ position:absolute; top:70; left:130;
color:blue; background:#C0C0C0;
padding:12pt}



Где
начало того конца,
которым оканчивается начало?

... ... үш ... ... ... ... ... бойынша орналастырып шықты. Элементтер бірінің үстіне бірі шығып тұрғанын байқаған шығарсыңдар.
Ең үстіне, яғни бізге жақын түрде HTML-кодта ең соңғы ... ... ... Егер ... орнын ауыстырсақ, онда элементтердің қабаттаса орналасу реттілігі де өзгеріске ұшырай-ды. Дегенмен, CSS элементтерді қабаттастыра орналасу реттілігін жылдам өзгертетін тағы бір ... - Z-index ... де ... ... ... қасиет экрандағы элементтің қай деңгейде (қай қабатта) орналасуы керек екендігін анықтайды. Мұндағы негізгі деңгейдің нөмірі (элементтер ... ... ... ... нөлге тең болып саналады. Сәйкесінше, экран қабатын анықтайтын теріс Z-index мәні бар ... ... ... ал оң ... элементтер -- жоғарыда (жақын) орналасады. Егер элементтердің Z-index мәндері бірдей болса, олар бір ... ... ... Z-index мәні ... ... ... ... орналасады екен.
Енді мысал қарастырайық.


Z-index ... ... ... ...
... дальше





Бұл код нәтижесі төмендегідей:
0000
6. Сатылай орналастыру (каскадирование)
CSS көмегімен тұтынушылар экрандағы ақпаратты ыңғайлы түрде бейнелейтін мүмкіндік ... ... ... стильдердің бір-бірімен өзара байланысын және тэгтер атрибуттарының жазылуын (олар да стильді анықтайды) браузердің өз стилімен (үнсіз келісім ... ... ... ... ... керек.
Жоғарыда айтылғандай, программалаушы HTML-құжатта үш түрлі ... ... ... Құрамдас (встроенный - inline). Style атрибуты арқылы тэг ішінде жазылған стиль, ол жеке тэг жұмысын бақылайды.
· Енгізілген (внедренный - ... ... ... ... ... ... ... ... ол жеке HTML-құжаттағы стильді бақылайды.
· Байланысқан (связанный - linked). Жеке CSS-файлда жазылған стиль. Ол көптеген ... ... ... ... ... стильдік файлға сілтеме жасау үшіни HTML-құжаттың бас жағына тэгі жазылады.
Бір құжатта осы айтылған үш ... ... де ... ... ... ... ... атрибуттары арқылы берілетін стильді және браузердің "келісім бойынша" тағайындалған өз ... ... ... ... қалай әрекеттесер екен, компьютер экранына құжатты шығарарда браузер қай стильді пайдаланады?
Құжатты шығарарда кәдімгі ... ... ... каскадты, яғни сатылы деп аталады. Бұл браузер үшін ең негізгі стиль - құрамдас ... ... сөз, одан ... төмен қарай реті бойынша енгізілген және байланысқан стильдер қолданылады.
Сонымен браузер үшін енгізілген және байланысқан стильдер бірдей болып саналады, ол тек ... ... ... ...
Стильдік реттілік бойынша ең төменгі сатыда ... ... Оны ... ... ... ... болмаған жағдайда қолданады. ұғымына арғы тегінен берілу - мұралау (наследования) механизмі де жатады, ол бойынша өз ... жоқ ... ... ... қабылдайды (к потомку без собственных стилей применяется стиль родителя).
Кәдімгі атрибуттар арқылы берілген стильдер осы сатылау ережесі бойынша ... ...
1 ... ... будет показано
синим.


0000
2 мысал.

Это будет показано
синим, а

это будет показано
красным.


0000
3. ... ... ... ... бір ... қою ... Парақ коды сатылары
* Абсолюттік орналастыру
* Салыстырмалы орналастыру
* Аралас орналастыру
1.Объектіні бір орынға қою
Объектіні бір орынға қою, яғни ... -- бұл ... ... ... ... ... басқару болып табылады. Ол үшін CSS ортасында position параметрі (қасиеті) қолда-нылады.
Бұл қасиет үш мәнді қабылдай алады: absolute (абсолюттік ... relative ... ... және static (статикалық орналас-тыру). Static мәні элементті сайтта ешқандай ... ... ... ... ... бұл ... ... ешқандай қажеті жоқ. Ал absolute және relative мәндерін кейінірек қар-астырамыз, алдымен HTML-кодының ... ... бір ... ... атап өтейік.
2. Парақ коды сатылары (иерархиясы)
Иерархия -- бұл ... ... ... ... ... ... ... салынып жинақталған қапшық-тарға салынғаны сияқты орналасуы. Парақтың барлық элемент-тері блогының ішіне орналасады. Сондықтан тэгі парақтағы барлық ... ... ... табылады. Парақ коды суреттегідей болсын делік.
Иерархия -- бұл ... ... ... ... ... ... ішіне салынып жинақталған қапшық-тарға салынғаны сияқты орналасуы. Парақтың барлық элемент-тері ... ... ... ... тэгі ... барлық басқа элементтердің болып табылады. Парақ коды суреттегідей болсын делік.



. . . ... . . ... . . ... . . ... ... орналастыру
Абсолютті орналастыру position:absolute стильдік нұсқауы арқылы беріледі. Бұл ... ... ... ... ... ... ... аймағының (анасының) жоғарғы сол жақ бұрышы бо-лады (егер оның да орны абсолют немесе салыстыр-малы түрде анықталған болса). Егер сыртқы ... ... бір ... ... онда оның да ... ... ... алынады. Егер барлық сыртқы элем-енттерде position нұсқауы жоқ ... онда ... ... ... ... ... ... бейне-сінің сол жақ жоғарғы бұрышы, яғни құжаттың сол жақ жоғарғы бұрышы қабылданады. Көлденең және вертикаль координаталар left және top ... ... ...
Төменде суретті (100, 50) нүктесіне орналастыратын мысал келтірілген. Браузер координаталар басы ретінде құжаттың сол жақ ... ... ... ... ...
... позиционирование

Мына суретте картинка абсолютті позицияланған. Ол 80 пикселде горизонтал бойынша және 60 ... ... ... Терезенің өлшемін картинка бір орында тұратындай өзгертіңіз.



0000
Келесі мысалда екі сурет абсолютті түрде орналасты-рылған. Кодта оның ... үшін (100, 50) ... ... ... оның бірі үшін ... басы - ... басы, ал екіншісі үшін - кестенің сол жақ жоғарғы бұрышы болады.



Абсолютное позиционирование


Абсолютное ... ... ... ... ... в точку (100, 50). Начало координат для одной картинки совпадает с началом документа, для ... — с ... ... ... border=l ... ... left:50px;
top:300px;">


Таблица абсолютно позиционирована.







Келтірілген мысалдар элементтердің абсолюттік орна-ластырылуы кәдімгі тізбекті форматтау ... тыс ... ... ... ... ... ретін есепке алмайды, тек бастапқы координатаны анықтау үшін парақ элементтерінің бір-бірімен қабаттасу ретті-лігін ғана ескереді. Элементтер парақтағы басқа объек-тілер ... ... да, ... ... ... ... Абсолюттік түрде орналастырылған элементтер кодтарының реттілігі объектілердің бірін-бірі жауып орналасуын анықтайды: ... ... коды ... ... ... ... ... мысалдар қарастырайық.
0190500
Келтірілген мысалдар элементтердің абсолюттік орна-ластырылуы кәдімгі ... ... ... тыс ... ... ... ... жазылу ретін есепке алмайды, тек бастапқы координатаны анықтау үшін парақ элементтерінің бір-бірімен қабаттасу ретті-лігін ғана ескереді. Элементтер парақтағы басқа ... ... ... да, ... ... ... береді. Абсолюттік түрде орналастырылған элементтер кодтарының реттілігі объектілердің бірін-бірі ... ... ... ... ... коды ... ... элемент тұрады.
Тағы мысалдар қарастырайық.
Келтірілген мысалдар элементтердің абсолюттік орна-ластырылуы кәдімгі тізбекті форматтау процесінен тыс ... ... ... ... ... ретін есепке алмайды, тек бастапқы координатаны анықтау үшін парақ ... ... ... ... ғана ... ... ... басқа объек-тілер үстіне болса да, көрсетілген орынға шығарыла береді. Абсолюттік түрде орналастырылған элементтер кодтарының реттілігі ... ... ... ... ... ... қабатта) коды кейінірек жазылған элемент тұрады.
Тағы мысалдар қарастырайық.


Абсолютное позиционирование


Абсолютное ... этом ... обе ... абсолютно пози-ционированы.Так как код “ Мальчик” идет раньше кода “Вышки”,то вторая картинка перекрывает первую.



... ... ... ... position: relative стиль-дік нұсқауы арқылы беріледі. Мұндай элемент әдеттегі құжаттың ... ... тұра ... ... басы ... ... орны көрсетіл-меген кездегі тұратын жері (координатасы) қабылда-нады. ... ... ... ... ... ... браузер кәдімгі форматтауды орындай отырып, элементті параққа орналастырады, одан ... left және top ... ... ... ... ... ... жылжытады.
Төменде келтірілген мысалда құжат осы айтылған түрде форматталады.


Обычное построение документа

... ... ... ... обычное форматирование документа без
всякого позиционирования.

... ... этом ... картинка смещена вниз на 150 пикселов относительно того места, которое она ... бы на ... при ... ...

... енді ... көлемі өзгертілсе, онда суреттің экран бетінде түйінді нүктемен бірге - ... тэгі ... азат жол ... ... ... ... ... Азат жол басы оның алдындағы тақырыптың бір немесе екі экран жолына жазылуына ... ... ... Absolute [relative]
Салыстырмалы түрде орналасқан суреттің коды абсолют түрде орналасқан кесте ... ... ... ... ... басынан оңға қарай 50 пикселге жылжытылған, осы қалып терезе көлемін өзгерткенде де сақталады. ... ... ... төмен қарай 100 пикселге жылжытылған. Бірақ кесте ішіндегі мәтін сурет ... өз ... ... сияқты болып орналасады.

Смешанное позиционирование



Смешанное позиционирование

Таблица абсолютно позиционирована в точку (50,0). Внутри кода ... ... ... с ... ... вниз на 100 ... ...


Тег IMG размещается внутри таб-лицы. Для ... ... ... ... вниз на 100 ...


... Relative ... мысалда абсолютті орналасқан суреттің коды салыстырмалы орналасқан кесте кодының ... тұр. ... ... ... оңға ... 50 ... жылжытылған. Сурет үшін координаталар басы кестенің сол жақ жоғарғы бұрышы болып табылады. Сурет осы қалпынан төмен қарай 100 ... ... ... Осы ... ... ішін-дегі мәтін тэгін есепке алмай форматталады.


Смешаннoe позиционирование


Смешанное позиционирование
Таблица относительно ... ... на 50 ... кода таблицы расположена картинка с абсолютным позиционированием (0,100)



Тег IMG размещается внутри ... ... ... абсолютное позиционирование вниз на 100 пикселов.




00BODY
relative
absolute
00BODY
relative
absolute
0000
5.3. Absolute [absolute]
Абсолютті түрде орналасқан ... коды ... ... орналасқан кестенің ішіне тұр. Мұнда терезе көлемін өзгерткенімен сурет өз қалпында тұр, өйткені кесте координаталары өзгеріссіз қалады.


Смешанное позиционирование
... ...
... ... ... в ... (50,0). Внутри кода таблицы расположена картинка с абсолютным позиционированием в точку (0,120).


... IMG ... ... ... картинки записано абсолютное позицио-нирование в точку (0,120).






... IMG ... ... ... ... записано абсолютное позицио-нирование в точку (0,120).







Тег IMG размещается ... ... ... ... ... ... в точку (0,120).




00BODY
absolute
absolute
00BODY
absolute
absolute
0000
5.4.Relative [relative]
Салыстырмалы түрде орналасқан ... коды ... ... ... кесте кодының ішінде тұр. Терезе көлемін өзгертуге байланысты экрандағы кесте тұрған орын ... ... орны да ... ... ... ... басы ... ал сурет одан 100 пиксел төмен қарай орналасуға тиіс.


Смешанное позиционирование


Z-индекс ... ... ... К нему не ... никаких стилевых воздействий. Значит, этот текст лежит в нулевой плоскости.


0000


Пайдаланылған әдебиеттер ... ... Е.В., ... HTML и CSS - ... Гончаров А. HTML в примерах. - СПб.: Питер,
3. Шафран Э. Создание Web ... - СПб: ... ... 1998. ... А. Dynamic HTML BHV.

Пән: Информатика
Жұмыс түрі: Реферат
Көлемі: 22 бет
Бұл жұмыстың бағасы: 600 теңге









Ұқсас жұмыстар
Тақырыб Бет саны
Ақпараттық технологияларды қолдану арқылы Web-сайт құру және зерттеу44 бет
Бағдарламалық жабдықтардың интернет-магазині үшін web-қосымша құру83 бет
HTML тілінде «Мұхтар Шаханов» атты сайт жасау15 бет
JavaScript- та бағдарламалау25 бет
Алгоритмдеу және бағдарламалау негіздері19 бет
10 сынып бағдарламасындағы элементтер химиясы курсы бойынша табиғатқа әсері бар деген негізгі тақырыптар бөліп алып, осы элементтердің адам ағзасымен, қоршаған ортамен байланысты экологиялық, химиялық және табиғатты қорғау ұғымдарының проблемалары негізінде бағдарламалар дайындау58 бет
Intranet дегеніміз не?6 бет
Адам капиталы теориясы – білім роліне деген сапалық жаңа тәсілдің бастамасы12 бет
Алғашқы қауымдық және дәстүрлі өнер дегеніміз не?4 бет
Ақпарат дегеніміз не? Ақпарат түрлері, қойылатын талаптары3 бет


Исходниктер
Пәндер
Көмек / Помощь
Арайлым
Біз міндетті түрде жауап береміз!
Мы обязательно ответим!
Жіберу / Отправить


Зарабатывайте вместе с нами

Рахмет!
Хабарлама жіберілді. / Сообщение отправлено.

Сіз үшін аптасына 5 күн жұмыс істейміз.
Жұмыс уақыты 09:00 - 18:00

Мы работаем для Вас 5 дней в неделю.
Время работы 09:00 - 18:00

Email: info@stud.kz

Phone: 777 614 50 20
Жабу / Закрыть

Көмек / Помощь