CSS adalah cascading style sheet, yang merupakan bahasa untuk menggambarkan tampilan halaman web. Salah satu keunggulan utama CSS adalah kemampuan untuk mengganti tata letak tabel dengan tata letak blok.
Itu perlu
editor kode HTML
instruksi
Langkah 1
Buat blok pertama. Dalam bentuk HTML, akan terlihat seperti tag div dengan id 'block01'. Di sini, pengidentifikasi block01 menunjukkan bahwa dalam deskripsi CSS, semua properti blok ini ditentukan untuk pemilih # block01.
Langkah 2
Jelaskan blok di CSS. Dalam gaya CSS, tentukan nama pengidentifikasi (# block01) dan dalam kurung kurawal jelaskan parameternya - lebar, pemosisian, offset, warna latar belakang, dll. Misalnya, mungkin terlihat seperti ini: # block01 {width: 150px; tinggi: 150 piksel; posisi: mutlak; atas: 0 piksel; kiri: 0 piksel; warna latar belakang: merah muda}. Deskripsi ini mengasumsikan bahwa kotak akan memiliki panjang 150 piksel dan lebar 150 piksel, akan diposisikan secara kaku di sudut kiri atas dokumen, dan latar belakangnya akan berwarna merah muda.
Langkah 3
Berikan blok posisi relatif. Jika Anda menggunakan tidak absolut, tetapi posisi relatif dalam deskripsi CSS, maka Anda dapat menempatkan blok tidak dengan gertakan kaku ke kisi koordinat, tetapi relatif terhadap blok lain yang sudah ada. Untuk melakukannya, ubah posisi kode: absolute; atas: 0 piksel; kiri: 0px menurut posisi: relatif; atas: 200 piksel; kiri: 100 piksel.
Langkah 4
Berikan blok pembulatan. Di CSS, pernyataan border-radius bertanggung jawab untuk ini. Tambahkan kode berikut ke stylesheet Anda: border-radius: 8px. Blok sekarang akan memiliki sudut membulat. Jika Anda hanya ingin membulatkan beberapa sudut, gambarkan radius secara terpisah untuk masing-masing sudut: border-radius: 8px 8px 0px 0px.
Langkah 5
Berikan blok pukulan. Untuk menyorot garis luar blok dengan garis tipis, tambahkan kode berikut ke deskripsi CSS-nya: border-top: 1px dashed black. Instruksi ini berarti bahwa batas blok akan menjadi hitam dan akan menjadi satu piksel dengan ketebalan. Dalam hal ini, garis kontur itu sendiri akan ditampilkan sebagai garis putus-putus (putus-putus - garis putus-putus, putus-putus - titik, padat - garis padat).
Langkah 6
Atur properti blok yang tersisa. Tentukan dalam deskripsi CSS jenis huruf apa yang harus digunakan untuk teks di dalam blok, apa yang harus menjadi ukuran font, perataan dan lekukan dari tepi blok. Properti ini dijelaskan dalam definisi font-family, font-size, text-align, dan padding.
Langkah 7
Anda dapat menggunakan properti float untuk menyesuaikan aliran satu blok di atas yang lain. Jika Anda mengaturnya ke "kiri", maka elemen lainnya akan mengalir di sekitar blok di sebelah kiri, dan "kanan" - di sebelah kanan. Jika Anda menetapkan nilai float sebagai “none”, perataan blok tidak akan disetel. Properti clear di CSS mencegah blok mengalir ke kanan, kiri, atau kedua sisi, dan menimpa pernyataan float.
