CSS HTML元素布局及Display属性
1.HTML元素分类
HTML元素大体可分为内联(inline)元素和块(block)元素。
1.1内联元素(inline)
①inline元素显示方式:"文本方式",1个挨着1个,不独自占有1行;
等块级元素;
③包含的标签有:、
④inline元素的宽高是不能定义, 即宽高度是由inline元素inline内容的元素决定
的,(ie6,ie7下高度会受inline-block元素的影响);
⑤宽高完全是自适应而得出的, 因此也不存在overflow的问题, min|max-width|height
也没有影响;
⑥margin四个属性, left|right 与top|bottom 有不同的待遇(自己动手尝试下哪些起
作用);
⑦margin-top, margin-bottom, 可以用line-height模拟, 但有很大不同, 与
inline-block也不兼容, 另margin:0 auto的居中效果, 也没有作用。
1.2块元素(block)
①元素显示方式:每个元素独自占有1行,相当于前后都带有换行符;
②内嵌的元素可以是内联或块级元素;
③包含的元素有:
、
2.HTML 元素布局展示
2.1默认展示(未添加width和height属性)
①HTML元素在浏览器展示的方式是:从上到下,从左到右。
②内联元素,是根据浏览器的宽度及自身的width宽度来填充。若当前行剩余空白区
域不够,就会换至下一行。
③块级元素,根据内联元素的展示方式展示大概区域;当浏览器的宽度减少时,会自
动扩充块级元素的height属性的值,以容纳内嵌元素的展示。
2.1.1展示页面
2.2增加了width属性的展示
2.2.1块级元素(div)增加了width属性
2.3结论
①当块级元素没设置width属性时,浏览器宽度的变更,会压缩块元素内嵌元素的排
版。
②设置块级元素的width属性时,浏览器的width属性值变更,不会影响到块级元素
里的内嵌元素的布局,他们(内嵌元素)受父级块级元素的影响。适用范围:导航条(导航条里有多个a标签,可放在一个div里,并给div附加width属性;以免浏览器缩小,造成导航排版乱掉)。
3.CSS display属性
3.1主要的值
①none :此元素不被显示;
②block :此元素按块级元素显示:前后带换行符,自己占一行。
③inline :此元素按内联元素显示:1个挨着1个。
3.2其他常见diplay值类型
还有一些特殊显示的效果的元素,列举如下:
list-item,此元素会作为列表显示。(参考
table,此元素会作为块级表格来显示(类似
字体属性:(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位:PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/ 区块属性:(Block) /*这个属性第一次认识,要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用,多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)
HTML练习题1(选择题) 一、选择 1.在一个框架的属性面板中,不能设置下面哪一项。( D ) A.源文件 ; B.边框颜色; C.边框宽度D.滚动条 2. 下列哪一项表示的不是按钮。( C ) A.type="submit" B.type="reset" C.type="image" D.type="button" 3.下面哪一个属性不是文本的标签属性?( B ) A.nbsp; B.align C.color D.face 4.下面哪一项的电子邮件链接是正确的?( D ) A.https://www.doczj.com/doc/522749593.html, B.xxx@.net C.xxx@com D.xxx@https://www.doczj.com/doc/522749593.html, 5.当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。( C )A.ASP B.HTML C.ZIP D.CGI 6.关于表格的描述正确的一项是。( D ) A.在单元格内不能继续插入整个表格 B.可以同时选定不相邻的单元格 C.粘贴表格时,不粘贴表格的内容 D.在网页中,水平方向可以并排多个独立的表格 7.如果一个表格包括有1行4列,表格的总宽度为“699”,间距为“5”,填充为“0”,边
框为“3”,每列的宽度相同,那么应将单元格定制为多少像素宽。( D ) A.126 B.136 C.147 D.167 8.关于文本对齐,源代码设置不正确的一项是:( A ) A.居中对齐:
CSS学习知识点 1、css是什么? CSS(Cascading Style Sheet)可译为“层叠样式表”或“级联样式表”,它定义如何显示 HTML元素,用于控制网页的外观。 2、为什么使用css,优点是什么? 1:【内容】和【表现】相分离 HTML文件中只存放文本信息,将样式部分放在一个独立样式文件中。页面对搜索引擎更加友好。 2:提高页面浏览速度 采用CSS布局的页面容量要比TABLE布局的页面文件容量小得多,前者一般只有后者的1/2大小。 3:易于维护和改版 只要简单的修改对应CSS文件,就可以重新设计整个网站的页面。 4: 使用CSS布局更符合现在的W3C标准 W3C组织是对网络标准制定的一个非赢利组织,像HTML、CSS、XML的标准就是由它来定制。 3、CSS样式表的调用方式哪几种? 1、内部样式:把CSS样式表放到
文档中: 格式如下: 2、内联式:把CSS样式表写在HTML对应的标记内。 格式如下:蓝色14号文字 3、外部样式:把编辑好的CSS文档保存成“.CSS”文件,然后在
中定义。 格式如下: ..... 4、导入样式:与链入外部样式的功能基本相同,只是语法和实现方式上有差别。 格式如下: 4、几种调用方式的优先级? 从高到低:内联样式--------外部样式---------内部样式-----------导入样式 5、CSS的语法: CSS的定义是由三部分构成: 选择器,属性和属性值。 语法: selector {property: value;} --------------------- 选择符{属性:值}CSS3 动画属性(Animation) @keyframes //规定动画。 animation //所有动画属性的简写属性,除了animation-play-state 属性。animation-name //规定@keyframes 动画的名称。 animation-duration //规定动画完成一个周期所花费的秒或毫秒。 animation-timing-function //规定动画的速度曲线。 animation-delay //规定动画何时开始。 animation-iteration-count //规定动画被播放的次数。 animation-direction //规定动画是否在下一周期逆向地播放。 animation-play-state //规定动画是否正在运行或暂停。 animation-fill-mode //规定对象动画时间之外的状态。 CSS 背景属性(Background) background //在一个声明中设置所有的背景属性。 background-attachment //设置背景图像是否固定或者随着页面的其余部分滚动。background-color //设置元素的背景颜色。 background-image //设置元素的背景图像。 background-position //设置背景图像的开始位置。 background-repeat //设置是否及如何重复背景图像。 background-clip //规定背景的绘制区域。 background-origin //规定背景图片的定位区域。 background-size //规定背景图片的尺寸。 CSS 边框属性(Border 和Outline) border //在一个声明中设置所有的边框属性。 border-bottom //在一个声明中设置所有的下边框属性。 border-bottom-color //设置下边框的颜色。 border-bottom-style //设置下边框的样式。 border-bottom-width //设置下边框的宽度。
CSS属性大全完整版 字体属性:(font) 大小 font-size: x-large; (特大) xx-small; (极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 font-style: oblique; (偏斜体) italic; (斜体) normal; (正常) 行高 line-height: normal; (正常) 单位:PX、PD、EM 粗细 font-weight: bold; (粗体) lighter; (细体) normal; (正常) 变体 font-variant: small-caps; (小型大写字母) normal; (正常) 大小写 text-transform: capitalize; (首字母大写) uppercase; (大写) lowercase; (小写) none; (无) 修饰 text-decoration: underline; (下划线) overline; (上划线) line-through; (删除线) blink; (闪烁) 常用字体
font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩 background-color: #FFFFFF; 图片 background-image: url(); 重复 background-repeat: no-repeat; 滚动 background-attachment: fixed; (固定) scroll; (滚动) 位置 background-position: Left (水平) top (垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性:(Block) 字间距 letter-spacing: normal; 数值 对齐 text-align: justify; (两端对齐) left; (左对齐) right; (右对齐) center; (居中) 缩进
CSS常用属性大全 2011-04-22 12:51 字体属性:(font) 大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位:PX、PD、EM 粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体 font-variant: small-caps;(小型大写字母) normal;(正常) 大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 字体投影效果:filter:dropshadow(color=#FFFFFF, offx=1, offy=1, positive=1); 背景属性: (background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: repeat; no-repeat; repeat-x; repeat-y;滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直);bottom; right; center; 简写方法 background:#000 url(..) repeat fixed left top; 区块属性: (Block) 字间距letter-spacing: normal; 数值 对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 单词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)
《HTML基础试题》 一、单项选择题: 1、下面哪一个属性不是文本的标签属性?() A. B.size C.color D.face 2、当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。() A.ASP B.HTML C.ZIP D.CGI 3、关于文本水平对齐,源代码设置不正确的一项是:() A.居中对齐:
字体属性:(font) 大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高line-height: normal;(正常) 单位:PX、PD、EM 粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体font-variant: small-caps;(小型大写字母) normal;(正常) 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性:(Block) 字间距letter-spacing: normal; 数值 对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性:(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 边框属性:(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border:width style color; 列表属性:(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
1.1 HTML文件的基本结构 HTML的英文全称是Hyper Text Markup Language,它是网页超文本标记语言的缩写,是Internet 上用于编写网页的主要语言。HTML中每个用来作为标记的符号都可以看作是一条命令,它告诉浏览器应该如何显示文件的容。 1.1.1 HTML文件结构 一个完整的HTML文件由标题、段落、表格和文本等各种嵌入的对象组成,这些对象统称为元素,HTML使用标记来分隔并描述这些元素。实际上整个HTML文件就是由元素与标记组成的。 下面是一个HTML文件的基本结构。 文件开始标记
文件头开始的标记 ……文件头的容 文件头结束的标记 文件主体开始的标记 ……文件主体的容 文件主体结束的标记 文件结束标记 从上面的代码可以看出,HTML代码分为3部分,其中各部分含义如下。 …:告诉浏览器HTML文件开始和结束的位置,其中包括和标记。HTML文档中所有的容都应该在这两个标记之间,一个HTML文档总是以开始,以结束。 …:HTML文件的头部标记,在其中可以放置页面的标题以及文件信息等容,通常将这两个标签之间的容统称为HTML的头部。 …:用来指明文档的主体区域,网页所要显示的容都放在这个标记,其结束标记指明主体区域的结束。 1.1.2 使用记事本手工编写HTML页面 编写HTML文件有两种方法,一种是利用记事本编写,另一种是在可视化网页制作软件中编写,如Dreamweaver,下面分别进行讲述。 HTML是一个以文字为基础的语言,并不需要什么特殊的开发环境,可以直接在Windows自带的记事本中编写。HTML文档以.html为扩展名,将HTML源代码输入记事本并保存,可以在浏览器中打开文档以查看其效果。使用记事本手工编写HTML页面的具体操作步骤如下。 (1)在Windows系统下,执行“开始”→“所有程序”→“附件”→“记事本”命令,新建一个记事本,在记事本中输入代码,如图1-1所示。 (2)编写完HTML文件后,执行“文件”→“保存”命令,弹出“另存为”对话框,在对话框css 常 用属性 CSS 文字属性: color : #999999; /* 文字颜色 */ font-family : 宋体,sans-serif; /* 文字字体 */ fon t-varia nt:small-ca ps; /* letter-s pacing : 1pt; /* text-alig n:left; /* 文字左对齐*/ text-alig n:cen ter; /* 文字居中对齐*/ text-alig n:justify; /* 文字分散对齐*/ vertical-alig n 属性 fon t-size : 9pt; /* 文字大小*/ fon t-style:itelic; /* 文字斜体*/ lin e-height : 200%; /* 设置行高*/ fon t-weight:bold; /* 文字粗体*/ vertical-alig n: sub; /* 下标字*/ vertical-alig n:super; /* 上标字*/ text-decorati on :li ne-through; /* 加删除线*/ text-decorati on: overli ne; /* 加顶线*/ text-decorati on:un derl ine; /* 加下划线*/ text-decorati on:none; /* 删除链接下划线*/ text-tra nsform : cap italize; /* 首字大写*/ text-tra nsform : upp ercase; /* 英文大写*/ text-tra nsform : lowercase; /* 英文小写*/ text-alig n:r ight; /* 文字右对齐 */ 小字体*/ 字间距离*/
《H T M L基础试题》 一、单项选择题: 1、下面哪一个属性不是文本的标签属性?() A. B.sizeC.colorD.face 2、当链接指向下列哪一种文件时,不打开该文件,而是提供给浏览器下载。() A.ASPB.HTMLC.ZIPD.CGI 3、关于文本水平对齐,源代码设置不正确的一项是:() A.居中对齐:
D. 5、下列哪一项是在新窗口中打开网页文档。() A._selfB._blankC._topD._parent 6、下面对JPEG格式描述不正确的一项是。() A.照片、油画和一些细腻、讲求色彩浓淡的图片常采用JPEG格式 B.JPEG支持很高的压缩率,因此其图像的下载速度非常快 C.最高只能以256色显示的用户可能无法观看JPEG图像 D.采用JPEG格式对图片进行压缩后,还能再打开图片,然后对它重新整饰、编辑、压缩 7、常用的网页图像格式有____和_____() ,tiffB.tiff,jpgC.gif,jpgD.bmp,png 8、下面说法错误的是() 样式表可以将格式和结构分离B.CSS样式表可以控制页面的布局 样式表可以使许多网页同时更新D.CSS样式表不能制作体积更小下载更快的网页 9、CSS样式表不可能实现()功能。 A将格式和结构分离B.一个CSS文件控制多个网页 C.控制图片的精确位置D.兼容所有的浏览器 10、在HTML中,()不是链接的目标属性。 .newC.blankD.top 11、在网页设计中,()是所有页面中的重中之重,是一个网站的灵魂所在。 A.标题栏B.脚本页面C.导航栏D.页面内容 12、为了标识一个HTML文件应该使用的HTML标记是()。 A. B. 13、在客户端网页脚本语言中最为通用的是() 、在HTML中,标记的属性:“Size”所能取的最大取值是() .7 C.8D.9 15、下面不属于CSS插入形式的是() A.索引式B.内联式C.嵌入式D.外部式
Css+div 常用CSS标签及属性 2009年10月15日评论(0)|浏览(64) 点击查看原文 CSS中的长度 绝对单位:几乎不用在网页中 in 英寸1in = 2.54cm cm 厘米1cm = 0.394in pt 磅1in = 72pt pc pica 1in = 6pc 相对单位:较常用 em 1em = 相应字体的font-size值 ex 1ex = 相应字体中的小写x字母的高度值,较难求得,一般取0.5em px 最为常用的 CSS中的元素分类 display 设定元素所属类别,不可继承 none(设定为不显示在屏幕上)
block(块级元,包括P,H1-H6,list,div,body) inline(内联元,包括a,em,span) list-item(列表元,如LI) 颜色与背景类 color 设置文字颜色 #rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%) H1{color:red} H1{color:#f00} H1{color:#ff0000} H1{color:rgb(255,0,0)} H1{color:rgb(100%,0%,0%)} background-color 设置背景颜色,格式同上;不可继承,可用于所有元BODY{background-color:red} BODY{background-color:#f00} BODY{background-color:#ff0000}
BODY{background-color:rgb(255,0,0)} BODY{background-color:rgb(100%,0%,0%)} background-image 设置背景图片,默认为none,不可继承,可用于所有元url(imageURL) none body{backround-image:url(back.jpg);} background-repeat 设置背景图片是否重复排列,不可继承,用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列,默认值) BODY{background-repeat:repeat-x;} BODY{background-repeat:No-repeat;} background-attachment 设定背景图片是否卷动,不可继承,用于所有元scroll(随网页卷动,默认值) fixed(不随网页卷动) BODY{background-attachment:fixed;} background-position 设定背景图片或背景颜色开始显示的位置,不可继承,用于块级元和可替换元 top,buttom,left,right,center(用关键字)
1 初始化新事件对象的属性 语法 event.initEvent(eventType,canBubble,cancelable) 参数描述 eventType 字符串值。事件的类型。 canBubble 事件是否起泡。 cancelable 是否可以用 preventDefault() 方法取消事件。 说明 该方法将初始化 Document.createEvent() 方法创建的合成 Event 对象的type 属性、bubbles 属性和 cancelable 属性。只有在新创建的 Event 对象被Document 对象或 Element 对象的 dispatchEvent() 方法分派之前,才能调用Event.initEvent() 方法。 2 innerHTML 属性设置或返回一个链接的内容。 语法 anchorObject.innerHTML=text 实例 下面的例子将更改一个链接的文本、URL 以及 target:
Microsoft 3 innerHTML 属性可设置或返回单元格的开始标签和结束标签之间的 HTML。语法 tabledataObject.innerHTML=text 实例 下面的例子返回了表元的 inner HTML:
Firstname | Lastname |
---|---|
Peter | Griffin |