DIVCSS网页布局第一课.ppt

《DIVCSS网页布局第一课.ppt》由会员分享，可在线阅读，更多相关《DIVCSS网页布局第一课.ppt（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、高级网页设计人才培训专家高级网页设计人才培训专家!Div+Css网页布局第一课CSS样式基础主讲：张鹏邮箱：邮箱：高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏目标目标1什么是什么是Web标准，标准，Web标准的构成标准的构成2采用标准的好处采用标准的好处3理解表现和结构分离理解表现和结构分离4什么什么是是CSS，CSS语法语法5传统传统html布局的缺点，布局的缺点，CSS的优点的优点6CSS常用属性、常用属性、CSS控制文字与链接控制文字与链接高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏什么是web标准 l一、什么是web标准?lweb标准不是某一个标准，而是

2、由W3C和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的HTML、XTHML、Javascript、以及CSS等。l二、Web标准的目的?l在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终户展示信息内容。高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏采用标准的好处l1、提高页面浏览速度。使用CSS方法，比传统的web设计方法至少节约50%以上的文件尺寸。l2、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个CSS文件就可以重新设计一个有成千上万页面的站点。l3、降低网站流量的费用。带宽要求降低（代码更简洁）

3、，成本降低。l4、更容易被搜寻引擎搜索到。提高网站在百度或google中的排名。l5、内容能被更广泛的设备所访问。包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等。高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏Web标准的构成？l四、Web标准的构成？lWeb标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏理解表现和结构分离 lweb标准的好处之一是“理解表现和内容分离”-那这到底是什么意思呢？l首先我们必须先明白一些基本的概念：l内容、结构、表现和行

4、为。1、内容：就是制作者放在页面内真正想要让访问者浏览的信息 2、结构：使内容更加具有逻辑性和易用性类似于：1级2级标题、正文、列表等把它们称为结构 3、表现：用于修饰内容的外观的样式的东西称为表现。4、行为：对内容的交互及操作效果，如通过javascript判断表单提交等 高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS简介l一、概念：CSS是Cascading Style Sheets（层叠样式表）的简称。l更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在你丰富的想象力

5、下千变万化。实际上CSS的代码都是由一些最基本的语句构成的。lCSS可以做为 html，xhtml，xml的样式控制语言高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏二、CSS语法结构l选择符 属性:值 例如：bodyfont-size:12px;l参数说明：l1、选择符（Selector）：指明这组样式所要针对的对象。可以是一个XHTML标签，如body,h1；也可以是定义了特定的id或class的标签，如#main选择符表示选择,即一个被指定了main为id的对象。l2、属性（proprety）：选择符的样式属性，如颜色、大小、定位、浮动方式等。l3、值（value）：是指属

6、性的值。l4、同时可以为一个选择符定义多个属性，每个属性之间用分号“;”分隔高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS 长度单位相对长度单位说明em相对于当前对象内文本的字体尺寸px像素（Pixel）推荐使用绝对长度单位说明-基本上用不到in英寸cm厘米mm毫米pt点（Point）高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS 颜色单位颜色单位说明十六进制如：color:#ff0000颜色名称如：color:red三原色单位如：rgb(255,0,0)一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。每个值域在 0 2

7、55 之间高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS控制字体 功能语法设置字号font-size:12px设置字色color:#00000设置字体font-family:”黑体”设置行高line-height:150%line-height:1.5em设置字体的粗细 font-weight:normal 正常 bold 粗体 高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS控制字体 功能语法设置字体样式 font-style:normal 正常 italic 斜体 oblique斜体 修饰文字text-decoration:none正常underlin

8、e下划线 overline上划线 line-through删除线字符间距letter-spacing:normal默认 length 长度单位单词间距word-spacing:normal默认 length 长度单位高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS在网页的中应用方式三、网页中加CSS的方式有四种：l1、内联式样式表：直接写在现有的标记中，如：l这里文字是红色的l2、嵌入式样式表：使用“”标签嵌入到HTML文件的头部中标记内，如：l ll l用于当浏览器不支持样式表时，不会将样式表内容显示出来高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS在网

9、页的中应用方式l3、外部链接式”样式表”：将样式表写在一个独立的.css文件中，然后在页面head区标记内用标签调用它，如：ll4、导入式”样式表”：导入式样式表与链接式样式表的功能基本相同，只是语法和动作方式上略有不同，同样也将导入样式代码写在标记内。l语法：import url(basic.css);高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS布局与传统HTML布局比较1、传统HTML布局缺点：lHTML标记控制布局繁琐，修改麻烦l每个页面都要单独控制，网站更新工作量大2、CSS布局优点：lCSS样式功能强大，布局灵活，修改方便l多个页面可以通过一个css文件控制，网

10、站更新方便快捷高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS选择符类型1、类型选择符：l就是HTML文档中的元素作用于html标记l如：p属性:值2、类选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.”开头，后面的名字自己定义，类定义后还需要在网页中加入class=类名称，加以调用。l如：.warning 属性:值 l 3、ID选择符：与类基本相似，只是以英文“#”开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的样式。l如：#main 属性:值l 高级网页设计人才培训专家高级网页设计人才培训

11、专家!主讲：张鹏CSS样式的特点1、继承：l网页中子元素，将继承父元素的样式l例如：要控制段落p中的文字大小，可以直接给body标记加样式。2、层叠：l网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。l后面定义的样式，会覆盖前面定义的样式。高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS样式的优先权l四种方式的优先权:内联式行内样式-内嵌式内部式-链接式外部式-import导入式lCSS优先权：就近原则l作用范围越小，优先权越高。l离要修饰目标越近的样式优先权越高。高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS样式的优先权l选择符

12、优先权：l行内idclass类型选择符l我们可以采用!important语法来提升重要性优先权lplbackground-color:#FFCCCC!important;IE6不支持该语句lbackground-color:#66CCCC;l高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS控制文本 功能语法设置对象中文本缩进 text-indent:length text-indent:2em文本水平对齐方式 text-align:left左center中right右对象中空白处理white-space:normal自动换行 pre换行和空白受保护 nowrap强制在同一行显

13、示文本大小写 控制text-transform:none 正常大小 capitalize每个单词的第一个字母转换成大写 uppercase 转换成大写 lowercase 转换成小写元素的垂直对齐方式 vertical-align:sub设置文字为下标 super设置文字为上标 top 把元素的顶端与行中最高元素的顶端对齐 text-bottom 把元素的底端与父元素字体的底端对齐高级网页设计人才培训专家高级网页设计人才培训专家!主讲：张鹏CSS控制链接自定义链接的CSS类a.类名称:状态状态 语法链接文本正常显示的状态 a:link 鼠标置于链接文本之上 a:hover 鼠标按下链接文本 a:active 访问过的链接文本状态 a:visited