CSS 对齐
CSS 尺寸
CSS 分类
CSS 导航栏
CSS 图片库
CSS 图片透明
CSS 媒介类型
CSS 注意事项
CSS 总结

CSS对齐

使用margin属性水平对齐

可通过将左和右外边距设置为 "auto"，来对齐块元素。
把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素：

.center
{
    margin-left:auto;
    margin-right:auto;
    width:70%;
    background-color:#b0e0e6;
}

使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位：

右对齐
.right
{
    position:absolute;
    right:0px;
    width:300px;
    background-color:#b0e0e6;
}

使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性：

实例

.right
{
    float:right;
    width:300px;
    background-color:#b0e0e6;
}

CSS尺寸

CSS 尺寸属性
CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

CSS 分类

改变光标

    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>

CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

CSS 导航条

制作水平或竖直导航条

CSS 图片库

CSS 图片透明

定义透明效果的 CSS3 属性是 opacity。

img
{
    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}


img
{
    opacity:0.4;
    filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}
img:hover
{
    opacity:1.0;
    filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}

CSS媒介类型

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

@media规则

@media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

<style>
@media screen
{
    p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
    p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
    p.test {font-weight:bold}
}
</style>

不同的媒介类型

注释：媒介类型名称对大小写不敏感。