CSS Box: dadakan dan efek

cascading style sheets (CSS) untuk semua kesederhanaan logis memungkinkan tidak hanya untuk membuat solusi desain yang spektakuler, tapi juga menyediakan unsur-unsur tindakan nyata, untuk meniru kinerja kode aktual.

Setiap tag visual yang HTML-tanda - area persegi panjang dari struktur tertentu dan konten. Unsur terdiri indikasi koordinat, ukuran, padding, warna, font, gaya font, dan sebagainya. Bingkai CSS-elemen menetapkan mereka wilayah yang diduduki, yang terletak ke dalam dari batas pada ditunjuk sini lebar.

deskripsi sintaks

FIELD elemen penempatan ditentukan koordinat relatif terhadap sudut kiri atas dari halaman (kiri, atas), ukuran dalam arah horisontal dan vertikal (lebar, tinggi). Semua desain dan animasi unsur terbuat berpasangan "property: value".

Deskripsi dilakukan langsung dalam kode halaman untuk memasukkan gaya atau dalam file terpisah, menunjuk kepadanya referensi LINK. sintaks:

#name {property: value; property: value; property: value; ...}

atau

.name {property: value; property: value; property: value; ...}

Nama juga bisa p, tubuh, html, meja, td ..., yang adalah nama dari tag HTML-markup. Dapat dihubungkan langsung dengan deskripsi elemen style.

Sebelum Anda membuat gaya tulisan saya sendiri, tidak ada salahnya untuk melihat bagaimana hal itu dilakukan di situs populer, menjaga kode halaman, atau dengan menekan Ctrl-U untuk melihatnya langsung di browser.

Parameter utama

Sebenarnya bingkai CSS elemen diwakili gaya (border-style), warna (border-color), lebar (border-width). Itu semua bisa diringkas dalam satu properti - perbatasan. Anda dapat menjelaskan setiap frame perbatasan secara independen (border-top, border-bottom, perbatasan-kiri, batas kanan).

bingkai CSS dijelaskan oleh peraturan-peraturan umum cascading style sheet:

border: 3px;
border-color: red;
border-style: ganda putus-putus padat putus-putus.

Deskripsi ini menetapkan lebar perbatasan 3 piksel, warna - merah, gaya sisi: sisi atas ganda, benar - putus-putus, bawah padat, kiri - titik.

border-width: 1px 2px 4px 8px;
border-color: blue;
border-style: dotted.

Di sini, dimensi masing-masing pihak juga berurutan dari atas, searah jarum jam, warna - biru, dan gaya - Spot.

border-color: biru hitam red green;

dalam spesifikasi ini, secara individu ditentukan warna di setiap sisi. Properti border dapat mencakup beberapa parameter, dan sudut dari frame dapat bulat:

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

Pada bagaimana membuat frame dalam CSS, itu tergantung pada kegunaan dari pengunjung, karena biasanya efek gaya digunakan untuk keperluan teknis, ketika itu penting untuk menunjukkan lokasi yang tepat dan ukuran area pada halaman.

Ketebalan frame dan tujuannya

Dengan memilih ketebalan frame, Anda dapat menggunakan px, pt, em ..., tetapi harus diingat bahwa itu selalu dalam elemen lapangan. Sulit untuk menganggap bahwa frame memiliki desain tujuan CSS, namun secara teknis sangat berguna untuk menyoroti elemen halaman.

Jika kelas rangka utama terkunci, yang tidak hadir, dengan menentukan dalam pseudo-class: hover, dapat ditunjukkan kepada pengunjung dari elemen halaman, ketika kursor mouse, seperti menyoroti item menu. Kadang-kadang perlu untuk memilih sesuatu dengan mengklik gambar, atau tarik sesuatu di suatu tempat. Hal ini sangat nyaman untuk digunakan dot bingkai, dan tidak mengubah latar belakang elemen atau isinya.

Beberapa aplikasi memerlukan alokasi daerah halaman, atau memilih item untuk diproses lebih lanjut. Dalam hal ini, pada saat klik untuk membuat div dengan perbatasan dan selama pengunjung tidak lepaskan tombol mouse, mengubah ukurannya, menunjukkan secara visual hasil pilihan.

di luar di bawah

CSS tutorial yang sangat menarik, seperti pentingnya penelitian kode halaman situs populer. Namun, sumber daya sendiri harus unik, itu harus memiliki wajah sendiri.

Disediakan sintaks frame CSS tidak memberikan berbagai rupa, sebagai inisiatif sendiri. Impromptu - awal yang baik, dan tidak ada yang mencegah pengembang untuk membangun kerangka mereka sendiri. Terutama dengan semua prestasi teknologi internet dan kemampuan standar yang ada memiliki banyak ide yang menjanjikan berdasarkan kekurangan yang nyata dari sintaks yang ada, yang (dengan definisi) selalu menjadi ketat formal.

Secara khusus, jika dan untuk menetapkan ruang lingkup unsur-unsur tertentu, tampaknya tepat untuk melakukannya secara komprehensif. Menyoroti tag individu dalam sisi dan sudut suatu daerah, Anda bisa mendapatkan efek yang menakjubkan. Sebuah menugaskan penangan masing, dapat membuat elemen halaman dinamis, mengubah posisi, bentuk dan konten.