Tetapkan fon teks, saiz dan warna

Tetapkan fon teks, saiz dan warna

Dalam bahagian pertama buku, kami telah menunjukkan dalam beberapa contoh cara menetapkan warna teks dalam CSS. Tiada apa-apa yang rumit di sini: anda memerlukan sifat warna dan nilai warna yang anda mahu warnakan teks.

P ( warna: #211C18; )

Dalam contoh kami, nilai #211C18 mewakili kod warna heksadesimal. Jika anda sudah biasa dengan sistem nombor heksadesimal, anda boleh melangkau membaca perenggan seterusnya. Kami juga akan bercakap lebih lanjut tentang cara lain untuk mewakili warna di web - menggunakan model warna (RGB, HSL) dan kata kunci. Maklumat ini berguna untuk pemula dan disyorkan untuk membaca.

Warna perenambelasan (hex)

Sistem nombor perenambelasan ( perenambelasan, heks) adalah berdasarkan nombor 16. Untuk menulis nilai perenambelasan, 16 aksara digunakan: Angka Arab dari 0 hingga 9 dan huruf pertama abjad Latin (A, B, C, D, E, F). Warna dalam format heksadesimal ditulis sebagai tiga nombor dua digit dari 00 hingga FF (ia mesti didahului oleh simbol cincang #), yang sepadan dengan tiga komponen: Merah, Hijau, Biru (model warna RGB). Dalam erti kata lain, entri warna boleh diwakili sebagai #RRGGBB, di mana pasangan aksara pertama menentukan aras merah, yang kedua - aras hijau dan yang ketiga - aras biru. Warna yang terhasil adalah gabungan ketiga-tiga warna ini.

Notasi ringkas untuk warna heks

Beberapa nilai warna heksadesimal boleh ditulis dalam singkatan. Untuk melakukan ini, tukar entri seperti #RRGGBB kepada #RGB. Ini boleh dilakukan apabila nombor hex mengandungi tiga pasang aksara yang sama.

Bentuk notasi yang disingkatkan adalah perkara biasa, dan untuk rujukan anda, kami akan memberikan beberapa contoh singkatan. Ngomong-ngomong, nilai warna hex tidak sensitif huruf - anda boleh menggunakan kedua-dua huruf besar dan huruf kecil, semuanya bergantung pada keinginan dan citarasa anda.

Contoh notasi singkatan untuk warna heks:

Model warna RGB

Cara kedua untuk menentukan warna dalam CSS ialah menggunakan nilai RGB perpuluhan (Merah, Biru, Hijau). Untuk melakukan ini, anda perlu menulis kata kunci rgb selepas sifat warna, dan kemudian dalam kurungan dan dipisahkan dengan koma - tiga nombor dalam julat dari 0 hingga 255, setiap satunya bermaksud keamatan warna merah, hijau dan biru (r , g, b). Semakin tinggi bilangannya, semakin pekat warnanya. Sebagai contoh, untuk mendapatkan warna hijau terang, anda perlu menulis:

P ( warna: rgb(0, 255, 0); )

Tetapi warna mustard kekuningan mempunyai makna berikut:

Warna: rgb(94, 81, 3); /* di bawah adalah warna yang sama, ditulis dalam perenambelasan: */ warna: #5E5103;

Nilai untuk hitam ditulis sebagai (0, 0, 0) dan untuk putih sebagai (255, 255, 255) . Ia juga mungkin untuk menunjukkan nilai ini sebagai peratusan. Jadi, nombor 255 sepadan dengan 100%, oleh itu, warna putih boleh ditetapkan seperti berikut:

Warna: rgb(100%, 100%, 100%);

Di mana untuk mencari makna warna

Mungkin anda mempunyai soalan: di manakah anda mendapat semua makna warna ini? Terdapat banyak editor grafik dan perkhidmatan dalam talian yang anda boleh memilih warna dan membina skema warna. Salah satu program paling popular di mana anda boleh memilih warna yang sesuai dan mendapatkan RGB, nilai hex dan banyak lagi ialah Adobe Photoshop. Sebagai alternatif, terdapat tapak khas di mana anda boleh dengan mudah memilih bukan sahaja warna, tetapi juga keseluruhan skema warna. Contoh yang bagus ialah perkhidmatan Adobe Color CC.

Model warna RGBA

Anda boleh menetapkan warna dalam format RGBA dengan cara yang sama seperti dalam RGB. Perbezaan antara RGBA dan RGB ialah kehadiran saluran alfa, yang bertanggungjawab untuk ketelusan warna. Ketelusan ditetapkan menggunakan nombor dalam julat dari 0 hingga 1, di mana 0 bermaksud ketelusan penuh, dan 1, sebaliknya, bermakna legap sepenuhnya. Nilai perantaraan seperti 0.5 membolehkan anda menetapkan penampilan lut sinar (notasi ringkas dibenarkan, tanpa sifar, tetapi dengan titik – .5). Sebagai contoh, untuk menjadikan teks berwarna dan telus sedikit, anda perlu menulis kata kunci rgba dan nilai warna selepas sifat warna:

P ( warna: rgba(94, 81, 3, .9); )

Kelemahan RGBA ialah ia tidak disokong oleh Internet Explorer versi 8 dan lebih awal. Khusus untuk IE8, anda boleh menggunakan penyelesaian berikut:

P ( warna: rgb(94, 81, 3); warna: rgba(94, 81, 3, .9); )

Sifat pertama dalam contoh ditujukan untuk pelayar IE8, yang akan memaparkan teks dalam warna yang dikehendaki, tetapi tanpa ketelusan. Dan penyemak imbas yang memahami RGBA akan menggunakan sifat kedua pada elemen tersebut, dengan ketelusan.

Model warna HSL (HSLA).

Anda juga boleh menetapkan warna dalam CSS menggunakan koordinat model warna HSL (Hue, Saturation, Lightness). Ia ditulis seperti ini:

P ( warna: hsl(165, 100%, 50%); )

Nombor pertama dalam kurungan bermaksud warna dan diberikan dalam darjah (julat nombor dari 0 hingga 359). Ia akan menjadi mudah untuk memahami mengapa darjah digunakan jika anda mengingati rupa roda warna:

Nombor kedua dan ketiga dalam kurungan bermaksud ketepuan dan kecerahan, masing-masing. Nilai mereka ditetapkan dalam peratusan dari 0 hingga 100. Semakin rendah nilai tepu, semakin diredam warnanya. Nilai tepu sifar akan menghasilkan warna kelabu, tidak kira apa nilai warnanya. Nilai kecerahan membolehkan anda menentukan kecerahan warna. Nilai rendah menghasilkan warna gelap, nilai tinggi menghasilkan warna terang. Nilai 100% untuk kecerahan bermakna putih, 0% bermakna hitam.

Model warna HSLA berfungsi hampir sama seperti HSL, tetapi, serupa dengan RGBA, ia mempunyai saluran alfa yang dengannya anda boleh menetapkan ketelusan warna, menyatakan nilai yang dikehendaki dalam julat dari 0 hingga 1:

P ( warna: hsla(165, 100%, 50%, .6); )

HSL dan HSLA disokong oleh semua pelayar kecuali Internet Explorer versi 8 dan lebih awal.

Warna HTML Standard

Satu lagi cara untuk mewakili warna di web adalah melalui kata kunci, yang boleh digunakan untuk menentukan warna untuk elemen. Contoh:

P(warna:hitam;)

Terdapat 16 warna standard yang boleh ditulis dalam nilai sifat warna:

Warna ini disokong oleh semua pelayar. Selain daripada ini, terdapat kira-kira 130 kata kunci tambahan untuk rona warna yang berbeza. Jadual lengkap warna ini boleh dilihat dalam buku rujukan W3C.

Penggunaan kata kunci sedemikian boleh diterima, tetapi terdapat risiko bahawa sesetengah perkataan tidak akan diterima oleh penyemak imbas. Oleh itu, adalah disyorkan untuk menulis kod warna heksadesimal dan bukannya kata kunci.

Keputusan

Dalam CSS, warna teks ditentukan menggunakan sifat warna, dan nilainya boleh ditulis dalam beberapa cara - dalam format heksadesimal (hex), dalam format RGB atau HSL, atau dengan menentukan kata kunci. Untuk mengelakkan paparan warna yang salah yang ditentukan menggunakan kata kunci, adalah lebih baik untuk menentukan nilai heksnya.

Anda juga boleh menetapkan ketelusan elemen menggunakan saluran alfa (format RGBA dan HSLA). Perlu dipertimbangkan bahawa pelayar IE8 dan versi terdahulunya tidak menyokong format RGBA, HSL dan HSLA.

Dalam HTML, warna boleh ditentukan dalam tiga cara:

Menetapkan warna dalam HTML dengan namanya

Sesetengah warna boleh ditentukan mengikut namanya, menggunakan nama warna dalam bahasa Inggeris sebagai nilai. Kata kunci yang paling biasa: hitam, putih, merah, hijau, biru, dsb.:

Warna teks – merah

Warna paling popular bagi piawaian World Wide Web Consortium (W3C):

Contoh penggunaan nama warna yang berbeza:

Contoh: menentukan warna dengan namanya

• Cubalah sendiri"

Pengepala pada latar belakang merah

Pengepala pada latar belakang oren

Tajuk pada latar belakang kapur

Teks putih pada latar belakang biru

Pengepala pada latar belakang merah

Pengepala pada latar belakang oren

Tajuk pada latar belakang kapur

Teks putih pada latar belakang biru

Menentukan Warna Menggunakan RGB

Apabila memaparkan warna yang berbeza pada monitor, palet RGB digunakan sebagai asas. Mana-mana warna diperoleh dengan mencampurkan tiga warna asas: R - merah, G - hijau, B - biru. Kecerahan setiap warna diberikan oleh satu bait dan oleh itu boleh mengambil nilai dari 0 hingga 255. Contohnya, RGB(255,0,0) dipaparkan sebagai merah kerana merah ditetapkan kepada nilai tertingginya (255) dan selebihnya ditetapkan kepada 0 Anda juga boleh menetapkan warna sebagai peratusan. Setiap parameter menunjukkan tahap kecerahan warna yang sepadan. Sebagai contoh: nilai rgb(127, 255, 127) dan rgb(50%, 100%, 50%) akan menetapkan warna hijau sederhana yang sama:

Contoh: Menentukan Warna Menggunakan RGB

• Cubalah sendiri"

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

rgb(127, 255, 127)

rgb(50%, 100%, 50%)

Tetapkan warna mengikut nilai perenambelasan

Nilai R G B juga boleh ditentukan menggunakan nilai warna perenambelasan (HEX) dalam bentuk: #RRGGBB di mana RR (merah), GG (hijau) dan BB (biru) ialah nilai perenambelasan dari 00 hingga FF (sama dengan perpuluhan 0-255 ). Sistem perenambelasan, tidak seperti sistem perpuluhan, berdasarkan, seperti namanya, pada nombor 16. Sistem perenambelasan menggunakan tanda berikut: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Di sini nombor dari 10 hingga 15 digantikan dengan huruf Latin. Nombor yang lebih besar daripada 15 dalam sistem perenambelasan diwakili dengan menggabungkan dua aksara menjadi satu nilai. Sebagai contoh, nombor tertinggi 255 dalam perpuluhan sepadan dengan nilai FF tertinggi dalam perenambelasan. Tidak seperti sistem perpuluhan, nombor perenambelasan didahului oleh simbol cincang. # , sebagai contoh, #FF0000 ditunjukkan sebagai merah kerana merah ditetapkan kepada nilai tertinggi (FF) dan selebihnya warna ditetapkan kepada nilai minimumnya (00). Tanda selepas simbol cincang # Anda boleh menaip dalam huruf besar dan huruf kecil. Sistem perenambelasan membolehkan anda menggunakan bentuk singkatan #rgb, di mana setiap aksara adalah bersamaan dengan dua kali ganda. Oleh itu, entri #f7O harus dianggap sebagai #ff7700.

Contoh: Warna HEX

• Cubalah sendiri"

merah: #FF0000

hijau: #00FF00

biru: #0000FF

merah: #FF0000

hijau: #00FF00

biru: #0000FF

merah+hijau=kuning: #FFFF00

merah+biru=ungu: #FF00FF

hijau+biru=cyan: #00FFFF

Senarai warna biasa (nama, HEX dan RGB):

Kod warna (latar belakang) mengikut ketepuan dan warna.