DIVCSS网页布局第一课.ppt

Div+Css网页布局第一课CSS样式基础,主讲：张鹏邮箱：seo100,目标,什么是Web标准，Web标准的构成采用标准的好处理解表现和结构分离什么是CSS，CSS语法传统html布局的缺点，CSS的优点CSS常用属性、CSS控制文字与链接,什么是web标准,一、什么是web标准?web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XTHML、Javascript、以及CSS等。二、Web标准的目的?在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终户展示信息内容。,采用标准的好处,1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万页面的站点。3、降低网站流量的费用。带宽要求降低（代码更简洁），成本降低。4、更容易被搜寻引擎搜索到。提高网站在百度或google中的排名。5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等。,Web标准的构成？,四、Web标准的构成？Web标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。,理解表现和结构分离,web标准的好处之一是“理解表现和内容分离”-那这到底是什么意思呢？首先我们必须先明白一些基本的概念：内容、结构、表现和行为。,1、内容：就是制作者放在页面内真正想要让访问者浏览的信息,2、结构：使内容更加具有逻辑性和易用性类似于：1级2级标题、正文、列表等把它们称为结构,3、表现：用于修饰内容的外观的样式的东西称为表现。,4、行为：对内容的交互及操作效果，如通过javascript判断表单提交等,CSS简介,一、概念：CSS是CascadingStyleSheets（层叠样式表）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在你丰富的想象力下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。CSS可以做为html，xhtml，xml的样式控制语言,二、CSS语法结构选择符属性:值例如：bodyfont-size:12px;参数说明：1、选择符（Selector）：指明这组样式所要针对的对象。可以是一个XHTML标签，如body,h1；也可以是定义了特定的id或class的标签，如#main选择符表示选择,即一个被指定了main为id的对象。2、属性（proprety）：选择符的样式属性，如颜色、大小、定位、浮动方式等。3、值（value）：是指属性的值。4、同时可以为一个选择符定义多个属性，每个属性之间用分号“;”分隔,CSS长度单位,CSS颜色单位,一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。每个值域在0255之间,CSS控制字体,CSS控制字体,CSS在网页的中应用方式,三、网页中加CSS的方式有四种：1、内联式样式表：直接写在现有的标记中，如：这里文字是红色的2、嵌入式样式表：使用“”标签嵌入到HTML文件的头部中标记内，如：用于当浏览器不支持样式表时，不会将样式表内容显示出来,CSS在网页的中应用方式,3、外部链接式”样式表”：将样式表写在一个独立的.css文件中，然后在页面head区标记内用标签调用它，如：4、导入式”样式表”：导入式样式表与链接式样式表的功能基本相同，只是语法和动作方式上略有不同，同样也将导入样式代码写在标记内。语法：importurl(basic.css);,CSS布局与传统HTML布局比较,1、传统HTML布局缺点：HTML标记控制布局繁琐，修改麻烦每个页面都要单独控制，网站更新工作量大2、CSS布局优点：CSS样式功能强大，布局灵活，修改方便多个页面可以通过一个css文件控制，网站更新方便快捷,CSS选择符类型,1、类型选择符：就是HTML文档中的元素作用于html标记如：p属性:值2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.”开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。如：.warning属性:值3、ID选择符：与类基本相似，只是以英文“#”开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。如：#main属性:值,CSS样式的特点,1、继承：网页中子元素，将继承父元素的样式例如：要控制段落p中的文字大小，可以直接给body标记加样式。2、层叠：网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。后面定义的样式，会覆盖前面定义的样式。,CSS样式的优先权,四种方式的优先权:内联式行内样式-内嵌式内部式-链接式外部式-import导入式CSS优先权：就近原则作用范围越小，优先权越高。离要修饰目标越近的样式优先权越高。,CSS样式的优先权,选择符优先权：行内idclass类型选择符我们可以采用!important语法来提升重要性优先权pbackground-color:#FFCCCC!important;IE6不支持该语句background-color:#66CCCC;,CSS控制文本,CSS控制链接自定义链接的CSS类a.类名称:状态,