《lecture 3 more basic htm andcss(c)》由会员分享，可在线阅读，更多相关《lecture 3 more basic htm andcss(c)（33页珍藏版）》请在金锄头文库上搜索。
1、第三讲 更多基础的HTML和CSS,Web Programming School of Computer Science and Engineering, South China University of Technology,概要,更多HTML元素 更多基础的CSS CSS实践,网页元数据: ,name author description keywords generator revised http-equiv content-type expires refresh,XHTML,表格: , , , , , Smart Guys namegender Billmale Susanfem
2、ale ,HTML,output,不要使用表格进行布局!,Smart Guys,table./table - 定义表格 th - 定义表头 Defines a table header tr - 定义表行 Defines a table row td - 定义表元(表格的具体数据) td stands for “table data,“ Defines a table cell.,定义列表: , , ,dl 表示一个定义列表(块元素) dt 表示每一个项目(即术语), 而 dd 表示它的意义, newbieone who does not have mad skills ownto sound
3、ly defeat (e.g. I owned that newbie!) frag a kill in a shooting game ,HTML,newbie one who does not have mad skills own to soundly defeat (e.g. I owned that newbie!) frag a kill in a shooting game,output,引用: ,一段长引用(块元素),As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago,
4、our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. ,HTML,As Lincoln said in his famous Gettysburg Address: Fourscore and seven years ago, our fathers brought forth on this continent a new nation, conceived
5、in liberty, and dedicated to the proposition that all men are created equal.,output,行内引用: ,一段短引用(行内元素),Quoth the Raven, Nevermore.,HTML,Quoth the Raven, “Nevermore”.,output,为什么不直接这样写? Quoth the Raven, “Nevermore.“ 基于以下两个理由,我们不使用 “ : XHTML不应该包含文字的引用符号; 他们应该写成 使用 允许我们将CSS样式应用于quotations中,HTML字符实体,完整的H
6、TML字符实体列表 你会如何显示网页上的?,在网页中表示任何unicode字符的方法,HTML-编码文本,HTML, Search Google for Marty ,output,在网页中，要照原样显示含有html标签的文本，我们需要对那些特定字符进行转义，使用相应的转义字符（如上例）。,计算机代码: ,code: 一段简短的计算机代码(通常会通过固定宽度的字体呈现出来), The ul and ol tags make lists. ,HTML,The ul and ol tags make lists.,output,预编排文字: ,一大段预编排的文字(块元素), Steve Jobs
7、speaks loudly reality distortion Apple fans bow down ,HTML,Steve Jobs speaks loudly reality distortion Apple fans bow down,output,显示时会保留空格和回车 以默认的等宽度字体显示 如果我们把它包含在code标签里面,它看起来会是怎样的?,概要,更多HTML元素 更多基础的CSS CSS实践,样式分组,p, h1, h2 color: green; h2 background-color: yellow; ,CSS,This paragraph uses the abo
8、ve style.,output,一种样式可以选择多个元素, 由逗号分隔 单独的元素也可以拥有自己的样式 (例如上面的h2),This h2 uses the above style.,CSS的文本属性,text-align,text-align 可以是 left, right, center, 或者 justify (两端对齐, 并使各行长度相等),text-decoration,可以是 可以组合其效果: text-decoration: overline underline,list-style-type 属性,ol list-style-type: upper-roman ,CSS,可能
9、的值: none : 没有标记 disc (default), circle, square decimal : 1, 2, 3, etc. decimal-leading-zero : 01, 02, 03, etc. lower-roman : i, ii, iii, iv, v, etc. upper-roman : I, II, III, IV, V, etc. lower-alpha : a, b, c, d, e, etc. upper-alpha : A, B, C, D, E, etc. lower-greek : alpha, beta, gamma, etc. 其它: he
10、brew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha,概要,更多HTML元素 更多基础的CSS CSS实践,Body 样式,要把一种样式应用到网页中的整个body, 你需要写一个body元素的选择器 避免让你手动为每一个元素添加样式,body font-size: 16px; ,CSS,层叠样式表,它被称为层叠样式表是因为元素的属性以以下的顺序 层叠 在一起: 浏览器的默认样式 外部样式表文件 (在标签里面) 内部样式表 (在网页头的标签里面) 行内样式 (HT
11、ML 元素的样式属性),继承样式,当多种样式应用到某一个元素时, 它们是可以被继承的 一个更紧密匹配的规则可以覆盖一个更通用的继承而来的规则 不是所有的属性都是可以被继承的(注意上面的链接颜色),冲突的样式,当两种样式为同一个属性设定了冲突的值时, 后一个样式会取得更高的优先级 (稍后我们会学到特殊的样式, 它们可以覆盖通用的样式),W3C CSS 验证器,jigsaw.w3.org/css-validator/ 检查你的CSS, 确保它符合官方CSS规格 比浏览器严格, 因为浏览器可能正确的渲染畸形的CSS,HTML,output,CSS 的背景属性,background-image,背景图
12、/颜色充满元素的内容区域,draft.jpg,background-repeat,可以是repeat (默认), repeat-x, repeat-y, 或者no-repeat,background-position,值由两部分组成, 每一个可以是top, left, right, bottom, center, 以百分数或者px, pt 为单位的长度. 值可以是负数, 以指定超出左/上边界的长度,收藏夹图标(“favicon”),在head部分里面的link标签, 能够为网页指定一个图标 IE6: 这种方法是无效的; 必须在服务器根目录放置一个ico格式并且命名为favicon.ico的文件
13、(指导),总结,更多HTML元素 meta dl, dt, dd blockquote, q HTML字符实体, HTML编码文本 code, pre 更多基础的CSS 样式分组 注释 文本属性: text-align, text-decoration 列表样式类型,总结,CSS实践 body 样式 层叠 vs. 继承 冲突处理 W3C CSS 验证器 背景属性: background-image, background-repeat, background-position 收藏夹图标,，在一个网页中列出我们在这个课程中学过的所有html标签和css属性,并且解释它们的用途和用法 dl, d
14、t, dd 用于定义 blockquote, q 用于引用 w3 school 的语句 code, pre 用于例子 把样式写在一个单独的css文件中,阅读资料,http:/en.wikipedia.org/wiki/XHTML http:/en.wikipedia.org/wiki/Cascading_Style_Sheets 第18章, Web Programming with HTML, XHTML, and CSS :8080/display/W2PSC/References+and+Books 所有HTML标签的列表: HTML字符实体的列表: XHTML 1.1 说明. http:/www.w3.org/TR/xhtml11/ XHTML 1.1 元素参考: http:/www.w3.org/2007/07/xhtml-basic-ref.html W3 所有 CSS 属性的列表: http:/www.w3.org/TR/CSS21/propidx.html W3 CSS 2.1 规格: http:/www.w3.org/TR/CSS21/ 各种操作系统的字体: ,谢谢!,
