HTML与CSS.ppt

1、HTML与CSS,踏入网页设计之门,基本架构, 页面标题 /*层样式列表*/ /*JS脚本*/ 网页内容 ,常见标签1文本,一个新的段落 一级标题 二级标题 斜体强调 粗体显示 要超链接的内容（文本或图像） 句子引用 段落引用 ,元素中属性的统一写法：属性名，等号，双引号括起来的属性值,HTML的特殊符号,元素的详细用法,一个小链接测试,这是文档的最顶端 回到顶部 跳到另一个页面的顶部 从新窗口打开一个页面,元素的几个状态 a:link color: green; /*未被点击过的*/ a:visited color: red; /*已被点击过的*/ a:hover color:blue; /

2、*鼠标划过*/,元素的详细用法, width=30 height=20 ,网页的规范与优化(基于XHTML1.0),1、明确所使用的网页标准，在首行加入如下代码 2、明确所使用的编码格式，在标签中的第一行加入如下代码 3、标签改为如下 ,网页的规范与优化(基于XHTML1.0),完工后到 / 去检查你的XHTML文件，看是否有语法问题。,CSS样式面向者,1、面向标签 body font-family: sans-serif; color: gray; 2、面向class .green color: green; /*含有class=green属性的

3、标签们都将被赋予以上属性*/ 3、面向id #mylogo background-color: white; /*id =mylogo属性的标签只有一个，它将被赋予以上属性*/,所有子代 #fircont a 直接子代 #firconta 孙代 #ifrcont p a,CSS样式基本文本1,在这个网址去检验你的CSS /css-validator/,CSS样式基本文本2,CSS样式盒模型,border-color: black; /*thin; medium; thick;*/ border-width: 1px; border-style: solid

4、; /*dotted; double; dash;*/ /*边框（黑色，1像素，实线）*/ padding: 10px; /*补白 -top; -right; -bottom; -left;*/ margin: 20px; /*边界 -top; -right; -bottom; -left;*/ /*注意先设定总的再设定具体一边，否则会被覆盖无效*/ background-color: yellow; background-image: url(目标路径); background-repeat: no-repeat; /*repeat-x; repeat-y; inherit;*/ backg

5、round-position: top left; /*center; right; bottom;*/,CSS样式DIV流动布局,1、用标签来划分逻辑区域； 2、为id赋予CSS样式； #firContent width: 200px; /*内容宽度，auto*/ float: right; /*整个块漂移到右边，left*/ #fist clear: right; /*右边不有漂移的块,left*/ 3、相对布局 #img position:relative; left:20px; /*相对本来的向右移动20像素*/,标签具有类似的用途，主要用于修饰一段文字中的一部分,CSS样式DIV绝对

6、布局,绝对布局 #buttons position: absolute; top: 100px; left: 20px; /*多个相遇时用z-index属性（auto或整数值）来指示层*/ 固定布局 #Qme position:fixed; top:10px; right:10px; /*放在浏览器的指定位置，滚动页面也不会移动*/,CSS样式跨平台,1、利用引用的方法来加载CSS文件，而不是直接内嵌。 media=print media=handheld /*这个不太能凑效*/,常见标签2列表, 项1 项2 项3 项4 first neirong1 sec neirong2 ,无序列表的样式 li list-style-type: disc; /*circle; square; */ list-style-image: url(小图标路径);,常见标签3表格, 表的标题 首行的 内行的 caption-side: bottom; /*标题在上或下*/ colspan:2; rowspan:2; /*分别为扩展列和行*/,XHTML表单, 基本信息 用户名: 密码: 确认密码: 附加信息 性别：男 女 性取向：男 女（可以双选哦） 你的性格: -请选择- 大叔 萝莉 女汉纸 小正太 个性签名： 此人很萌，什么都没