Web осень 2012 лекция 8

  • View
    94

  • Download
    1

Embed Size (px)

Transcript

  • HTML CSS

  • HTML1986 SGML. 1989 1991 HTML . . . HTML 1.0 1994 W3C1995 HTML 2.0 1997 HTML 3.2, HTML 4.0 (+CSS)1999 HTML 4.01 HTML 5

  • HTML

  • HTML

    ...

  • HTML : == : color=red : disabled : :

  • XHTML : color=red : disabled=disabled : : id name DOCTYPE

  • DOCTYPE DTD. .HTML 4.01

  • DOCTYPEXHTML 1.0

    XHTML 1.1

    HTML 5

  • html head , body

  • - . - user-agent.

    - -

  • - - - - - , - -

  • : h3 p

  • - - - - - - -

  • HTML, , -

    one two

    HTML CSS

    , , -

  • HTML

    2011-01-0110050033100500

  • HTML

  • :

    URL.http(s), ftp mailto javascript JS , URL: 1

  • - , checkbox, radiobutton, , , , ., - , ( multiple ) - .

  • HTML Frames: DOCTYPE, URL title, .

  • CSS

  • CSS ? XML HTML + + , , - .

    : .

  • CSS/* some real css */.mid-play { padding:13px 0px 0px 13px;}

    p.inner-play a {color:#3c3c3c; text-decoration: underline; }

    .big-top {background-image:url(/img/pc/220_130_top.gif);}

    /* */c { _1: 1; }

  • ?width, height margin, padding display, visibility top, left, right, bottom background font text-align .: http://htmlbook.ru/css

  • * { margin: 0px; padding: 0px; border: 0px; } p { margin-top: 10px; } ( ).btn { border: solid 1px gray; }id ( )#userpic { padding: 10px }

  • ()div.article a { text-decoration: underline } ( = 1 )a > img { border: 2px } h2.sic + p { margin-left: 30px }h1, h2, h3, h4, h5 { color: red }

  • a:visited a:link div:hover input:focus li:first-child * One* Two * Three

  • :.nickname:first-letter {color: white}p:first-line {color: red} :.userpic:before { content: ''; display: block; width: 100px; height: 5px; background-color: gray;}

  • body { color: darkgray; font-family: Arial; } p { font-size: 110% }

    ,

    !

  • ? html

  • 1) id 100 10 1 ul.info ol + li 13 li.red.level 21 2) : = 10003) : 4) .inone { display: none !important }

  • display: none , (vs visibility: hidden)display: block , , width, height. div, h1-h6, p .display: inline , , width, height. span, img, a .display: table-cell

  • DIV vs SPANONE2ONE2

    .t { width: 200px; height: 100px; background: red; color: white; margin: 5px; padding: 4px; }

  • float & clearfloat clear

  • float & clear

    ... ...

    .outer { float: left; width:390px }.sqr { width: 100px; height: 100px }.fl { float: left; }.fr { float: right; }.clr { clear: both; }

  • position: static position: relative ()position: absolute relative, absolute fixed , ()position: fixed top/right/bottom/left ,

  • Box modelmargin: 10pxmarign: 10px 5px;margin: 1px 2px 3px 4px;margin-left: 10px;

  • , smal@corp.mail.ru

    *****************************************