Ïàðàìåòðû îòîáðàæåíèÿ
Ïàðàìåòðàìè îòîáðàæåíèÿ ýëåìåíòîâ html-ñòðàíèöû óïðàâëÿþò àòðèáóòû ñòèëÿ visibility è display.
Àòðèáóò ñòèëÿ visibility îïðåäåëÿåò áóäåò èëè íåò ýëåìåíò îòîáðàæàòüñÿ íà html-ñòðàíèöå. Äàííûé àòðèáóò ñòèëÿ ïðèìåíÿåòñÿ äëÿ ñîçäàíèÿ ñïåöèàëüíûõ ýôôåêòîâ.
Çíà÷åíèÿ visibility:
- visible - ýëåìåíò îòîáðàæàåòñÿ (ñòàíäàðòíîå çíà÷åíèå);
- hidden - ýëåìåíò íå îòîáðàæàåòñÿ, íî ïîä íåãî âûäåëÿåòñÿ ìåñòî. Ôàêòè÷åñêè áðàóçåð íà ìåñòå íåâèäèìîãî ýëåìåíòà îòîáðàæàåò "ïóñòîå ìåñòî";
- collapse - ýëìåíò íå îòîáðàæàåòñÿ, ìåñòî ïîä íåãî íå âûäåëÿåòñÿ, íî áðàóçåð "ñ÷èòàåò", ÷òî ýëåìåíò ïðèñóòñòâóåò íà html-ñòðàíèöå. Äàííîå çíà÷åíèå ìîæíî ïðèìåíÿòü òîëüêî ê ñòðîêàì, ñåêöèÿì, ñòîëáöàì è ãðóïïàì ñòîëáöîâ òàáëèöû.
Àòðèáóò ñòèëÿ display çàäàåò âèä ýëåìåíòà html-ñòðàíèöû: áëî÷íûé, âñòðîåííûé, ïóíêò ñïèñêà. Çíà÷åíèå ïî óìîë÷àíèþ äàííîãî àòðèáóòà ñòèëÿ çàâèñèò îò ýëåìåíòà html-ñòðàíèöû: äëÿ àáçàöà - ýòî çíà÷åíèå block; äëÿ èçîáðàæåíèÿ - inline.
Çíà÷åíèÿ display:
- none - ýëåìåíò íå îòîáðàæàåòñÿ íà html-ñòðàíèöå, êàê-áóäòî åãî âîâñå íåò â html-êîäå;
- inline - âñòðîåííûé ýëåìåíò;
- block - áëî÷íûé ýëåìåíò;
- inline-block - áëî÷íûé ýëåìåíò, êîòîðûé "îáòåêàåòñÿ" ñîñåäíèìè áëî÷íûìè ýëåìåíòàìè;
- list-item - ïóíêò ñïèñêà;
- run-in - âñòðàèâàþùèéñÿ ýëåìåíò. Åñëè çà òàêèì ýëåìåíòîì èäåò áëî÷íûé ýëåìåíò, îí â íåãî "âñòðàèâàåòñÿ", ñòàâèòñÿ åãî ÷àñòüþ; â ïðîòèâíîì ñëó÷àå - ýòî áëî÷íûé ýëåìåíò;
- table - òàáëèöà;
- inline-table - òàáëèöà, êîòîðàÿ îòôîðìàòèðîâàíà êàê âñòðîåííûé ýëåìåíò;
- table-caption - çàãîëîâîê òàáëèöû;
- table-column - ñòîëáåö òàáëèöû;
- table-column-group - ãðóïïà ñòîëáöîâ òàáëèöû;
- table-header-group - ñåêöèÿ çàãîëîâêà òàáëèöû;
- table-row-group - ñåêöèÿ òåëà òàáëèöû;
- table-footer-group - ñåêöèÿ çàâåðøåíèÿ òàáëèöû;
- table-row - ñòðîêà òàáëèöû;
- table-cell - ÿ÷åéêà òàáëèöû.
Íàèáîëåå ÷àñòî èñïîëüçóþòñÿ çíà÷åíèÿ none, block, inline. Îñòàëüíûå çíà÷åíèÿ àòðèáóòà ñòèëÿ display èñïîëüçóþòñÿ ðåäêî ïî ïðè÷èíå ñâîåé ñïåöèôè÷íîñòè.
ÏÐÈÌÅÐ:
.hdn {display: none} - äàííûé ñòèëü äåëàåò ýëåìåíò, ê êîòîðîìó îí áóäåò ïðèìåíåí, íåâèäèìûì;
IMG.blk {display: block} - èçîáðàæåíèå îòîáðàæàåòñÿ êàê áëî÷íûé ýëåìåíò;
LI {display: inline} - ïóíêòû ñïèñêîâ áóäóò âûâîäèòüñÿ â îäíó ñòðîêó (âñòðîåííûå ýëåìåíòû).
|
