CSS高级教程

最新推荐文章于 2024-08-13 11:47:22 发布

曲线人

最新推荐文章于 2024-08-13 11:47:22 发布

阅读量405

点赞数

分类专栏：前端开发文章标签：前端开发 WEB前端开发规范文档 css

本文链接：https://blog.csdn.net/qq_27596047/article/details/62886982

版权

前端开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

CSS 定位 (Positioning)实例：

定位：相对定位

本例演示如何相对于其正常位置来定位元素。

<html>
<head>
<style type="text/css">
h2.pos_left{
	position:relative;
	left:-20px
}
h2.pos_right{
	position:relative;
	left:20px
}
</style>
</head>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved left to its normal position</h2>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>

定位：绝对定位

本例演示如何使用绝对值来定位元素。

<html>
<head>
<style type="text/css">
h2.pos_abs{
	position:absolute;
	left:100px;
	top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>

设置元素的形状

本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。

<html>
<head>
<style type="text/css">
img {
	position:absolute;
	clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>
</html>

溢出

本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。

<html>
<head>
<style type="text/css">
div {
	background-color:#00FFFF;
	width:150px;
	height:150px;
	overflow: scroll
}
</style>
</head>
<body>
<p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p>
<div>
You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.
</div>
</body>
</html>

垂直排列图象

本例演示如何在文本中垂直排列图象。

<html>
<head>
<style type="text/css">
	img.top {vertical-align:text-top}
	img.bottom {vertical-align:text-bottom}
</style>
</head>
<body>
<p>This is an <img class="top" border="0" src="/i/example_moving.gif" />image inside a paragraph.</p> 
<p>This is an <img class="bottom" border="0" src="/i/example_moving.gif" />image inside a paragraph.</p>
</body>
</html>

Z-index

Z-index可被用于将在一个元素放置于另一元素之后。

<html>
<head>
<style type="text/css">
img.x{
	position:absolute;
	left:0px;
	top:0px;
	z-index:-1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180"> 
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
</body>
</html>

Z-index

上面的例子中的元素已经更改了Z-index。

<html>
<head>
<style type="text/css">
img.x{
	position:absolute;
	left:0px;
	top:0px;
	z-index:1
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<img class="x" src="bulbon.gif" width="100" height="180"> 
<p>Default z-index is 0. Z-index 1 has higher priority.</p>
</body>
</html>

Style属性：

可以应用在标签中，更可用广泛应用在<table><tr><td><body>

<center><img><input><font><form><frame><label><map>等等标签中，

更重要的是，它可用在标签中。

页面切换效果：

在页面前部与之间加入""

说明：duration为页面切换的时间长度，3.000表示3秒钟，一般可以直接输

入3便可；transition为切换效果，从1-23共22种不同的切换效果，其中23

为随机效果。

滤镜效果：

Photoshop的滤镜用的多了吧，在页面中也用滤镜搞搞新意思吧！

语法:STYLE="filter:filtername(fparameter1,fparameter2...)}

(Filtername为滤镜的名称，fparameter1、fparameter2等是滤镜的参数)

滤镜说明：

Alpha：设置透明层次.

blur：创建高速度移动效果，即模糊效果.

Chroma：制作专用颜色透明.

DropShadow：创建对象的固定影子.

FlipH：创建水平镜像图片.

FlipV：创建垂直镜像图片.

glow：加光辉在附近对象的边外.

gray：把图片灰度化.

invert：反色.

light：创建光源在对象上.

mask：创建透明掩膜在对象上.

shadow：创建偏移固定影子.

wave：波纹效果.

Xray：使对象变的像被x光照射一样.

1.滤镜:alpha

语法:

STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,

StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"

说明：

Opacity:起始值，取值为0-100,0为透明，100为原图.

FinishOpacity:目标值.

Style：1或2或3

StartX：任意值

StartY：任意值

例子：filter:Alpha(Opacity="0",FinishOpacity="40",Style="2")

2.滤镜:blur

语法:

STYLE="filter:Blur(Add=add,Direction=direction,

Strength=strength)"

说明：

Add:一般为1，或0.

Direction:角度,0-315度，步长为45度.

Strength:效果增长的数值,一般5即可.

例子：filter:Blur(Add="1",Direction="45",Strength="5")

3.滤镜:chroma

语法:

STYLE="filter:Chroma(Color=color)"

说明:

color:#rrggbb格式，任意.

例子：filter:Chroma(Color="#FFFFFF")

4.滤镜:DropShadow

语法:

STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)"

说明:

Color:#rrggbb格式，任意.

Offx:X轴偏离值.

Offy:Y轴偏离值.

Positive:1或0.

例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",

Positive="1")

5.滤镜:FlipH

语法:

STYLE="filter:FlipH"

例子：filter:FlipH

6.滤镜:FlipV

语法:

STYLE="filter:FlipV"

例子：filter:FlipV

7.滤镜:Glow

语法:

STYLE="filter:Glow(Color=color,Strength=strength)"

说明:

Color:发光颜色.

Strength:强度(0-100)

例子：filter:Glow(Color="#6699CC",Strength="5")

8滤镜:Gray

语法:

STYLE="filter:Gray"

例子：filter:Gray

9.滤镜:Invert

语法:

STYLE="filter:Invert"

例子：filter:Invert

10.滤镜:Mask

语法:

STYLE="filter:Mask(Color=color)"

例子：filter:Mask(Color="#FFFFE0")

11.滤镜:Shadow

语法:

filter:Shadow(Color=color,Direction=direction)

说明:

Color:#rrggbb格式.

Direction:角度,0-315度，步长为45度.

例子：filter:Shadow(Color="#6699CC",Direction="135")

12.滤镜:Wave

语法:

filter:Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,

Strength=strength)

说明:

Add:一般为1，或0.

Freq:变形值.

LightStrength:变形百分比.

Phase:角度变形百分比.

Strength:变形强度.

例子:filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")

13.滤镜:Xray

语法:

STYLE="filter:Xray"

例子:filter:Xray

设置元素的形状本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
The clip property is here cutting an image:

溢出本例演示当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
The overflow property decides what to do if the content inside an element exceeds the given width and height properties.

You can use the overflow property when you want to have better control of the layout. Try to change the overflow property to: visible, hidden, auto, or inherit and see what happens. The default value is visible.

垂直排列图象本例演示如何在文本中垂直排列图象。
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
This is an image inside a paragraph.

This is an image inside a paragraph.

Z-index Z-index可被用于将在一个元素放置于另一元素之后。
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
This is a Heading

Default z-index is 0. Z-index -1 has lower priority.

Z-index 上面的例子中的元素已经更改了Z-index。
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:1
}
This is a Heading

Default z-index is 0. Z-index 1 has higher priority.

Style属性：可以应用在标签中，更可用广泛应用在