CSS高级

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 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS 分类

改变光标

    <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：p>
<span style="cursor:auto">
Autospan><br />
<span style="cursor:crosshair">
Crosshairspan><br />
<span style="cursor:default">
Defaultspan><br />
<span style="cursor:pointer">
Pointerspan><br />
<span style="cursor:move">
Movespan><br />
<span style="cursor:e-resize">
e-resizespan><br />
<span style="cursor:ne-resize">
ne-resizespan><br />
<span style="cursor:nw-resize">
nw-resizespan><br />
<span style="cursor:n-resize">
n-resizespan><br />
<span style="cursor:se-resize">
se-resizespan><br />
<span style="cursor:sw-resize">
sw-resizespan><br />
<span style="cursor:s-resize">
s-resizespan><br />
<span style="cursor:w-resize">
w-resizespan><br />
<span style="cursor:text">
textspan><br />
<span style="cursor:wait">
waitspan><br />
<span style="cursor:help">
helpspan>

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

属性	描述
clear	设置一个元素的侧面是否允许其他的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

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 被设置为粗体，不论显示器还是纸媒介：

不同的媒介类型

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

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。