层叠样式表-css

来源：互联网发布：约会吧软件编辑：程序博客网时间：2024/05/22 16:05

CSS的三种定义方法：

内联定义
内部样式表
链入外部样式表文件

内联定义：

内联定义既是通过标记的style属性定义使用该标记的样式属性。

在页面内定义内部样式块对象：

<head>

body{font:9pt"宋体"}

table{

font:9pt "宋体"

border-collapse:cpllapse;

}

</style>

</head>

链入外部样式表文件：

建立单独的css文件，将css文件引入到页面中

注意：

如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方以最后定义的为准。

选择符的种类：

标记类型选择符：body,div 可以对页面的body部分添加样式。

包含关系选择符：table tr 可以对页面的table下的tr添加样式

ID选择符：#ID 可以对指定ID的元素添加样式

类选择符：.classname 标记中右class属性为classname的标记或块添加样式

分组选择符：有时候我们需要给几个块添加相同的样式就可以使用p,table 给它们添加相同的样式

a锚的伪类;

我们最常用的是4种a（锚）元素的伪类，它表示动态链接在4种不同的状态：link、visited、active、hover（未访问的链接、已访问的链接、激活链接和鼠标停留在链接上）。我们把它们分别定义不同的效果：
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

文档流：

普通文档流:普通文档流的名字起得有些正统，实际上却很好理解.我们打开网页时，都是上方的部分首先显示出来，然后是中间部分，最后才是底部，直到显示完成.这样的顺序体现在HTML代码中就是先写的标签先显示，后写的标签后写显示.整个过程好像瀑布的水从上流到下.
特殊文档流:指那些在页面载入浏览器的时候，不按照前面所讲述的顺序，脱离普通文档流而单独显示的标签。如同：瀑布倾泻而下的时候，部分水流碰到了岩石，导致下落方向与瀑布主体不同，它们就可以叫做“特殊文档流”。
普通文档流对应成网页的主流，而特殊文档流则是网页的支流，主流和支流完全独立。浏览器在显示一个网页的时候，总是先显示主流，再显示支流。

定位：

定位技术是CSS的关键技术，本节介绍定位的基本概念和实现手法
静态定位(static)：普通文档流中的内容基本都是静态定位，按照在HTML代码中书写的先后顺序进行位置的安排，先到先得。
绝对定位(absolute)：根据标签处于网页的绝对位置来定位。应用绝对定位的标签在显示时完全脱离普通文档流，属于特殊文档流。
相对定位(relative)：根据标签相对于父标签的位置来定位。相对定位介于静态定位和绝对定位之间，它在普通文档流中确认位置信息，显示的时候脱离普通文档流，进入特殊文档流，在这一点上类似Float标签。
固定定位(fixed)：固定定位则根据浏览器视窗的位置来确定显示位置，无论网页如何滚动，浏览器窗口尺寸如何变化，固定定位标签在浏览器视窗中的位置不变。

滤镜属性：

Opacity：代表透明度水准，默认的范围是从0-100,其实是百分比的形式；也就是说0代表完全透明，100代表完全不透明。
Finishopacity:是一个可选参数，如果想要设置渐变的透明效果，就可以使用它们来指定结束时的透明度，范围也是0-100。
Style:参数指定了透明区域的形状特征；其中1代表线形，2代表放射状，3代表长方形

startx:代表渐变透明效果的起始x坐标。
starty:代表渐变透明效果的起始y坐标。
finishx:代表渐变透明效果的结束x坐标。
finishy:代表渐变透明效果的结束y坐标。

网页中常用的把广告或者消息框固定在右下角的方法;

width: 100px;
height: 100px;
border: 1px gray solid;
position: absolute;
right: 0px;
bottom: 0px;
color: Red;