Scribd Logo
Upload

Welcome to Scribd!

  • CSS基础教程

    Uploaded by

    李可人
    10 views20 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPS, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPS, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views20 pages

    CSS基础教程

    Uploaded by

    李可人

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPS, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 20

    CSS 基础教程

    HTML – XHTML – XML


     Html 由结构化元素组成：
     <P> 段落 <A> 超级链接 <H1-6> 标题 <U
    L>/<OL> 列表等

     Html 是一种结构化标记，描述文档的不同
    部分，但不关注如何显示
     < B > < I > < U >

    CSS基础教程 2009.06.18 woou 2


     Xhtml ：过渡型
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
    sitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
    tml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

     DOCTYPE 声明：兼容标准的网页的关键部分！如果
    去掉这部分声明，那么一些浏览器（如 ie6 ）将不
    支持 CSS 以及 Xhtml 标记。

     DTD 三种选择和三种可能的声明：
     过渡的（ Transitional ）
     严格的（ Strict ）
     框架的（ Frameset ） <frameset>

    CSS基础教程 2009.06.18 woou 3


     DOCTYPE 声明必须放在 xhtml 文档的最顶部
    。

     代替 html4 ，过渡到 XML.


    使数据、架构、表象分离

     元素和属性的名字必须都是小写。

     与 html 语法区别： <br>---<br /> <img />


    CSS基础教程 2009.06.18 woou 4
     非结构化网页不易于搜索
    搜索引擎根据标签的语义：标题、子标题、段落或标记为重要内容
    为依据 , 进行搜索。

     降低访问性（语音浏览器、手机掌上浏览器；）

     无意义标记 font span 。

     结构化更易于维护：统一缩进、链接样式等

    CSS基础教程 2009.06.18 woou 5


     Internet Explorer 6.0  网景 -Netscape
     遨游– Maxthon( 原 MyIE)  Opera 浏览器
     Internet Explorer 7.0  Internet Explorer 4/3
     腾迅– Tencent Traveler  苹果 -Apple/Safari 浏览器
     Google –chrome
     Internet Explorer 5.5  诺基亚 -Nokia
     Internet Explorer 8.0  GOSURF 浏览器
     火狐 - Firefox  索尼爱立信 -SonyEricsson
     马克思 ie - mxie
     摩托罗拉 -Motorola  其他浏览器 (Mom-and-Pop
     KKman 浏览器 屏幕阅读机， lynx emulato
    r 不支持图像 )
    CSS基础教程 2009.06.18 woou 6
     08.2

     09.5

     Chrome FF opera IE678


    CSS基础教程 2009.06.18 woou 7
     程序语言排名
    2008.09
    今年的可参考

    http://www.tiobe.com/

    CSS基础教程 2009.06.18 woou 8


    DIV
    盒模型

    div p ul ol
    dl hx table
    …
     边距

    边框距

    内容

     边界

    CSS 盒的四个区：内容、边框距、边界、边距
    总宽度 = 四区相加

    CSS基础教程 2009.06.18 woou 10


     Margin ： 10px

    Padding ： 5px

    Con_width=400px

     Border ： 1px solid


    WIDTH: 20 + 10 + 2 + 400=432

    Margin + padding + con_width + bordr=WIDTH

    盒失效： ie5
    CSS基础教程 2009.06.18 woou 11
    设计者如何对页面进行布局

    CSS基础教程 2009.06.18 woou 12


    CSS基础教程 2009.06.18 woou 13
    CSS 入门
     WEB 标准化布局语言
     控制多文件
     与 xhtml 结合 把表现从结构中分离，易于
    访问和维护
     写法：
     选择器 { 属性：值； }
     P{color:#fff;}

     简写

     多重声明，分号隔开；
    CSS基础教程 2009.06.18 woou 14
     群选择器：，  外联、嵌入、内联 :
    <link rel=“sthlesheet” href=“” ty
     继承： pe=“text/css”>
    <style>@import url(“”)</style>
    每个 CSS 定义都有继承性，如定义
    的规则，对最上级元素起作用，则 <style></style>
    对子元素也起作用
    <div style=“”>
     内容选择器 :
    避免过度的 class
     伪类、伪元素 :
    LVA H
    first-letter first-line
     ID 选择器、内容 ID
    选择器： #  块状元素 : 隐藏的回车
    div p ul li ol dl dt dd
    hx
     类别选择器 ： .
     组合  内联元素 font span a im
    g
    CSS基础教程 2009.06.18 woou 15
    CSS 合理布局
     使用有语义的标签

     减少 div

     减少 class

     多浏览器支持

    CSS基础教程 2009.06.18 woou 16


     CSS 裸奔节 ! 今天你裸奔了吗 ?
     http://naked.dustindiaz.com/
    09 年裸奔官网

    CSS基础教程 2009.06.18 woou 17


    你会 DIV+CSS 么？

    CSS基础教程 2009.06.18 woou 18


    你会 DIV+CSS 么？

    会 =

    CSS基础教程 2009.06.18 woou 19


    搞定 谢谢

    CSS基础教程 2009.06.18 woou 20

    You might also like