Bagaimana untuk menetapkan gaya imej dengan css

CSS (Cascading Style Sheets) ialah bahasa helaian gaya yang digunakan untuk menerangkan penampilan dan pemformatan halaman web. CSS boleh menetapkan pelbagai gaya untuk elemen dalam halaman web melalui helaian gaya, termasuk imej. Dalam artikel ini, kita akan belajar cara menggayakan imej menggunakan CSS.

1. Tambahkan imej

Sebelum mempelajari cara menetapkan gaya imej, anda perlu memahami cara menambah imej pada halaman web terlebih dahulu. Cara paling mudah untuk menambah imej pada halaman web adalah dengan menggunakan tag img HTML. Menggunakan teg img, anda boleh menentukan URL (alamat web) imej:

Di mana, "src Atribut "(sumber) menentukan URL imej. URL relatif atau mutlak boleh digunakan. Jika imej berada dalam direktori yang sama, anda boleh menggunakan URL relatif:

Ini akan menentukan imej bernama "image.jpg " Fail terletak dalam direktori yang sama. Jika fail imej berada dalam direktori yang berbeza, anda boleh menggunakan laluan relatif seperti ini:

di sini Dalam contoh , ".." bermaksud untuk kembali ke direktori atas, kemudian pergi ke direktori "imej" dan cari fail bernama "image.jpg".

2. Tetapkan saiz imej

Menetapkan saiz imej ialah salah satu gaya yang paling biasa digunakan dalam CSS. Saiz imej boleh ditentukan menggunakan sifat "lebar" dan "tinggi". Sifat ini menerima piksel (px), peratusan dan unit panjang lain sebagai nilai.

Sebagai contoh, untuk menetapkan saiz imej kepada 200 piksel lebar dan 100 piksel tinggi, anda boleh menggunakan CSS berikut:

img {
lebar: 200px;
tinggi: 100px;
}

Ia juga mungkin untuk menetapkan sifat lebar atau ketinggian sebagai peratusan. Sebagai contoh, jika anda ingin menetapkan saiz imej kepada 50% daripada elemen yang mengandunginya, anda boleh menggunakan CSS berikut:

img {
lebar: 50%;
tinggi: 50 %;
}

Anda boleh menetapkan lebar imej dengan menggunakan atribut "lebar" tunggal dan mengira ketinggian secara automatik untuk mengekalkan nisbah bidang. Contohnya, CSS berikut menetapkan lebar imej kepada 300 piksel:

img {
lebar: 300px;
}

3. Penjajaran dan Terapung

Juga Kedudukan dan penjajaran imej boleh ditetapkan menggunakan CSS. Anda boleh mengawal ruang putih di sekeliling imej menggunakan sifat "margin" dan "padding".

Sebagai contoh, CSS berikut menjajarkan imej ke kiri dan menambah 10 piksel margin ke kiri dan di atas imej:

img {
paparan: blok;
terapung: kiri ;
jidar: 10px 0 0 10px;
}

Dalam contoh ini, atribut "paparan" menetapkan imej kepada elemen peringkat blok supaya ia dipaparkan di bawah kandungan lain. Atribut "terapung" dan nilai "kiri" mengapungkan imej ke kiri. Akhir sekali, nilai atribut "margin" adalah atas, kanan, bawah dan kiri mengikut tertib, menentukan margin atas dan kiri sebanyak 10 piksel.

Anda juga boleh menjajarkan imej menggunakan atribut "text-align". Sebagai contoh, CSS berikut menjajarkan imej ke tengah:

img {
paparan: blok;
margin: 0 auto;
text-align: center;
}

Dalam contoh ini, nilai atribut "margin" ialah "0 auto", yang bermaksud memusatkan imej secara mendatar. Akhir sekali, sifat "text-align" ditetapkan kepada "center" untuk memusatkan imej secara menegak.

4. Bucu bulat dan sempadan

Satu lagi gaya imej biasa ialah bucu bulat dan sempadan. Anda boleh menetapkan jejari sudut sempadan menggunakan sifat "jejari sempadan". Contohnya, CSS berikut menetapkan imej supaya mempunyai sempadan bulat 50 piksel:

img {
jejari sempadan: 50px;
}

Anda juga boleh menggunakan atribut "sempadan" Tetapkan lebar, gaya dan warna sempadan imej. Sebagai contoh, CSS berikut menetapkan imej kepada 3 piksel lebar dengan sempadan hitam:

img {
sempadan: 3px hitam pepejal;
}

Anda boleh menggunakan "sempadan -atas", Sifat "sempadan-kanan", "sempadan-bawah" dan "sempadan-kiri" masing-masing menetapkan sempadan yang berbeza.

Ringkasan

Menggunakan CSS, anda boleh menggayakan imej dalam halaman web dengan mudah. Saiz imej, kedudukan, penjajaran, sudut bulat dan sempadan boleh ditetapkan. Gaya ini boleh digunakan pada satu atau lebih elemen imej jenis tertentu melalui pemilih peraturan CSS.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan gaya imej dengan css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!