Pengaturan Posisi DHTML (CSS-P)

CSS digunakan untuk menambah gaya kepada elemen HTML.

Contoh

注释：Sebagian besar contoh DHTML memerlukan IE 4.0+, Netscape 7+ atau Opera 7+!

position:relative
Bagaimana untuk menempatkan elemen ini berdasarkan posisi normalnya?
position:relative
Bagaimana untuk menempatkan semua tajuk berdasarkan posisi normalnya?
position:absolute
Bagaimana untuk menentukan elemen menggunakan nilai absolut?

Anda boleh mencari lebih banyak contoh di bawah halaman.

Manakah properti yang boleh digunakan bersamaan dengan CSS-P?

Pertama, elemen ini mesti ditentukan properti position (relative atau absolute).

Lalu, saya boleh tetapkan properti CSS-P berikut:

  • left - Tempat kiri elemen
  • top - Tempat atas elemen
  • visibility - Tentukan sama ada elemen seharusnya terlihat atau tersembunyi
  • z-index - Susunan lapisan elemen
  • clip - Potong elemen
  • overflow - Bagaimana menangani kandungan yang keluar

Position

Properti position dalam CSS membolehkan anda mengawasi letak elemen dalam dokumen.

position:relative

Properti position:relative dapat meletakkan elemen ini berdasarkan posisi saat ini elemen itu.

Contoh di bawah ini mengletakkan elemen div ini ke tempat 10 piksel kanan dari posisi normalnya:

div
{
position:relative;
left:10;
}

position:absolute

Properti position:absolute mengletakkan satu elemen berdasarkan margin jarak kepada tingkap.

Contoh di bawah ini mengletakkan elemen div ini ke tempat 10 piksel kanan dari margin kiri blok yang memuatnya:

div
{
position:absolute;
left:10;
}

Visibility

Properti visibility akan menentukan sama ada elemen dapat dilihat atau tidak.

visibility:visible

Properti visibility:visible akan membuat elemen terlihat.

h1
{
visibility:visible;
}

visibility:hidden

Properti visibility:hidden akan membuat elemen tidak terlihat.

h1
{
visibility:hidden;
}

Z-index

Properti z-index digunakan untuk meletakkan satu elemen di belakang elemen lain. Nilai baku z-index adalah 0. Nilai yang lebih tinggi, keutamaannya juga lebih tinggi. z-index: -1 adalah keutamaan yang lebih rendah.

h1
{
z-index:1;
}
h2
{
z-index:2;
}

Dalam contoh di atas, jika h1 dan h2 saling lapis, elemen h2 akan berada di atas h1.

Filter

Properti filter membolehkan anda menambahkan lebih banyak kesan gaya kepada teks dan imej.

h1
{
width:100%;
filter:glow;
}

注释：若需要使用 filter 属性，请始终指定元素的宽度。

上面的例子产生下面的输出：

Header

不同的滤镜

注释：除非 background-color 属性被设置为 transparent，否则某些 Filter 属性将无法工作！

属性 参数 描述 例子
alpha
  • opacity
  • finishopacity
  • style
  • startx
  • starty
  • finishx
  • finishy
 允许您设置元素的透明度 
filter:alpha(
opacity=20,
finishopacity=100,
style=1,
startx=0, 
starty=0,
finishx=140,
finishy=270)
blur
  • add
  • direction
  • strength
 使元素模糊 
filter:blur(
add=true,
direction=90,
strength=6);
chroma color 使指定的颜色透明 
filter:chroma(
color=#ff0000)
fliph none 水平反转元素 filter:fliph;
flipv none 垂直反转元素 filter:flipv;
glow
  • color
  • strength
 使元素发光 
filter:glow(
color=#ff0000,
strength=5);
gray none 用黑白色来呈现元素 filter:gray;
invert none 用反转的颜色和亮度值来呈现元素 filter:invert;
mask color 呈现带有指定背景色和透明前景色的元素 
filter:mask(
color=#ff0000);
shadow
  • color
  • direction
 呈现带有阴影的元素 
filter:shadow
(color=#ff0000,
direction=90);
dropshadow
  • color
  • offx
  • offy
  • positive
 呈现带有阴影的元素 
filter:dropshadow
(color=#ff0000,
offx=5,
offy=5,
positive=true);
wave
  • add
  • freq
  • lightstrength
  • phase
  • strength
 把元素呈现为波浪状 
filter:wave(
add=true,
freq=1,
lightstrength=3,
phase=0,
strength=5)
xray none Tunjukkan elemen dengan warna yang berbalikan dan nilai kecerahan dengan warna hitam dan putih. filter:xray;

Background

Properti background membenarkan anda memilih latar belakang sendiri.

background-attachment:scroll

Latar belakang akan berputar bersama halaman.

background-attachment:fixed

Latar belakang tidak akan berputar bersama halaman.

Contoh Lebih Banyak

Visibility
Bagaimana cara untuk membuat elemen tak tampak. Adakah anda mahu elemen ini dipaparkan atau tak dipaparkan?
Z-index
Z-index boleh digunakan untuk meletakkan satu elemen di belakang elemen lain, melalui urutan Z-index.
Z-index
Lihat, urutan Z-index elemen sudah diubah.
Cursors
Ubah gaya penuding tetikus dengan CSS.
Filter
Gunakan properti filter untuk mengubah gaya judul.
Filter di Imej
Properti filter juga boleh digunakan untuk imej, di sini ada beberapa contoh imej yang telah digunakan properti filter.
Watermark
Gambar latar belakang yang tidak bergerak ketika halaman berputar.