CSS基础

摘要: css基础使用，选择器、常用属性使用等

XHTML

XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

XHTML的元素

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提供了很多元素辅助布局。

css的调用方式

1、行间样式表
Style=“属性：属性值”
2、内部样式表
<style type=“text/css”>
选择符{属性：属性值}
</style>
3、外部样式表
<link rel=“stylesheet” type=“text/css” href=“文件名/style.css” />


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; //设置或检索在对象上移动的鼠标指针采用的光标形状

ID CLASS 和类名

class 和 ID 的区别

类名尽量有

div和span

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;
}
在层中我们把层的高度和行高设置为一个值，那么层中的元素就会垂直居中。