XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。
H1…..h6 , ul ol dl , caption thead tbody tfoot; p
ol 有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:
1……
2……
3……
Ul 无序列表。
<ul>
<li>……</li>
<li>……</li>
</ul>
表现为li前面是大圆点而不是123
dl内容块
dt内容块的标题
dd内容
可以这么写:
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
dt 和dd中可以再加入ol ul li和p
理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。
1、行间样式表
Style=“属性:属性值”
2、内部样式表
<style type=“text/css”>
选择符{属性:属性值}
</style>
3、外部样式表
<link rel=“stylesheet” type=“text/css” href=“文件名/style.css” />
color:#ff0000; // 指定颜色
font-family:微软雅黑,黑体,宋体; //字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格,则应使用引号括起
font-size:9pt; //设置或检索对象中的字体尺寸。
font-weight:bold; //设置或检索对象中的文本字体的粗细。
text-decoration:underline ; //检索或设置对象中的文本的装饰,比如下划线等。
line-height:50px; //检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。
text-indent:24px; //检索或设置对象中的文本的缩进。默认值为 0 。
text-align:left; // 设置或检索对象中文本的对齐方式。
word-break : break-all; //设置或检索对象内文本的字内换行行为。
background: url("images/aardvark.gif") repeat-y; //背景图片
background: #000000; //背景颜色
width:250px; //检索或设置对象的宽度
height:300px; //检索或设置对象的高度
clear : both; //该属性的值指出了不允许有浮动对象的边
float:left; //该属性的值指出了对象是否及如何浮动。
margin:0; //检索或设置对象四边的外补丁
border:1px solid #ff0000; //设置对象的边框样式
padding:0; // 检索或设置对象四边的内补丁。
cursor: pointer; //设置或检索在对象上移动的鼠标指针采用的光标形状
DIV的作用是为网络文档中的结构区域分组--------如汇总所有的初级内容,然后是二级内容。而span则是用来分开一个父元素之中的行内内容
<span> 的 display 是 inline,是个行级元素
<div> 的display 是 block,是个块级元素
<span> 像文字一样,几个连续的<span>会显示在一行,满了会自动换行
类型选择器(元素或简单选择器)和后代选择器
类型选择器: p{color:red;} a{color:red;} h1{color:red;}
后代选择器:(用来寻找特定元素的后代)比如:li a{text-decoration:none;}
ID 选择器(#表示)类选择器(.表示)
组合选择器:
a:link a:visited a:hover a:active;
<必须按顺序>标准的
a:link {color: #FF0000} /* 未被访问的链接红色 */
a:visited {color: #00FF00} /* 已被访问过的链接绿色 */
a:hover {color: #FFCC00} /* 鼠标悬浮在上的链接橙色 */
a:active {color: #0000FF} /* 鼠标点中激活链接蓝色 */
这样可以避免一些访问过后的超链接就不具备hover和active样式了
<有一个要注意的地方,就是,如果你刚开始不是按这个顺序来做,后来,改正以后,可能当时出不来效果,解决方法是,清理一下缓存,因为缓存的原故,所以,才会出现这种现象.>
*{ padding:0;margin:0;}
10 继承
p,div ,li{color:red} 可以写成 body{color:red;}
/* */
12、vertical-align:middle;
这个元素我们曾经在table中用的比较多就是可以使一行文字进行垂直方向的居中,但是在div 中我们使用这个来使层中的元素垂直方向居中,却起不了作用,在层中我们使用另外一种的方法。
{
Line-height:20px;
Height:20px;
}
在层中我们把层的高度和行高设置为一个值,那么层中的元素就会垂直居中。