互联网样式标准CSS语言课件.ppt

1、LOGO互联网样式标准互联网样式标准-CSS语言语言by josh.y 2010年09月07日CSS语言的起源v HTML 标签原本被设计为用于定义文档内容。文档布局由浏览器来完成，而不使用任何的格式化标签。v 由于当时两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。v 为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。v 所

2、有的主流浏览器均支持层叠样式表。CSS语言的演变v 1996年12月万维网联盟（W3C）发布了CSS1.0标准，2008年4月做了最后修订v 1998年5月万维网联盟（W3C）发布了CSS2.0标准，并在2008年4月做了修订v 2009年9月万维网联盟（W3C）发布了CSS2.1标准v 2009年12月万维网联盟（W3C）发布了CSS3.0标准CSS语法v CSS语法结构仅仅由三部分组成：选择符（selector）、属性（property）和值（value）。使用方法：selector(Property:value;)v 选择符（selector）指着组样式编码所要针对的对象v 属性（Pro

3、perty）是CSS样式控制的核心，如颜色、大小、定位、浮动方式等。v 值（值（value）是指属性的值）是指属性的值CSS选择符的分类v 类型选择符body、div、span v 群组选择符h1,h2,h3,p,span P font-size:12px;font-family:arial;v 包含选择符h1 span font-weight:bold;v id选择符#content font-size:14px;line-height:130%;v class选择符.p1 Margin:10px;Background-color:blue;v 标签指定式选择符标签指定式选择符在对标签选择的

4、精确度上介于标签选择符及id/class选择符之间，也是一种经常能够使用到的选择符。针对所有id为content的h1标签形式，如：h1#content 针对所有class为p1的h1标签，如：h1.p1v 组合选择符CSS在选择符的使用上可以说是非常自由，根据页面需求，我们可以灵活使用各种选择符进行设计。id为content的h1标签下的h2标签，如：h1#content h2h1标签下的所有class为p1的标签和id为content的标签下的所有h1标签，如：h1 .p1,#content h1v 伪类及伪对象伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展型类和

5、对象，名称不能被用户自定义，使用时只能够按标准格式进行应用。使用形式如下：a:hover background-color:#333333;CSS内置了几个标准的伪类：:link a链接标签的未被访问前的样式；:hover 对象在鼠标移上时的样式；:active 对象被用户点击及被点击释放之间的样式；:visited a链接对象被访问后的样式；:focus 对象成为输入焦点时的样式；:first-child 对象的第一个子对象的样式；:first 对于页面的第一页使用的样式；CSS内置了几个标准伪对象：:after 设置某一个对象之后的内容；:first-letter 对象内的第一个字符的样式

6、设置；:first-line 对象内第一行的样式设置；:before 设置某一个对象之前的内容。v 通配选择符CSS的通配符使用*作为关键字，使用方法如下：*color:blue;CSS数值单位数值单位 CSS应用方式应用方式v 1、行间样式表行间样式表是将CSS样式编码编写在XHTML标签之中，如：.文本示例.v 2、内部样式表内部样式表可以将样式统一放置在一个固定的位置，如：.样式内容.v 3、外部样式表CSS样式编码单独编写在一个独立文件之中，由网页进行调用，如：为什么要进行CSS命名v 首先首先CSS也是一种语言也是一种语言v 和其他语言一样，混乱的命名方式会让使用和维护增加很和其他语

7、言一样，混乱的命名方式会让使用和维护增加很多困难多困难通用的命名规则v 软件工程的命名法通常有下面三种软件工程的命名法通常有下面三种：v 匈牙利命名法匈牙利命名法写法:它是通过在变量名前加上相应的小写字母符号作为前缀,标识出变量的作用域,类型等!例如:pfnSmartDog,pfn类型描述,表示指向函数的指针,SmartDog对变量的描述,所以它表示指向SmartDog函数的函数指针变量v 骆驼式命名法骆驼式命名法 写法:规定每一个单词首字母应使用大写字母来标记,但名称的首字母要小写.例如:myFunction 还有一种下划线的衍生:my_Functionv 帕斯卡命名法帕斯卡命名法 写法:和

8、骆驼式命名法类似,只是第一个单子字母为大写.例如:MyFunctionCSS的命名规则v 1.要区分大小写,尽量使用小写,特殊单词首字母可以大写v 2.要注意命名合法性,字母开头,后面可以接数字,字母,下划线等等v 3.要反映出用途和相关信息,绝对不能使用上文中的XX1,XX2,XX3CSS命名的具体方法v 1.语义化语义化id=”left-side”id=”center-column”.red color:red;.f12 font-size:12px;.left float:left;v 2.结构化结构化id=”navbar”id=”sidebar”id=”sub_nav”常用的布局名称:

9、wrap/wrapper container site nav columns layout sidebar logo banner toolbar header footer homepage title current summary msg textbox tips btn arr/arrow文件类型:master.css 主布局文件 themes.css 主题文件 layout.css 布局和版式文件base.css 基本公共文件 font.css 字体文件 forms.css 表单文件print.css 打印样式文件 mend.css 补丁文件 结构化CSS实例v CSS语言脚本语言

10、脚本#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 img 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

11、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 hackv 针对不同的浏览器写不同的CSS code的过程，就叫CSS hackv 书写顺序，一般是将识别能力强的浏览器的CSS写在后面CSS3.0与CSS2.1对比v 1.选择符模块v 2.印刷出版的分页媒体模块v 3.背景和边框模块v 4.多列布局模块v 5.高级布局模块v 6.媒体查询模块CSS3属性浏览器支持情况CSS3选择器浏览器支持情况谢谢！谢谢！