peratusan set css

CSS ialah bahasa helaian gaya yang digunakan untuk reka bentuk web, di mana peratusan tetapan memainkan peranan khas dalam reka bentuk web. Dengan menetapkan peratusan, kami boleh mengawal saiz, kedudukan, warna, latar belakang, dsb. elemen dengan lebih tepat, menjadikan halaman web kelihatan lebih cantik dan profesional. Artikel ini akan memberi anda pengenalan terperinci tentang cara menetapkan peratusan dalam CSS.

1. Tetapkan peratusan saiz elemen

Dalam CSS, kita boleh menetapkan peratusan lebar dan tinggi elemen. Ini berguna untuk membuat laman web dengan reka bentuk responsif.

Sebagai contoh, kita boleh mencipta bekas yang mengandungi kandungan utama halaman web. Kami menggunakan peratusan untuk menetapkan lebar dan ketinggian bekas supaya ia secara automatik mengubah saiz berdasarkan saiz skrin pengguna. Contohnya:

.container {
  width: 80%;
  height: 50%;
}

Dalam contoh ini, lebar dan tinggi bekas ditetapkan kepada peratusan, masing-masing 80% dan 50%. Ini bermakna tanpa mengira saiz skrin pengguna, bekas itu akan mengubah saiz secara automatik dan dipaparkan dengan baik pada mana-mana peranti.

2. Tetapkan peratusan kedudukan elemen

Dengan menggunakan peratusan, kita juga boleh menetapkan kedudukan elemen berbanding bekasnya. Ini berguna untuk mereka bentuk tapak web berpusat atau adaptif. Contohnya:

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Dalam contoh ini, kami menggunakan peratusan untuk menetapkan kedudukan elemen supaya ia kelihatan berpusat dalam bekasnya. Mula-mula kita meletakkan elemen secara mutlak menggunakan position:absolute, kemudian memusatkan kedudukannya berbanding bekasnya menggunakan top:50% dan left:50%. Akhir sekali, kami menggunakan transform:translate(-50%,-50%) untuk memperhalusi kedudukan elemen supaya ia berpusat.

3. Tetapkan peratusan warna dan latar belakang

Anda juga boleh menggunakan peratusan untuk menetapkan warna dan latar belakang. Contohnya:

h1 {
  color: rgba(100%,0%,0%,0.5);
  background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}

Dalam contoh ini, kami menggunakan peratusan untuk menetapkan ketelusan teks dan latar belakang. Khususnya, kami menetapkan warna teks kepada merah dan ketelusannya kepada 50%. Untuk latar belakang, gunakan linear-gradient untuk menetapkan latar belakang kecerunan merah dan kecerunan ketelusan daripada 60% kepada 0%. Dengan cara ini, kita boleh mencipta teks separa lutsinar dan kesan latar belakang.

Ringkasan

Artikel ini memperkenalkan cara menggunakan peratusan dalam CSS untuk menetapkan saiz, kedudukan, warna dan latar belakang elemen. Peratusan berguna untuk mereka bentuk tapak web responsif dan mencapai kesan reka bentuk seperti pemusatan. Sama ada anda seorang pemula atau pembangun berpengalaman, anda boleh mencipta reka bentuk web yang mengagumkan dengan menggunakan peratusan dalam CSS.

Atas ialah kandungan terperinci peratusan set css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!