Halo para pembaca remontcompa! Nama saya Roman Nahvat dan saya sajikan untuk Anda serangkaian artikel tentang bahasa gaya CSS3. Singkatan CSS berasal dari Lembar Gaya Cascading Bahasa Inggris, yang berarti lembar gaya berjenjang. Gaya atau CSS adalah sekumpulan opsi pemformatan yang diterapkan pada elemen dokumen HTML untuk mengubah tampilannya. HTML itu sendiri hanya bahasa standar untuk dokumen HTML dan digunakan untuk menyusun isi halaman HTML, jadi HTML hanyalah langkah pertama dalam proses belajar bagaimana membuat situs. Langkah selanjutnya adalah mempelajari gaya atau CSS, yang akan kami lakukan. Ada beberapa cara untuk menambahkan gaya ke halaman web. Setiap metode berbeda dalam kemampuan dan tujuannya. Pada artikel ini, kita akan melihat tiga cara untuk menambahkan gaya ke dokumen HTML..

Hampir rumit atau belajar CSS3. Bagian 1. Konsep CSS. Cara untuk Menghubungkan Gaya CSS ke Dokumen HTML

Buat struktur dokumen HTML standar seperti yang ditunjukkan di bawah ini.

Antara tag dan tulis judul dokumen HTML, misalnya, "Metode menghubungkan gaya CSS"

Menggunakan tag

dan

tambahkan judul ke halaman web dengan teks "Apa itu CSS"

Di bawah judul menggunakan tag

dan

buat paragraf kecil dengan teks seperti yang ditunjukkan di bawah ini

Simpan dokumen ini pada flash drive di folder CSS di bawah indeks nama dengan ekstensi .html

Tentukan indeks nama, pilih jenis file html

Kami mendapatkan yang berikut ini.

Kami akan masuk ke folder CSS tempat dokumen html tersimpan kami bernama index berada. Buka di browser web

Seperti yang Anda lihat, konten halaman web yang kami buat ditampilkan di jendela browser web, yaitu judul dengan teks "Apa itu CSS" dan paragraf yang dimulai dengan kata-kata "CSS adalah bahasa gaya yang mendefinisikan ...."

Menggunakan atribut align (menetapkan nilai tengah), kami akan menyelaraskan judul dengan teks "Apa itu CSS" di tengah halaman web

Kami mendapatkan yang berikut ini.

Ubah warna teks paragraf dari standar hitam ke yang lain. Kami menggunakan tag

Ada banyak warna html, misalnya, untuk teks paragraf di halaman yang kami buat, pilih warna DeepSkyBlue

Atur atribut warna dari tag ke DeepSkyBlue

Kami memuat ulang halaman web kami dan melihat bahwa teks paragraf telah berubah warna dari hitam menjadi yang kami tentukan

Dengan cara yang sama, ubah warna teks judul, misalnya, menjadi merah.

Kami mendapatkan yang berikut ini

Kami akan mengembalikan teks judul dan paragraf di halaman web kami ke keadaan semula, yaitu, kami akan menghapus atribut pelurusan dan tag ...

Setelah menghapus tag ... dan atribut align, kami mendapatkan tampilan asli dari halaman web

Jika di atas kita mengubah warna dan pengaturan teks judul dan paragraf di halaman web menggunakan tag html, sekarang kita akan melakukan hal yang sama, tetapi menggunakan CSS. Seperti disebutkan di atas, dalam artikel ini kami akan mempertimbangkan tiga cara untuk menambahkan gaya ke halaman web, yaitu: Menambahkan gaya internal ke halaman web; Menambahkan gaya global ke halaman web; Menambahkan gaya terkait ke halaman web; Pertimbangkan untuk menambahkan gaya internal ke halaman web. Gaya internal adalah ekstensi untuk tag tunggal yang digunakan pada halaman web. Atribut style digunakan untuk mendefinisikan style, dan nilainya adalah seperangkat aturan style tertentu. Ubah warna teks judul pada halaman web menjadi merah, dan pusatkan juga menggunakan gaya internal. Untuk memberi tag

tambahkan atribut style, maka kita akan menuliskan properti style, yaitu: text-allign: center, color: red

Kami mendapatkan yang berikut ini.

Akibatnya, membuka file index.html di browser web, kami melihat bahwa teks judul pada halaman web berwarna merah dan terpusat.

Dengan cara yang sama, menggunakan atribut style, ubah warna teks paragraf dari standar hitam menjadi deepskyblue

Kami memuat kembali halaman index.html dan melihat perubahan warna paragraf.

Ubah warna teks judul pada halaman web menjadi merah dan pusatkan, kali ini menggunakan gaya global. Jika gaya global diterapkan, maka properti CSS terletak di antara tag dan, dan mereka (dan tag), pada gilirannya, terletak di antara tag dan .

Di antara tag dan kurung keriting, kami menulis properti style untuk header halaman web (tag

), dan untuk paragraf (tag

): h1 text-align: center; color: red - tempatkan teks judul di tengah halaman web dan ubah warnanya menjadi merah p color: deepskyblue - ubah warna paragraf ke deepskyblue

Hasilnya, kami mendapatkan hasil yang sama seperti ketika menggunakan gaya internal.

Pertimbangkan cara terakhir untuk menambahkan gaya ke halaman web, yaitu penggunaan gaya terkait. Inti dari gaya terkait adalah bahwa mereka didefinisikan dalam file yang terpisah dari dokumen html dan memiliki ekstensi .css. Buat dokumen yang masih kosong dan simpan di flash drive di folder CSS di bawah gaya nama dan ekstensi .css

Simpan.

File gaya dibuat dengan ekstensi .css

Biarkan file style.css kosong untuk saat ini.

Untuk menautkan dokumen html (dalam kasus kami ini adalah index.html) dengan file gaya style.css, kami menggunakan tag. Tag harus berada di dalam tag ... Mari kita menulis baris berikut di antara tag: di mana: rel = "stylesheet" - atribut tag yang menunjukkan ke browser web bahwa gaya akan terhubung; atribut href = "style.css" menunjukkan path ke file styles.css

Saat membuat file gaya, Anda harus mematuhi aturan tertentu di bawah ini (aturan yang sama harus diikuti saat menambahkan gaya global) Salah satu elemen utama dari file gaya adalah pemilih. Selektor menentukan elemen mana dalam dokumen html untuk menerapkan parameter gaya tertentu. Selektor adalah tag, kelas, dan pengidentifikasi. Setelah pemilih ditentukan, tanda kurung keriting ditempatkan di mana properti style terdaftar, kemudian nilainya ditunjukkan. Misalnya, di bawah ini dalam diagram, tag html h1 ditunjukkan sebagai pemilih, warna: sebagai properti gaya, nilai properti gaya ditulis

Karena kami ingin menempatkan teks judul (tag

) di tengah halaman web, dan atur teks menjadi merah, serta teks paragraf (tag

) ditampilkan dalam warna deepskyblue, dalam file styles style.css kita menulis baris: h1 text-align: center; warna: merah dan p warna: deepskyblue di mana: h1 text-align: center; color: red - sejajarkan teks header ("Apa itu CSS") di tengah, dan atur teks menjadi merah p color: deepskyblue - atur teks paragraf ("CSS adalah bahasa gaya yang menentukan ...") warna deepskyblue

Sebagai hasil dari menghubungkan file style.css ke dokumen html index.html, kita melihat bahwa teks judul pada halaman web terpusat dan memiliki warna merah. Teks paragraf juga mengubah warnanya menjadi deepskyblue

Lanjutan dalam artikel: Hampir rumit atau belajar CSS3. Bagian 2. Jenis penyeleksi CSS