Ïàðàìåòðû âûäåëåíèÿ
Âûäåëåíèå â CSS3 î÷åíü ñõîæå ñ ðàìêîé, íî èìååò âàæíîå ïðåèìóùåñòâî - âûäåëåíèå íå èçìåíÿåò ðàçìåðû ýëåìåíòà html-ñòðàíèöû ê êîòîðîìó îíî ïðèìåíÿåòñÿ.
Âûäåëåíèå ïðåäñòàâëÿåò ðàìêó, êîòîðàÿ îêðóæàåò ýëåìåíò html-ñòðàíèöû. Âåá-ìàñòåð ìîæåò çàäàâàòü òîëùèíó, öâåò è ñòèëü ëèíèè âûäåëåíèÿ (ðàìêè).
- outline-width - òîëùèíà ðàìêè âûäåëåíèÿ:
- thin - òîíêàÿ ëèíèÿ;
- medium - ëèíèÿ ñðåäíåé òîëùèíû;
- thick - òîëñòàÿ ëèíèÿ;
- ÷èñëîâîå çíà÷åíèå.
- outline-color - öâåò ðàìêè âûäåëåíèÿ;
- outline-style - âèä ëèíèè, êîòîðûìè áóäåò íàðèñîâàíà ðàìêà âûäåëåíèÿ:
- none - ðàìêà îòñóòñòâóåò;
- hidden - ðàìêà îòñóòñòâóåò;
- dotted - ïóíêòèðíàÿ ëèíèÿ;
- dashed - øòðèõîâàÿ ëèíèÿ;
- solid - ñïëîøíàÿ ëèíèÿ;
- double - äâîéíàÿ ëèíèÿ;
- groove - "âäàâëåííàÿ" òðåõìåðíàÿ ëèíèÿ;
- ridge - "âûïóêëàÿ" òðåõìåðíàÿ ëèíèÿ;
- inset - òðåõìåðíàÿ "âûïóêëîñòü";
- outset - òðåõìåðíîå "óãëóáëåíèå".
ÏÐÈÌÅÐ:
H1 {
outline-width: 5px;
outline-color: red;
outline-style: double
}
|
Çàäàâàòü ñðàçó âñå ïàðàìåòðû ðàìêè âûäåëåíèÿ ìîæíî ïðè ïîìîùè àòðèáóòà ñòèëÿ outline:
outline: <width> <style> <color>
ÏÐÈÌÅÐ:
H1 {outline: 5px double red}
|
