CSS Box: spontan dan kesan

lembaran gaya melata (CSS) untuk semua kesederhanaan yang logik membolehkan bukan sahaja untuk mewujudkan penyelesaian reka bentuk yang menakjubkan, tetapi juga menyediakan unsur-unsur tindakan sebenar, mencontohi prestasi kod sebenar.

Apa-apa tag visual HTML menandakan - kawasan segi empat tepat struktur dan kandungan tertentu. elemen terdiri daripada petunjuk koordinat, saiz, padding, warna, font, gaya fon, dan sebagainya. Frame CSS-elemen menyatakan mereka kawasan yang diduduki, yang terletak ke dalam dari sempadan pada yang ditetapkan di sini lebar.

Huraian sintaks

FIELD unsur penempatan dinyatakan Koordinat relatif kepada sudut atas kiri halaman (kiri, atas), saiz dalam arah mendatar dan menegak (lebar, tinggi). Semua unsur-unsur reka bentuk dan animasi dibuat dalam pasangan "harta: nilai".

Huraian dilakukan secara langsung kod halaman tersebut untuk memasukkan gaya atau dalam fail yang berasingan, menunjuk kepadanya rujukan LINK. sintaks:

#nama {harta: nilai; harta: nilai; harta: nilai; ...}

atau

.name {harta: nilai; harta: nilai; harta: nilai; ...}

nama juga boleh menjadi p, badan, html, meja, td ..., yang adalah nama tag HTML markup. Boleh disambungkan terus dengan perihal unsur gaya.

Sebelum anda membuat gaya penulisan saya sendiri, tidak menyakitkan untuk melihat bagaimana ia dilakukan di laman popular, menjaga kod halaman, atau dengan menekan Ctrl-U untuk melihatnya secara langsung dalam pelayar.

Parameter utama

gaya sebenarnya elemen rangka CSS diwakili (gaya sempadan), warna (sempadan warna), lebar (sempadan-lebar). Ia semua boleh disimpulkan dalam satu harta - sempadan. Anda boleh menggambarkan setiap sempadan bingkai bebas (border-top, sempadan-bawah, sempadan-kiri, sempadan-kanan).

rangka CSS digambarkan oleh kaedah-kaedah am lembaran gaya melata:

border: 3px;
border-color: red;
gaya sempadan: double putus-putus pepejal putus-putus.

Penjelasan ini menetapkan lebar sempadan 3 piksel, warna - pihak merah, gaya: bahagian atas, hak double - putus-putus, bawah pepejal, kiri - mata.

border-width: 1px 2px 4px 8px;
border-color: blue;
Gaya border: putus-putus.

Di sini, dimensi setiap sisi juga berurutan dari atas, mengikut arah jam, warna - biru, dan gaya - Spot.

border-warna: biru hitam hijau merah;

dalam spesifikasi ini, secara individu ditentukan warna pada setiap sisi. harta sempadan boleh termasuk berbilang parameter, dan sudut bingkai boleh bulat:

border: 1px hijau pepejal;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;

Bagaimana untuk membuat bingkai dalam CSS, ia bergantung kepada kebolehgunaan pengunjung, kerana biasanya kesan gaya digunakan untuk tujuan teknikal, apabila ia adalah penting untuk menunjukkan lokasi yang tepat dan saiz kawasan yang pada halaman.

Ketebalan bingkai dan tujuannya

Dengan memilih ketebalan bingkai, anda boleh menggunakan px, pt, em ..., tetapi ia perlu diingat bahawa ia sentiasa dalam unsur padang. Ia adalah sukar untuk menganggap bahawa bingkai mempunyai tujuan reka bentuk CSS, tetapi secara teknikalnya ia adalah sangat berguna untuk menyerlahkan elemen halaman.

Jika kelas kerangka utama dikunci, yang tidak hadir, dengan menentukan dalam pseudo-kelas: hover, ia boleh memberi gambaran kepada pengunjung elemen halaman, apabila kursor tetikus, seperti menonjolkan item menu. Kadang-kadang ia adalah perlu untuk memilih sesuatu dengan mengklik pada imej, atau seret sesuatu tempat. Ia adalah sangat mudah untuk digunakan bingkai dot, dan tidak untuk menukar latar belakang elemen atau kandungannya.

Sesetengah aplikasi memerlukan peruntukan kawasan halaman, atau pilih item untuk proses seterusnya. Dalam kes ini, pada masa klik untuk membuat div yang dengan sempadan dan selagi pengunjung tidak melepaskan butang tetikus, mengubah saiz, menunjukkan secara visual hasil pilihan.

di luar di bawah

CSS tutorial adalah sangat menarik, begitu juga dengan kepentingan penyelidikan Kod muka surat laman web yang popular. Walau bagaimanapun, sumber sendiri mestilah unik, ia mesti mempunyai muka sendiri.

Dengan syarat sintaks rangka CSS tidak memberikan apa-apa pelbagai, sebagai inisiatif sendiri. Impromptu - permulaan yang hebat, dan tiada apa yang menghalang pemaju untuk membina tubuh mereka sendiri. Terutama dengan semua pencapaian teknologi Internet dan keupayaan piawaian sedia ada mempunyai banyak idea cerah berdasarkan kelemahan sebenar sintaks yang sedia ada, yang (mengikut definisi) sentiasa ketat formal.

Khususnya, jika dan untuk mewujudkan skop unsur-unsur tertentu, ia seolah-olah sesuai untuk berbuat demikian secara menyeluruh. Menonjolkan tag individu di sisi dan sudut kawasan yang, anda boleh mendapatkan kesan yang menakjubkan. A Pengendali masing memberi, boleh mewujudkan elemen halaman dinamik, mengubah kedudukan, bentuk dan kandungan.