网页设计与制作DIVCSS.pptx
- 文档编号:2123274
- 上传时间:2022-10-27
- 格式:PPTX
- 页数:44
- 大小:304.64KB
网页设计与制作DIVCSS.pptx
《网页设计与制作DIVCSS.pptx》由会员分享,可在线阅读,更多相关《网页设计与制作DIVCSS.pptx(44页珍藏版)》请在冰豆网上搜索。
网页设计与制作网页设计与制作DIV+CSS2017.3.1Div+css的概述的概述业界对业界对DIV+CSS的标准化设计关注的标准化设计关注DIV+CSS标准化的影响下,网页设标准化的影响下,网页设计人员已经把这一要求作为行业标计人员已经把这一要求作为行业标准准传统的网页布局是使用网格传统的网页布局是使用网格DIV+CSS布局布局DIV+CSS布局这个布局中,div承载的是内容,而承载的是内容,而css承载的是样承载的是样式。
式。
内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击,尤其是设计人员很难接受设计一个他们不能立即看到的样式。
不过随着学习,会发现div+css的好处实在是太明显了DIV的概念的概念1.DIV全称全称division意为意为“区分区分”使用使用DIV的方法的方法跟使用其他跟使用其他tag的方法一样。
的方法一样。
2.如果单独使用如果单独使用DIV而不加任何而不加任何CSS,那么它在网,那么它在网页中的效果和使用页中的效果和使用是一样的。
是一样的。
3.DIV本身就是容器性质的本身就是容器性质的,你不但可以内嵌,你不但可以内嵌table还可以内嵌文本和其它的还可以内嵌文本和其它的HTML代码代码4.注意:
注意:
标签可以用来组合其它的标签可以用来组合其它的HTML元素,元素,但不能嵌套在段落元素中,例如,但不能嵌套在段落元素中,例如,aabbcc的结果是不确定的。
的结果是不确定的。
SPAN和DIV的区别SPAN和DIV的区别在于,DIV(division)是一个是一个块级元素块级元素,可以包含段落、标题、表格,乃至诸如章节、摘要和备注等。
是行级容器标签是行级容器标签,不可以包含图片、标题、段落等,只能包含文字内容而SPAN是行内元素,SPAN的前后是不会换行的,它没有结构的意义,纯粹是应用样式,当其他行内元素都不合适时,可以使用SPAN。
Css的概念的概念CSS:
CascadingStyleSheets层叠式样式表HTML语言并不是真正的版面语言,它只是标记语言,意图把文档的不同部分通过它们的功能作用进行分类,但并不指出这些元素如何在计算机屏幕上显示。
CSS则提供对文档外观的更好更全面的控制,而且不干扰文档的内容。
CSS基本语句的结构:
HTML选择符属性1:
值1;属性2:
值2;属性n:
值n;选择符是要对它应用说明的HTML元素名称;属性就是能够被CSS影响的浏览器行为,如字体、背景、边界等;值就是可以为属性设置的任何选项,如“楷体”,“red”等。
如:
pfont-size:
12pt;color:
blue盒子模型盒子模型每个每个HTML元素都可以看作一个装了东西的盒子,盒元素都可以看作一个装了东西的盒子,盒子具有子具有宽度(宽度(width)和和高度(高度(height),盒子里面,盒子里面的内容到盒子的边框之间的距离即的内容到盒子的边框之间的距离即填充(填充(padding),盒子本身有盒子本身有边框(边框(border),而盒子边框外和其他盒,而盒子边框外和其他盒子之间,还有子之间,还有边界(边界(margin)。
边缘margin(边界)(margin-top、margin-right、margin-bottom、margin-left):
外边距顺序依次是上、右、下、左例如,margin:
2em4em、margin-left:
-200pxpadding(填充)(padding-top、padding-right、padding-bottom、padding-left):
内边距指文本边框与文本之间的距离,顺序依次是上、右、下、左布局中的主要样式布局中的主要样式fontline-heightcolormarginpaddingbordertext-alignbackgroundwidth:
heightfloat:
cleardisplay如何在网页中应用如何在网页中应用css1.行内套用(两种)如:
1)2)直接写在标签内2.外部连接套用如:
如何在网页中应用css3.汇入套用(汇入的做法为利用import这个指令)使用import导入,语法:
文档标题importurl(css.css);importurl(csss.css);/单引号也可以importcss,css;importcss.css;/单引号也可以内嵌样式的选择器根据选择器的不同,内嵌样式又分为:
HTML选择器CLASS类选择器ID选择器虚类和虚元素selectorproperty1:
value1;property2:
value2;需要应用的需要应用的样式的内容样式的内容样式的属性样式的属性样式的属性样式的属性的值的值HTML选择器P/*设置样式:
字体和背景色*/font-family:
System;font-size:
18px;color:
#3333CC;H2background-color:
#CCFF33;text-align:
center;品种特征方面:
软件协会软件协会类选择器的定义格式为:
html标签名样式规则;CLASS类选择器.myinputborder:
1pxsolid;border-color:
#D4BFFF;color:
#2A00FF;密 码类选择器的定义格式为:
.类名样式规则;应用类选择器:
class”类名“ID选择器#firecolor:
red;font-size:
24px;我是二我是二级标题级标题,火,火是是这样这样的的我是段落,火是我是段落,火是这样这样的的类选择器的定义格式为:
#ID名样式规则;应用ID选择器:
ID”ID名“虚类和虚元素在html的页面元素中没有这种属性,故称其为虚类,仅在IE5.0以上的浏览器版本才支持虚类选择符。
语法如下:
页面元素名:
元素虚属性名样式表内容a:
linkcolor:
#000000a:
visitedcolor:
#cccccca:
hovercolor:
#000000;font-style:
italica:
activecolor:
#aaaaaa:
linkcolor:
#000000:
visitedcolor:
#cccccc:
hovercolor:
#000000;font-style:
italic:
activecolor:
#aaaaaaCSS样式的组合、继承和关联性u样式的组合:
把具有相同声明定义的选择符组合在一起,并用逗号隔开。
例如:
段落元素p、单元格元素td和类c1可以使用相同样式:
p,td,.c1font-size:
12pt;font-family:
黑体黑体;color:
redCSS样式的组合、继承和关联性样式的继承:
若子元素未定义,则它将继承上级元素的样式的定义。
但存在少数属性不能继承。
CSS例子例子CSS样式的组合、继承和关联性样式表的关联性:
样式表的关联性指在某些样式定义中,可以定义某样式仅在某个特定元素范围内才有效。
例如:
pbfont-size:
12pt;font-family:
黑体黑体;color:
redb元素仅在元素仅在p元素作用范元素作用范围内会套用上述的样式设围内会套用上述的样式设定。
定。
而在其他地方不具而在其他地方不具有这些属性。
有这些属性。
样式表的样式表的6类常用属性类常用属性字体属性:
字体、字号、行距等。
颜色及背景属性:
背景颜色、背景图片等。
文本属性:
区块属性:
边框粗细等。
分级属性:
各组件的字距、行距、缩排等。
鼠标属性:
鼠标形状等。
字体属性Font-family:
指定文字的字体H1font-family:
华文彩云Font-style:
指定文字是否加粗或使用斜体。
取值:
normal(正常)、oblique(偏斜体)、italic(斜体)Font-size:
指定文字的大小。
Font:
上述样式属性的综合表示法。
Pfont:
bold16pt颜色及背景属性定义颜色rgb函数:
rgb(R,G,B)R、G、B可用百分比值表示,也可用0255的整数值表示。
使用十六进制数组:
#RRGGBB直接使用颜色名。
Background-color:
指定背景颜色H1background-color:
#000800Background-image:
指定Html组件的背景图片,值为url或none。
Bodybackground-image:
url(image1.jpg)color:
rgb(100%,0,0)color:
rgb(255,0,0)color:
#FF0000color:
red文本属性Text-decoration:
设置底线、顶线、闪烁等文字效果。
值为none,underline,overline,line-through,blink.Text-align:
指定文字的对齐方式。
值为:
left,right,center,justify块级属性定义边界,取值为:
长度|百分比|auto上边界:
margin-top;下边界:
margin-bottom左边界:
margin-left:
右边界:
margin-rightP.narrowmargin-right:
50%定义边框:
Border-colorBorder-widthBorder-style分级属性List-style-type:
指定项目符号或编号允许值:
disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|noneList-style-image:
指定项目符号的图形文件名称,值为url或noneLI.squarelist-style-type:
squareUL.plainlist-style-type:
noneOLlist-style-type:
upper-alpha/*ABCDEetc.*/OLOLlist-style-type:
decimal/*12345etc.*/OLOLOLlist-style-type:
lower-roman/*iiiiiiivvetc.*/鼠标属性让鼠标移到不同对象上面,显示不同形状。
Cursor属性,取值如下Auto:
自动按默认显示Crosshair:
“”Hand:
手形Text:
文本I形Wait:
等待CSS定位与显示定位与显示CSS的定位与显示属性可以把一个HTML元素定位在网页中的任何位置定位与布局密切相关CSS中有三种基本的定位机制普通流普通流:
显示的位置由元素在HTML文件中的位置决定浮动浮动:
可以左右移动,直到碰到包含框或其它浮动框绝对定位绝对定位:
可以直接将元素定位在页面上地任何位置层叠顺序进行CSS定位时,有可能发生多个元素的重叠需要设置元素在Z轴上的层叠顺序与定位相关的属性主要有14个普通流定位机制按照元素的类型和在HTML源文件中的出现顺序进行定位就是block元素(如p、h、div)(块级框)从上到下一个接一个的排列inline元素(如span、strong元素)在行中水平布置除非特殊的指定,否则所有的框都在普通流中定位浮动(float)浮动框可以左右移动,直到它的外边缘碰到包含框或另一浮动框的边缘当元素浮动时,它将不再处于普通文档流中,相当于浮在文档之上,不占据空间,但是会缩短行框,产生文字环绕的效果如果水平位置没有空间了,则box3会跑到下面去如果box2的高度没有box1高度大,box1减去box2的高度的部分会把box3拦住Clear属性如果要为浮动元素留出垂直空间,使其它的元素不在其两侧显示,可以对其周围的元素使用清理属性clear:
none|left|right|both添加了clear属性的元素,通过自动增加空白边,达到留出垂直空间的效果Visibility、display、Z-index属性Visibility设置对象是否可见定义这个层级是不是要在画面上显示出功能来,最常利用javascript来动态控制某个层级的显示状况,进而达到动态的效果默认值是visible,不显示则设
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 DIVCSS
![提示](https://static.bdocx.com/images/bang_tan.gif)