Prinsip masa kini Membuat dokumen HTML menyiratkan pemisahan yang jelas antara konten dokumen dan tampilannya (gaya pemformatan). Ini menyederhanakan pengeditannya, mengurangi ukuran halaman yang diunduh, mengurangi waktu yang diperlukan untuk membuat dokumen, dan menyajikan dokumen yang sama dengan gaya yang berbeda. Memisahkan gaya pemformatan dari konten dilakukan dengan menggunakan tabel bertingkat gaya (dari Bahasa Inggris Cascading Style Sheets, disingkat CSS). Di sini, kata "cascading" mengacu pada kemampuan untuk menggunakan sekumpulan style sheet untuk mewakili satu dokumen. Browser menggabungkan kumpulan tabel menurut aturan yang ditetapkan, sesuai dengan prioritas yang ditentukan, dan menampilkan dokumen di jendelanya berdasarkan gaya yang dihasilkan.

Cascading style sheet adalah file teks yang mendefinisikan penyeleksi dan mereka definisi. Tag dapat bertindak sebagai pemilih bahasa HTML, kelas, pengidentifikasi. Definisi pemilih ditentukan di dalam kurung kurawal dengan pasangan:<свойство>: <значение>. Misalnya, untuk mengatur warna font tag menjadi merah

definisi berikut harus ditulis:

Di sini h1 adalah pemilih, warna adalah properti, merah adalah nilainya. Di bawah ini kita akan melihat lebih detail berbagai penyeleksi dan kumpulan properti yang dapat digunakan untuk memanipulasi tampilan dokumen di jendela browser.

4.1. Menanamkan CSS dalam Dokumen HTML

Cascading style sheet hanya diterapkan pada dokumen jika dilampirkan padanya. Hal ini dapat dilakukan dengan berbagai cara, yang dapat digabungkan dalam satu dokumen. Pilihan umum adalah menyertakan tabel di bagian kepala, yang ditulis dalam file teks dengan ekstensi css:

Dalam hal ini, jumlah tabel yang terhubung tidak terbatas. DI DALAM dalam contoh ini satu tabel terhubung dari file style.css, yang terletak di direktori css, mis. Jalur akses umum ke file ini adalah: http://domain/css/styles.css.

Style sheet dapat disematkan langsung ke badan dokumen. Ini biasanya dilakukan di bagian tersebut , tetapi dapat dijelaskan di bagian lain mana pun dari dokumen ini. Hal utama adalah definisi style sheet sebelum penggunaannya. Untuk Implementasi CSS Entri berikut digunakan di badan dokumen:

Opsi selanjutnya adalah mengimpor style sheet ke dalam dokumen HTML menggunakan properti

@import: url(URL ke file css);

Properti ini dapat ditulis di dalam tag

Perlu dicatat bahwa properti @import harus digunakan dengan sangat hati-hati, karena dalam beberapa kasus, metode koneksi ini dapat menyebabkan situasi yang salah, misalnya ketika menggunakan JavaScript Sehubungan dengan CSS, mungkin saja dokumen dimuat sebelum tabel yang diperlukan diimpor. Akibatnya skrip tidak dapat berfungsi sesuai keinginan pengembang. Kecuali benar-benar diperlukan, disarankan untuk menggunakan koneksi melalui tag, bukan @import di bagian (opsi pertama dijelaskan).

Opsi terakhir untuk menghubungkan style sheet adalah melalui atribut style, yang ada di setiap tag bahasa HTML. Misalnya, Anda dapat menentukan biru font untuk tag tertentu

Sebagai berikut:

Biru

Namun, opsi ini tidak memenuhi persyaratan untuk memisahkan konten dokumen dan jenisnya, sehingga sebaiknya digunakan dalam kasus khusus dan pribadi.

Untuk menerapkan cascading style sheet ke dokumen HTML, lembar gaya tersebut harus ditautkan atau disematkan di dalamnya. Hal ini dapat dilakukan dengan empat cara:

Sisipkan langsung ke kepala dokumen HTML. Aturan style sheet diapit dalam tag kontainer

Memasukkan tag secara langsung sebagai baris deskripsi dalam suatu atribut gaya.

Impor - menyisipkan style sheet dari file eksternal. File style sheet adalah file teks dengan ekstensi css. Operator @impor digunakan sebelum aturan stylesheet lain dalam wadah

Menautkan ke style sheet di file eksternal menggunakan tautan yang ditentukan oleh tag , yang ditempatkan dalam sebuah wadah . Pandangan umum:

Contoh.

href="http://www.myserver.ru/css/mystyle.css">

kepala>

Style sheet disisipkan menggunakan tag , yang harus ditempatkan di bagian tersebut dokumen:

), ditempatkan di bagian HEAD dokumen. Saat membuat style sheet sebaris, Anda harus menentukan nilai atribut type dari elemen STYLE, dan Anda juga dapat menentukan nilai atribut media. Tujuan dari atribut ini dalam hal ini bertepatan dengan tujuan dari atribut HTML dari elemen LINK dengan nama yang sama.

Selain menghubungkan style sheet eksternal dengan merujuknya menggunakan elemen LINK, Anda dapat menghubungkan style sheet eksternal dari style sheet itu sendiri. Hal ini memungkinkan Anda mengurangi ukuran style sheet secara signifikan jika seharusnya berisi fragmen yang identik. Menghubungkan tabel eksternal dilakukan dengan menggunakan kata kunci@impor. Aturan CSS dalam hal ini memiliki format berikutnya:

@import url("URI stylesheet eksternal");

Contoh koneksi CSS eksternal mungkin terlihat seperti ini:

P (ukuran font: 16pt)

@import url("external_stylesheer.css"); /*menghubungkan style sheet*/

Contoh dalam bab ini menggunakan style sheet bawaan. Namun, perlu diingat bahwa hal ini dilakukan hanya karena, pertama, contohnya kecil dan tidak masuk akal untuk membuat dua file untuk contoh tersebut, dan kedua, contoh seperti itu lebih mudah untuk dimasukkan ke dalam buku dan lebih baik dipahami dengan cara ini. Dalam praktiknya, akan lebih mudah menggunakan style sheet eksternal. Kemudian, jika Anda mengubah gaya satu elemen, Anda tidak perlu mengunggah ulang seluruh konten dokumen ke server: cukup perbarui file dengan style sheet yang diubah.