|
XHTML与HTML的重要区别 XHTML中 1、标记名称必须小写 2、属性名称必须小写 3、标记必须严格嵌套 4、标记必须封闭 5、即使是空元素的标记也必须封闭 6、属性值用双引号括起来 7、必须使用完整形式 8、应该区分“内容标记”与“结构标记 在HTML中引入CSS的方法 行内式 <h1 style="color:red;"></h1> 内嵌式 <style type="text/css"> h1{ color:red; } </style> 导入式 （页面加载完后再装入css） <style type="text/css"> @import"mystyle.css"; </style> 链接式 (在正式加载网页主体之前就加入css) <link href="mystyle.css" rel="stylesheet" type="text/css"> 基本css选择器 标记选择器 h1{color:red;font-size:25px;} 类别选择器 id选择器 （唯一特性） #red{font-size:25px;} class选择器 .test{color:red;} 复合选择器 “交集”选择器 div.special{color:red;} "并集”选择器 div,h1,p,first{color:red;} 后代选择器 div h1.first span.firstletter{color:red;} css的继承特性 css的层叠特性 行内样式>id样式>类别样式>标记样式 属性值的简写形式 padding:20px 20px 10px /*上 左右 下*/ margin:10px 20px (margin-top:10px,margin-right:20px,margin-bottom10px,margin-left:20px) 盒子模型 margin 外边距 border 边框 dotted: 定义一个点线边框 dashed: 定义一个虚线边框 solid: 定义实线边框 double: 定义两个边框。 两个边框的宽度和 border-width 的值相同 groove: 定义3D沟槽边框。效果取决于边框的颜色值 ridge: 定义3D脊边框。效果取决于边框的颜色值 inset:定义一个3D的嵌入边框。效果取决于边框的颜色值 outset: 定义一个3D突出边框。 效果取决于边框的颜色值 border-style:hidden 隐藏边框 padding 内边距 盒子在标准流中的定位原则 两行内元素之间的水平margin 距离是相加的 两块级元素之间的竖直margin 距离是取较大值 嵌套盒子之间的margin 外盒子没设高度：外盒子会按照能容纳内盒的最小高度显示 外盒子高定高度不能容纳内盒子时：外盒子按设定高度显示内盒子溢出；但ie6中外盒子高度改变以自动适应内盒子高度 盒子的浮动 float：left/right 脱离文本流，框架被占据，内容保留原位置,对文本流内容产生影响 清除浮动 clear:left/right/both 清除浮动对其的影响：即如当clear:left时为设有float:leftr的元素整行空间文本流被清除 盒子的定位pssition static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局 relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它 absolute:绝对定位，盒子的位置以它的包含框（看祖先元素哪个设有定位属性就，没有就以浏览窗口右上角）为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样 fixed:称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进定位。ie6不支持 display:block块/inline行内/none隐藏 字体设置 1em=16px font-family:Arial//多种字体逗号分隔 line--height:1.5 //行高不带单位表示默认字体的倍数,设置单位会影响子级 text-align:center//文字居中 css图像样式 <img srg="test.gif"/> 背景图片 background-image:url(bg.gif) no-repeat bottom right background-repeat:repeat-x/y 链接与导航 a:link 正常样式 a:visited 被点击过样式 a:hover 鼠标经过时样式 a:active 被点击时的样式 text-decoration:none text-decoration:underline ul list-style-type:none //不显示项目符号 margin:0;padding:0 //不同浏览器不同默认值 li a display:block //转为块 height:1em //ie6中不设置不话鼠标中会经过文字才激活菜单项 |
|
|
