互联网样式标准—css语言.ppt

LOGO 互联网样式标准--CSS语言 by josh.y 2010年09月07日 黄金湾 CSS语言的起源 HTML 标签原本被设计为用于定义文档内容。文档布局由浏览器来完成，而不使用任何的格式化标签。 由于当时两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。 　　 所有的主流浏览器均支持层叠样式表。 　　 CSS语言的演变 1996年12月万维网联盟（W3C）发布了CSS1.0标准，2008年4月做了最后修订 1998年5月万维网联盟（W3C）发布了CSS2.0标准，并在2008年4月做了修订 2009年9月万维网联盟（W3C）发布了CSS2.1标准 2009年12月万维网联盟（W3C）发布了CSS3.0标准 CSS语法 CSS语法结构仅仅由三部分组成：选择符（selector）、属性（property）和值（value ）。 使用方法：selector ( Property : value ; ) 选择符（selector）指着组样式编码所要针对的对象 属性（Property）是CSS样式控制的核心，如颜色、大小、定位、浮动方式等。 值（value）是指属性的值 CSS选择符的分类 类型选择符 body {}、 div {}、 span {} 群组选择符 h1,h2,h3,p,span P{ font-size : 12px ; font-family : arial ;} 包含选择符 h1 span { font-weight : bold ;} id选择符 div id=content/div #content { font-size : 14px ; line-height : 130% ; } class选择符 div class=p1/div h1 class=p1/h1 h3 class=p1/h3 .p1 {? Margin : 10px ; Background-color : blue ; } 标签指定式选择符 标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间，也是一种经常能够使用到的选择符。 针对所有id为content的h1标签形式 ，如： h1#content {} 针对所有class为p1的h1标签，如： h1.p1{} 组合选择符 CSS在选择符的使用上可以说是非常自由，根据页面需求，我们可以灵活使用各种选择符进行设计。 id为content的h1标签下的h2标签，如： h1#content? h2{} h1标签下的所有class为p1的标签和id为content的标签下的所有h1标签，如： h1? .p1 , #content?? h1{} 伪类及伪对象 伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展型类和对象，名称不能被用户自定义，使用时只能够按标准格式进行应用。使用形式如下： ??????? a : hover { background-color : #333333 ; } CSS内置了几个标准的伪类： ??????? : link???????????????? a链接标签的未被访问前的样式； ??????? : hover????????????? 对象在鼠标移上时的样式； ??????? : active????????????? 对象被用户点击及被点击释放之间的样式； ??????? : visited??????????? ?a链接对象被访问后的样式； ??????? : focus?????????????? 对象成为输入焦点时的样式； ??????? : first-child??????? 对象的第一个子对象的样式； ??????? : first???????????????? 对于页面的第一页使用的样式； CSS内置了几个标准伪对象： ??????? : after??????????????? 设置某一个对象之后的内容； ??????? : first-letter???????对象内的第一个字符的样式设置； ??????? : first-line????????? 对象内第一行的样式设置； ??????? : before???????????? 设置某一个对象之前的内容。 通配选择符