.


:

:



,



( , )

:

































 

 

 

 
FAQ

: . : .

10

: . . .

: CSS HTML- , , ..

: HTML- c CSS -.

:

  1. CSS ?
  2. CSS ?
  3. HTML CSS?
  4. .? .
  5. ? , ?
  6. ?
  7. ?

:

HTML- , 55% ..

:

 

, , .

list-style-type . :
  • disc - ( ).
  • circle - .
  • square - .
  • decimal - , , 1,
  • decimal-leading-zero - , , 01, 02, 03 ..
  • lower-roman - , .
  • upper-roman - ,
  • hebrew - , .
  • georgian - , .
  • armenian - , .
  • jk-ideographic - , ,
  • lower-latin, lower-alpha - ASCII-.
  • upper-latin, upper-alpha - ASCII-.
  • lower-greek - .
  • hiragana - .
  • hiragdna-iroha - ,
  • katakana-iroha - .
  • none - .
  • inherit - .
ol {list-style: upper-alpha}
list-style-image , . :
  • none - , , ( ).
  • URL - URL , .
  • inherit - .
ul {list-style-image: url("bullet3.gif")}
marker-offset :
  • auto - ( ).
  • - .
  • inherit - .
h1 {marker-offset: 12px}
list-style-position . :
  • inside - .
  • outside - ( ).
  • inherit - .
ul {list-style-position: inside}
list-style . - , . :
  • list-style-type - .
  • list-style-position - .
  • list-style-image - .
  • inherit - .
ul {list-style: circle inside url("bullet4,gif")}
counter-increment . :
  • none - ( ).
  • - - , . .
  • inherit - .
h1 {counter-increment: MyCounter 2}
counter-reset . :
  • none - ( ).
  • - , . .
  • inherit - .
h1 {counter-reset: MyCounter 2}

display . - . :
  • inline - ( ).
  • block - .
  • inline-block - , - . ( <IMG>). , .
  • list-item - .
  • marker - , . -: before () safter (),
  • none - . .
  • run-in - , .
  • compact - , ,
  • table (), inline-table ( ), table-row-group ( ), table-column ( ), table-column-group ( ), table-header-group ( ), table-footer-group ( ), table-row ( ), table-cell ( ), table-caption ( ) - , .
  • inherit - .
p {display: block}
width . :
  • auto - ( ).
  • - , .
  • - ,
  • inherit - .
p {width: 260px}
min-width .
max-width . :
  • - , .
  • - .
  • none - ; max-width.
  • inherit - .
p {min-width: 100p; max-width: 400px}
height . :
  • auto - ( ).
  • - , .
  • - .
  • inherit - .
p {height: 260px}
min-height .
max-height . :
  • - , .
  • - .
  • inherit - .
p{min-height: 100p; max-height: 400px}
line-height . - . :
  • normal - , ( ).
  • - , .
  • - .
  • - , .
  • inherit - .
p {line-height: 2.2}
vertical-align . :
  • baseline - ( ).
  • middle -
  • top - .
  • bottom - .
  • sub - , .
  • super - , .
  • text-top - .
  • text-bottom - .
  • - , , . , .
  • - , , . , .
  • inherit - .
p{vertical-align: super}
float . :
  • none - ( ).
  • left - , .
  • right - , .
  • inherit - .
img {float: right}
clear , . :
  • none - ( ).
  • left - .
  • right - .
  • both - .
  • inherit - .
img {clear: both}
overflow , , . :
  • visible - , ( ).
  • hidden - .
  • scroll - , .
  • auto - ,
  • inherit - .
img {overflow: visible}
visibility , . :
  • visible - .
  • hidden - , .
  • collapse- , , hidden.
  • inherit - ( ) .
img {visibility: visible}
clip . clip . :
  • auto - , ( ).
  • rect (top, right, bottom, left)- , , .
  • inherit - .
img {clip: rect(5px, 4, 2, 4)}
direction . :
  • Itr - ( ).
  • rtl - .
  • inherit - .
body {direction: Itr; unicode-bidi: embed}
unicode-bidi . :
  • normal - ( ).
  • embed - direction.
  • bidi-override - direction.
  • inherit - .
body {unicode-bidi: embed}
cursor , . :
  • auto - ( ).
  • crosshair - " ".
  • default - , , .
  • pointer - " ".
  • move - "".
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s- resize, w-resize - .
  • text - .
  • wait - " ".
  • help - " ".
  • URL - URL .
  • inherit - .
cursor CSS3
  • c - , - . .
  • alias - -. , . Firefox.
  • context menu - , . .
  • cell - , . . Firefox
  • grab - , . .
  • grabbing - , . .
  • spinning - , . wait, . , .
  • count up - , . .
  • count down - , . , .
  • count up-down - , , .
img {cursor: pointer}
zoom . IE. :
  • , 1.0 .
  • , 100% .
img {zoom: 2.0} /* */ div {zoom: 300%} /* */

. : BODY, TEXTAREA, IFRAME , ( SELECT).

scrollbar-3dlight-color . :
  • .
  • inherit - .
body {scrollbar-3dlight-color:green;}
scrollbar-arrow-color . :
  • .
  • inherit - .
body {scrollbar-arrow-color: red;}
scrollbar-base-color : , , , scrollbar-face-color. :
  • .
  • inherit - .
body {scrollbar-base-color: green;}
scrollbar-darkshadow-color . :
  • .
  • inherit - .
body {scrollbar-darkshadow-color: red;}
scrollbar-face-color . , SCROLLBAR-TRACK-COLOR, . :
  • .
  • inherit - .
body {scrollbar-face-color: green;}
scrollbar-highlight-color , . , . , , - . :
  • .
  • inherit - .
body {scrollbar-highlight-color: green;}
scrollbar-shadow-color scrollbar-darkshadow-color. :
  • .
  • inherit - .
body {scrollbar-shadow-color: green;}
scrollbar-track-color . :
  • .
  • inherit - .
body {scrollbar-track-color: aqua;}

HTML, . WEB-. : BODY, DIV, MARQUEE, TD, IMG, SPAN, TR ..

filter alpha alpha filter: alpha(opacity, finishopacity, style, startX, startY, finishX, finishY) :
  • opacity - .
  • finishopacity - ;
  • style - (0- ,1-, 2-, 3-).
  • startX - .
  • startY - .
  • finishX - .
  • finishY- .
div{ filter: alpha(opacity=10, finishopacity=90, style=0,startX=10, startY=10, finishX=100, finishY=100)}
filter blur blur . filter: blur(Add, direction, strength) :
  • add - (0 - , 1 - ).
  • direction - (0 - 45 ).
  • strength - .
img{ filter: blur(Add=1, Direction=1, Strength=15)}
filter chroma chroma . filter: chroma(color) :
  • color - ,
img{ filter: chroma(color=#6c75d2)}
filter dropshadow dropshadow . filter: dropshadow(color, offx, offy, positive) :
  • color - .
  • offx - X.
  • offy - Y.
  • positive - (0 1).
div{filter: dropshadow(color=silver, offx=3, offy=3,positive=0) }
filter flipH fliph . css filter css img{ filter: fliph }
filter flipV flipv . img{ filter: flipv
filter glow glow , "" . filter: glow(strength, color) :
  • stregth - 0-100.
  • color - .
div{ filter: glow(strength=5, color=red)}
filter gradient gradient . filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr) :
  • gradientType (0 - ; 1 - );
  • startColorStr ;
  • endColorStr .
div{ width:300px; height:300px; filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#ff0000, endColorStr=#0000ff); }
filter gray gray . img{ filter: gray()}
filter invert invert , . img{ filter: invert() }
filter mask mask , . filter: mask(Color) :
  • Color - , .
img{ filter: mask(color=red) }
filter shadow shadow . filter: shadow(color, direction) :
  • color - .
  • direction - .
div{ filter: shadow(color=green, direction=45) }
filter wave wave "" . filter: wave(add, freq, lightStrength, phase, strength) :
  • add - , (0 1). 0
  • freq -
  • lightStrength -
  • phase - . - 0, 0 100
  • strength -
div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}
filter xray xray - , img{ filter:xray()}

CSS2. ,

caption-side . :
  • top - ( ).
  • right - .
  • bottom - .
  • left - .
  • inherit - .
table {caption-side: top}
table-layout . :
  • auto - ( ).
  • fixed - .
  • inherit - .
table {table-layout: fixed}
border-collapse . :
  • collapse - ( ).
  • separate - .
  • inherit - .
table {border-collapse: separate}
border-spacing . , , . :
  • , , .
  • , , .
  • inherit - .
table {border-spacing: 4px}
empty-cells , . :
  • show - ( ).
  • hide - .
  • inherit - .
table {empty-cells: show}
speak-header , (screen reader) . :
  • once - ( ).
  • always - .
  • inherit - .
table {speak-header: once}
column-span (span) . :
  • - . 1.
  • inherit - .
td {column-span: 3}
row-span (span) . :
  • - . 1.
  • inherit - .
td {row-span: 3}

:


<== | ==>
. , | .
:

: 2016-03-28; !; : 550 |

:

:

- - , .
==> ...

1498 - | 1492 -


© 2015-2024 lektsii.org - -

: 0.022 .