Dokumen ini menetapkan metode untuk melampirkan gaya ke dokumen HTML menggunakan JavaScript bahasa berbasis properti yang ada. Dokumen ini tidak berusaha menjelaskan sintaks JavaScript. Dokumentasi JavaScript dapat ditemukan di http. //rumah. netscape. com/comprod/products/navigator/version_2. 0/script/script_info/index. html

1    Konsep Dasar

Merancang style sheet sederhana itu mudah. Seseorang hanya perlu mengetahui sedikit HTML dan beberapa pernyataan penugasan JavaScript sederhana. Misalnya, untuk mengatur warna teks elemen 'H1' menjadi biru, bisa dikatakan

   document.tags.H1.color = "blue"

Contoh di atas adalah contoh sederhana penggunaan JavaScript untuk mengatur properti warna semua tag 'H1' menjadi "biru". Sementara contoh hanya memengaruhi satu dari banyak properti yang digunakan dalam merender dokumen HTML, contoh tersebut memenuhi syarat sebagai lembar gaya independen. Dikombinasikan dengan style sheet lain akan menentukan presentasi akhir dari dokumen

Contoh lebih lanjut dalam spesifikasi ini menganggap "dokumen" tercakup secara implisit. Oleh karena itu contoh di atas akan terbaca

    tags.h1.color = "blue"

1. 1    Penahanan dalam HTML

Agar style sheet mempengaruhi presentasi, agen pengguna (UA) harus mengetahui keberadaan mereka. Draf kerja W3C lainnya, HTML3 dan Style Sheets [4], menjelaskan bagaimana menghubungkan HTML dengan style sheet

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Contoh menunjukkan tiga cara untuk menggabungkan arahan gaya dan HTML

Elemen 'LINK' mereferensikan style sheet alternatif yang dapat dipilih pembaca, sementara style sheet yang diimpor secara otomatis digabungkan dengan style sheet lainnya

Secara tradisional, UA diam-diam mengabaikan tag yang tidak dikenal. Akibatnya, UA lama akan mengabaikan elemen 'STYLE', tetapi kontennya akan diperlakukan sebagai bagian dari badan dokumen, dan dirender seperti itu. Selama fase transisi, konten elemen 'STYLE' mungkin disembunyikan menggunakan komentar SGML

Karena elemen 'STYLE' dideklarasikan sebagai "CDATA" di DTD (sebagaimana didefinisikan dalam [4]), parser SGML yang sesuai tidak akan menganggap style sheet di atas sebagai komentar yang harus dihapus

1. 2    Warisan

Pada contoh pertama, warna elemen 'H1' disetel menjadi biru. Misalkan kita memiliki elemen 'H1' dengan elemen yang ditekankan di dalamnya

  The headline is important!

Jika tidak ada warna yang ditetapkan untuk 'EM', "is" yang ditekankan akan mewarisi warna elemen induk, sehingga juga akan muncul dengan warna biru. Properti gaya lainnya juga diwariskan

Warisan dimulai dari leluhur tertua, di elemen tingkat atas. Dalam HTML, ini adalah elemen 'HTML' yang diikuti oleh elemen 'BODY'. Untuk menyetel properti gaya "default", seseorang dapat menggunakan 'BODY' sebagai pemilih

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

Ini akan efektif bahkan ketika penulis telah menghilangkan tag 'BODY' (yang legal) karena pengurai akan menyimpulkan tag yang hilang. Contoh di atas mengatur warna teks menjadi hitam dan warna background menjadi putih

Beberapa properti gaya tidak diwariskan dari elemen induk ke elemen anak. Paling sering secara intuitif mengapa tidak demikian. Misalnya, properti tidak mewarisi, tetapi latar belakang elemen induk akan bersinar secara default

1. 3    Kelaskan sebagai Pemilih

Untuk meningkatkan perincian kontrol atas elemen, HTML3 mengusulkan atribut baru. 'KELAS'. Semua elemen di dalam elemen 'BODY' dapat diklasifikasi dan kelas tersebut dapat dialamatkan dalam style sheet. Kata kunci 'semua' digunakan untuk menentukan bahwa semua tag di dalam kelas dipengaruhi oleh properti gaya

 
  Title
  
 
 
  Way too green
 

Aturan pewarisan normal berlaku untuk elemen yang dikelaskan;

Hanya satu kelas yang dapat ditentukan per pemilih. 'kelas. punk. rap' oleh karena itu merupakan pemilih yang tidak valid. (Pemilih kontekstual, dijelaskan di bawah, dapat memiliki satu kelas per pemilih sederhana. )

1. 4    ID sebagai Pemilih

HTML3 juga memperkenalkan atribut 'ID' yang dijamin memiliki nilai unik di atas dokumen. Oleh karena itu dapat menjadi sangat penting sebagai pemilih style sheet. Atribut 'ID' memungkinkan pengecualian gaya tertentu untuk diungkapkan

  ids.z098y.letterSpacing = "0.3em"

  
Wide text

1. 5 Menggabungkan Class dan ID sebagai Selector

Kadang-kadang diinginkan untuk mereferensikan hanya tag-tag yang ada di dalam set tertentu yang ditentukan oleh sebuah kelas. Dengan menentukan nama tag alih-alih menggunakan kata kunci 'semua', hanya tag yang cocok dengan nama dan di dalam kelas yang akan terpengaruh

This should be red
This should be in the normal document color

Contoh ini menyetel semua tag 'H1' milik kelas "foo" ke warna merah

1. 6    Pemilih Kontekstual

Warisan menghemat pengetikan desainer. Alih-alih menyetel semua properti gaya, seseorang dapat membuat default dan kemudian membuat daftar pengecualian. Untuk memberi elemen 'EM' warna yang berbeda, seseorang dapat menentukan

  with(tags) {
    H1.color = "blue";
    EM.color = "red";
  }

Saat style sheet ini aktif, semua bagian yang ditekankan di dalam atau di luar 'H1' akan berubah menjadi merah. Mungkin seseorang hanya menginginkan elemen 'EM' dalam 'H1' menjadi merah;

    tags.h1.color = "blue"

Pemilih sekarang menjadi pola pencarian di tumpukan elemen terbuka. Jenis pemilih ini disebut sebagai "pemilih kontekstual". Selektor kontekstual terdiri dari beberapa penyeleksi sederhana sebagai argumen untuk fungsi "kontekstual". Hanya elemen yang cocok dengan pemilih sederhana terakhir (dalam hal ini elemen 'EM') yang dialamatkan, dan hanya jika pola pencarian cocok. Selektor kontekstual mencari hubungan leluhur, tetapi hubungan lain (mis. g. orangtua-anak) dapat diperkenalkan dalam revisi selanjutnya. Pada contoh di atas, pola pencarian cocok jika 'EM' adalah turunan dari 'H1';

    tags.h1.color = "blue"

Di sini, pemilih pertama mencocokkan elemen 'LI' dengan setidaknya satu leluhur 'UL'. Selektor kedua cocok dengan subset dari yang pertama. Elemen 'LI' dengan setidaknya dua nenek moyang 'UL'. Konflik diselesaikan dengan pemilih kedua yang lebih spesifik karena pola pencarian yang lebih panjang

Pemilih kontekstual dapat mencari tag, kelas, ID, atau kombinasinya

    tags.h1.color = "blue"

Pemilih pertama mencocokkan semua tag P dalam tag DIV. Pemilih kedua mencocokkan semua elemen H1 dengan kelas leluhur 'kemerahan'. Pemilih ketiga cocok dengan semua elemen 'CODE' yang merupakan turunan dari elemen dengan 'ID=x78y'

1. 7    Komentar

Komentar tekstual ditentukan oleh JavaScript dan mirip dengan yang ada di bahasa pemrograman C dan C++

    tags.h1.color = "blue"

Komentar tidak dapat disarangkan

2. 0    Elemen Tipografi

Beberapa efek tipografi umum tidak dikaitkan dengan elemen struktural melainkan item tipografi sebagaimana diformat di kanvas. Di sini kami mencoba menunjukkan beberapa efek umum

2. 1    Gaya 'Baris pertama'

Berikut ini digunakan untuk menerapkan gaya khusus pada baris pertama seperti yang diformat pada kanvas

    tags.h1.color = "blue"

Pada UA berbasis teks, ini dapat diformat sebagai

    tags.h1.color = "blue"

(Dalam contoh di atas, UA memilih untuk mengganti teks huruf kecil dengan huruf besar karena huruf kecil tidak tersedia. Spesifikasi ini tidak menjelaskan bagaimana UA harus merender dokumen ketika sumber daya yang diperlukan, seperti warna dan font, tidak tersedia. )

Array garis dapat diindeks untuk menerapkan gaya ke baris tertentu dalam elemen blok

2. 2    Gaya 'Huruf pertama'

Gaya 'firstLetter' digunakan untuk "initial caps" dan "drop caps" yang merupakan efek tipografi umum. Ini adalah bagaimana Anda bisa membuat huruf awal dropcap menjadi dua baris

    tags.h1.color = "blue"

(Elemen 'SPAN' diusulkan sebagai elemen level karakter baru untuk HTML3. )

Jika UA berbasis teks mendukung gaya 'hurufpertama', gaya di atas dapat diformat sebagai

    tags.h1.color = "blue"

Gaya 'hurufpertama' hanya dapat dilampirkan ke elemen tingkat blok

3. 0    Menggunakan Konstruksi Bahasa Pemrograman di Style Sheets

JavaScript adalah bahasa pemrograman yang kuat. Oleh karena itu dapat digunakan untuk melakukan hal-hal yang tidak bisa dilakukan oleh bahasa style sheet biasa. Misalnya, fungsi dan nilai yang ditetapkan dapat digunakan untuk membuat ekspresi informasi gaya lebih mudah bagi pembuat style sheet. Selain itu, penghitungan yang rumit dan kueri properti eksternal yang direfleksikan ke dalam cakupan JavaScript dapat digunakan untuk menghitung nilai properti dengan cara baru dan unik

3. 1    Menetapkan Fungsi Evaluasi Gaya

Untuk menetapkan fungsi gaya ke tag, seseorang dapat menggunakan properti "apply". Fungsi yang ditetapkan ke properti "apply" akan dijalankan setiap kali tag ditemukan

    tags.h1.color = "blue"

Gaya ini bila diterapkan ke daftar bersarang dapat memiliki efek berikut

Fungsi dapat ditetapkan ke tag beralamat apa pun sebagai berikut

    tags.h1.color = "blue"

_9

Contoh yang jauh lebih rumit dan/atau berguna dapat dibayangkan

3. 2 Mengevaluasi Ekspresi untuk Nilai Properti

Properti apa pun dapat diberikan hasil ekspresi JavaScript. Ekspresi JavaScript dapat digunakan untuk menghitung nilai yang rumit dan untuk menanyakan properti lain yang mungkin tercermin

Ini sebuah contoh

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Semakin banyak properti yang direfleksikan ke dalam JavaScript, kekuatan ekspresif meningkat secara dramatis. Lembar gaya akan dapat menyesuaikan dokumen dengan lingkungan khusus pengguna

3. 3 Menyederhanakan Tugas Menggunakan Metode

Metode dapat digunakan untuk menyederhanakan penugasan beberapa nilai. Misalnya penugasan margin dapat dibuat lebih mudah sebagai berikut

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

4    Aturan Prioritas

Lebih dari satu style sheet dapat memengaruhi presentasi secara bersamaan. Ada dua alasan utama untuk fitur ini. modularitas dan keseimbangan penulis/pembaca

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Kadang-kadang akan timbul konflik antara style sheet yang mempengaruhi presentasi. Urutan pembacaan gaya menentukan urutan prioritas dengan gaya terakhir yang diutamakan. Pengecualian untuk aturan itu adalah bahwa style sheet pembaca selalu lebih diutamakan daripada style sheet penulis. Aturan pembaca dan penulis mengesampingkan nilai default UA

4. 1    Urutan Diutamakan untuk Tag, ID, dan Kelas

Untuk menemukan nilai kombinasi elemen/properti, algoritma berikut harus diikuti

1. Temukan semua deklarasi yang berlaku untuk elemen/properti yang dimaksud. Deklarasi berlaku jika pemilih cocok dengan elemen yang dimaksud. Jika tidak ada deklarasi yang berlaku, nilai yang diwariskan akan digunakan. Jika tidak ada nilai yang diwariskan (ini adalah kasus pada elemen root dan untuk properti yang tidak diwariskan), nilai awal digunakan
2. Urutkan deklarasi berdasarkan bobot eksplisit
3. Urutkan berdasarkan asal. lembar gaya pembaca menimpa lembar gaya penulis yang menimpa nilai default UA
4. Urutkan berdasarkan kekhususan pemilih. pemilih yang lebih spesifik akan mengesampingkan yang lebih umum. Untuk mengetahui spesifisitasnya, hitung jumlah atribut ID di pemilih (a), jumlah atribut CLASS di pemilih (b), dan jumlah nama tag di pemilih (c). Menggabungkan tiga angka (dalam sistem angka dengan basis besar) memberikan kekhususan. Beberapa contoh

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

_3
5. Urutkan berdasarkan urutan yang ditentukan. jika dua aturan memiliki bobot yang sama, yang terakhir ditentukan harus hidup

Pencarian nilai properti dapat dihentikan setiap kali satu aturan memiliki bobot lebih tinggi daripada aturan lain yang berlaku untuk kombinasi elemen/properti yang sama

Atribut 'STYLE' pada elemen harus dianggap seolah-olah atribut ID telah ditentukan di akhir style sheet. Misalnya

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

UA dapat memilih untuk menghormati atribut gaya lainnya (mis. g. 'ALIGN') seolah atribut 'STYLE' telah digunakan. Saat bertentangan dengan atribut gaya lainnya, atribut 'GAYA' harus menang

5    Model pemformatan

Dokumen ini menyarankan model pemformatan berorientasi kotak sederhana. Setiap elemen tingkat blok (mis. g. 'H1' dan 'P', tetapi bukan 'EM') dikelilingi oleh sebuah kotak. Ukuran kotak adalah jumlah dari lebar elemen (mis. e. teks atau gambar yang diformat), padding, border dan margin

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Ukuran margin, border dan padding masing-masing diatur dengan , dan properti. Area pengisi menggunakan latar belakang yang sama dengan elemen itu sendiri (diatur dengan properti). Warna dan gaya untuk perbatasan diatur dengan properti 'perbatasan'. Margin selalu transparan, sehingga elemen induk akan bersinar

Contoh berikut menunjukkan bagaimana margin dan padding memformat elemen 'UL' dengan dua turunan. Untuk menyederhanakan diagram tidak ada batas

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Secara teknis, properti padding dan margin tidak diwariskan. Namun, seperti yang ditunjukkan contoh, penempatan suatu elemen bersifat relatif terhadap leluhur dan saudara kandung sehingga properti padding dan margin elemen ini berpengaruh pada turunannya.

Jika lebar batas telah disetel (nilai defaultnya adalah '0'), batas akan muncul di antara padding dan margin

5. 1    Pemformatan vertikal

Lebar margin menentukan jarak minimum ke tepi kotak di sekitarnya. Dua atau lebih margin yang berdampingan (mis. e. , tanpa batas, padding, atau konten di antaranya) diciutkan untuk menggunakan nilai margin maksimum. Pada contoh di atas, margin antara dua elemen 'LI' diciutkan dengan menggunakan maksimum 'margin-bottom' elemen LI pertama dan 'margin-top' elemen LI kedua. Demikian pula, jika padding antara 'UL' dan elemen 'LI' pertama (konstanta "E") adalah nol, margin elemen UL dan LI pertama harus diciutkan

Dalam hal margin negatif, maksimum absolut dari margin negatif yang berdampingan harus dikurangi dari maksimum margin positif yang berdampingan.

5. 2    Pemformatan horizontal

Tujuh satuan panjang mempengaruhi dimensi horizontal sebuah kotak. margin kiri, batas kiri, padding kiri, lebar, padding kanan, batas kanan, margin kanan. Ditambahkan, ini harus sama dengan lebar elemen induk. Oleh karena itu, seseorang tidak dapat menentukan nilai untuk semua properti dan mengharapkannya dihormati. Kekuatan relatif di antara mereka adalah sebagai berikut

1. perbatasan kiri
2. perbatasan kanan
3. bantalan kiri
4. bantalan kanan
5. lebar
6. margin kiri
7. batas kanan

Secara default, nilai properti 'width' adalah 'auto' yang artinya akan dihitung secara otomatis berdasarkan nilai properti lainnya. Namun, jika 'lebar' diberi nilai lain, atau dimensi tidak bertambah karena alasan lain, properti dengan peringkat terendah akan diberi 'otomatis', i. e. dihitung secara otomatis

5. 3    Daftar

Elemen dengan nilai properti 'display' dari 'list-item' diawali dengan label. Jenis label ditentukan oleh properti 'list-style'. Label tidak dianggap sebagai bagian dari konten, dan akan ditempatkan di luar konten. Rendering label harus didasarkan pada properti font dan warna elemen yang dimilikinya

5. 4    Kanvas

Kanvas adalah bagian dari permukaan gambar UA tempat dokumen dirender. Tidak ada elemen struktural dokumen yang sesuai dengan kanvas. Ini menimbulkan masalah saat dokumen tidak memenuhi seluruh kanvas. bagaimana seharusnya area yang tidak terisi ditampilkan? . Untuk mendukung ekspektasi desainer, kami memperkenalkan aturan khusus untuk menemukan latar belakang kanvas

Jika nilai 'latar belakang' dari elemen 'HTML' berbeda dari 'transparan' maka gunakanlah, jika tidak, gunakan nilai 'latar belakang' dari elemen 'BODY'. Jika nilai yang dihasilkan adalah 'transparan', rendering tidak ditentukan

Aturan ini memungkinkan

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Pada contoh di atas, kanvas akan ditutup dengan "marmer". Warna latar belakang elemen 'BODY' (yang mungkin atau mungkin tidak sepenuhnya menutupi kanvas) akan berwarna merah

Sampai cara lain untuk menangani kanvas tersedia, kami merekomendasikan pengaturan properti kanvas pada elemen 'BODY'

5. 5    Elemen mengambang

Menggunakan properti, elemen dapat dideklarasikan berada di luar aliran normal elemen. Misalnya, dengan menyetel properti 'float' dari suatu gambar ke 'kiri', aliran normal akan berputar di sisi kanan. Posisi gambar akan diambil dari properti margin

  
    title
    
    
  
  
    Headline is blue
    
While the paragraph is green.
  

Contoh di atas dapat diformat sebagai

Bilah vertikal dan karakter garis bawah digunakan untuk menunjukkan kotak pembatas gambar

Biasanya, hanya elemen gambar yang diatur menjadi mengambang. Namun, tidak ada yang menghalangi properti 'float' untuk digunakan pada elemen lain

5. 6    Elemen yang Diganti

Elemen yang diganti adalah elemen yang diganti dengan konten yang ditunjuk dari elemen tersebut. Misalnya, dalam HTML, elemen IMG diganti dengan gambar yang ditunjuk oleh atribut SRC. Orang dapat berasumsi bahwa elemen yang diganti datang dengan lebar dan tinggi intrinsiknya sendiri. Jika nilai untuk 'width' adalah 'auto', lebar intrinsik harus digunakan sebagai lebar elemen. Jika nilai selain 'otomatis' ditentukan dalam lembar gaya, nilai ini harus digunakan dan elemen yang diganti harus diubah ukurannya (metode pengubahan ukuran akan bergantung pada jenis media). Properti 'tinggi' digunakan dengan cara yang sama

6    Properti

Lembar gaya memengaruhi penyajian dokumen dengan menetapkan nilai ke properti gaya. Bagian ini mencantumkan properti gaya yang ditentukan dan daftar kemungkinan nilainya yang sesuai

6. 1    Notasi untuk Nilai Properti

Dalam teks di bawah ini, nilai yang diizinkan untuk setiap properti dicantumkan dengan sintaks seperti berikut

Nilai. N. NW. NE
Nilai. [. tebal. tipis ]{1,4}
Nilai. ?[ /]?
Nilai

The words between "<" and ">" give a type of value. The most common types are,,,and; these are described in the section on units. The more specialized types (e.g.and) are described under the property where they appear.

Kata lainnya adalah kata kunci yang harus muncul secara harfiah. Garis miring (/) juga dianggap sebagai kata kunci

Beberapa hal yang disejajarkan berarti bahwa semuanya harus terjadi, dalam urutan tertentu. Sebuah bar (. ) memisahkan alternatif. salah satunya harus terjadi. Bilah ganda (A. B) berarti bahwa A atau B atau keduanya harus terjadi, dalam urutan apa pun. Tanda kurung ([]) untuk pengelompokan. Penjajaran lebih kuat dari palang ganda, dan palang ganda lebih kuat dari palang. Jadi "a b. C. d e" sama dengan "[ a b ]. [ c. [d e]]"

Setiap jenis, kata kunci, atau grup dalam tanda kurung dapat diikuti oleh salah satu pengubah berikut

• Tanda bintang (*) menunjukkan bahwa jenis, kata, atau grup sebelumnya diulangi sebanyak nol kali atau lebih
• Tanda tambah (+) menunjukkan bahwa jenis, kata, atau grup sebelumnya diulang satu kali atau lebih
• Tanda tanya (?) menunjukkan bahwa jenis, kata, atau grup sebelumnya adalah opsional
• Sepasang angka dalam kurung kurawal ({A,B}) menunjukkan bahwa jenis, kata, atau grup sebelumnya diulang setidaknya A dan paling banyak B kali

6. 2    Properti Font

Mengatur properti font akan menjadi salah satu penggunaan style sheet yang paling umum. Sayangnya, tidak ada taksonomi yang terdefinisi dengan baik dan diterima secara universal untuk mengklasifikasikan font, dan istilah yang berlaku untuk satu jenis font mungkin tidak sesuai untuk yang lain. e. g. 'Italic' umumnya digunakan untuk melabeli teks miring, tetapi istilah ini tidak sesuai untuk font sans-serif (yang font miringnya disebut 'miring'). Spesifikasi ini menunjukkan terminologi liberal untuk mendeskripsikan font, dan tingkat detail yang mirip dengan aplikasi desktop publishing umum

Karakteristik font tambahan sedang dikerjakan di kelompok kerja Font W3C

6. 2. 1    'Ukuran font'

Nilai
Awal. medium
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. relatif terhadap ukuran font elemen induk

Jika nilainya adalah angka, itu ditafsirkan sebagai kata kunci relatif di mana nilai '1' setara dengan 'lebih besar'. Misalnya, jika elemen induk memiliki ukuran font 'sedang', nilai '-2' akan membuat ukuran font elemen saat ini menjadi 'x-small'

Nilai panjang dan persentase tidak boleh memperhitungkan tabel ukuran font saat menghitung ukuran font elemen

Untuk sebagian besar properti, nilai panjang mengacu pada ukuran font elemen saat ini. Pada unit panjang properti 'ukuran font' (mis. g. 'em' dan 'ex'), mengacu pada ukuran font elemen induk

Perhatikan bahwa aplikasi dapat menafsirkan ulang ukuran eksplisit, bergantung pada konteksnya. Misalnya, di dalam adegan VR, ukuran font mungkin berbeda karena distorsi perspektif

Contoh

Jika disarankan faktor penskalaan 1. 5 digunakan, tiga aturan terakhir identik

6. 2. 2    'gayafont'

Nilai. normal. miring. topi kecil. miring. topi kecil. topi kecil
Awal. normal
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. T/A

Kombinasi hukum dari nilai-nilai tersebut adalah

• salah satu dari empat nilai ('normal', 'miring', 'miring', 'huruf kecil')
• 'miring' atau 'miring', dikombinasikan dengan 'huruf kecil'

Jika gaya font yang disukai tidak dapat dicapai, UA harus melakukan upaya terbaik untuk menemukan penggantian yang dapat diterima. Seringkali, font 'miring' dapat diganti dengan font 'miring'. Jika 'huruf kecil' tidak tersedia, huruf kapital dengan ukuran font yang lebih kecil dapat digunakan untuk merender karakter kecil jika resolusi media keluaran sesuai untuk ini

Dalam contoh di atas, teks yang ditekankan di dalam 'H1' akan muncul dalam huruf miring biasa

6. 2. 3    'Tinggi garis'

Nilai
Awal. khusus UA
Berlaku untuk. elemen tingkat blok
Diwariskan. Ya
Nilai persentase. mengacu pada ukuran font elemen itu sendiri

Properti mengatur jarak antara garis dasar dua garis yang berdekatan. Ini hanya berlaku untuk elemen level blok

Ketika nilai numerik ditentukan, tinggi garis diberikan oleh ukuran font elemen saat ini dikalikan dengan nilai numerik. Ini berbeda dari nilai persentase dalam cara mewarisi. ketika nilai numerik ditentukan, elemen anak akan mewarisi faktor itu sendiri, bukan nilai yang dihasilkan (seperti halnya dengan dan unit lainnya)

Nilai negatif tidak diperbolehkan

Tiga aturan dalam contoh di bawah ini memiliki tinggi garis resultan yang sama

Disarankan agar UA menetapkan nilai awal menjadi angka dalam kisaran 1. 0 sampai 1. 2

6. 3    Properti Warna dan Latar Belakang

6. 3. 1    'warna'

Nilai
Awal. khusus UA
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. T/A

Properti ini menjelaskan warna teks dari suatu elemen, mis. e. warna "depan". Ada berbagai cara untuk menentukan warna merah

6. 3. 2    'latar belakang'

Nilai
Awal. kosong
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Contoh yang sesuai

6. 3. 3   'bgColor'

Nilai
Awal. kosong
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Contoh yang sesuai

6. 4    Properti Teks

6. 4. 1    'Penempatan kata'

Nilai. normal
Awal. normal
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. T/A

Satuan panjang menunjukkan penambahan spasi default di antara kata-kata. Nilai bisa negatif, tetapi mungkin ada batasan khusus implementasi. UA bebas untuk memilih algoritme spasi yang tepat. Penspasian kata juga dapat dipengaruhi oleh pembenaran (yang merupakan nilai properti 'sejajarkan')

  The headline is important!

Di sini, spasi kata antara setiap kata dalam elemen 'H1' akan ditambah dengan 4 piksel

6. 4. 2    'spasi huruf'

Nilai. normal
Awal. normal
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. T/A

Satuan panjang menunjukkan penambahan spasi default di antara karakter. Nilai bisa negatif, tetapi mungkin ada batasan khusus implementasi. UA bebas untuk memilih algoritme spasi yang tepat. Penspasian huruf juga dapat dipengaruhi oleh pembenaran (yang merupakan nilai dari properti 'sejajarkan')

  The headline is important!

Di sini, spasi kata antara setiap karakter dalam elemen 'BLOCKQUOTE' akan ditambah dengan '0. 1em'

6. 4. 3    'dekorasi teks'

Nilai. tidak ada. [ garis bawahi. garis besar. line-through. berkedip]+
Awal. tidak ada
Berlaku untuk. semua elemen
Diwariskan. tidak, tapi lihat penjelasan di bawah ini
Nilai persentase. T/A

Properti ini menjelaskan dekorasi yang ditambahkan ke teks elemen. Jika elemen tidak memiliki teks (mis. g. elemen IMG dalam HTML) atau merupakan elemen kosong (mis. g. ""), properti ini tidak berpengaruh

Warna yang diperlukan untuk dekorasi teks harus diturunkan dari nilai properti 'color'

Properti ini tidak diwariskan, tetapi elemen turunan harus sesuai dengan leluhurnya. e. g. , jika sebuah elemen digarisbawahi, garis harus menjangkau elemen anak. Warna garis bawah akan tetap sama meskipun elemen keturunan memiliki nilai 'warna' yang berbeda

  The headline is important!

Kami berharap vendor UA mengusulkan beberapa nilai baru pada properti ini. Pemformat harus memperlakukan nilai yang tidak diketahui sebagai 'garis bawah'

6. 4. 4    'Perataan Vertikal'

Nilai. garis dasar. sub. super. atas. teks-atas. tengah. dasar. teks-bawah
Awal. garis dasar
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. mengacu pada 'line-height' dari elemen itu sendiri

Properti memengaruhi posisi vertikal elemen. Satu set kata kunci relatif terhadap elemen induk

Kumpulan properti lainnya relatif terhadap garis yang diformat tempat elemen tersebut menjadi bagiannya

Menggunakan penyelarasan 'atas' dan 'bawah', situasi yang tidak dapat dipecahkan dapat terjadi di mana dependensi elemen membentuk satu lingkaran

Nilai persentase mengacu pada 'line-height' dari elemen itu sendiri. e. g. , nilai '-100%' akan menurunkan elemen ke garis dasar baris berikutnya

6. 4. 5    'Transformasiteks'

Nilai. memanfaatkan. huruf besar. huruf kecil. tidak ada
Awal. tidak ada
Berlaku untuk. semua elemen
Diwariskan. Ya
Nilai persentase. T/A

Transformasi aktual dalam setiap kasus bergantung pada bahasa manusia dan UA

  The headline is important!

Contoh di atas akan menempatkan elemen 'H1' dalam teks huruf besar

6. 4. 6    'Perataanteks'

Nilai. kiri. Kanan. tengah. membenarkan
Awal. khusus UA
Berlaku untuk. elemen tingkat blok
Diwariskan. Ya
Nilai persentase. T/A

Properti ini menjelaskan bagaimana teks disejajarkan di dalam elemen. Algoritma pembenaran aktual yang digunakan adalah UA dan bergantung pada bahasa manusia

Contoh

  The headline is important!

Perhatikan bahwa perataan relatif terhadap lebar elemen, bukan kanvas. Jika 'justify' tidak didukung, UA akan menyediakan penggantinya. Biasanya, ini akan menjadi 'kiri' untuk bahasa barat

6. 4. 7    'textIndent'

Nilai
Awal. 0
Berlaku untuk. elemen tingkat blok
Diwariskan. Ya
Nilai persentase. lihat lebar elemen induk

Properti menentukan lekukan yang muncul sebelum baris pertama yang diformat. 'text-indent' mungkin negatif, tetapi mungkin ada batasan khusus implementasi. Inden tidak disisipkan di tengah elemen yang dipecah oleh elemen lain (seperti 'BR' dalam HTML)

Contoh

  The headline is important!

6. 5    Properti Kotak

Lihat untuk contoh tentang cara menggunakan properti kotak

6. 5. 1    'Margin kiri', 'Margin kanan', 'Margin atas', 'margin bawah', 'margin'

Nilai. [. auto ]{1,4} (untuk properti 'margin')
Awal. 0
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. lihat lebar elemen induk

Properti ini mengatur margin elemen. properti 'margin' mengatur batas untuk keempat sisi sedangkan properti lainnya hanya mengatur sisinya masing-masing

Untuk properti 'margin', empat panjang masing-masing diterapkan ke atas, kanan, bawah, dan kiri

  The headline is important!

Metode 'margin' adalah cara singkat untuk mengatur semua nilai margin di tempat yang sama di style sheet. Properti ini hanya mengizinkan satu nilai. Aturan terakhir dari contoh di atas sama dengan contoh di bawah ini

  The headline is important!

Margin menunjukkan jarak minimal antara batas dua elemen yang berdekatan. Lihat sebagai contoh

Ketika properti margin diterapkan ke elemen yang diganti (mis. g. IMG), mereka menyatakan jarak minimal dari elemen yang diganti ke salah satu konten dari elemen induk

Nilai margin negatif diperbolehkan, tetapi mungkin ada batasan khusus implementasi

6. 5. 2    'topPadding', 'rightPadding', 'bottomPadding', 'leftPadding', dan 'paddings'

Nilai. [. otomatis ]{1,4}
Awal. 0
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. lihat lebar elemen induk

Properti menjelaskan berapa banyak ruang untuk disisipkan antara perbatasan dan konten (mis. g. teks atau gambar). Urutannya atas, kanan, bawah, kiri

Permukaan area padding diatur dengan properti 'background'

  The headline is important!

Metode 'paddings' adalah cara singkat untuk mengatur semua nilai padding di tempat yang sama di style sheet. Properti ini hanya mengizinkan satu nilai. Aturan terakhir dari contoh di atas sama dengan contoh di bawah ini

  The headline is important!

Contoh di atas menetapkan padding 1em di semua sisi. Unit 'em' relatif terhadap font elemen

Nilai padding tidak boleh negatif. Lihat untuk lebih lanjut tentang properti ini

6. 5. 3    'borderStyle'

Nilai. tidak ada. padat
Awal. sedang tidak ada
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Menetapkan keberadaan dan gaya perbatasan di sekitar objek. Setiap gaya batas yang tidak diketahui harus diperlakukan sebagai "so¸¦�

6. 5. 3    'lebar batas'

Nilai. nomor
Awal. sedang tidak ada
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Menetapkan lebar batas di sekitar objek dalam satuan piksel, titik, atau "em".

6. 5. 4    'lebar'

Nilai. mobil
Awal. mobil
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. lihat lebar elemen induk

Properti ini dapat diterapkan ke elemen teks, tetapi paling berguna dengan gambar sebaris dan penyisipan serupa. Lebar harus ditegakkan dengan menskalakan gambar jika perlu. Saat menskalakan, rasio aspek gambar harus dipertahankan jika properti 'tinggi' adalah 'otomatis'

Contoh

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

Lihat untuk deskripsi hubungan antara properti ini dan margin dan padding

6. 5. 5    'tinggi'

Nilai. mobil
Awal. mobil
Applies to. tingkat blok dan elemen yang diganti
Diwariskan. TIDAK
Nilai persentase. T/A

Properti ini dapat diterapkan ke teks, tetapi paling berguna dengan gambar sebaris dan penyisipan serupa. Ketinggian harus ditegakkan dengan menskalakan gambar jika perlu. Saat menskalakan, rasio aspek gambar harus dipertahankan jika properti 'width' adalah 'auto'

Contoh

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

Jika diterapkan pada elemen tekstual, ketinggian dapat ditegakkan dengan e. g. sebuah bilah gulir

6. 5. 6    'melayang'

Nilai
Awal. tidak ada kotak
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Dengan menggunakan properti 'float', seseorang dapat mengatur elemen menjadi mengambang dan menunjukkan bagaimana konten lain akan membungkusnya

Properti ini paling sering digunakan dengan gambar sebaris

6. 5. 7    'bersih'

Nilai. tidak ada. kiri. Kanan. keduanya
Awal. tidak ada
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Properti ini menentukan apakah suatu elemen memungkinkan elemen mengambang di sisinya. Lebih khusus lagi, nilai properti ini mencantumkan sisi tempat elemen mengambang tidak diterima. Dengan 'hapus' disetel ke 'kiri', sebuah elemen akan dipindahkan di bawah elemen mengambang mana pun di sisi kiri. Dengan 'hapus' disetel ke 'tidak ada', elemen mengambang diperbolehkan di semua sisi. Contoh

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

6. 6    Properti Klasifikasi

Properti ini mengklasifikasikan elemen ke dalam kategori lebih dari yang mereka tetapkan parameter visual tertentu

6. 6. 1    'tampilan'

Nilai. memblokir. Di barisan. Daftar barang. tidak ada
Awal. menurut HTML
Berlaku untuk. semua elemen
Diwariskan. TIDAK
Nilai persentase. T/A

Properti ini menunjukkan jika suatu elemen sebaris (mis. g. 'EM' dalam HTML), tingkat blok (mis. g. 'H1' dalam HTML), atau item daftar tingkat blok (mis. g. 'LI' dalam HTML). Untuk dokumen HTML, nilai awal akan diambil dari spesifikasi HTML

Nilai 'tidak ada' mematikan tampilan elemen, termasuk elemen turunan dan kotak di sekitarnya

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

Aturan terakhir mematikan tampilan gambar

Perhatikan bahwa HTML menentukan elemen apa yang merupakan level-blok (disebut "Block Structuring Elements") dan sebaris (disebut "Phrase Markup"), dan ini mungkin di-hardcode ke dalam beberapa implementasi UA

6. 6. 2    'listStyle'

Nilai
Awal. disk di luar
Berlaku untuk. elemen dengan nilai properti 'tampilkan' 'daftar-item'
Diwariskan. Ya
Nilai persentase. T/A

Properti 'list-style' menjelaskan bagaimana item daftar (mis. e. elemen dengan nilai 'display' dari 'list-item') diformat

Properti ini dapat diatur pada elemen apa pun, dan akan diwariskan secara normal ke bawah pohon. Namun, 'list-style' hanya akan ditampilkan pada elemen dengan nilai 'display' dari 'list-item'. Dalam HTML ini biasanya berlaku untuk elemen 'LI'

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

6. 6. 3    'ruangputih'

Nilai. normal . pra. nowrap
Awal. menurut HTML
Berlaku untuk. elemen tingkat blok
Diwariskan. Ya
Nilai persentase. T/A

Mendeklarasikan bagaimana ruang putih di dalam elemen harus ditangani. cara 'normal' (di mana ruang putih diciutkan), sebagai 'pra' (yang berperilaku seperti elemen 'PRE' dalam HTML) atau sebagai 'nowrap' (di mana pembungkus dilakukan hanya melalui elemen BR)

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

7   Unit

7. 1    Satuan Panjang

Format nilai panjang adalah karakter tanda opsional ('+' atau '-', dengan '+' sebagai default) segera diikuti oleh fungsi konversi unit yang berisi angka sebagai argumen

Beberapa properti mengizinkan satuan panjang negatif, tetapi ini dapat memperumit model pemformatan dan mungkin ada batasan khusus implementasi. Jika nilai panjang negatif tidak dapat didukung, maka harus dipotong ke nilai terdekat yang dapat didukung

Ada tiga jenis satuan panjang. relatif, piksel, dan absolut. Unit relatif menentukan panjang relatif terhadap properti panjang lainnya. Lembar gaya yang menggunakan unit relatif akan lebih mudah diskalakan dari satu media ke media lainnya (mis. g. dari layar komputer ke printer laser). (dijelaskan di bawah) dan nilai kata kunci (mis. g. 'x-besar') menawarkan keuntungan serupa

Elemen anak mewarisi nilai yang dihitung, bukan nilai relatif

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

Pada contoh di atas, nilai 'textIndent' dari elemen 'H1' adalah 36pt, bukan 45pt

Unit relatif ini didukung

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

Unit piksel, seperti yang digunakan dalam aturan terakhir, relatif terhadap resolusi kanvas, i. e. paling sering layar komputer. Jika kerapatan piksel perangkat keluaran sangat berbeda dari layar komputer pada umumnya, UA harus mengubah skala nilai piksel. "Piksel referensi" yang disarankan adalah sudut visual satu piksel pada perangkat dengan kerapatan piksel 90dpi dan jarak dari pembaca sejauh lengan

Satuan panjang absolut hanya berguna jika sifat fisik media keluaran diketahui. Unit absolut ini didukung

  with(tags.BODY) {
    color = "black";
    bgColor = "white";
  }

7. 2    Unit Warna

Warna adalah nama warna atau spesifikasi RGB numerik

Daftar nama warna yang disarankan adalah. aqua, hitam, biru, fuchsia, abu-abu, hijau, jeruk nipis, merah marun, angkatan laut, zaitun, ungu, merah, perak, teal, putih, dan kuning. 16 warna ini diambil dari palet VGA Windows dan juga akan digunakan dalam HTML 3 yang akan datang. 2. Nilai RGB untuk nama warna ini tidak ditentukan dalam spesifikasi ini

 
  Title
  
 
 
  Way too green
 

Warna RGB ditentukan dalam ruang warna sRGB sebagaimana didefinisikan dalam lampiran [6]. UA harus melakukan upaya yang wajar untuk merender warna secara akurat sesuai dengan spesifikasi sRGB

Nilai di luar rentang numerik harus dipotong. Oleh karena itu, tiga aturan di bawah ini setara

 
  Title
  
 
 
  Way too green
 

7. 4    URL

Uniform Resource Locator (URL) diidentifikasi dengan notasi fungsional

 
  Title
  
 
 
  Way too green
 

Sebagian URL ditafsirkan relatif terhadap sumber style sheet, bukan relatif terhadap dokumen

 
  Title
  
 
 
  Way too green
 

Bagian 8 Mengedit pertimbangan Mengekspresikan gaya melalui JavaScript memungkinkan penulis menghasilkan efek dinamis untuk dokumen. Meskipun hal ini sangat diinginkan dalam media interaktif, hal ini dapat menyebabkan masalah saat menggunakan editor yang dirancang untuk dokumen statisDisarankan agar editor yang dirancang untuk mengedit dokumen statis merender halaman menggunakan lembar gaya dinamis sebagai input dan kemudian membuat representasi statis dari instance yang dirender. Proses ini kehilangan informasi karena dokumen tidak lagi memiliki ekspresi dinamisPenulis yang menghasilkan gaya dinamis dengan tangan atau dengan menggunakan editor dinamis seharusnya tidak berharap untuk dapat menggunakan editor statis, sama seperti penulis yang menghasilkan animasi GIF tidak boleh berharap untuk dapat menggunakan editor GIF yang tidak mendukung animasi

Bagian 9 Pertimbangan pencetakan Bagian ini belum selesaiPertimbangan khusus harus dibuat oleh penulis tentang bagaimana tampilan halaman saat dicetak. Karena JavaScript dapat menanyakan kemampuan mesin rendering, seharusnya dimungkinkan untuk menyesuaikan tampilan dokumen secara dinamis saat mencetak. Misalnya, penulis style sheet dapat menggunakan ekspresi JavaScript untuk menguji apakah mesin rendering mendukung warna. Karena sebagian besar printer berwarna hitam dan putih, penulis dapat memilih untuk menggunakan huruf miring dan tebal, atau font yang berbeda untuk mewakili apa yang dinyatakan dengan menggunakan warna yang berbeda.In the future this specification should be extended to set printer specific styles like page headers and footers. Page break boundaries would also be a desirable feature Bagaimana cara mengubah teks h1 menggunakan JavaScript?

Bagaimana cara mengubah teks tag dalam JavaScript?

How to get text from h1 tag in JavaScript?

Apa arti h1 dalam JavaScript?