Tanpa menerapkan lembar gaya cascading, elemen bentuk akan ditampilkan sesuai dengan browser yang digunakan dan sistem operasi Pengaturan default. tapi menggunakan CSS. Memungkinkan Anda membuat formulir yang sesuai dengan desain situs Anda.
Keputusan
Formulir Gaya Elemen, seperti elemen HTML lainnya, dapat diatur menggunakan CSS.
Ara. 6.1.. Tampilan Formulir Default di Browser Firefoxi
Digambarkan oleh ara. 6.1. Formulir ini didekorasi sesuai dengan pengaturan default yang digunakan oleh browser Firefox di bawah Windows XP. Spesiesnya akan berubah saat melihat di berbagai browser di bawah platform yang berbeda. Di bawah ini adalah bentuk khas:
"http://www.w3.org/1999/xhtml"lang \u003d "en-us"\u003e
Penampilan formulir ini dapat diubah dengan menulis gaya untuk elemen:
bentuk (batas: 1px putus-putus #aaaaaaa; padding: 0 .5em;) Formulir div (margin-bottom: 1em;) input (warna: # 00008b; latar belakang-warna: # add8e6; perbatasan: 1px; Lebar: 100px; warna: # 00008b; latar belakang-warna: # add8e6; batas: 1px solid # 00008b;) textarea (lebar: 200px; tinggi: 40px; warna: # 00008b; Border: 1px Solid) # 00008b;)
Sekarang bentuknya terlihat seperti pada Gambar. 6.2.
Diskusi
Seperti yang mungkin Anda duga, setpoint gaya untuk elemen HTML bentuk, input, textarea dan pilih Mereka akan diterapkan pada masing-masing contoh mereka yang terletak di halaman yang dikaitkan dengan file tabel gaya. Untuk mengubah bentuk bidang bidang, kita dapat menggunakan banyak properti yang berbeda. Menggunakan CSS Anda dapat mengelola hampir semua aspek bidang
:
Dewan
Bentuk dan warna latar belakang. Bagian dari pengunjung situs Anda dapat membedakan warna dengan buruk, dan sebagian dapat menggunakan browser suara. Oleh karena itu, warna tidak boleh melakukan fungsi-fungsi penting - misalnya, instruksi seperti "bidang kuning diperlukan untuk mengisi" harus di bawah larangan lengkap.
Pertimbangkan nilai properti secara lebih rinci:
Pekerjaan Laboratorium Nomor 4
Tabel Gaya Cascading (CSS)
tujuan pekerjaan
Memenuhi konsep tabel cascading gaya css., serta mendapatkan keterampilan praktis penggunaannya.
Informasi teoritis.
Internet Explorer. Menawarkan gaya Anda, menelepon default. Gaya ini melibatkan latar belakang putih murni, warna font hitam, semua referensi digarisbawahi dan biru, dll., Bagaimana jika Anda tidak menyukai semua ini? Anda sudah tahu cara mengubah berbagai atribut secara langsung. Bahkan jika objek yang sama sama, Anda sudah tahu cara menerapkan kelas. Tetapi ada kesempatan lain. Untuk menentukan seluruh gaya dokumen, apa yang disebut tabel gaya hierarkis digunakan (Cascade Style Sheets - CSS), yang merupakan seperangkat sifat objek yang berbeda. Sesuatu yang menyerupai kelas, tetapi jika kelas dibuat di dalam dokumen dan dapat diterapkan, dan mungkin tidak, maka CSS, jika terhubung, instalasi di dalamnya memengaruhi semua objek dalam dokumen.
Pengantar CSS.
CSS sangat mirip dengan kelas, hanya dengan perbedaan gaya yang dijelaskan di dalamnya untuk objek yang sudah diketahui. Untuk contoh visual, periksa kamar Anda sekarang (kantor, aula ...) di mana Anda berada. Tentunya, Anda akan melihat banyak item yang berbeda (tabel, kursi, jendela, komputer). Masing-masing objek objek ini memiliki karakteristik, dan Anda perlu membuat daftar barang-barang ini dan karakteristiknya. Mungkin Anda akan memiliki sesuatu sebagai berikut:
meja:
warna cokelat
Bahan - Kayu
komputer:
warna putih
Bahan - Plastik.
Tujuan - untuk bekerja
Tentu saja, Anda dapat pergi ke cara lain, tetapi hanya CSS yang dikompilasi dengan tepat di mana, bukan objek, objek yang menonjol, dan karakteristiknya sedikit berbeda. Misalnya, di sini adalah kutipan dari dokumen semacam itu:
tubuh.
{
Latar Belakang - Warna: RGB (255.255.153);
Warna: RGB (51,51.153);
}
H3.
{
Warna: RGB (255,0,0);
Font-Family: Arial, Helvetica;
}
Di sini ditanya apa gaya tubuh dan elemen H3. Opsi-opsi yang tidak ditentukan secara default.
Membuat CSS tidak memerlukan upaya khusus dan dapat dilakukan dalam notebook sederhana, meskipun untuk keperluan ini dan ada program KhususMemfasilitasi pekerjaan dan dengan jelas menunjukkan bagaimana dokumen di masa depan akan terlihat seperti menggunakan gaya ini. Cari program-program tersebut di disk Anda atau dari kenalan.
2.2.Membuat tabel gaya dalam dokumen
Ada dua cara untuk menghubungkan CSS. Yang pertama adalah mengaturnya dalam elemen gaya di awal dokumen, sebagai kelas. Ini dilakukan seperti ini (contoh 1):
Dokumen ini
menggunakan tabel gaya
Dalam contoh ini, di layar Anda akan melihat dua baris yang terdiri dari dua objek: H3 dan H3. Lihat, di mana gaya default Internet Explorer telah berbalik. Tetapi kami tidak membuat instruksi apa pun di objek itu sendiri tentang gayanya. Dengan demikian, tidak peduli seberapa besar Anda telah memberkahi objek H3 dan H3, gaya mereka akan selalu seperti yang Anda tentukan dalam tabel stylist.
2. 3. Gaya tabel di file terpisah
Jika Anda menyukai gaya yang Anda buat dan Anda ingin menggunakannya di semua dokumen Anda. Atau dokumen Anda terdiri dari satu set Halaman HTML Dan mereka semua harus memiliki gaya yang sama, Anda tidak perlu memasukkan string tabel gaya setiap kali di awal dokumen.
Cara kedua untuk menghubungkan CSS ke halaman web adalah membuat CSS. Dalam file terpisah, dan halaman itu sendiri mengacu pada file ini. Kemudian, Anda dapat menulis di halaman hanya satu baris dan masih gaya itu akan didefinisikan dalam tabel stylist di file eksternal. Saya pikir tidak perlu berbicara tentang manfaat seperti itu.
Jadi, pada awalnya Anda membuat tabel, mengikuti aturan di atas. Kemudian, Anda menambahkan ke elemen
Untuk mengaktifkan lembar gaya string mirip dengan yang berikut:Tautan berarti bahwa halaman saat ini Elemen, rel dan jenis terhubung untuk menggambarkan elemen sebagai tabel bergaya, tetapi HREF berisi alamat yang menjadi file dengan CSS Anda.
Perubahan dinamis CSS.
Anda dapat secara dinamis mengubah nama plug-in dengan tabel stylist, sesuai, mengubah gaya itu sendiri. Berikut adalah fungsi, dalam bahasa JScript, yang, ketika menyebutnya, jika ada gaya yang sudah diterapkan, menghapusnya dan menghubungkan yang baru.
fungsi ubah_style ()
(if (document.stylesheets.href! \u003d null)
document.stylesheets.href \u003d "newstyle.css";
}
Jika tabel gaya didefinisikan di dalam halaman HTML, Anda dapat menambahkan definisi baru menggunakan fungsi addrule (objek, gaya). Di mana objek adalah objek, dan gaya, masing-masing, instalasi gaya. Berikut adalah contohnya setelah mengklik tombol, tabel bergaya diubah (Contoh 2):
Dokumen ini menggunakan lembar gaya
Ini adalah paragraf. Klik pada tombol untuk mengubah gayanya
Setelah meninjau halaman dengan kode seperti itu, Anda akan melihat bagaimana perubahan gaya terjadi dengan menambahkan instalasi ke lembar gaya.
Kelas
Kelas adalah cara lain untuk menginstal bagaimana teks harus melihat pada halaman. Pada dasarnya, Anda mendefinisikan satu set gaya, seperti warna, ketebalan font, ukurannya, dan sebagainya, tetapi jangan menetapkan tag tertentu. Kelas terlihat seperti ini:
Contoh ini menciptakan tiga kelas: Reguler, Superbig, Hak Cipta. Di bawah ini ditampilkan bagaimana menerapkan kelas-kelas ini di lapisan navigasi teks.
Kelas Superbig
Kelas biasa
Hak Cipta Kelas
Anda juga dapat secara khusus mengikat tag kelas. Sebagai contoh:
P.
{
Ukuran font: 16pt;
Font-weight: Bold;
}
P.small.
(Ukuran font: 9pt;
Margin-Left: 5em;
Margin-Right: 5em;
}
Di bawah ini ditunjukkan bagaimana menerapkan kelas