tetapan warna css

CSS ialah bahasa yang digunakan untuk menerangkan gaya dan reka bentuk halaman web. Tetapan warna adalah salah satu asas CSS dan faktor yang sangat diperlukan dan penting dalam reka bentuk. Dalam artikel ini, kami akan meneroka tetapan warna CSS.

1. Cara menyatakan warna dalam CSS

Terdapat tiga cara untuk menyatakan warna dalam CSS: kata kunci, perenambelasan dan RGB.

1. Kata kunci

Kata kunci ialah kaedah perwakilan warna yang paling asas dalam CSS dan cara paling mudah untuk difahami dan digunakan. CSS menyediakan satu set kata kunci Apabila menggunakannya, anda hanya perlu memasukkan kata kunci yang sepadan dalam gaya.

Sebagai contoh, untuk menetapkan warna fon kepada merah, cuma tambah warna: merah pada gaya CSS.

Warna kata kunci yang disokong dalam CSS pada masa ini termasuk: hitam, putih, merah, hijau, biru, dll.

2. Heksadesimal

Kod warna perenambelasan ialah perwakilan warna yang biasa digunakan yang menggunakan nombor dan huruf untuk mewakili warna. Apabila digunakan dalam CSS, kod warna heksadesimal perlu ditambah pada gaya.

Sebagai contoh, untuk menetapkan warna fon kepada #ff0000 (merah), cuma tambah warna: #ff0000;

Apabila menggunakan kod warna heksadesimal, enam digit selepas simbol # digunakan untuk mewakili tiga warna utama warna - merah, hijau dan biru (RGB). Setiap nombor dua digit mewakili nilai kecerahan warna, dengan nilai minimum ialah 00 dan nilai maksimum ialah FF. Oleh itu, jika anda hanya perlu menukar kecerahan satu warna, anda boleh menukar dua aksara.

3.RGB

RGB ialah cara untuk menyatakan warna dengan tiga nombor, masing-masing mewakili nilai kecerahan merah, hijau dan biru. Apabila digunakan dalam CSS, anda perlu menambah nilai RGB dalam gaya, seperti: warna: rgb(255,0,0);

Antaranya, setiap nilai berjulat dari 0 hingga 255, menunjukkan kedalaman warna. Oleh itu, dengan menukar mana-mana tiga nombor ini, anda boleh melaraskan warna yang berbeza.

2. Senario Aplikasi Warna CSS

Warna CSS mempunyai pelbagai kegunaan Ia boleh menukar warna teks, warna latar belakang, warna sempadan, dll. Di bawah, kami akan memperkenalkan senario aplikasi ini satu demi satu.

1. Warna teks

Dalam CSS, anda boleh menggunakan kata kunci, heksadesimal dan RGB untuk menetapkan warna teks, seperti: warna: merah;, warna: #000000;, warna : rgb( 0,0,0); masing-masing sepadan dengan merah, hitam dan putih.

2. Warna latar belakang

Anda boleh menggunakan atribut warna latar belakang untuk menetapkan warna latar belakang. Sama seperti warna teks, ia juga boleh ditetapkan menggunakan kata kunci, perenambelasan dan RGB.

Sebagai contoh, untuk menetapkan warna latar belakang kepada biru, cuma tambah warna latar: biru pada gaya CSS.

3. Warna sempadan

Anda boleh menggunakan atribut warna sempadan untuk menetapkan warna sempadan, dan anda juga boleh menggunakan tiga kaedah perwakilan yang dinyatakan di atas.

Sebagai contoh, untuk menetapkan warna jidar kepada merah, cuma tambahkan warna sempadan: merah pada gaya CSS.

3. Ciri warna CSS yang biasa digunakan

1 Ketelusan warna

Dengan menetapkan ketelusan, anda boleh mencapai kesan pencampuran warna dan meningkatkan tahap dan kesan secara visual. Dalam CSS, anda boleh menggunakan nilai rgba untuk mewakili warna dan ketelusan.

Contohnya: latar belakang: rgba(0,0,0,0.5);

Nota: Jika anda perlu serasi dengan IE8 dan versi sebelumnya pelayar IE, anda boleh menggunakan filter:alpha(opacity=50).

2. Warna kecerunan CSS

Warna kecerunan ialah ciri warna penting dalam CSS, yang membolehkan kesan peralihan yang lancar dari satu warna ke warna lain. Terdapat dua jenis warna kecerunan yang disediakan dalam CSS: kecerunan linear dan kecerunan jejarian.

Kecerunan linear: Gunakan fungsi linear-gradient() untuk mencipta kecerunan linear, di mana parameter menetapkan koordinat titik permulaan dan penamat serta nilai warna peralihan perantaraan.

Contohnya: latar belakang: kecerunan linear(ke kanan, merah, biru);

Kecerunan jejari: Gunakan fungsi kecerunan jejari() untuk mencipta kecerunan jejarian, di mana parameter menetapkan koordinat titik tengah, jejari dan nilai warna peralihan perantaraan.

Contohnya: latar belakang: radial-gradient(merah, biru);

3. Peralihan warna CSS

Peralihan warna dalam CSS ialah kesan perubahan warna secara dinamik. Kesan peralihan warna boleh dicapai melalui atribut peralihan.

Contohnya: peralihan: warna latar belakang 0.3s mudah; bermakna menetapkan peralihan warna latar belakang, masa tunda ialah 0.3 saat, dan kesan peralihan adalah mudah. Cara ia dilaksanakan ialah menukar keadaan dalam keadaan tuding.

4. Ringkasan

Tetapan warna dalam CSS ialah salah satu asas reka bentuk web dan elemen yang diperlukan untuk mencipta halaman berwarna-warni. Gunakan kata kunci, nilai perenambelasan dan RGB untuk mewakili warna dalam CSS, dan cipta kesan warna yang unik melalui ciri seperti kecerunan dan peralihan CSS. Dengan mempraktikkan dan menggunakan pengenalan dan kod contoh dalam artikel ini, saya percaya anda boleh menguasai kemahiran tetapan warna CSS dengan mudah dan membawa reka bentuk web anda ke peringkat seterusnya.

Atas ialah kandungan terperinci tetapan warna css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!