Menggunakan CSS untuk menyelaraskan imej ke sebelah kiri laman web Layout
Lihat hampir mana-mana laman web hari ini dan anda akan melihat gabungan teks dan imej yang membentuk sebahagian besar halaman tersebut. Sangat mudah untuk menambah teks dan imej ke halaman . Teks dikodkan menggunakan tag HTML standard seperti perenggan, senarai, dan tajuk, sementara imej dimasukkan menggunakan elemen .
Keupayaan untuk membuat teks dan imej itu berfungsi dengan baik adalah apa yang membezakan pereka web hebat! Anda tidak hanya mahu teks dan imej anda muncul satu demi satu, iaitu bagaimana unsur-unsur peringkat blok akan susun atur secara lalai. Tidak, anda mahu mengawal bagaimana teks dan imej mengalir dalam apa yang akhirnya akan menjadi reka bentuk visual laman web anda.
Mempunyai imej yang diselaraskan ke sebelah kiri halaman sementara teks halaman itu mengalir di sekitarnya adalah rawatan reka bentuk yang lazim untuk reka bentuk bercetak dan juga untuk laman web. Dalam istilah web, kesan ini dikenali sebagai mengambang imej . Gaya ini dicapai dengan sifat CSS untuk "float". Harta ini membolehkan teks mengalir di sekeliling imej kiri ke sebelah kanannya. (Atau di sekeliling gambar sejajar kanan ke sebelah kiri.) Mari kita lihat cara untuk mencapai kesan visual ini.
Mulakan Dengan HTML
Perkara pertama yang perlu anda lakukan ialah mempunyai beberapa HTML untuk berfungsi. Untuk contoh kami, kami akan menulis perenggan teks dan menambah imej pada awal perenggan (sebelum teks, tetapi selepas tag
pembuka). Inilah yang kelihatan seperti markup HTML:
Secara lalai, halaman web kami akan dipaparkan dengan imej di atas teks. Ini kerana imej adalah elemen tahap blok dalam HTML. Ini bermakna bahawa penyemak imbas memaparkan garis pecah sebelum dan selepas elemen imej secara lalai. Kami akan menukar rupa lalai ini dengan beralih kepada CSS. Pertama, bagaimanapun, kami akan menambah nilai kelas kepada elemen imej kami . Kelas itu akan bertindak sebagai "cangkuk" yang akan kami gunakan dalam CSS kami kemudian.
Perhatikan bahawa kelas "kiri" tidak melakukan apa-apa sama sekali! Bagi kami untuk mencapai gaya yang diingini, kami perlu menggunakan CSS seterusnya.
Gaya CSS
Dengan HTML kami di tempat, termasuk atribut kelas kami "kiri", kini kami boleh beralih kepada CSS. Kami akan menambah peraturan pada lembaran gaya kami yang akan mengapungkan imej itu dan juga menambah padding kecil di sebelahnya supaya teks yang akhirnya akan membungkus imej tidak menumpuk terhadapnya terlalu dekat. Berikut adalah CSS yang anda boleh tulis:
.left {float: left; padding: 0 20px 20px 0; }Gaya ini mengapungkan imej itu ke kiri dan menambah padding kecil (menggunakan beberapa catur CSS) ke kanan dan bawah imej.
Jika anda menyemak halaman yang mengandungi HTML ini dalam pelayar, imej itu akan diselaraskan ke sebelah kiri dan teks perenggan akan muncul di sebelah kanannya dengan jarak jarak yang sesuai antara kedua-dua. Perhatikan nilai kelas "kiri" yang kami gunakan adalah sewenang-wenangnya. Kita boleh memanggilnya apa-apa kerana istilah "kiri" tidak melakukan apa-apa dengan sendiri. Ini perlu mempunyai atribut kelas dalam HTML yang berfungsi dengan gaya CSS sebenar yang menentukan perubahan visual yang anda ingin buat.
Cara Alternatif untuk Mencapai Gaya Ini
Pendekatan ini memberikan unsur imej sebagai atribut kelas dan kemudian menggunakan gaya CSS umum yang mengapungkan elemen adalah satu-satunya cara anda boleh melihat rupa "imej kiri kiri" ini. Anda juga boleh mengambil nilai kelas dari imej dan gaya dengan CSS dengan menulis pemilih yang lebih spesifik. Sebagai contoh, mari kita melihat contoh di mana imej itu berada di dalam bahagian dengan nilai kelas "kandungan utama".
Untuk gaya imej ini, anda boleh menulis CSS ini:
.main-content img {float: left; padding: 0 20px 20px 0; }Dalam keadaan ini, imej kami akan diselaraskan ke kiri, dengan teks yang terapung di sekelilingnya seperti sebelumnya, tetapi kami tidak perlu menambah nilai kelas tambahan pada markup kami. Melakukannya pada skala boleh membantu membuat fail HTML yang lebih kecil, yang akan lebih mudah untuk diurus dan juga boleh membantu meningkatkan prestasi.
Akhirnya, anda juga boleh menambah gaya terus ke markup HTML anda, seperti ini:
Kaedah ini dipanggil " gaya inline ". Ia tidak dianjurkan kerana ia jelas menggabungkan gaya elemen dengan markup strukturnya. Amalan terbaik web menetapkan bahawa gaya dan struktur halaman harus tetap berasingan. Ini amat berguna apabila halaman anda perlu mengubah susun aturnya dan mencari saiz skrin dan peranti yang berbeza dengan laman web yang responsif. Mempunyai gaya halaman yang saling berkaitan dalam HTML akan menjadikannya lebih sukar untuk pertanyaan media pengarang yang akan menyesuaikan rupa laman web anda seperti yang diperlukan untuk skrin yang berbeza.
Artikel asal oleh Jennifer Krynin. Disunting oleh Jeremy Girard pada 4/3/17.