5 ???????????? ???????????????????

19 May. 2008

?????????? ???????????? – seleckis.lv – ?????????? ????? ??????????? ???????????? ???? ???????????. ?????????????? ?????? 5 ???????????? ??????????????????? ???? ????? html-css. ??????? ????? ??????????????. ????????????, ??????????!

???? ?????? ?????????:

  1. ????????????????? ???????????? ???????????? ???????????? ????????????????? CSS. ???????????? ????????? ?????????????? ?????????????, ?????????????? ?? ?????????????????. ??? ????? ??? ?????????? ????? ?????????? ?????????????? ?????????????????, ???? ??????????? ?? ??????????????? ????????? ???????????????? ??????????????????, ???????? ????????????????? ?? ????????????.

    ?????????? ?????????????? — ??????????????? ?????????????? ?????? ????????????????? CSS (?? ?? ???????????????? ???? ????????????????????). ??????????? ?????????????????? ????????????, ??? ?????????????? ??????? ?????????????? ????? ?????? ???? ?? ?????????????????.

  2. ???????? ???????? ?????????? ???????????????????? ????????????????? ??????????? ??????????. ???????????? ?????? ???????? ??????????.

    ?????????? — ???????? ?????????? ???????????:

    * {outline: solid 1px;}

    ?????????? — ????????????????? ??????????? ????? ??????????? ??????????-?????????????? ??????????:

    .foo {border-bottom: solid;}

    ?????????????? ???????? ?????????????????????? ????????, ??????????????? ????????????? ???????????, ?? ?????????. ????????? ????? ??????????????? ?? ??????? ??? ???????????? ??????????? ???????????????????????? ?????????. ??????????? ????? ???????????????? ???????? ????????? ??? ??????? ???????, ????? ?? ???????????? ????????????.

    ?????????? — ?????????????? ?????????????????? ?????????? ?? CSS-??????, ???????? ????????????????? ???????????????, ?????? ???????????????? ????? ????? ??????????. ??????? ????: ?????????? ??????? ??????? ??? CSS-??????. ??????????????, ?????????? ???????????????. ??????????????? ?? ???????????. ???????????? ????????????. ????????? ?????????? ???????????? ???????????????. ??????????????? — ????????????. ????????? ?????????? ????????????? ?????????????, ???? ????????????. ???? ????????? ???????????????, ????????? ??? ?????????. ?????????? ????????????????? ??????? ????? ????????? ??????????????????, ?????????? ???? ????????????? ?????????? ?? ?????????????. ??????????? ????? ???????????????????? ???????????, ???????????????? ???????????.

  3. ?????? ?? ??????????? ?????? ???????? ???????????? border-?, ???????????????? ?? ?????????? ?????????????, ??????????????, ??? border-top ?? border-bottom, ? ????:

    border: solid #AAA; border-width: 1px 0;

    ????????? border-???? ?????-???????, ????? ??? ????????????????.

    ???? ??????????? ???????? ?????????:

    border-color: red green blue gray;
  4. ?????????????? ?????????????????? ???????? ???????????? (id): page — ??????????, ??????????????? ????? ??????????? ??? ????????????; wrap — ?????????? ????? ?????????????? ?????????? ????????????; subwrap — ??????????????????????? ??????????, header — ???????; content — ??????????? ??????? ???????????? ?? ????????????????? ???????????????; aside — ?????????????? ???????????? ???????????? ?? ???????- ??????????????????????? ???????; extra — ??? ??????? ???????????? ????????????; nav — ???????? ?????? ?? ?????????????????????? ??????? (?? ???????, ?? ????????????? ????????????, ?? ???????????); footer — ??????????.

    ? ????????????????? ?? ????????? ????????????????? ?????????? ?? ?????????????? ?????? lining — ??????????????? — ?? ????????????????, ????? ????????????? ??????????, ???????????????????, ????? ??????????? ??????????????.

    ???? ???????? ????????? ???????? ????????????????? ??? ???????????? ?????????? ??????, ?????????????????? ?? ???????? ???????????. ??? ????????? ?????????????? ????????? ???? ???????????????, ????????? ???????????????????? ?????? ??????????????, ?????? ???????????? ???????????? ??? ??????????????????.

  5. ?????????????????? ?? ??????????? ??????? ?????????????? ?????????? ?????????, ? ??? id. ?? ??? ?????????? ?? ???????????, ???? ?????????? ?? ?????????? ?????????????????? ????????: id ????? ???????? :) ???????, ????????? ??????????, ???? ??? ???????????? ????? ????????????????? id ??? ???????????? (????? ???????????????). ???????????????????? ???????????? id, ?????????? ?????? ??? ????????? ????????? ??? ??????????????, ????? ?????? ????? ???????????????? ??? ??????? ?????????????????.

?? ???????????? ????????????? ??????????? ?????????. ????????????, ?????? ???????? ??????????.

???????? ??????????? ????? ??????? ?????????, ????? ???????????????? ???????? ?? ???????????? ???????????. ?????? ?????, ??? ????????????????? ???????????????? ???????????? ??? ?????? CSS- ?? HTML-??????????????? :) ????????????, ??????????? ??????????????. ???? ??????:

  • http://tanalin.com/blog/ – ??????? ???????????
  • http://www.aether.ru/ – ??????????????? ??????????????
  • http://agat.in/ – ??????????? ????????????????????
  • http://pepelsbey.net/ – ???????? ?????????
  • http://cssing.org.ua/ – ??????? ????????

27 Responses to “5 ???????????? ???????????????????”

  1. ????????? ?????????? Says:

    ????????????????? ?????????????? ???????????? ????????? ???????????????.

    ??? ??????? ??????? ????????????????? “container”, “layout”, “branding” ?????????? “header” ?? ?.??.

  2. uggallery Says:

    ?????? ?????????????????? ?? ??????????? ?????????????? ??, ?????????????? ???????????????? ?????. ???? ?????????, ? ??? ?????????? ?? ??????????????? ???????????????.

    ?????????????? ??? ????????????, ???? ?? ??????????????, ???????? ??????????? ????????? ?????????????? HTML 5, ???????????????? ?? ??????. ????? ?? header, ??????????????. ???? ?? ????? ??? ?????????? ???????????????????? ?????????? ????? ?? ?????????? ?????. ???? ???????????????? ????????? :)

  3. Nikita Says:

    ???????????? ?? ?????????! ???????? ???????????!

    ?? ????????? ?????????? ????????? aside ???????????????? sidebar.

    ???????? id, ???? ????????? ?????????? ??? ???????. ?????? ????????? ???????????????? ????????? ????? ????????????????? ?? id, ?????? ??? ??????? ????? ??? ?????????????, ??????? ????? ???? ?? class. ???? ??????????? ??? ????????. ??????????????, ????? ?????? body, ?????? ???????????????????? ?????????? css ???????????? ????? ???????? ??????????? ???? ????????? ????????????????? ????? id. ??????? id ???????? ???????? ????? javascript, ???? ????? css.

  4. MT Says:

    ???????????? ?? ????????? ?? ????????????, ?????. ??????????????. ;-)

  5. Curly Brace Says:

    ??? ????????????? ?? ?????????????? 4 ?? 5.

    1. ?? ????????? ???? ?? ???????????? ???????????????? ???????? ???????? ???????, ??????????? ???? ???????????????? ?????????????????.

    2. ???? ???????????? ???????????? ?? id ????? ???????????. ID – ????????????????? ??????????, ???????? ????????????????????????. ?????????????? ????????, ??????? ????? ???????, ???????????, ??????? ?? ??? ?????????????????? ??????????????????? ?? ????????????? id. ??????? ??? ??????????? ??????????? – ??? ?????? ?? id ????????? ??????????????, ??? ???????????????? ??????????.

  6. Gp Says:

    ????????? ???????????????? ?????????, ?????????????????????. ???? ???????????????? ???????????..????? ????? ??? ???????????????? ???? * {outline: solid 1px;} ?? .foo {border-bottom: solid;}, ??? ????????????? ;) ?????????????, ??? ?????? ???????.

  7. Zigzag Says:

    ????????????, 3 ???????? ????????? ????? ??????? ????????. ???? ???????????? 4 ?? 5 ????????????? ?? ?????????????.

  8. ??????????? ???????????? Says:

    ?????????? ????? ?? ??????? – ???????? ??????????????.

  9. ?????? Says:

    ???????? ????????????? ?? ????????. ?????????????? ???????????????????? ??????????? ??????????? ?????????????????????? ?????????? ?? ??????????? ????????????????????? ??????????????? ?????????? ?????????.

    ?? ????????????? ??????????? ????????? ????????????? ???????????? WebDeveloper Toolbar ????? Firefox, ???????????? ?????????????? ?????????????????? ????????????????? ??? ????????????. Information -> View document outline

    ???? ??????????? ????? ??????? ????????????: http://www.dserg.com/headers.png — ?????????? ????? :)

  10. Octane Says:

    ????????? “aside” ???????? ???????? “sidebar”

  11. uggallery Says:

    ????????? ???aside??? ???????? ???????? ???sidebar???

    a. ?????????? ????? ????????????? ?????????? ????? ??????????.

    b. Sidebar – ????? ??????????????? ???????????????. ????????? ??? ???????????? ????????????????. Aside – ????? ????????????????????, ???????????????? ??? ????????. ???? ???? ????????? ??? ???????????????.

    c. ?? ?????? ?? ???????? ????? ??????????? ?????????????? ????? ??? ??????????? Sidebar ?? sidebar2 ???? ???? ???? ??? ?????????????????????? ??????????, ??????????????????????? ????? ?????????? ?? ????????????? ??????????????.

  12. uggallery Says:

    ??? ??????? ??????? ????????????????? ???container???, ???layout???, ???branding??? ?????????? ???header??? ?? ?.??.

    ????? ??? ?????????? ??????????? ?????? ???????? ???? ????????????. ??????? ????? ????????? ??? ?????????????? ????????. “Layout” – ???????????? ?????? ????? ????????, ????????????????????? ????????????????????? ????? ????????????. “Branding” ?????????? “header” – ???????????????? ?????????????? ????? ??????? ???????????? ????????????? ????? ???????, ???? ??? ????????? ????? ???????????????? ?? ???????? html-????????????. Header ?????-?????? ???????????????????? ??????????????????? ?? ??????? ??????-??????. ?? ????? “container” ????-????????????? ?????????? ?? ??????? ?????????????????. ?????? ?????????? ????????? ?????????? ???? ????????????. ???? “?????????????” ?????? ????-???, ? ???? ?????, ?? ?????????? ????????? ???????????????????? ????????????? ???????????????? ??????????????? ????????-??? ??????. ??????? ?? ???????????????????????????.

    ?????????????????????????????? – ?????????, ???????? ??????????????. ????????????? ??????????? ?? ??????????????????????? ???????? ????? ???????? ???????????????????????. ?? ????????????? ???????????????????? ?????????? ?? ????????, ???????? ?? ?????????????? ??????????? ?? ?????????????, ??????????? ???????????????? ?????? ???????????????????????.

  13. MT Says:

    ????????????????????? aside, ?????????????, ??????????????? ???????????? ??, ??????????????, ?????????????? ??? ??????????????????????? ??????????? ??? ??????????????? HTML5 ?? ???????, ???????????????? ?? ??????, ??????????????? ?????????????????? ??? ???????????, ????, ?? ???????-???, ?????????? ???????????????????. ??????????? ???? ?????????? ????? ??????, ???? sidebar.

    ??, ??????????????, ?????????? ?????????? ??????? ???????? app (??? ???????? appendix), ? ?????? ??? ?????? ???????????? ?? app-1, app-2 ?? ?. ??.
    ?????????????????????? ?????? sidebar ?????????? ???????????????? ?????????????? ?? ??????? ??????????????????????? ?????? ????????? ??? ????????? ????????????????????? ?????????.

  14. uggallery Says:

    ?????? ????????? ???????????????? ????????? ????? ????????????????? ?? id

    ?? ?????????? ?????????????? ?????????????????????? ????????? ??????, ????-??????????? ?????????????, ???? ?????????? ??? ?????????? ??????????????? ???????????? ????????????????? ?????????????????????.

    ????????????????????? id – ??? ???????????? ????? ???????????????????????, ? ??????????????. ???? ????????, ????? ?????????, ????? ??????????????? ??????????????????? ???????????????????, ????????????????, ?????????????????????????? ????????????. ???? ????? ?????? ???????? ???? ??? ??????????????????.

    ?????? ?? ????-??? ??? ?????????????, ?????? ??, ????? ????????????????? ??????????????? ?????????? ?? ?????????-??? “?????????????????????” ?????????????.

    ?????????? ??????, ????????? ????????????? ?? ?????????????????? ???????????? ?????????? ???????????????????. ???? ?? ?????????????. ?? ??? ?????????? ???????????, ???? ????? ?????????????? ???????????? ??????????????? ???????? ????????? ???????????. ???? ????? ?????????? ????????????? ??? ?????????? ??????????, ????? ???? ??????????????? ???????????????? ?? ??? ?????????????? ???????? ??? ??????? ?????????????????? ???????? ????? ?????-??? ??? ???????????, ?? ?????????? ???????????????. ???????????????, ???? ???????????????????? ????????? ????? ?????, ??? ?????? ??????????.

  15. uggallery Says:

    ????????????????????? aside, ?????????????, ??????????????? ???????????? ??, ??????????????, ?????????????? ??? ??????????????????????? ??????????? ??? ??????????????? HTML5 ?? ???????, ???????????????? ?? ??????, ??????????????? ?????????????????? ??? ???????????

    ??, ????? ????, ????-?????????.

    ??, ??????????????, ?????????? ?????????? ??????? ???????? app (??? ???????? appendix), ? ?????? ??? ?????? ???????????? ?? app-1, app-2 ?? ?. ??.

    Appendix – ????? ???????????. ????? ??????????????. ??????? ???????????????????? ???????? ?? ???????????????????, ???? ??????????????????????? ?? ?? ??????????????????.

    ?????????????????????? ?????? sidebar ?????????? ???????????????? ?????????????? ?? ??????? ??????????????????????? ?????? ????????? ??? ????????? ????????????????????? ?????????.

    ????? ????? ???? ??????????, ?????????? ?? ??? ????????????, ???? side – ????? ????????? ????????? “????????????; ?????; ???????”. ?? ??????? ??????? ????? ?? ??????????? ?? ????????????. ????? ??? ?????????????????, ????? ????????? ?????? ???????????? ?????-??? ?? ??????? :) ???? ?????? ????? ????????? ???????? ??????????????????? ????????????????? ????????????????????? ???????????? ??????.

  16. uggallery Says:

    ?? ????????? ???? ?? ???????????? ???????????????? ???????? ???????? ???????, ??????????? ???? ???????????????? ?????????????????.

    ?????? ??? ???????????????? ?? ???????? ??????????????, ?????? ????? ????? ????????????? ??? ?????????? ??????????, ????????? ?????????????? ???????? ???????????? ????? ?????????? ????????? ???????????????.

    ????????? ??? ???????? ????????, ?????? ????? ???? ???????????????????? ?? ??????????? ????????????????, ? ??????? ??????????????? ????????????? ??????? ?? ?????, ???? ????? ??????????????. ???????? ??????? ?????????? ?????? ?????? ???????????? ????????????.

  17. Gan Says:

    ??? ?? ??????????? ???? ???????? nav ????????????????? navbar.

    ??????? ??????????? ????????? ???????????? ???????? ?? ??????????? ????????????? ?????????? ??????????? ??? ?????????? ?? ??????????? ????????????? ?????????? margin ?????? ?????????????! ????? ????? ??????????????????? ??????? ?? ????????????? ????????????? ????????????? ??????????? paddin( ??? ??????? http://www.apple.com) ?????? ??????????? ????? ??????? ?? ?????????? ??????? ???????????? inner!

    ?? ????? ?? ??????????? ?????? ?? ??? ????????? ??? ???????? ???????????? ???????????????????? ??????? ????? ??????????

  18. Gan Says:

    ??? ???????? ??????????? ????? .foo {border-bottom: solid;}
    ???? ??????????????? ???????? ??????? ??????????????????? ????????? ??????????? ????????????????? ??????????????????? ?????? ????? ?????

  19. uggallery Says:

    inner – ??????? ??? ??????? ????????????. ??????, ???? ??? ???????? ???????????? ?????????. ???? ?????????????????????, ? ????????? ????? ??????? ???????????? ????????????????? ??????????????????????. ??????????? ?? ??????????????????? ??? lining.

    paddin – ????????? ?????? :) ????? ?????? ??? ????????? ?????? ??? ????? center ?? font. ?? ??????????????, ?????????????? ?? ?????????? ???????????? ???? ????????????? ??? ???. ???????????? ?? ?????????. (?????????? – ??? ????????? ???????????? ?? ????- ??????????. ? ??????????????? ?????? ???????? ???????????????.)

    ?????????, ???? ??????? ??????? ????????????????? ???????? min-width, max-width. ???? ??? ?? ???????? ???? ?? padding – ??? ?????? ??????, ????-?????????. ???? ??????????????? min-width, max-width ?????? ???????????????????? ???????? ?? ???????????? page ?? wrap.

    ???????????? ?? ?????????????????? ???????????? :) ???????????? ??????? ????? ????????????? ???????? ????????????!

  20. uggallery Says:

    ??? ???????? ??????????? ????? .foo {border-bottom: solid;}
    ???? ??????????????? ???????? ??????? ??????????????????? ????????? ??????????? ????????????????? ??????????????????? ?????? ????? ?????

    ???????? ????????????? ??? ?????????? ????? ?????????. ??? ?????????? ????? ?????????????????????? ??????????. ????????? ???????????????? ??????????-??????????? ?? ?????? ?????????? ?? ?????????????? ??????????????? (??? ????????????? ?????? ?? ??????????????).

    ??????????????????? ???????? ????????? ????????????? ?? html-??????? ??? ????????????????. ???????? ????????????? ???????????? ?? CSS. ??????????????: * {…} ????? DIV {…} ?? ???? ??????. ?????? ???????? ??? ?? ??????????.

    ? ??????????????? ???????????? ?????? ??????????? ????? ??????? ?? ???????????, ???? ?????? ???????? ??????????-??????????????? ?? ??????????.

  21. Gan Says:

    ??, ???????? ?? ?????????????? ?????? ?? ??????????? web developer!

  22. ???????????? Says:

    ?????????????????? ?? ??????????? ??????? ?????????????? ?????????? ?????????, ? ??? id

    ???????????? ??? ?????? ??????????. id ?????? ???????????????????? ????? ??????????????, ??????????? ???????? ???????? ?? ?????????? ???????????????? ??? ???????????? (??????? ???????, ??????? ??????? ????????????/?????????? ????????????, ???????? ?????? ????????????, ???????? ??????????) ???-????????? ?? ??????????????? ???????? ???????????????????? id ???????? ????????? ????? ???????????????, ???? ?????? ?????? ???????? ??? ???????????? ????????? ??? ????????????????.

    ???-????????? ???? id ?????????? js ???????????? getElementById, ?????? ??? ???????????? ??????????????????? ???????????????????? ???????????????? ???????????????.?????? ????????? ???????? ?????????? ?????????? ??????? ???????????? ??????????.

  23. uggallery Says:

    id ?????? ???????????????????? ????? ??????????????, ??????????? ???????? ???????? ?? ?????????? ???????????????? ??? ????????????

    ????, ???? ??????? ?? ?????????? ???????? ?? ????????????????????? ??????? ??? ???????? ?????????????????????. ?? ????? ???, ???? ????????????? ???????? ?????????? ??? ??????????? ????????? ?? ???? ?? ?????????? – ????????????????????? ?????????. ?? ?????????? ?????????????????.

    ???? ???????????????????? ???????????????? ??????????????? – ??????????? ??????. ???? ?????? ?????? ID ?? ??????????. ????? ??? ???????????? ????????????. ??????????????????? ??????? ID ?????? ????????????????? ?????????? ?? ??????? ?????????, ?????? ?????????? ????????????????.

    ?? ?? ?????? ??????? ??? ????????? ????? ???????? ?? CSS.

  24. ????????????? Says:

    ???? ??????????????? ????????????????????????????? ???????????? ???????????:
    htt_://browsershots.org/
    ??????????????? ????????????? ???? ???????????? ??????????? ??????????.?????????,??????????????? ?????????? ???????????? ??? ?? ??????????? ?? ???????? ????????????

  25. Eugene K. Says:

    ?? IE6 ??? ?????????? * {outline: solid 1px;} – ????? ???????????

  26. uggallery Says:

    ????? ???????????

    ???????????????????? border-bottom c ????????????? 2-4 ????????????.

  27. skfo Says:

    ???????????? ?? ?????????