html+css笔记总结 .
完整的HTML结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
<head>
<title> </title>
<style type="text/css">
body {background:black; text-spacing:0.5em}
.div_css1 {align="center" margin:20px}
.p_css1 {color:red; font:(Style)itlic||oblique (variant)small-caps||none (weight)800(400=norml 700=bold) (size)4em (family)“宋体”||Times New Norman}
</style>
<div class="">
(if ues:
#div_css {}
<div id="">
(or ues:
div.p {}
div p {}
<link rel="stylesheet" type="text/css" href="xx.css">
a {}
a:link {}
a:visited{}
a:hover{}
a:action{}
<object type="application/x-shockwave-flash" date="///" width="" height="" id="">
<param name="movie" value="///"/>
<param name="allowscriptAcess" value="sameDomain"/>
<param name="quality" value="best"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="scale" value="noScale"/>
<param name="salign" calue="TL"/>
<param name="FlashVars" value="playerMode=embedded"/>
</object>
<object type="video/x-ms-wmv" date="////xx" width="" height="">
<param name="src" value="////xx"/>
<param name="autostart" value="true"/>
<param name="controller" value="true"/>
</object>
<iframe
src="xx"
width=""
height=""
scrolling="auto"
frameborder="o"
name="xx">
</iframe>
<form action="#" name="" id="" method="post"> </form>
账号<input type="text" name="" id="" maxlenth=""/>
密码<input type="password" name="" id="" maxlenth=""/>
<input type="submit" name="" id="" value="确认"></input>
<input type="radio" name="" id="" value="xx">xx</input>
<input type="radio" name="" id="" value="xx">xx</input>
<input type="checkbox" name="" id="" vslue="xx">xx</input>
<input type="checkbox" name="" id="" vslue="xx">xx</input>
<input type="checkbox" name="" id="" vslue="xx">xx</input>
<select name="" id="">
<option vslue="xx">xx</option>
<option vslue="xx">xx</option>
<option vslue="xx">xx</option>
</select>
<select name="" id="" size="个数">
<option value="">xx</optin>
.......
......
</select>
<fieldset>
<legend>xx</legend>
</fieldset>
<maquee direction="up || left" scrollamount="0-x" onmouseover="stop()" onmouseout="start()">
xxxxxxxxxxxxxxxxxxxxxxxx
</marquee>
<table>
<tr>
<td>xx</td>
</tr>
<tr>
<td colspan="num">xx</td>
<td rowspan="num">xx</td>
</tr>
</table>
设置元素内容的文本属性
(1)举例设置文本首行缩进
(2)举例设置文本对齐方式
(3)举例设置文本修饰方式
(4)举例设置字间距
(5)举例设置词间距
(6)举例空白显示形式 P56
外边距margin:围绕在元素边框之外的可选区域。
内边距padding:文本内容到边框之间的可选区域
浮动:
float
有2个方向: left
对于文字浮动,必须设置高度,宽度,如果不设,后后果自负。
例
<img style="float:right" src="..."/>
清除浮动:
clear:none;
clear:left;
clear:right; //不允许右边有浮动元素
clear:both;
分类:
static(静止)此为默认,即按照正常的文本流,占用正常的位置。
fixed(固定的) 相对于浏览器窗口定位(保留原位置)
position:absolute;
绝对定位:相对于父级元素(被包含容器)。
position:relative;
相对定位:相对于没有设置position时的正常位置定位
原始空间会保留下来。(意思就是说按static的位置算的地方不会出现另外的标签。如DIV,IMG等等。)
例子:
<head>
<style type="text/css">
.div_1 {width:150px;height:200px;}
.text1 {width:200px;height:100px;left:160px;}
</style>
</head>
<body>
<div>
<div class="div_1" style="position:absolute;">
哈,我是一个帅哥
</div>
<div class="text1" style="position:absolute;">
是不是哦,我晕你
</div>
<div style="position:relative;left:10px;top:15px;">
我看看行不行。</div>
</div>
</body>
position:absolute;
clip:rect(top right bottom left);
top:从上到下裁去top的长度。
left:从左到右裁去left的长度。
right:从左到右裁出right的长度。
bottom:从上到下裁出bottom的长度
将块级元素转化为字符级元素
display:inline;
将字符级元素转化为块级元素
display:block;
position:absolute;(必须为absolute)
overflow:visible;
overflow:hidden;
overflow:scroll;
有 margin padding border width
简写时安上右下左顺序来写
如:border-width:1em 2em 2em 2em
注意:上下左右这几个属性:
在设置时如果只出现3个值,则代表上 左右 下
<embed src="1.swf" width=300 height=200></embed>
<embed src="1.mp3" width=300 height=200></embed>
<embed src="1.wmv" width=300 height=200></embed>