Penempatan item pada halaman web adalah penting untuk reka bentuk keseluruhannya. Walaupun terdapat cara lain untuk mempengaruhi susun atur, seperti menggunakan jadual ( yang kami tidak mengesyorkan ), yang terbaik adalah menggunakan CSS .
Di bawah ini, kita akan melihat cara menggunakan gaya dalam talian CSS mudah untuk menyelaraskan imej, jadual, perenggan, dan banyak lagi.
Nota: Kaedah yang sama ini boleh digunakan pada helaian gaya luaran juga, tetapi kerana ini digunakan untuk item individu dan mungkin perlu tetap seperti itu, sebaiknya menggunakan gaya dalam talian seperti yang disebutkan di bawah.
Selaraskan Perenggan Teks
Tag perenggan adalah tempat pertama untuk memulakan dalam meletakkan halaman web anda. Ia membuka dan menutup tanda seperti ini:
Penjajaran lalai teks dalam perenggan adalah ke kiri halaman, tetapi Anda juga dapat menyelaraskan perenggan anda ke kanan dan tengah.
Menggunakan harta float membolehkan anda menyelaraskan perenggan ke kanan atau kiri unsur induk. Mana-mana unsur lain di dalam unsur induk itu akan mengalir di sekitar elemen terapung.
Untuk mendapatkan kesan terbaik dengan perenggan, sebaiknya tetapkan lebar pada perenggan yang lebih kecil daripada elemen kontena (induk).
Selaraskan Teks Dalam Perenggan
Boleh dikatakan, penyelarasan yang paling menarik untuk teks perenggan adalah "membenarkan," yang memberitahu pelayar untuk memaparkan teks sejajar, pada dasarnya, kepada kedua-dua sisi kanan dan kiri tetingkap.
Untuk mewajarkan teks dalam perenggan, anda akan menggunakan harta selaras teks.
Anda juga boleh menyelaraskan semua teks di dalam perenggan ke sebelah kanan atau sebelah kiri (lalai), menggunakan teks-align property.
Teks-align property akan menyelaraskan teks di dalam elemen. Secara teknikalnya, ia tidak sepatutnya menyelaraskan imej yang terkandung di dalam perenggan atau unsur lain, tetapi kebanyakan pelayar menganggap imej sebagai sebaris untuk harta ini.
Aligning Images
Menggunakan harta apungan pada teg imej anda boleh menentukan penempatan imej pada halaman dan bagaimana teks akan membungkusnya.
Sama seperti perenggan di atas, harta gaya terapung dalam teg imej akan meletakkan imej anda pada halaman dan memberitahu pelayar bagaimana mengalir teks dan unsur-unsur lain di sekitar imej itu.
Teks berikut tag imej di atas akan mengalir di sekeliling imej di sebelah kanan apabila paparan imej di sebelah kiri skrin.
Jika saya mahu teks itu berhenti membungkus imej, saya menggunakan harta yang jelas:
jelas: kiri
Menyelaraskan Lebih Banyak Perenggan
Bagaimanapun, bagaimana jika anda ingin menyelaraskan lebih daripada sekadar perenggan atau imej? Anda hanya boleh meletakkan harta gaya dalam setiap perenggan, tetapi ada tag yang boleh anda gunakan yang lebih berkesan:
Cukup mengelilingi teks dan imej (termasuk tag HTML ) dengan tag dan gaya gaya (float atau jajar teks) dan segala-galanya di bahagian itu akan diselaraskan bagaimana anda menyukainya.
Perlu diingat bahawa penjajaran yang ditambah kepada perenggan atau imej dalam bahagian akan diberi penghormatan, mengatasi tag tersebut.