CSS adalah lembaran gaya lata, yang merupakan bahasa untuk menggambarkan penampilan laman web. Salah satu kelebihan utama CSS adalah kemampuan untuk mengganti susun atur jadual dengan susun atur blok.
Ia perlu
Penyunting kod HTML
Arahan
Langkah 1
Buat blok pertama. Dalam bentuk HTML, ia akan kelihatan seperti tag div dengan id 'block01'. Di sini, pengecam block01 menunjukkan bahawa dalam keterangan CSS, semua sifat blok ini ditentukan untuk pemilih # block01.
Langkah 2
Terangkan blok dalam CSS. Dalam gaya CSS, tentukan nama pengecam (# block01) dan dalam pendakap kerinting menerangkan parameternya - lebar, kedudukan, ofset, warna latar belakang, dll. Sebagai contoh, ia mungkin kelihatan seperti ini: # block01 {width: 150px; tinggi: 150px; kedudukan: mutlak; bahagian atas: 0px; kiri: 0px; warna latar: merah jambu}. Huraian ini mengandaikan bahawa kotak itu akan panjang 150 piksel dan lebar 150 piksel, ia akan diletakkan dengan ketat di sudut kiri atas dokumen, dan latar belakangnya akan berwarna merah jambu.
Langkah 3
Berikan blok kedudukan relatif. Sekiranya anda menggunakan kedudukan tidak mutlak, tetapi relatif dalam keterangan CSS, maka anda boleh meletakkan blok bukan dengan sekatan kaku ke grid koordinat, tetapi relatif dengan blok lain yang sudah ada. Untuk melakukan ini, ubah kedudukan kod: mutlak; bahagian atas: 0px; kiri: 0px mengikut kedudukan: relatif; bahagian atas: 200px; kiri: 100 piksel.
Langkah 4
Berikan blok itu pembundaran. Dalam CSS, penyataan radius sempadan bertanggungjawab untuk ini. Tambahkan kod berikut ke helaian gaya anda: border-radius: 8px. Blok itu sekarang akan mempunyai sudut bulat. Sekiranya anda hanya ingin membulatkan beberapa sudut, jelaskan jejari secara berasingan untuk setiap sudut: sempadan-radius: 8px 8px 0px 0px.
Langkah 5
Beri pukulan blok. Untuk menonjolkan garis besar blok dengan garis tipis, tambahkan kod berikut ke keterangan CSSnya: border-top: 1px putus-putus hitam. Arahan ini bermaksud bahawa sempadan blok akan berwarna hitam dan tebalnya satu piksel. Dalam kes ini, garis kontur itu sendiri akan dipaparkan sebagai garis putus-putus (garis putus-putus - putus-putus - titik, padat - garis padat).
Langkah 6
Tetapkan sifat blok yang tinggal. Nyatakan dalam keterangan CSS apa jenis huruf yang harus digunakan untuk teks di dalam blok, apa ukuran fon, penjajaran dan lekukan dari tepi blok. Sifat-sifat ini dijelaskan dalam definisi font-family, font-size, text-align, and padding.
Langkah 7
Anda boleh menggunakan harta apungan untuk menyesuaikan aliran satu blok ke blok yang lain. Sekiranya anda menetapkannya ke "kiri", elemen-elemen yang lain akan mengalir di sekitar blok di sebelah kiri, dan "kanan" - di sebelah kanan. Sekiranya anda menetapkan nilai apungan sebagai "tidak ada", penjajaran blok tidak akan ditetapkan. Harta yang jelas dalam CSS menghalang blok dari mengalir ke kanan, kiri, atau kedua-dua sisi, dan mengesampingkan pernyataan apungan.
