Tertanam - kode “tertanam” di header dokumen. Ini hanya mempengaruhi halaman di mana ia “disematkan”.

1

Eksternal—style sheet dibuat dalam dokumen terpisah. Mereka kemudian ditautkan ke dokumen web lain dan memengaruhi dokumen apa pun yang ditautkan ke dokumen tersebut.

1

Ada 15 praktik terbaik untuk bekerja dengan CSS.

Jaga semuanya tetap teratur

Mengikuti pesanan tertentu memerlukan biaya, namun mempunyai efek positif. Ini sangat penting ketika menggunakan CSS. Daripada menuliskan kode-kode dalam urutan kacau yang terlintas di benak Anda, lebih baik mengatur penyimpanan kode menurut pola tertentu.

Anda harus mulai dengan poin yang paling umum dan kurang penting, lalu beralih ke poin yang lebih penting. Pendekatan ini menciptakan struktur logis yang membuat pengeditan CSS di masa depan menjadi lebih mudah. Menggunakan diagram dan struktur sederhana berguna tidak hanya untuk pengeditan di masa depan, tetapi juga untuk pengembang di masa depan.

Hindari CSS sebaris

Meskipun CSS sebaris berguna untuk beberapa kegunaan, hal ini harus dihindari karena beberapa alasan tertentu. Salah satu argumen utamanya adalah gaya inline tidak memisahkan konten dari desain. Hal ini membuat desain dan pengembangan menjadi sulit. Alasan lainnya adalah gaya ini lebih sulit dipertahankan.

Jika perubahan perlu dilakukan pada kode gaya sebaris, perubahan tersebut perlu dilakukan pada setiap halaman yang memuatnya. Terakhir, gaya CSS sebaris tidak mudah dipahami dan meningkatkan ukuran halaman.

Pisahkan konten dari desain

Salah satu argumen utama yang mendukung penggunaan CSS adalah bahwa kode dan HTML disimpan secara terpisah - hal ini memudahkan perancang tata letak untuk menemukan dan memeliharanya. Ini adalah solusi yang baik, terutama mengingat fakta bahwa perancang situs web belum tentu merupakan pengembang konten.

Tanggal, judul dan tanda tangan

Saat Anda perlu memahami sesuatu tentang CSS, komentar di bagian atas kode Anda bisa sangat membantu. Terutama saat mendesain tema dan template untuk orang lain. Ini juga merupakan praktik yang baik untuk menambahkan kode contoh warna ke awal kode. Ini akan menghemat banyak waktu untuk mengedit dan mengubah. Anda tidak perlu mengetahui kode warnanya. Yang perlu Anda lakukan hanyalah menyalinnya.

1 /*====== 2 Tim Onextrapixel 3 Hak cipta 2011 OXP 4 Ditulis untuk - www.onextrapixel.com 5 6 contoh warna 7 ------------- 8 13437a - biru tua 9 1d74be - biru pertengahan 10 e1e1e1 - abu-abu muda 11 a3a4a4 - abu-abu pertengahan 12 8a8a8a - abu-abu 13 ======== */

Simpan perpustakaan templat Anda

Jika suatu struktur sering digunakan, mengapa tidak menyimpan salinannya? Hal ini akan memungkinkan lain kali dalam situasi yang sama untuk tidak memulai dari awal. Untuk melakukan ini, ekstrak semua kode yang tidak dibagikan dan simpan file sebagai template CSS untuk digunakan nanti.

Gunakan Pintasan CSS

Untuk memuat stylesheet Anda dengan cepat dan menghemat waktu, gunakan pintasan saat membuat kode CSS. Trik pengkodean CSS yang bagus ini akan membuat style sheet Anda rapi dan jelas.

Alih-alih:

Anda harus menulis ini:

1 #krayon ( 2 margin: 8px 7px 0px 5px; // masing-masing nilai atas, kanan, bawah dan kiri. 3 )

Gunakan teknik penamaan yang berguna

Seperti disebutkan sebelumnya, salah satu alasan terbaik menggunakan CSS adalah kemampuannya untuk memisahkan gaya dari konten. CSS benar-benar memudahkan untuk mendesain ulang situs web tanpa mempengaruhi HTML. Jika unsur-unsur diberi nama sedemikian rupa sehingga akan sulit untuk membedakannya di kemudian hari, hal ini akan menimbulkan kesulitan dan membuang-buang waktu. Penting untuk menggunakan penamaan elemen yang relevan yang sederhana namun dapat dimengerti. Dalam situasi apa pun Anda tidak boleh memberi nama kolom sebagai "kolom kiri", karena selama operasi selanjutnya Anda mungkin bingung di mana letak bagian kode yang bertanggung jawab atas konten, dan di mana letak langsung tata letaknya.

Gunakan tanda hubung sebagai pengganti garis bawah

Saat menggunakan browser versi lama, CSS rusak atau tidak berfungsi sama sekali jika menggunakan garis bawah. Menggunakan tanda hubung sebagai pengganti garis bawah menghasilkan kompatibilitas yang lebih baik dengan browser lama dan lebih sedikit error.

Jangan ulangi dirimu sendiri

Salah satu trik CSS terbaik untuk membuat hidup Anda lebih mudah adalah dengan menggunakan steno jika memungkinkan. Selalu mencari cara untuk mengelompokkan elemen serupa yang dapat menggunakan ukuran font, margin, dan warna yang sama. Memiliki pemahaman yang jelas tentang bagaimana CSS akan menafsirkan pintasan ini. Urutan melihatnya mirip dengan pergerakan jarum jam dari 12 - atas, kanan, bawah lalu kiri.

Lebih efisien dari ini:

1 h1 ( 2 margin: 1em 0 2em 0; 3 ukuran font: 1em; 4 warna: #222; 5 ) 6 7 h2 ( 8 margin: 1em 0 2em 0; 9 ukuran font: 1em; 10 warna: #222 ;

Hindari menggunakan gambar yang sangat besar

Menggunakan gambar besar sebagai latar belakang halaman web akan meningkatkan waktu buka halaman. Solusi yang baik adalah dengan menggunakan gambar kecil, dan jika memungkinkan, menggabungkannya dengan fitur CSS jika diperlukan.

1 isi ( 2 latar belakang:url(bg.jpg) ulangi-x; 3 )

Hilangkan kode yang berlebihan

Menggunakan beberapa tips di atas akan sangat membantu memperkecil ukuran stylesheet Anda. Ini akan menyebabkan halaman dimuat lebih cepat. Selain itu, style sheet yang lebih kecil lebih mudah dipelihara dan diperbarui. Selalu hapus kode yang berlebihan dan gabungkan jika memungkinkan.

Trik lain untuk memperkecil tabel adalah dengan tidak mendefinisikan nol sebagai satuan pengukuran. Jika margin harus diatur ke 0, maka tidak perlu menulis 0px atau 0cm. CSS akan memahami bahwa 0 adalah nol, apapun unitnya.

Validasi CSS

Jika terjadi kesalahan saat menyusun kode, Anda perlu meluangkan waktu untuk menemukan dan memperbaikinya. Untuk menghemat waktu, gunakan Validator CSS W3C untuk membantu Anda menemukan beberapa kesalahan CSS yang paling umum. Ini adalah alat gratis dan sangat nyaman.

Gunakan fungsi Reset CSS

Dengan menggunakan Reset CSS, inkonsistensi antar browser dapat dihindari. Dalam praktiknya, hal ini penting untuk menghapus bidang yang tidak kompatibel, serta ketidakcocokan atribut lainnya yang menyebabkan halaman web terlihat berbeda di browser berbeda. Dengan menggunakan fungsi Reset CSS, Anda akan mencapai konsistensi halaman di berbagai browser.

html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pra,a,abbr,akronim,alamat,besar,kutip,kode,del,dfn,em,font, img,ins,kbd,q,s,samp,kecil,strike,kuat,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption, tbody,tfoot,thead,tr,th,td(margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family :mewarisi; perataan vertikal:garis dasar; ) 2:fokus ( garis besar:0; ) 3 badan ( tinggi garis:1; warna:#000; latar belakang:#fff; ) 4 ol,ul ( gaya daftar:tidak ada; ) 5 tabel ( border-collapse:separate; border-spacing:0; ) 6 caption,th,td ( text-align:left; font-weight:normal; )

Tulis untuk Gecko terlebih dahulu, lalu sesuaikan untuk IE dan Webkit

Biasanya, jika CSS berfungsi dengan benar untuk browser Gecko (Netscape, Firefox Mozilla, Camino, Flock), kemungkinan besar CSS akan berfungsi dengan baik untuk browser lain - IE dan Webkit (Safari, Chrome). Untuk menghemat waktu dan kegelisahan saat mencoba mencari tahu kesalahan pengkodean, lebih baik memulai dengan menulis CSS untuk browser Gecko.

Hati-hati

Merupakan kebiasaan yang baik untuk memisahkan style sheet khusus browser satu sama lain, termasuk JavaScript, komentar bersyarat, dan kode sisi server yang diperlukan untuk melakukannya.
Metode ini sangat bagus untuk menghindari serangan hacker pada core style sheet.
Ini juga penting untuk menjaga agar CSS tetap dapat dikelola.

Kesimpulan

Ada banyak manfaat menggunakan CSS. Tidak hanya membuat halaman dimuat dengan cepat, tetapi ketika Anda menggunakan 15 trik CSS terbaik di atas, tidak hanya membuat hidup Anda lebih mudah, tetapi juga mendesain dan mengedit tema dan template. Penggunaan CSS memberikan keuntungan ketika bekerja dengan Google. Mesin pencari memberi bobot lebih pada konten di bagian atas dokumen HTML. Saat laba-laba mesin pencari merayapi HTML suatu situs web, mereka melihat konten yang muncul lebih dulu. Dengan menggunakan CSS, mudah untuk membuat tata letak yang menampilkan konten terlebih dahulu, diikuti dengan kode sumber laman lainnya.

CSS (Cascading Style Sheets), atau lembar gaya berjenjang, digunakan untuk mendeskripsikan tampilan dokumen yang ditulis dalam bahasa markup. Gaya CSS biasanya digunakan untuk membuat dan menata elemen halaman web dan antarmuka pengguna yang ditulis dalam HTML dan XHTML, namun juga dapat diterapkan pada semua jenis dokumen XML, termasuk XML, SVG, dan XUL.

Lembar gaya berjenjang menjelaskan aturan untuk memformat elemen menggunakan properti dan nilai yang diizinkan untuk properti tersebut. Untuk setiap elemen, Anda dapat menggunakan sekumpulan properti terbatas; properti lain tidak akan berpengaruh apa pun padanya.

Deklarasi gaya terdiri dari dua bagian: elemen halaman web − pemilih, dan perintah pemformatan - blok iklan. Pemilih memberi tahu browser elemen mana yang akan diformat, dan blok deklarasi (kode dalam kurung kurawal) mencantumkan perintah pemformatan - properti dan nilainya.

Jenis-jenis cascading style sheet dan spesifikasinya

1. Jenis style sheet

1.1. Lembar gaya eksternal

Lembar gaya eksternal adalah file teks dengan ekstensi .css, yang berisi sekumpulan gaya CSS untuk elemen. File dibuat dalam editor kode, seperti halaman HTML. File hanya dapat berisi gaya, tanpa markup HTML. Style sheet eksternal terhubung ke halaman web menggunakan tag , terletak di dalam bagian . Gaya ini berfungsi untuk semua halaman situs.

Anda dapat melampirkan beberapa style sheet ke setiap halaman web dengan menambahkan beberapa tag secara berurutan , menunjukkan tujuan style sheet ini dalam atribut tag media. rel="stylesheet" menentukan jenis tautan (tautan ke lembar gaya).

Atribut type="text/css" tidak diperlukan oleh standar HTML5, sehingga dapat dihilangkan. Jika atributnya hilang, nilai defaultnya adalah type="text/css" .

1.2. Gaya dalaman

Gaya dalaman tertanam dalam suatu bagian Dokumen HTML dan didefinisikan di dalam tag. Gaya internal lebih diutamakan daripada gaya eksternal, tetapi lebih rendah daripada gaya sebaris (ditentukan melalui atribut style).

...

1.3. Gaya bawaan

Saat kita menulis gaya sebaris, kita menulis kode CSS ke dalam file HTML, langsung di dalam tag elemen menggunakan atribut style:

Perhatikan teks ini.

Gaya seperti itu hanya memengaruhi elemen yang ditetapkannya.

1.4. @ aturan impor

@ aturan impor Memungkinkan Anda memuat style sheet eksternal. Agar arahan @import berfungsi, arahan tersebut harus muncul di style sheet (eksternal atau internal) sebelum semua aturan lainnya:

Aturan @import juga digunakan untuk menyertakan font web:

@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);

2. Jenis penyeleksi

Penyeleksi mewakili struktur halaman web. Mereka membantu membuat aturan untuk memformat elemen halaman web. Selector dapat berupa elemen, kelas dan pengidentifikasinya, serta kelas semu dan elemen semu.

2.1. Pemilih universal

Cocok dengan elemen HTML apa pun. Misalnya, * (margin: 0;) akan mengatur ulang margin untuk semua elemen situs. Pemilih juga dapat digunakan dalam kombinasi dengan kelas semu atau elemen semu: *:after (CSS style) , *:checked (CSS style) .

2.2. Pemilih elemen

Pemilih elemen memungkinkan Anda memformat semua elemen dari jenis tertentu di semua halaman situs. Misalnya, h1 (font-family: Lobster, kursif;) akan mengatur gaya pemformatan keseluruhan untuk semua judul h1.

2.3. Pemilih kelas

Pemilih kelas memungkinkan Anda menyetel gaya untuk satu atau lebih elemen dengan nama kelas yang sama, ditempatkan di tempat berbeda pada halaman atau di halaman situs berbeda. Misalnya, untuk membuat judul dengan kelas headline, Anda perlu menambahkan atribut class dengan nilai headline pada tag pembuka

dan atur gaya untuk kelas yang ditentukan. Gaya yang dibuat menggunakan kelas dapat diterapkan ke elemen lain, tidak harus bertipe tersebut.

Petunjuk penggunaan komputer pribadi

2.4. pemilih ID

Pemilih ID memungkinkan Anda memformat satu elemen tertentu. Idnya harus unik dan hanya bisa muncul satu kali dalam satu halaman.

2.5. Pemilih keturunan

Pemilih turunan menerapkan gaya ke elemen dalam elemen penampung. Misalnya, ul li (transformasi teks: huruf besar;) - akan memilih semua elemen li yang merupakan turunan dari semua elemen ul.

Jika Anda ingin memformat turunan dari elemen tertentu, Anda perlu memberikan kelas gaya pada elemen tersebut:

p.first a (warna: hijau;) - gaya ini akan diterapkan ke semua tautan turunan paragraf dengan kelas pertama;

p .first a (warna: hijau;) - jika Anda menambahkan spasi, tautan yang terletak di dalam tag kelas .first yang merupakan turunan dari elemen akan diberi gaya

First a (color: green;) - gaya ini akan diterapkan ke tautan mana pun yang terletak di dalam elemen lain, yang ditunjuk oleh class.first .

2.6. Pemilih anak

Elemen anak adalah anak langsung dari elemen yang memuatnya. Satu elemen dapat memiliki beberapa elemen turunan, namun setiap elemen hanya dapat memiliki satu elemen induk. Pemilih anak memungkinkan Anda menerapkan gaya hanya jika elemen anak muncul tepat setelah elemen induk dan tidak ada elemen lain di antara elemen tersebut, yaitu elemen anak tidak bersarang di dalam elemen lainnya.
Misalnya, p > strong akan memilih semua elemen kuat yang merupakan anak dari elemen p.

2.7. Pemilih saudara perempuan

Persaudaraan terjadi antara unsur-unsur yang memiliki orangtua yang sama. Pemilih saudara memungkinkan Anda memilih elemen dari sekelompok elemen pada level yang sama.

h1 + p - akan memilih semua paragraf pertama segera setelah tag apa pun

tanpa mempengaruhi paragraf lainnya;

h1 ~ p - akan memilih semua paragraf yang merupakan saudara dari judul h1 mana pun dan segera setelahnya.

2.8. Pemilih atribut

Pemilih atribut memilih elemen berdasarkan nama atribut atau nilai atribut:

[atribut] - semua elemen yang berisi atribut yang ditentukan - semua elemen yang atribut altnya ditentukan;

selector[atribut] - elemen jenis ini yang berisi atribut yang ditentukan, img - hanya gambar yang atribut altnya ditentukan;

selector[attribute="value"] - elemen jenis ini berisi atribut tertentu dengan nilai tertentu, img - semua gambar yang judulnya mengandung kata bunga;

selector[attribute~="value"] - elemen yang sebagian mengandung nilai tertentu, misalnya, jika beberapa kelas ditentukan untuk elemen yang dipisahkan oleh spasi, p - paragraf yang nama kelasnya berisi fitur ;

selector[attribute|="value"] - elemen yang daftar nilai atributnya dimulai dengan kata yang ditentukan, p - paragraf yang nama kelasnya feature atau dimulai dengan feature ;

selector[attribute^="value"] - elemen yang nilai atributnya dimulai dengan nilai yang ditentukan, a - semua tautan dimulai dengan http://;

selector[attribute$="value"] - elemen yang nilai atributnya diakhiri dengan nilai yang ditentukan, img - semua gambar dalam format png;

selector[attribute*="value"] - elemen yang nilai atributnya berisi kata tertentu di mana saja, a - semua tautan yang namanya mengandung book .

2.9. Pemilih kelas semu

Kelas semu adalah kelas yang sebenarnya tidak melekat pada tag HTML. Mereka memungkinkan Anda menerapkan aturan CSS ke elemen ketika suatu peristiwa terjadi atau mematuhi aturan tertentu. Kelas semu mengkarakterisasi elemen dengan properti berikut:

:hover - elemen apa pun yang menjadi tempat kursor mouse diarahkan;

:fokus - elemen interaktif yang dinavigasi menggunakan keyboard atau diaktifkan menggunakan mouse;

:aktif - elemen yang diaktifkan oleh pengguna;

:valid - kolom formulir yang isinya telah diperiksa di browser untuk kesesuaian dengan tipe data yang ditentukan;

:tidak valid — kolom formulir yang isinya tidak cocok dengan tipe data yang ditentukan;

:enabled - semua kolom formulir aktif;

:disabled — kolom formulir yang diblokir, yaitu dalam keadaan tidak aktif;

:in-range - bidang formulir yang nilainya berada dalam rentang yang ditentukan;

:out-of-range - bidang formulir yang nilainya tidak berada dalam kisaran yang ditentukan;

:lang() - elemen dengan teks dalam bahasa tertentu;

:not(selector) - elemen yang tidak mengandung selector yang ditentukan - kelas, pengidentifikasi, nama atau tipe kolom formulir - :not() ;

:target adalah elemen dengan simbol # yang direferensikan dalam dokumen;

:diperiksa — elemen formulir yang dipilih (dipilih pengguna).

2.10. Pemilih kelas semu struktural

Kelas semu struktural memilih elemen anak sesuai dengan parameter yang ditentukan dalam tanda kurung:

:nth-child(ganjil) - elemen anak ganjil;

:nth-child(even) - elemen anak genap;

:nth-child(3n) - setiap elemen ketiga di antara anak-anak;

:nth-child(3n+2) - memilih setiap elemen ketiga, dimulai dengan anak kedua (+2) ;

:nth-child(n+2) - memilih semua elemen mulai dari yang kedua;

:nth-child(3) - memilih elemen anak ketiga;

:nth-last-child() - dalam daftar elemen anak, pilih elemen dengan lokasi yang ditentukan, mirip dengan :nth-child() , tetapi mulai dari yang terakhir, dalam arah yang berlawanan;

:first-child - memungkinkan Anda memberi gaya hanya pada elemen anak pertama dari tag;

:last-child - memungkinkan Anda memformat elemen anak terakhir dari tag;

:only-child - memilih elemen yang merupakan satu-satunya elemen anak;

:empty - memilih elemen yang tidak memiliki anak;

:root - memilih elemen yang menjadi akar dokumen - elemen html.

2.11. Pemilih kelas semu tipe struktural

Menunjukkan jenis tag anak tertentu:

:nth-of-type() - memilih elemen yang mirip dengan :nth-child() , tetapi hanya memperhitungkan jenis elemen;

:first-of-type - memilih anak pertama dari tipe tertentu;

:last-of-type - memilih elemen terakhir dari tipe ini;

:nth-last-of-type() - memilih elemen dari tipe tertentu dalam daftar elemen sesuai dengan lokasi yang ditentukan, mulai dari akhir;

:only-of-type - memilih satu-satunya elemen dari tipe yang ditentukan di antara elemen anak dari elemen induk.

2.12. Pemilih elemen semu

Elemen semu digunakan untuk menambahkan konten, yang dihasilkan menggunakan properti konten:

:huruf pertama - memilih huruf pertama setiap paragraf, hanya berlaku untuk elemen blok;

:first-line - memilih baris pertama teks elemen, hanya berlaku untuk elemen blok;

:sebelum - menyisipkan konten yang dihasilkan sebelum elemen;

:after - menambahkan konten yang dihasilkan setelah elemen.

3. Kombinasi pemilih

Untuk memilih elemen pemformatan dengan lebih akurat, Anda dapat menggunakan kombinasi pemilih:

img:nth-of-type(even) - akan memilih semua gambar bernomor genap yang teks alternatifnya berisi kata css .

4. Mengelompokkan penyeleksi

Gaya yang sama dapat diterapkan ke beberapa elemen secara bersamaan. Untuk melakukan ini, Anda perlu mencantumkan penyeleksi yang diperlukan di sisi kiri deklarasi, dipisahkan dengan koma:

H1, h2, p, span (warna: tomat; latar belakang: putih; )

5. Warisan dan riam

Warisan dan cascade adalah dua konsep dasar dalam CSS yang terkait erat. Warisan adalah elemen yang mewarisi properti dari induknya (elemen yang memuatnya). Cascade memanifestasikan dirinya dalam bagaimana berbagai jenis style sheet diterapkan pada dokumen, dan bagaimana aturan-aturan yang bertentangan mengesampingkan satu sama lain.

5.1. Warisan

Warisan adalah mekanisme pewarisan sifat-sifat tertentu dari nenek moyang kepada keturunannya. Spesifikasi CSS menyediakan pewarisan properti yang terkait dengan konten teks halaman, seperti warna, font, spasi huruf, tinggi baris, gaya daftar, perataan teks, indentasi teks, transformasi teks, visibilitas, putih -spasi dan spasi kata. Dalam banyak kasus, ini nyaman karena Anda tidak perlu mengatur ukuran font dan jenis font untuk setiap elemen di halaman web.

Properti yang terkait dengan pemformatan blok tidak diwariskan. Ini adalah background , border , display , float dan clear , height dan width , margin , min-max-height dan -width , outline , overflow , padding , position , text-decoration , vertical-align dan z-index .

Warisan yang dipaksakan

Anda dapat menggunakan kata kunci pewarisan untuk memaksa suatu elemen mewarisi nilai properti apa pun dari elemen induknya. Ini berfungsi bahkan untuk properti yang tidak diwarisi secara default.

Bagaimana gaya CSS diatur dan bekerja

1) Gaya dapat diwarisi dari elemen induk (properti yang diwarisi atau menggunakan nilai warisan);

2) Gaya yang terletak pada lembar gaya di bawah mengesampingkan gaya yang terletak pada tabel di atas;

3) Gaya dari sumber berbeda dapat diterapkan ke satu elemen. Anda dapat memeriksa gaya mana yang diterapkan dalam mode pengembang browser. Untuk melakukan ini, klik kanan pada elemen dan pilih “Lihat Kode” (atau yang serupa). Kolom kanan akan mencantumkan semua properti yang disetel pada elemen ini atau diwarisi dari elemen induk, bersama dengan file gaya di mana properti tersebut ditentukan dan baris kode ordinal.

4) Saat mendefinisikan gaya, Anda dapat menggunakan kombinasi pemilih apa pun - pemilih elemen, kelas semu elemen, kelas, atau pengidentifikasi elemen.

5.2. Riam

Bertingkat adalah mekanisme yang mengontrol hasil akhir dalam situasi di mana aturan CSS berbeda diterapkan pada elemen yang sama. Ada tiga kriteria yang menentukan urutan penerapan properti—aturan penting, kekhususan, dan urutan pemasukan style sheet.

Aturan! penting

Bobot aturan dapat ditentukan menggunakan kata kunci!important, yang ditambahkan segera setelah nilai properti, misalnya span (font-weight: bold!important;) . Aturan tersebut harus ditempatkan di akhir deklarasi sebelum tanda kurung tutup, tanpa spasi. Pengumuman tersebut akan didahulukan dari semua peraturan lainnya. Aturan ini memungkinkan Anda untuk membatalkan nilai properti dan menetapkan nilai baru untuk elemen dari sekelompok elemen jika tidak ada akses langsung ke file gaya.

Kekhususan

Untuk setiap aturan, browser menghitung kekhususan pemilih, dan jika suatu elemen memiliki deklarasi properti yang bertentangan, aturan yang memiliki kekhususan paling tinggi akan diperhitungkan. Nilai spesifisitas memiliki empat bagian: 0, 0, 0, 0. Kekhususan pemilih didefinisikan sebagai berikut:

untuk id, 0, 1, 0, 0 ditambahkan;
untuk kelas 0, 0, 1, 0 ditambahkan;
untuk setiap elemen dan elemen semu, 0, 0, 0, 1 ditambahkan;
untuk gaya sebaris yang ditambahkan langsung ke elemen - 1, 0, 0, 0 ;
Selektor universal tidak memiliki kekhususan.

H1 (warna: biru muda;) /*kekhususan 0, 0, 0, 1*/ em (warna: perak;) /*kekhususan 0, 0, 0, 1*/ h1 em (warna: emas;) /*kekhususan: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#hal utama tentang (warna: biru;) /*kekhususan: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (warna: abu-abu;) /*kekhususan 0, 0, 1, 0 */ #sidebar (warna: oranye;) /*kekhususan 0, 1, 0, 0*/ li#sidebar (warna: aqua;) /*kekhususan: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/

Akibatnya, aturan-aturan yang lebih spesifik akan diterapkan pada elemen tersebut. Misalnya, jika suatu elemen memiliki dua kekhususan dengan nilai 0, 0, 0, 2 dan 0, 1, 0, 1, maka aturan kedua akan menang.

Urutan tabel yang terhubung

Anda dapat membuat beberapa lembar gaya eksternal dan menghubungkannya ke satu halaman web. Jika nilai properti yang berbeda untuk satu elemen ditemukan di tabel yang berbeda, maka sebagai hasilnya, aturan yang ditemukan dalam style sheet yang tercantum di bawah ini akan diterapkan ke elemen tersebut.

Ryan Utara

Anehnya, CSS dianggap sebagai salah satu bahasa termudah dan tersulit bagi pengembang web. Memulainya tentu saja cukup sederhana - Anda menentukan properti gaya, nilai untuk elemen tertentu, dan... hanya itu saja yang perlu diketahui! Namun, dalam proyek yang lebih besar, situasinya menjadi sangat membingungkan dan sulit untuk mengatur CSS dengan cara yang berarti. Mengubah baris CSS apa pun untuk memberi gaya pada elemen di satu halaman sering kali menimbulkan konsekuensi yang tidak diinginkan pada elemen di halaman lain.

Untuk memahami kompleksitas yang melekat pada CSS, berbagai jenis praktik terbaik telah dibuat. Masalahnya adalah masih belum ada konsensus mengenai mana yang terbaik, dan banyak di antaranya yang saling bertentangan. Jika ini adalah pertama kalinya Anda mencoba mempelajari CSS, situasi ini bisa sangat membingungkan.

Tujuan artikel ini adalah untuk memberikan konteks historis tentang bagaimana teknik dan alat CSS telah berevolusi hingga kondisinya saat ini pada tahun 2018. Dengan memahami sejarah ini, akan lebih mudah untuk memahami setiap pendekatan dan cara menggunakannya untuk keuntungan Anda. Jadi mari kita mulai!

Menggunakan CSS untuk Gaya Dasar

Fungsional, tapi tidak terlalu cantik. Kita dapat menambahkan CSS untuk meningkatkan gaya dasar di index.css: