《互联网样式标准CSS语言课件.ppt》由会员分享，可在线阅读，更多相关《互联网样式标准CSS语言课件.ppt（20页珍藏版）》请在三一办公上搜索。
1、互联网样式标准-CSS语言,by josh.y 2010年09月07日,黄金湾,CSS语言的起源,HTML 标签原本被设计为用于定义文档内容。文档布局由浏览器来完成，而不使用任何的格式化标签。由于当时两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式
2、表。,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样式控制的核心，如颜色、大小
3、、定位、浮动方式等。值（value）是指属性的值,CSS选择符的分类,类型选择符body、div、span 群组选择符h1,h2,h3,p,span P font-size:12px;font-family:arial;包含选择符h1 span font-weight:bold;id选择符#content font-size:14px;line-height:130%;class选择符.p1 Margin:10px;Background-color:blue;,标签指定式选择符标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间，也是一种经常能够使用到的选择符。针对
4、所有id为content的h1标签形式，如：h1#content 针对所有class为p1的h1标签，如：h1.p1组合选择符CSS在选择符的使用上可以说是非常自由，根据页面需求，我们可以灵活使用各种选择符进行设计。id为content的h1标签下的h2标签，如：h1#content h2h1标签下的所有class为p1的标签和id为content的标签下的所有h1标签，如：h1.p1,#content h1,伪类及伪对象伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展型类和对象，名称不能被用户自定义，使用时只能够按标准格式进行应用。使用形式如下：a:hover bac
5、kground-color:#333333;CSS内置了几个标准的伪类：:link a链接标签的未被访问前的样式；:hover 对象在鼠标移上时的样式；:active 对象被用户点击及被点击释放之间的样式；:visited a链接对象被访问后的样式；:focus 对象成为输入焦点时的样式；:first-child 对象的第一个子对象的样式；:first 对于页面的第一页使用的样式；CSS内置了几个标准伪对象：:after 设置某一个对象之后的内容；:first-letter对象内的第一个字符的样式设置；:first-line 对象内第一行的样式设置；:before 设置某一个对象之前的内容。,
6、通配选择符CSS的通配符使用*作为关键字，使用方法如下：*color:blue;,CSS数值单位,CSS应用方式,1、行间样式表行间样式表是将CSS样式编码编写在XHTML标签之中，如：.文本示例.2、内部样式表内部样式表可以将样式统一放置在一个固定的位置，如：.样式内容.3、外部样式表CSS样式编码单独编写在一个独立文件之中，由网页进行调用，如：,为什么要进行CSS命名,首先CSS也是一种语言和其他语言一样，混乱的命名方式会让使用和维护增加很多困难,通用的命名规则,软件工程的命名法通常有下面三种：匈牙利命名法写法:它是通过在变量名前加上相应的小写字母符号作为前缀,标识出变量的作用域,类型等!
7、例如:pfnSmartDog,pfn类型描述,表示指向函数的指针,SmartDog对变量的描述,所以它表示指向SmartDog函数的函数指针变量骆驼式命名法 写法:规定每一个单词首字母应使用大写字母来标记,但名称的首字母要小写.例如:myFunction 还有一种下划线的衍生:my_Function帕斯卡命名法 写法:和骆驼式命名法类似,只是第一个单子字母为大写.例如:MyFunction,CSS的命名规则,1.要区分大小写,尽量使用小写,特殊单词首字母可以大写2.要注意命名合法性,字母开头,后面可以接数字,字母,下划线等等3.要反映出用途和相关信息,绝对不能使用上文中的XX1,XX2,XX3
8、,CSS命名的具体方法,1.语义化id=”left-side”id=”center-column”.red color:red;.f12 font-size:12px;.left float:left;2.结构化id=”navbar”id=”sidebar”id=”sub_nav”常用的布局名称:wrap/wrapper container site navcolumns layoutsidebarlogobanner toolbar headerfooterhomepagetitlecurrent summary msgtextboxtips btn arr/arrow文件类型:master
9、.css 主布局文件 themes.css 主题文件 layout.css 布局和版式文件base.css 基本公共文件 font.css 字体文件 forms.css 表单文件print.css 打印样式文件 mend.css 补丁文件,结构化CSS实例,CSS语言脚本#header background:#474747;height:147px;width:100%;#top padding:18px 0 0 0;#top img margin:0;padding:0;border:0;#headerpanel width:940px;height:95px;#headerpanel im
10、g margin:0 0 0 40px;padding:0;#menu padding-top:37px;#menu ul text-align:center;list-style:none;margin:0;padding:0 0 0 124px;#menu ul li display:inline;margin:0;padding:0;#menu ul li a display:block;float:left;width:98px;#menu ul li.menulast width:97px;#menu ul#active a background:url(././images/menubgactive.gif)no-repeat;,CSS hack,针对不同的浏览器写不同的CSS code的过程，就叫CSS hack书写顺序，一般是将识别能力强的浏览器的CSS写在后面,CSS3.0与CSS2.1对比,1.选择符模块2.印刷出版的分页媒体模块3.背景和边框模块4.多列布局模块5.高级布局模块6.媒体查询模块,CSS3属性浏览器支持情况,CSS3选择器浏览器支持情况,谢谢！,
