Xhtml+Css学习总结！ 针对新手学习用的
Xhtml+Css——Xhtml的标签
<!DOCTYPEhtml 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 标题 </title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<meta name="keywords" content="" />
<meta name="Description" content="" />
</head>
<body>
</body>
</html>
1.<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
第一行是固定的
2.<html xmlns="http://www.w3.org/1999/xhtml"> </html>
第二行也是固定的。
文档分为两部分都是在html里写
1.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 标题 </title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<head>
是文档的头部分包含title——标题
Link（rel表明连接的文件；type表明文件类型；href指向css连接的文件）
2.
Body是文档的主体部分在浏览器里要显示的内容。
常用的标签：
1.
H1——H5 标题
2.
Span 行内属性 –根据内容改变宽度
3.
Ol 有序列表
Ul 无序列表 他们中一定要有li
4.
Dl定义列表
Dt 定义标题 dd
Dt/dd是并存的 都要在dl下面，一个dt多个dd
5.
P 段落 它能自动换行
6.
Var 特别的意思 （变量）
7.
Em 强调 （语法）*
8.
A 超连接
用法 <a href=”#”title=”…”></a>
<div class="banner_outer">
<div class="banner">
<a href="index.html" class="sp onfocus" title=""><span>首页</span></a>
<a href="choose_bokan.html" title=""><span>为什么选择</span></a>
<a href="lesson_index.html" title=""><span>精品课程</span></a>
<a href="teachers.html" title=""><span>精英师资</span></a>
<a href="item_index.html" title=""><span>实训项目</span></a>
<a href="highsalary.html" title=""><span>高薪就业</span></a>
<a href="co_college.html" title=""><span>合作伙伴</span></a>
<a href="entrance.html" title=""><span>入学指南</span></a>
<a href="enterprise.html" title=""><span>企业服务</span></a>
</div>
<div class="clear"> </div>
</div>
.banner a:link {color:#666;}
.banner a:visited {color:#666;}
.banner a:hover {color:#fff;background:url(../images/ba_bg.gif) right 0 no-repeat;}
.banner a:active {color:#fff;background:url(../images/ba_bg.gif) right 0 no-repeat;}
.banner_outer {background:url(../images/bg_banner.gif) 0 0 repeat-x;}
.banner {width:980px;height:43px;margin:0 auto;}
.banner a {display:block;height:43px;float:left;padding-right:20px;}
.banner a span {height:35px;line-height:35px;padding-bottom:8px;font-size:14px;font-weight:bold;padding-left:20px;display:block;float:left;cursor:pointer;}
.banner a.onfocus {background:url(../images/ba_bg.gif) right 0 no-repeat;}
.banner a.onfocus span {background:url(../images/ba_bg.gif) 0 0 no-repeat;color:#fff;}
.banner a.onfocus1 span {color:#bbb;}
.banner a:hover span {background:url(../images/ba_bg.gif) 0 0 no-repeat;color:#fff;}
.banner a:active span{background:url(../images/ba_bg.gif) 0 0 no-repeat;color:#fff;}
.banner a.sp {padding-right:29px;}
.banner a.sp span {padding-left:32px;}这就是实现效果 因为他们的宽度不是一样的 而且这个小背景并不是一样的
a：link｛｝ 原样
a：visited｛｝访问过
a：active｛｝点击时
a：hover｛｝鼠标放上时
js——实现a的效果
onclick=”window.location.href=’--.html’;”
onclick="window.location.href='online.html';"
9.
Img 照片
用法 <img src=”images/照片.jpg(格式)” alt=“ ”/>
10.
Br
用法 <br/> 单标签
11.
Textare 文本框
用法<textarea></textarea>
12.
Select 选择 —— 下面要一定要有 option ——这是选项
用法 <select><sption></option><option></option></select>
13.
Table 表格
用法
Rowspan 行 colspan 列 两个都是th/td的属性
<table>
<tr>
<th>M</th>
<th colspan="2">M</th>
<th>M</th>
</tr>
<tr>
<td colspan="2">M</td>
<td>M</td>
<td>M</td>
</tr>
<tr>
<td rowspan="2">M</td>
<td>M</td>
<td>M</td>
<td rowspan="2">M</td>
</tr>
<tr>
<td colspan="2">M</td>
</tr>
<tr>
<td>M</td>
<td colspan="3">M</td>
</tr>
<tr>
<td colspan="2" rowspan="2">M</td>
<td>M</td>
<td>M</td>
</tr>
<tr>
<td colspan="2">M</td>
</tr>
</table>
table{border:1px solid purple;margin:60px auto;border-collapse:collapse;}
th{border:1px solid red;text-align:center;}
td{border:1px solid blue;text-align:center;}
List-style-type：none；
Border-collapse:collapse;重叠/ separate;
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
14.
Strong 粗体
用法 <strong></strong>（搜索引擎）
15.
Form 后台用的多 一般都是用在要提交的内容外
<form action="form_action.asp" method="get/post">
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</form>
16.
Input 输入 单项式标签
用法
<input type=”text”/> 文本
<input type=”password” name=”pas”/> 密码
<input type=”button” value=”提交”/> 按钮
<input type=”radio” name=”test1”/> 单选
<input type=”radio” name=”test1”/> 单选
<input type=”radio” name=”test1”/> 单选
<input type=”checkbox” /> 多选
<input type=” checkbox” /> 多选 这个有的浏览器会不一样大小 最好给弄 w：15px; h:15px;
<input type=”submit” value=”提交”/>
行内标签有：span、var、a、img、em、strong、imput是内行属性唯一的一个可以设 w 和 h的
17.
Div *
Xhtml+Css——Css
Css引入方式（4）种
1.
A．rel 表明连接的文件与html 文档之间的关系
B．type 是表明文件类型
C．href 指向连接的css文本
写在head里 link里
2.
在html文档的head部分直接写入css文档
<style type=”text/css”>
Div{margin:0;padding:0;border:1px;}
</style>
3.
直接在html标签里写入对这个标签的css控制
Eg： <div style=”border:1px solid red;”></div>
4.
使用@import引入css文件
有两种情况 a. 在head里使用的时候
<style type=”text/css”>@import url(my.css);</style>
b. 在css文件里使用 (@import本身是一个css命令)
css选择器
类选择器Class—— .test
Id选择器 id——#test
id="eric" .html#eric; 会直接找到要选的内容
id="xuexiao" "entrance.html#xuexiao"
标签名选择器 div h1 span{}
后代选择器 #test .test div span{}
群主选择器 #test,.test,div,span{}
- test
字体设置
Font-famliy：宋体，楷体，sans-serif；
Font-size：12px； 大小
Font-style（样式）：normal；/italic 斜体
Font-weight：normal；bold； 粗细
Text-decoration：none；/underline；下划线
Line-height:12px；行高
Color：red；/#fff；颜色
Text：
Text-indent：12px；首行缩进；
Text-align：left；/right；/center；
Vertical-align：top；/bottom；/middle；
1——背景background
Background：red url（../images/照片.jpg（格式））0（位置x——left、center、right） 0（位置y——top、middle、bottom） no-repeat（重复）；
尺寸 height：12px； width：12px；
2——Border
Border-left（right/top/bottom）：1px solid （实心线） red；
Dotted 虚线
Dashed 线段
3——Margin
Margin-top/right/bottom/left：10px；外补丁
Margin：0 auto；
Paddig- top/right/bottom/left：10px； 内补丁
内容+边框+padding+margin=总宽度
4——Float 浮动
Float：left/right；左/右浮动
Clear｛Clear：both；height：0；overflow：hidden；｝
5——Overflow 超出
Overflow：visible/auto/hidden/scroll
6——Display 显示 设置行内属性/块属性
Display：block；使行内属性变成快属性
Display：none； 隐藏了 看不见了
Display：inline；使快属性变成行内属性
8——visibility （可视）
Visibility：visibile；可见
Visibility：hidden； 隐藏——但地方还空着
9——Cursor
Curor：pointer；
10——position
Position：ralative；相对的/absolute绝对的
Position：absolute；结合z-index：1；
Left：10px；right：10px；top：10px；bottom：10px；
11——透明度
filter:alpha(opacity=80); /* IE */
opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/
-moz-opacity:0.8; /* Moz + FF */ 现在不用了
Xhtml+Css——浏览器的兼容
1.
块属性标签在float后，有横向margin时（ie6）*会比实际要多出几像素来*
解决方法：display:inline;
2.行内属性 display：block；float：left；（浮动后）有横向margin时 *会比实际多几像素*
解决方法 display：block；display：inline；display：table；要按顺序写
3.
行高（内容撑开高度）
解决方法 overflow：hidden；
4.
A中有img（不同浏览器有不同效果有的会出现边框）
解决方法 a img｛border：none；｝
5．
*｛margin：0；padding：0；｝
6.
Img有间距 横向时
解决方法 a.浮动 b.在外加个标签（如span（变成块属性）再设W、H）
7.
上层标签浮动后 要清除浮动
8.
Hacher
让不同浏览器解析不同命令
下划线_IE6
*IE6、IE7、遨游
Eg——.test{height:500px;*height:300px;_height:200px;}
浏览器都是500px、而又让IE6、IE7、遨游都是300px、最后只有IE6为200px；
在做一个页面之前首先要先把这个页面分个大 局然后再去实现
Xhtml+Css就是手写代码用起来真的很好这就是我的这段时间Xhtml+Css的总结有很多不足的地方还请指点
在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。
<a href="#" onfocus="this.blur();">测试</a>
这里设置聚焦时触发blur();强制取消焦点。
这个我以前放在别的博客里 又拿过来了 呵呵