Secara umum, style sheet adalah kumpulan aturan pemformatan yang mengontrol tampilan konten web. Anda dapat menggunakan CSS di halaman Anda dengan tiga cara berbeda:
Inline: Gaya satu kali ditulis ke dalam kode.
Tertanam: Style sheet yang dapat mengontrol semua elemen dalam suatu halaman. Eksternal: Style sheet yang dapat mengontrol elemen di banyak halaman.
Faktanya, banyak situs menggunakan kombinasi ketiga metode ini sesuai kebutuhan.
Hal penting yang perlu dipertimbangkan ketika bekerja dengan CSS adalah kenyataan bahwa browser yang berbeda dan versi yang berbeda dari browser yang sama mengurai CSS dengan cara yang berbeda. Selain perbedaan web browser, perlu Anda ketahui juga bahwa masih banyak browser lainnya, seperti browser pendengaran, browser berbasis TV, dan perangkat genggam seperti Palm Pilot dan TTY (teletypewriter, remote typewriter).
Apa praktik terbaiknya?
Sebagian besar teknologi memiliki standar yang disepakati sendiri. CSS tidak terkecuali. Meskipun tidak semua CSS yang ada di web terstandarisasi, akan sangat membantu jika menggunakan CSS sesuai standar yang ada. Secara umum, pengembang harus sebisa mungkin memisahkan konten dari pelaporan. Keuntungannya adalah:
1: Meningkatkan umur situs.
Style sheet non-standar mungkin nyaman pada saat itu, namun setelah versi baru browser keluar, masalah kompatibilitas mungkin akan terjadi. Pada saat itu, memodifikasi halaman demi halaman situs akan menjadi tugas yang sangat memakan waktu dan juga membuat penggunaan CSS menjadi tidak berarti.
2: Jadikan situs Anda dapat diakses oleh semua pengguna dan browser.
Beberapa pemerintah daerah telah menetapkan bahwa situs web harus dapat diakses oleh penyandang disabilitas. Perangkat penjelajahan yang dirancang untuk kesadaran disabilitas, seperti browser pendengaran, memiliki persyaratan normatif CSS yang sangat ketat.
3: Mempermudah pembaruan dan pemeliharaan situs.
Jika digunakan dengan benar, CSS memungkinkan penyesuaian yang Anda buat pada satu halaman diterapkan dengan cepat ke semua halaman.
Pilihan pertama yang harus Anda buat adalah style sheet mana yang akan digunakan. Berikut rincian berbagai stylesheet terkait praktik terbaik:
Sederhananya, Anda harus mencoba menghindari penggunaannya. Di antara kelemahan lainnya, menggunakan CSS inline berarti Anda tidak memanfaatkan manfaat CSS yang sebenarnya, yaitu Anda tidak memisahkan konten dari pemformatan. DW menggunakan Inline CSS terutama untuk memposisikan elemen halaman (elemen ini disebut "lapisan" di antarmuka pengguna DW), atau untuk menggunakan efek DHTML tertentu, yang memerlukan penggunaan Javascript gaya Inline untuk mengubah properti suatu objek.
CSS Tertanam: Ini juga kurang ideal karena hanya memengaruhi halaman saat ini. Selama proses pembaruan, jika halaman hilang, gaya situs akan menjadi tidak konsisten; selain itu, saat pengguna menelusuri situs Anda, informasi style sheet harus diunduh untuk setiap halaman.
CSS Eksternal: Ini adalah pilihan pertama Anda. CSS eksternal memungkinkan semua halaman yang terhubung dengannya mempertahankan tampilan dan gaya yang konsisten; menguraikannya, mengubahnya satu kali, dan dengan mudah memperbarui semua halaman terkait membuat halaman Anda lebih kecil dan menjelajah lebih cepat; Praktik terbaik lainnya dibahas di bawah ini saat menganalisis fitur CSS tertentu.
Membuat lembar gaya CSS di DW
Saat membuat lembar gaya CSS di DW (Teks 》Gaya CSS 》Lembar gaya baru), di kotak dialog pop-up, Anda memiliki dua opsi: File Lembar Gaya Baru dan Hanya digunakan untuk halaman saat ini (Hanya Dokumen Ini). Pilih "New Style Sheet File" dan Anda memulai proses pembuatan CSS Eksternal. Opsi ini mengharuskan Anda memberi nama style sheet dan memilih lokasi penyimpanannya sebelum proses pembuatan sebenarnya; opsi lainnya, Hanya Dokumen Ini, akan menulis kode yang relevan langsung ke halaman.
Anda juga dapat memilih style sheet yang ada untuk diedit atau menambahkan definisi baru di kotak dialog New Style.
Haruskah dihubungkan ke CSS Eksternal atau diimpor?
Setelah membuat style sheet eksternal, Anda perlu melampirkannya ke setiap halaman (atau template). Untuk melakukan ini, klik tombol "Lampirkan Style Sheet" pada panel CSS. Kotak dialog Link External Style Sheet akan muncul, di mana Anda dapat menelusuri style sheet target Anda. Setelah menemukan namanya, Anda dapat memilih untuk menautkan atau mengimpor lembar gaya eksternal ini.
Koneksi adalah metode yang paling umum digunakan. Pilih "link" untuk menghubungkan style sheet ke halaman. Ini akan menambahkan markup berikut ke halaman Anda:
Opsi koneksi didukung oleh semua browser yang mendukung CSS. Jika Anda ingin beberapa browser lama (seperti Netscape 4.x) "melihat" style sheet ini, Anda perlu menggunakan metode berikut.
Jika Anda memilih opsi "Impor", tag yang digunakan adalah:
NetSscape4 akan sepenuhnya mengabaikan CSS yang diimpor dan menafsirkan halaman sesuai dengan CSS yang terhubung. Dengan cara ini, kita dapat menggunakan fitur-fitur baru di CSS tanpa mengkhawatirkan masalah kompatibilitas browser.
Pemeriksa Properti CSS
Anda dapat dengan mudah beralih ke mode CSS di pemeriksa properti DW. Secara default, Property Inspector menampilkan tag font dalam mode HTML mentah. Klik "A" kecil di sebelah menu tarik-turun Font dan Anda akan melihat lembar gaya CSS yang tersedia saat ini, bukan daftar tag font. Pada saat yang sama, Anda dapat dengan mudah beralih kembali ke mode HTML.
Stylesheet CSS yang sudah jadi
Salah satu fitur CSS yang menarik di DW adalah ia menyertakan stylesheet CSS yang sudah jadi. Pengguna baru CSS dapat mencobanya terlebih dahulu. Pilih File > Baru, pilih lembar gaya CSS di kotak dialog dokumen baru yang muncul, dan daftar semua CSS yang tersedia akan muncul di kotak sebelah kanan. Untuk mempraktikkan apa yang kami sebut praktik terbaik, pilih salah satu yang bertanda "Dapat Diakses".
Simpan dokumen di folder situs, lalu tambahkan CSS ke dokumen Anda menggunakan metode yang dijelaskan di atas.
Lembar gaya Waktu Desain (Lembar gaya Waktu Desain)
Fitur DW ini memungkinkan Anda menerapkan lembar gaya ke halaman saat bekerja dalam tampilan desain, memberi Anda pemahaman yang lebih intuitif tentang tampilan situs. Stylesheet waktu desain tidak akan muncul dalam situs. Fitur ini sangat berguna dari sudut pandang praktik terbaik kami. Jika Anda menggunakan metode impor dan penggabungan (seperti dijelaskan di atas), melampirkan lembar gaya waktu desain memungkinkan Anda mengembangkan situs menggunakan salah satu metode tersebut. Anda dapat dengan mudah mengubah ke style sheet lain ketika Anda ingin melihat bagaimana halaman akan terlihat di bawah style sheet lain.
Stylesheet waktu desain juga berguna bagi pengembang yang ingin menerapkan CSS di sisi server (seperti ASP, PHP, atau ColdFusion) atau di sisi klien melalui Javascript. Style sheet sisi server juga merupakan cara lain untuk mengatasi dukungan CSS yang buruk di browser klien. Namun di DW versi sebelumnya, metode ini tidak memungkinkan Anda melihat efek CSS sebenarnya selama tahap desain. Stylesheet waktu desain memungkinkan Anda melihat efek stylesheet secara real time, sehingga Anda dapat bekerja dengan antarmuka visual di DW. Manfaat lainnya adalah ketika Anda mengunggah file situs, Anda tidak lagi harus menelusuri seluruh situs untuk mencari stylesheet yang berlebihan.
Validasi
Baik Anda membuat style sheet sendiri atau mengedit style sheet yang sudah ada, validasi memastikan bahwa Anda tidak menyalahgunakan tag yang tidak standar atau kode yang salah. DW sendiri tidak menyertakan validator CSS, Anda dapat menggunakan layanan validasi yang disediakan oleh situs W3C.
Dalam DW Anda dapat memvalidasi tag HTML atau DHTML (File > Periksa Halaman > Validasi Markup (untuk HTML) atau File > Periksa Halaman > Validasi sebagai XML untuk XHTML.). DW menyediakan banyak alat bantu saat mengembangkan situs berbasis CSS. Dengan bantuan MW MX, ditambah dengan pemahaman yang baik tentang CSS, Anda dapat mengembangkan situs yang akan bertahan dalam ujian waktu.