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

互联网样式标准--CSS语言byjosh.y2010年09月07日黄金湾互联网样式标准--CSS语言byjosh.y2010年0CSS语言的起源HTML标签原本被设计为用于定义文档内容。文档布局由浏览器来完成，而不使用任何的格式化标签。

由于当时两种主要的浏览器（Netscape和InternetExplorer）不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

CSS语言的起源HTML标签原本被设计为用于定义文档内容。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语言的演变1996年12月万维网联盟（W3C）发布了CCSS语法CSS语法结构仅仅由三部分组成：选择符（selector）、属性（property）和值（value）。

使用方法：selector(Property:value;)选择符（selector）指着组样式编码所要针对的对象属性（Property）是CSS样式控制的核心，如颜色、大小、定位、浮动方式等。值（value）是指属性的值CSS语法CSS语法结构仅仅由三部分组成：选择符（selecCSS选择符的分类类型选择符 body{}、div{}、span{}群组选择符 h1,h2,h3,p,spanP{font-size:12px;font-family:arial;}包含选择符 h1span{font-weight:bold;}id选择符 <divid="content"></div> #content{font-size:14px;line-height:130%;}class选择符 <divclass="p1"></div> <h1class="p1"></h1> <h3class="p1"></h3> .p1{

Margin:10px;Background-color:blue;}CSS选择符的分类类型选择符标签指定式选择符

标签指定式选择符在对标签选择的精确度上介于标签选择符及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

设置某一个对象之前的内容。伪类及伪对象通配选择符 CSS的通配符使用*作为关键字，使用方法如下：

*{color:blue;}通配选择符CSS数值单位CSS数值单位CSS应用方式1、行间样式表

行间样式表是将CSS样式编码编写在XHTML标签之中，如： <h1style="font-size:12px;color:#000FFF;font-weight:normal">

[

...文本示例...]

</h1>2、内部样式表

内部样式表可以将样式统一放置在一个固定的位置，如： <styletype="text/css"> [

...样式内容...] </style>3、外部样式表

CSS样式编码单独编写在一个独立文件之中，由网页进行调用，如： <linkrel="stylesheet"rev="stylesheet"href="style.css"type="text/css"/>CSS应用方式1、行间样式表为什么要进行CSS命名首先CSS也是一种语言

和其他语言一样，混乱的命名方式会让使用和维护增加很多困难为什么要进行CSS命名首先CSS也是一种语言

通用的命名规则软件工程的命名法通常有下面三种：

匈牙利命名法

写法:它是通过在变量名前加上相应的小写字母符号作为前缀,标识出变量的作用域,类型等!

例如:pfnSmartDog,pfn类型描述,表示指向函数的指针,SmartDog对变量的描述,所以它表示指向SmartDog函数的函数指针变量

骆驼式命名法写法:规定每一个单词首字母应使用大写字母来标记,但名称的首字母要小写.例如:myFunction还有一种下划线的衍生:my_Function

帕斯卡命名法写法:和骆驼式命名法类似,只是第一个单子字母为大写.例如:MyFunction

通用的命名规则软件工程的命名法通常有下面三种：

CSS的命名规则1.要区分大小写,尽量使用小写,特殊单词首字母可以大写2.要注意命名合法性,字母开头,后面可以接数字,字母,下划线等等3.要反映出用途和相关信息,绝对不能使用上文中的XX1,XX2,XX3CSS的命名规则1.要区分大小写,尽量使用小写,特殊单词首字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/wrappercontainersitenav

columnslayout

sidebar

logo

bannertoolbarheader

footer

homepage

title

currentsummarymsg

textbox

tipsbtnarr/arrow

文件类型:master.css主布局文件themes.css主题文件layout.css布局和版式文件base.css基本公共文件font.css字体文件forms.css表单文件print.css打印样式文件mend.css补丁文件

CSS命名的具体方法1.语义化结构化CSS实例CSS语言脚本

#header{background:#474747;height:147px;width:100%;} #top{padding:18px000;} #topimg{margin:0;padding:0;border:0;} #headerpanel{width:940px;height:95px;} #headerpanelimg{margin:00040px;padding:0;} #menu{padding-top:37px;} #menuul{text-align:center;list-style:none;margin:0;padding:000124px;} #menuulli{display:inline;margin:0;padding:0;} #menuullia{display:block;float:left;width:98px;} #menuulli.menulast{width:97px;} #menuul#activea{background:url(../../images/menubgactive.gif)no-repeat;}结构化CSS实例CSS语言脚本

CSShack针对不同的浏览器写不同的CSScode的过程，就叫CSShack书写顺序，一般是将识别能力强的浏览器的CSS写在后面CSShack针对不同的浏览器写不同的CSScode的过CSS3.0与CSS2.1对比1.选择符模块2.印刷出版的分页媒体模块3.背景和边框模块4.多列布局模块5.高级布局模块6.媒体查询模块CSS3.0与CSS2.1对比1.选择符模块CSS3属性浏览器支持情况CSS3属性浏览器支持情况CSS3选择器浏览器支持情况CSS3选择器浏览器支持情况谢谢！谢谢！互联网样式标准--CSS语言byjosh.y2010年09月07日黄金湾互联网样式标准--CSS语言byjosh.y2010年0CSS语言的起源HTML标签原本被设计为用于定义文档内容。文档布局由浏览器来完成，而不使用任何的格式化标签。

由于当时两种主要的浏览器（Netscape和InternetExplorer）不断地将新的HTML标签和属性（比如字体标签和颜色属性）添加到HTML规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。

为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了HTML标准化的使命，并在HTML4.0之外创造出样式（Style）。

所有的主流浏览器均支持层叠样式表。

CSS语言的起源HTML标签原本被设计为用于定义文档内容。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语言的演变1996年12月万维网联盟（W3C）发布了CCSS语法CSS语法结构仅仅由三部分组成：选择符（selector）、属性（property）和值（value）。

使用方法：selector(Property:value;)选择符（selector）指着组样式编码所要针对的对象属性（Property）是CSS样式控制的核心，如颜色、大小、定位、浮动方式等。值（value）是指属性的值CSS语法CSS语法结构仅仅由三部分组成：选择符（selecCSS选择符的分类类型选择符 body{}、div{}、span{}群组选择符 h1,h2,h3,p,spanP{font-size:12px;font-family:arial;}包含选择符 h1span{font-weight:bold;}id选择符 <divid="content"></div> #content{font-size:14px;line-height:130%;}class选择符 <divclass="p1"></div> <h1class="p1"></h1> <h3class="p1"></h3> .p1{

Margin:10px;Background-color:blue;}CSS选择符的分类类型选择符标签指定式选择符

标签指定式选择符在对标签选择的精确度上介于标签选择符及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

设置某一个对象之前的内容。伪类及伪对象通配选择符 CSS的通配符使用*作为关键字，使用方法如下：

*{color:blue;}通配选择符CSS数值单位CSS数值单位CSS应用方式1、行间样式表

行间样式表是将CSS样式编码编写在XHTML标签之中，如： <h1style="font-size:12px;color:#000FFF;font-weight:normal">

[

...文本示例...]

</h1>2、内部样式表

内部样式表可以将样式统一放置在一个固定的位置，如： <styletype="text/css"> [

...样式内容...] </style>3、外部样式表

CSS样式编码单独编写在一个独立文件之中，由网页进行调用，如： <linkrel="stylesheet"rev="stylesheet"href="style.css"type="text/css"/>CSS应用方式1、行间样式表为什么要进行CSS命名首先CSS也是一种语言

和其他语言一样，混乱的命名方式会让使用和维护增加很多困难为什么要进行CSS命名首先CSS也是一种语言

通用的命名规则软件工程的命名法通常有下面三种：

匈牙利命名法

写法:它是通过在变量名前加上相应的小写字母符号作为前缀,标识出变量的作用域,类型等!

例如:pfnSmartDog,pfn类型描述,表示指向函数的指针,SmartDog对变量的描述,所以它表示指向SmartDog函数的函数指针变量

骆驼式命名法写法:规定每一个单词首字母应使用大写字母来标记,但名称的首字母要小写.例如:myFunction还有一种下划线的衍生:my_Function

帕斯卡命名法写法:和骆驼式命名法类似,只是第一个单子字母为大写.例如:MyFunction

通用的命名规则软件工程的命名法通常有下面三种：

CSS的命名规则1.要区分大小写,尽量使用小写,特殊单词首字母可以大写2.要注意命名合法性,字母开头,后面可以接数字,字母,下划线等等3.要反映出用途和相关信息,绝对不能使用上文中的XX1,XX2,XX3CSS的命名规则1.要区分大小写,尽量使用小写,特殊单词首字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/wrappercontainersitenav

columnslayout

sidebar

logo

bannertoolbarheader

footer

homepage

title

currentsummarymsg

textbox

tipsbtnarr/arrow

文件类型:master.css主布局文件themes.css主题文件layout.css布局和版式文件base.css基本公共文件font.