《互联网样式标准--css语言》由会员分享，可在线阅读，更多相关《互联网样式标准--css语言（20页珍藏版）》请在金锄头文库上搜索。
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）。
2、v 所有的主流浏览器均支持层叠样式表。 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）指着组样式
3、编码所要针对的对象 v 属性（Property）是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 ; Backg
4、round-color : blue ; v 标签指定式选择符 标签指定式选择符在对标签选择的精确度上介于标签选择符及id/class选择符之间，也 是一种经常能够使用到的选择符。 针对所有id为content的h1标签形式 ，如： h1#content 针对所有class为p1的h1标签，如： h1.p1 v 组合选择符CSS在选择符的使用上可以说是非常自由，根据页面需求，我们可以灵活使用各种选 择符进行设计。 id为content的h1标签下的h2标签，如： h1#content h2 h1标签下的所有class为p1的标签和id为content的标签下的所有h1标签，如： h1 .p1
5、, #content h1v 伪类及伪对象 伪类及伪对象是一种特殊的类和对象，它由CSS自动支持，属CSS的一种扩展型类和 对象，名称不能被用户自定义，使用时只能够按标准格式进行应用。使用形式如下：a : hover background-color : #333333 ; CSS内置了几个标准的伪类：: link a链接标签的未被访问前的样式；: hover 对象在鼠标移上时的样式；: active 对象被用户点击及被点击释放之间的样式；: visited a链接对象被访问后的样式；: focus 对象成为输入焦点时的样式；: first-child 对象的第一个子对象的样式；: first
6、 对于页面的第一页使用的样式； CSS内置了几个标准伪对象：: after 设置某一个对象之后的内容；: first-letter 对象内的第一个字符的样式设置；: first-line 对象内第一行的样式设置；: before 设置某一个对象之前的内容。v 通配选择符 CSS的通配符使用 * 作为关键字，使用方法如下：* color : blue ;CSS数值单位 CSS应用方式v 1、行间样式表行间样式表是将CSS样式编码编写在XHTML标签之中，如： .文本示例. v 2、内部样式表内部样式表可以将样式统一放置在一个固定的位置，如： .样式内容. v 3、外部样式表CSS样式编码单独编写
7、在一个独立文件之中，由网页进行调用，如：为什么要进行CSS命名v 首先CSS也是一种语言v 和其他语言一样，混乱的命名方式会让使用和维护增加很 多困难通用的命名规则v 软件工程的命名法通常有下面三种：v 匈牙利命名法 写法: 它是通过在变量名前加上相应的小写字母符号作为前缀,标识出变量的作用 域,类型等! 例如: pfnSmartDog, pfn类型描述,表示指向函数的指针,SmartDog对变量的 描述,所以它表示指向SmartDog函数的函数指针变量v 骆驼式命名法写法: 规定每一个单词首字母应使用大写字母来标记,但名称的首字母要小写. 例如: myFunction 还有一种下划线的衍生:
8、 my_Functionv 帕斯卡命名法写法: 和骆驼式命名法类似,只是第一个单子字母为大写. 例如: 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=
9、”sidebar” id=”sub_nav” 常用的布局名称: 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 打印样式
10、文件 mend.css 补丁文件 结构化CSS实例v 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 img margin:0 0 0 40px;padding:0; #menu padding-top:37px; #menu ul text-align:center; list-styl
11、e: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 hackv 针对不同的浏览器写不同的CSS code的过程，就叫CSS hackv 书写顺序，一般是将识别能力强的浏览器的CSS写在后面CSS3.0与CSS2.1对比v 1.选择符模块 v 2.印刷出版的分页媒体模块 v 3.背景和边框模块 v 4.多列布局模块 v 5.高级布局模块 v 6.媒体查询模块CSS3属性浏览器支持情况CSS3选择器浏览器支持情况谢谢！
