Pada bab ini kita akan berbicara tentang bagaimana mengimplementasikan CSS ke dalam dokumen HTML, yaitu menghubungkan deskripsi gaya suatu elemen langsung ke elemen itu sendiri, entah bagaimana. tanda HTML ohm

Melaksanakan tugas ini mungkin dalam tiga cara:

• Tulis deskripsi gaya langsung di elemen itu sendiri. Metode ini hanya baik jika hanya terdapat satu elemen seperti itu di dalamnya dokumen HTML e yang memerlukan deskripsi gaya terpisah.
• Tulis deskripsi gaya untuk semua elemen dokumen HTML yang identik. Metode ini dibenarkan jika gaya halaman pada dasarnya berbeda dari keseluruhan desain situs (sekelompok halaman yang saling berhubungan).
• Masukkan deskripsi gaya elemen HTML ke dalamnya file terpisah CSS. Ini akan memungkinkan Anda untuk mengelola desain seluruh situs, setiap halaman situs yang mencantumkan referensi ke file CSS. Cara ini adalah yang paling banyak penggunaan yang efektif lembar gaya berjenjang.

Mari kita lihat lebih dekat setiap opsi, dan sekaligus mengenal aturan penulisan sintaksis CSS.

Atribut gaya.

Hampir setiap tag HTML memiliki atribut gaya, yang menunjukkan bahwa deskripsi gaya tertentu diterapkan pada tag ini.

Ada tertulis seperti ini:

gaya="">

Segala sesuatu yang akan ditulis di antara tanda kutip atribut gaya dan akan menjadi deskripsi gaya untuk dari elemen ini, dalam hal ini elemen

Misalnya saja:

style="warna: #ff0000; ukuran font:12px"> ini adalah paragraf dengan gaya individual

Dalam hal ini, kami menetapkan bahwa paragraf ini harus ditampilkan dalam warna merah dan memiliki ukuran font 12 piksel. Pada bab selanjutnya saya akan membahas secara detail tentang apa yang tertulis dalam tanda kutip, tetapi sekarang kita akan membahas tentang cara menerapkan CSS ke tag HTML apa pun.

Dengan menggunakan prinsip yang sama, Anda dapat menentukan gaya individual untuk hampir setiap elemen HTML.

style="warna latar belakang: #c5ffa0">

style="warna: #0000ff; ukuran font:18px">Semua tentang gajah

Belilah seekor gajah

style="warna: #ff0000; ukuran font:14px">

style="warna: #0000ff; ukuran font:16px">Sewa gajah

style="warna: #ff0000; ukuran font:14px">

Namun sekali lagi, metode memasukkan CSS ini hanya bagus jika Anda perlu menyetel gaya tertentu ke jumlah yang kecil elemen HTML.

Menandai (jangan bingung dengan atribut dengan nama yang sama) yang menjelaskan elemen-elemen yang kita perlukan.

Lihat contohnya, akan ada komentar di bawah.

Semua tentang gajah

Di situs ini Anda akan menemukan informasi apapun tentang gajah.

Belilah seekor gajah

Bersama kami Anda dapat membeli gajah terbaik dengan harga bersaing!!

Sewa gajah

Hanya di sini Anda dapat menyewa gajah apa saja!!

Seperti dapat dilihat dari contoh, kami mencapai hasil yang persis sama seperti pada kasus pertama, hanya saja sekarang kami tidak menetapkan gaya untuk setiap elemen satu per satu, tetapi menempatkannya di "kepala" dokumen, sehingga menunjukkan bahwa semua judul

,

- paragrafnya akan berwarna biru

- merah. Bayangkan betapa mudahnya pekerjaan kita jika ada seratus paragraf dan sekitar lima belas judul dalam satu halaman, dan dokumen itu sendiri akan lebih ringan dengan “menghapus” semua deskripsi gaya yang berulang untuk setiap elemen.

Sekarang komentar yang dijanjikan:

Menandai gaya elemen HTML tertentu dideklarasikan secara langsung sesuai dengan sintaks berikut:

Jika beberapa properti suatu elemen ditentukan dalam blok deklarasi gaya, properti tersebut dipisahkan oleh titik koma.

CSS dalam file eksternal terpisah.

Singkatnya, kita sampai pada hal utama, menurut saya, keunggulan CSS, yaitu kemampuan untuk meletakkan semua informasi terkait desain situs ke dalam file eksternal terpisah.

Jadi, buka notepad (atau editor lain) dan tulis teks berikut di dalamnya:

Isi (warna latar: #c5ffa0)
a (warna:#000060; berat font: tebal;)
a:hover (warna:#ff0000; berat font: tebal; dekorasi teks: tidak ada)
h1 (warna: #0000ff; ukuran font:18 piksel)
h2 (warna: #ff00ff; ukuran font:16px)
p (warna: #600000; ukuran font:14px)

Saya akan mencoba menjelaskan secara rinci apa yang kami tulis tentang hal aneh ini di bab-bab selanjutnya dari buku teks ini.

Semua! File deskripsi gaya telah dibuat! Sekarang yang tersisa hanyalah sedikit, yaitu memaksa halaman-halaman penting situs kita untuk mengambil informasi dari file ini.

Ini dilakukan dengan menggunakan tag (koneksi). Menandai serbaguna dan berfungsi untuk "menghubungkan" dokumen HTML dengan file eksternal tambahan yang memastikan pengoperasian yang benar. Menandai adalah sejenis tautan, hanya ditujukan bukan untuk pengguna, melainkan untuk program peramban (browser). Karena hanya membawa informasi layanan; terletak di kepala dokumen HTML di antara tag dan tidak ditampilkan di layar oleh browser.

Menandai memiliki atribut:

href- Jalur ke file.
rel- Mendefinisikan hubungan antara dokumen saat ini dan file yang direferensikan.

• ikon pintasan - Menentukan bahwa file yang disertakan adalah file .
• lembar gaya- Menentukan bahwa file yang disertakan berisi style sheet.
• application/rss+xml - File dalam format XML untuk mendeskripsikan umpan berita.

jenis- Tipe data MIME dari file terlampir.

Karena kita terhubung sebagai berkas eksternal meja bertingkat gaya, maka tautan layanan kami mengambil bentuk berikut:

Saya ulangi, untuk menghilangkan kemungkinan kesalahpahaman. Atribut rel memberikan nilai lembar gaya Karena kami menghubungkan lembar gaya berjenjang sebagai file eksternal, kami menunjukkan jalur ke file css (dalam contoh ini file tersebut disebut gayaku.css dan terletak di sebelah dokumen HTML tempat penulisannya tautan ini) kami juga menunjukkan bahwa file ini adalah teks dan berisi deskripsi gaya ketik = "teks/css"

Sekarang kami memasukkan baris ini ke header halaman situs kami dan menikmati hasilnya..

file mystyle.css
tubuh (warna latar: #c5ffa0)
a (warna:#000060; berat font: tebal;)
a:hover (warna:#ff0000; berat font: tebal; dekorasi teks: tidak ada)
h1 (warna: #0000ff; ukuran font:18 piksel)
h2 (warna: #ff00ff; ukuran font:16px)
p (warna: #600000; ukuran font:14px)
file indeks.html

Menu:

Semua tentang gajah

Di situs ini Anda akan menemukan informasi apapun tentang gajah.

Menu:

Belilah seekor gajah

Bersama kami Anda dapat membeli gajah terbaik dengan harga bersaing!!

Menu:

Sewa gajah

Hanya di sini Anda dapat menyewa gajah apa saja!!

Dalam contoh di atas, "situs tentang gajah", saat ini terdapat tiga halaman, yang masing-masing dikaitkan dengan satu file css eksternal - mystyle.css. Oleh karena itu, kami secara signifikan “membongkarnya” dan menjadikan desain seluruh situs “ramah seluler”. Bayangkan berapa kilobyte yang akan kita menangkan jika situs ini memiliki seratus halaman penuh!? Dan juga, berapa banyak waktu yang bisa kita hemat jika kita perlu mengubah sesuatu pada desainnya!?

Dalam bab ini, kita melihat tiga cara untuk menyematkan CSS dalam dokumen HTML. Mana yang lebih baik untuk digunakan?

• Gunakan atribut gaya untuk elemen apa pun, jika elemen ini dengan gaya yang berbeda dari elemen lainnya adalah satu-satunya di seluruh situs.
• Gunakan tanda '); var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) ( return ' url(\'' + dir_path + '/' + str.replace (/url\(\'/gi, '').replace(/^\s+|\s+$/gm, ''); )); splited_css += "