ßê çàêð³ïèòè ôîí
Ó âåá-áóä³âíèöòâ³ çàñòîñîâóþòü ð³çí³ ìîäåë³ ïîâåä³íêè ôîíó ïðè ïðîêðó÷óâàíí³ ñòîð³íîê. Äåÿê³ ç íèõ ìîæíà ðåàë³çóâàòè çàñîáàìè ò³ëüêè ìîâè HTML, äëÿ ³íøèõ éîãî ìîæëèâîñòåé íåäîñòàòíüî. Ùîá çðîáèòè ôîíîâå çîáðàæåííÿ âåá-ñòîð³íêè íåðóõîìèì ñë³ä âèêîðèñòîâóâàòè çàñîáè ìîâè îïèñó ñòèë³â CSS (Cascading Style Sheets - «êàñêàäí³ òàáëèö³ ñòèë³â»).
1
Âèêîðèñòîâóéòå âëàñòèâ³ñòü background-attachment ùîá çàäàòè õàðàêòåð ïîâåä³íêè ôîíó ïðè ïðîêðó÷óâàíí³ ñòîð³íêè. Öå âëàñòèâ³ñòü ïðèñóòíÿ ó âñ³õ âåðñ³ÿõ ìîâè CSS, ïî÷èíàþ÷è ç ïåðøî¿, ³ òàêèé ñïîñ³á ô³êñàö³¿ ï³äòðèìóºòüñÿ âñ³ìà áðàóçåðàìè íà â³äì³íó â³ä ³íøèõ âàð³àíò³â. Äëÿ background-attachment ïåðåäáà÷åí³ âñüîãî òðè çíà÷åííÿ scroll, fixed ³ inherit. Çíà÷åííÿ scroll âèêîðèñòîâóºòüñÿ çà óìîâ÷àííÿì ³ îçíà÷àº, ùî ôîíîâå çîáðàæåííÿ áóäå «ïðèêð³ïëåíî» äî âì³ñòó ³ ïðè ïðîêðó÷óâàíí³ âì³ñòó áóäå ïðîêðó÷óâàòèñÿ ðàçîì ç íèì. Çíà÷åííÿ fixed âêàçóº áðàóçåðó, ùî ôîíîâå çîáðàæåííÿ ïîâèííî áóòè íåçàëåæíî â³ä âì³ñòó ³ ïðè ïðîêðó÷óâàíí³ çàëèøàòèñÿ íåðóõîìèì. À çíà÷åííÿ inherit îçíà÷àº, ùî ôîí öüîãî åëåìåíòà ïîâèíåí âåñòè ñåáå òàê ñàìî, ÿê ³ ôîí áàòüê³âñüêîãî åëåìåíòà. Âàì ïîòð³áíî âèêîðèñòîâóâàòè âëàñòèâ³ñòü background-attachment ³ç çíà÷åííÿì fixed.
2
Ñêëàä³òü êîä ç â³äïîâ³äíèìè CSS-³íñòðóêö³ÿìè äëÿ âñòàâêè â HTML-êîä ñòîð³íêè. Ïåðøèé ðÿäîê ïîâèííà ïîâ³äîìëÿòè áðàóçåðó, ùî äàë³ éäå áëîê îïèñó ñòèë³â íà ìîâ³ CSS: ̳æ öèìè äâîìà òåãàìè áóäóòü ïîì³ùåí³ îïèñè ñòèëþ. Ó íèõ òðåáà âêàçàòè äî ÿêîãî ñàìå åëåìåíòó ñòîð³íêè áóäóòü ñòàâèòèñÿ ³íñòðóêö³¿. Ôîí â³äíîñèòüñÿ äî ò³ëà ñòîð³íêè (BODY): BODY {} Òóò BODY - öå ñåëåêòîð, à âñåðåäèíó ô³ãóðíèõ äóæîê ïîòð³áíî ïîì³ñòèòè âëàñòèâîñò³ ³ ¿õ çíà÷åííÿ, ïåðåðàõîâàí³ ÷åðåç êðàïêó ç êîìîþ: background-image: url (img / fon.jpg);
background-attachment: fixed- ïåðøîìó ðÿäêó âëàñòèâ³ñòü background-image âêàçóº, ùî â ÿêîñò³ ôîíîâîãî çîáðàæåííÿ òðåáà âèêîðèñòîâóâàòè ôàéë fon.jpg ç ïàïêè img. Ó äðóãîìó ðÿäêó ì³ñòèòüñÿ íàëàøòóâàííÿ íå ïðîêðó÷óâàòè ôîí ðàçîì ç âì³ñòîì ñòîð³íêè. Ñèíòàêñèñ ìîâè CSS äîçâîëÿº çàì³íèòè äâà ðÿäêè íà îäíó: background: url (fon.jpg) fixed-
background-attachment: fixed- ïåðøîìó ðÿäêó âëàñòèâ³ñòü background-image âêàçóº, ùî â ÿêîñò³ ôîíîâîãî çîáðàæåííÿ òðåáà âèêîðèñòîâóâàòè ôàéë fon.jpg ç ïàïêè img. Ó äðóãîìó ðÿäêó ì³ñòèòüñÿ íàëàøòóâàííÿ íå ïðîêðó÷óâàòè ôîí ðàçîì ç âì³ñòîì ñòîð³íêè. Ñèíòàêñèñ ìîâè CSS äîçâîëÿº çàì³íèòè äâà ðÿäêè íà îäíó: background: url (fon.jpg) fixed-
3
Çàïèø³òü âåñü áëîê îïèñó ñòèë³â â çáîð³: Âñòàâèòè éîãî ñë³ä â çàãîëîâíó ÷àñòèíó HTML-êîäó ñòîð³íêè, òîáòî ì³æ òåãàìè ³ . Íå çàáóäüòå çàì³íèòè àäðåñó ³ ³ì`ÿ ôîíîâî¿ êàðòèíêè img / fon.jpg.
Ñòàòò³ çà òåìîþ "ßê çàêð³ïèòè ôîí"
Îö³í³òü, áóäü ëàñêà ñòàòòþ