[互联网]DIV+CSS.ppt
《[互联网]DIV+CSS.ppt》由会员分享,可在线阅读,更多相关《[互联网]DIV+CSS.ppt(72页珍藏版)》请在三一文库上搜索。
1、DIV+CSS,第一节 Html介绍 标签的认识,html 简单介绍,通俗的讲html是网页,一个文本文件,可以使用记事本打开,打开后里面有html自己的标签(这些标签各有各的功能),并有一定规律存在。 html文本是由 html命令组成的描述性文本,html 命令可以说明文字、 图形、动画、声音、表格、链接等。 html网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。,html结构, 无标题文档 如果我们要想浏览器显示什么样的文章文字内容,我们只需要将文字文章放入“”之间即可。,html标签,定义注释。 定义文档类型。 定义
2、关于 HTML 文档的元信息。 定义锚 链接 定义粗体字。 定义文档中的节。 定义文档的主体。 定义简单的折行。 定义按钮 (push button)。 定义页面中所有链接的默认地址或默认目标。,定义定义列表中项目的描述。 不赞成使用。定义居中文本。 定义定义列表。 定义定义列表中的项目。 定义强调文本。 定义围绕表单中元素的边框。,定义文字的字体、尺寸和颜色。 定义段落。 定义图像。 to 定义 HTML 标题。 定义关于文档的信息。 定义水平线。 定义 HTML 文档。 定义斜体字。 定义内联框架。 定义框架集的窗口或框架,定义列表的项目。 定义文档与外部资源的关系。 定义无序列表。 定义
3、打字机文本。 不赞成使用。定义下划线文本。 定义有序列表。 定义被插入文本。 定义键盘文本。 定义 input 元素的标注。 定义图像映射。 定义框架集。,List-style-type:指定项目符号或编号 允许值:disc默认值。实心圆 | circle空心圆 | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none List-style-image:指定项目符号的图形文件名称,值为url或none 无序列表的默认符号是圆点。 元素有type属性,通过定义不同的type属性可以改变列表的
4、项目符号。目前,type属性的属性值有: disc(圆)、 circle(圆圈)、 square(方块) list-style-type: none /*不使用项目符号 */ list-style-type: upper-alpha /* A B C D E etc. */ list-style-type: decimal /* 1 2 3 4 5 etc. */ list-style-type: lower-roman /* i ii iii iv v etc. */,定义针对不支持框架的用户的替代内容。 定义针对不支持客户端脚本的用户的替代内容。 定义内嵌对象。 定义计算机代码样本。 定义
5、客户端脚本。 定义选择列表(下拉列表)。 定义输入控件。 定义供用户输入的 hTML 表单。 定义多行的文本输入控件。 定义文档中的节。,定义强调文本。加粗 定义文档的样式信息。 定义表格。 定义表格中的单元。 定义表格中的表头单元格。 定义文档的标题。 定义表格中的行。 定义下标文本。 定义上标文本。 定义表格中的表头内容。 定义表格中的主体内容。 定义表格中的表注内容(脚注)。,表单的基本语法: . ? 文本框的名字 * text,password * 默认值 * 长度 ? 最大输入字符数 ,button定义可点击按钮 checkbox定义复选框。 image定义图像形式的提交按钮。 pa
6、ssword定义密码字段。该字段中的字符被掩码。 radio定义单选按钮。 reset定义重置按钮。重置按钮会清除表单中的所有数据。 submit定义提交按钮。提交按钮会把表单数据发送到服务器。 text定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 . ,.下拉列表 说明 说明2 实现留言簿 要求:背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮,内容以mail形式提交。,第二节,DIV+CSS的概述 盒子模型,Div+css的概述,业界对DIV+CSS的标准化设计关注 DIV+CSS标准化的影响下,网页设计人员
7、已经把这一要求作为行业标准 传统的网页布局是使用网格,DIV+CSS布局,DIV+CSS布局 这个布局中,div承载的是内容,而css承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击,尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学习,会发现div+css的好处实在是太明显了,DIV的概念,1. DIV 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 2. 如果单独使用 DIV 而不加任何 CSS,那么它在网页中的效果和使用 是一样的。 3. DIV本身就是容器性质的,你不但可以内嵌table还可
8、以内嵌文本和其它的HTML代码 4. 注意:标签可以用来组合其它的HTML元素,但不能嵌套在段落元素中,例如,aabbcc的结果是不确定的。,SPAN 和 DIV 的区别,SPAN 和 DIV 的区别在于,DIV(division)是一个块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。是行级容器标签,不可以包含图片、标题、段落等,只能包含文字内容 而SPAN 是行内元素,SPAN 的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。,Css的概念,CSS:Cascading Style Sheets 层叠式样式表 HTML语言并不是
9、真正的版面语言,它只是标记语言,意图把文档的不同部分通过它们的功能作用进行分类,但并不指出这些元素如何在计算机屏幕上显示。 CSS则提供对文档外观的更好更全面的控制,而且不干扰文档的内容。 CSS基本语句的结构: HTML选择符属性1:值1;属性2:值2;属性n:值n; 选择符是要对它应用说明的HTML元素名称;属性就是能够被CSS影响的浏览器行为,如字体、背景、边界等;值就是可以为属性设置的任何选项,如“楷体”,“red”等。 如:p font-size:12pt;color:blue,盒子模型,每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),
10、盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。,边缘,margin (边界)(margin-top、margin-right、margin-bottom、margin-left):外边距顺序依次是上、右、下、左 例如,margin:2em 4em、margin-left:-200px padding (填充)(padding-top、padding-right、padding-bottom、padding-left):内边距指文本边框与文本之间的距离,顺序依次是上、右、下、左,布局中的主要样式
11、,font line-height color margin padding border text-align background,width: height float: clear display,第三节,三种选择器的使用 (html、class、id、虚类和虚元素),如何在网页中应用css,1.行内套用 如:1)直接写在标签内 2.内嵌 3.外链 如:,如何在网页中应用css,4.汇入套用(导入) (汇入的做法为利用import这个指令) 使用import导入 ,语法: 文档标题 import url(css.css); import url(“csss.css“) ; /单引号也可
12、以 import css.css; import “css.css“; /单引号也可以 ,内嵌样式的选择器,根据选择器的不同,内嵌样式又分为: HTML 标签选择器 CLASS 类选择器 ID 选择器,selectorproperty1:value1; property2:value2;,需要应用的样式的内容,样式的属性,样式的属性的值,HTML 标签选择器,例如: P /*设置样式:字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; H2 background-color: #CCFF33; text-align: c
13、enter; 品种特征方面: 软件协会 软件协会 ,类选择器的定义格式为: html标签名 样式规则; ,CLASS 类选择器,例如 .myinput border: 1px solid; border-color:#D4BFFF; color:#2A00FF; 用户名 密 码 ,类选择器的定义格式为: .类名(如myinput) 样式规则; 应用类选择器: class”类名“,ID 选择器,例 #fire color:red; font-size: 24px; 我是二级标题,火是这样的 我是段落,火是这样的 ,类选择器的定义格式为: #ID名 样式规则; 应用ID选择器:ID”ID名“ 注:
14、 ID选择器一个html只能用一次(也可多次用但不符合W3c标准),通用选择器,用的最少的选择器 *此处为css代码 对父级中所有的html标签进行样式定义,对具有共同样式的标签样式进行定义,这样可以大大在精简代码;因为他的强大,他是对父级元素内的所有标签进行定义,所以只要你定义了,那么父级里面的所有标签,甭管有没有必要,也都相当于加上了通用选择器里面的代码,举个例子,,#div1 * background:#eee;/*设置div1里面所有的元素背景均为灰色*/ color:#333;/*设置div1里面所有的元素的字体顔色均为黑色*/ 这里是p标签区域 这里是a标签区域 这里是p标签区域
15、这里是a标签区域 ,第四节,css样式的组合、继承和关联性,以下为于页面模块的常用命名,头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main,热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:copyrigh
16、t 滚动:scroll 内容:content,虚类和虚元素,在html的页面元素中没有这种属性,故称其为虚类,仅在IE5.0以上的浏览器版本才支持虚类选择符。 语法如下: 页面元素名:元素虚属性名样式表内容,a:link color: #000000 a:visited color: #cccccc a:hover color: #000000; font-style:italic a:active color: #aaaaaa,:link color: #000000 :visited color: #cccccc :hover color: #000000; font-style:ital
17、ic :active color: #aaaaaa,CSS样式的组合、继承和关联性,样式的组合:把具有相同声明定义的选择符组合在一起,并用逗号隔开。 例如:段落元素p、单元格元素td和类c1可以使用相同样式:,p,td,.c1font-size:12pt;font-family:黑体;color:red,CSS样式的组合、继承和关联性,样式的继承:若子元素未定义,则它将继承上级元素的样式的定义。但存在少数属性不能继承。, CSS例子 ,CSS样式的组合、继承和关联性,样式表的关联性: 样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。 例如:,p bfont-siz
18、e:12pt;font-family:黑体;color:red,b元素仅在p元素作用范围内会套用上述的样式设定。 而在其他地方不具有这些属性。,第五节,六种常用的属性 (文字、背景、鼠标等等属性),样式表的6类常用属性,字体属性 :字体、字号、行距等。 颜色及背景属性 :背景颜色、背景图片等。 文本属性: 区块属性 :边框粗细等。 分级属性 :各组件的字距、行距、缩排等。 鼠标属性 :鼠标形状等。,字体属性,Font-family:指定文字的字体 H1font-family:华文彩云 Font-style:指定文字是否加粗或使用斜体。取值:normal(正常)、oblique(偏斜体)、ita
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 互联网 DIV CSS
链接地址:https://www.31doc.com/p-1998381.html