Meneroka warna dalam CSS

<p> menguasai warna CSS: panduan komprehensif

<p> Dalam pelajaran sebelumnya, kami meneroka pemilih CSS. Sekarang, mari kita bina pengetahuan itu dengan mempelajari cara memanipulasi rupa unsur -unsur yang dipilih, bermula dengan pengubahsuaian warna. Panduan ini merangkumi pelbagai kaedah untuk menentukan warna dalam CSS, termasuk nama warna, kod hex, nilai RGB, dan format HSL.

<p> seperti yang ditunjukkan sebelum ini, selepas memilih elemen HTML (mis., A <p> perenggan), anda boleh mengubah warna teksnya menggunakan harta color:

<code class="language-css">p {
  color: red;
}</code>

<p> Begitu juga, harta background-color mengubah latar belakang elemen:

<code class="language-css">p {
  background-color: darkorange;
}</code>

<p> manakala CSS menyokong nama warna biasa seperti "merah" dan "darkorange," ia tidak merangkumi setiap warna yang mungkin. Untuk kawalan warna yang tepat, model warna RGB, HEX, dan HSL menawarkan fleksibiliti yang lebih besar.

model warna RGB

<p> RGB (merah, hijau, biru) membentuk asas perwakilan warna dalam sistem komputer. Mencampurkan tiga warna utama ini menghasilkan spektrum warna yang luas. Fungsi rgb() mentakrifkan warna RGB:

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

<p> Setiap parameter (, red, green) menerima nilai integer antara 0 dan 255, yang mewakili intensiti setiap komponen warna. 0 menunjukkan keamatan yang paling lemah, dan 255 yang paling kuat. Contohnya: blue

<code class="language-css">p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}</code>

Menggabungkan intensiti yang berbeza mencipta pelbagai warna: <p>

<code class="language-css">p {
  color: rgb(168, 189, 45);
}</code>

Alat pemetik warna sangat disyorkan untuk memilih nilai RGB secara visual, kerana ia mencabar untuk meramalkan warna yang terhasil dari nilai berangka sahaja. <p>

<p> fungsi

meluaskan <p> dengan menambahkan saluran alfa: rgba() rgb()

parameter

<code class="language-css">rgba(<red>, <green>, <blue>, <alpha>)</code>

(0.0 hingga 1.0) mengawal ketelusan; 0.0 adalah telus sepenuhnya, dan 1.0 adalah legap sepenuhnya: <p> alpha

<code class="language-css">p {
  color: rgba(167, 189, 45, 0.408);
}</code>

<p> model warna hex

warna hex menggunakan notasi heksadesimal:

<p> Simbol

mendahului kod heksadesimal enam digit. Setiap pasangan (

<code class="language-css">#rrggbb</code>

, <p>, #) mewakili komponen merah, hijau, dan biru, masing -masing, dari 00 (0 perpuluhan) hingga FF (255 perpuluhan). Contohnya: rr gg Ketelusan boleh ditambah menggunakan kod hex lapan digit: bb

<code class="language-css">p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}</code>

<p> mewakili saluran alfa (00 hingga FF, pemetaan hingga 0.0 hingga 1.0).

<code class="language-css">#rrggbbaa</code>

<p> ini bersamaan dengan aa.

<code class="language-css">p {
  color: #a7bd2d68;
}</code>

<p>

model warna HSL

<p> HSL (warna, ketepuan, ringan) adalah model warna yang biasa dengan pereka grafik. Fungsi hsl() menggunakan:

<code class="language-css">p {
  color: red;
}</code>

<p> hue mewakili kedudukan warna pada roda warna (0 hingga 360 darjah).

<p>

<p> (0% hingga 100%) menunjukkan keamatan warna (0% adalah kelabu, 100% warna penuh). saturation

<p>

(0% hingga 100%) Menentukan jumlah hitam atau putih ditambah (0% hitam, 100% putih). <p> lightness

<p> Menambah saluran alfa untuk ketelusan:

<p> hsla()

Ini bersamaan dengan

<code class="language-css">p {
  background-color: darkorange;
}</code>

dan

<code class="language-css">rgb(<red>, <green>, <blue>)</code>

. <p> #a7bd2d68 Eksplorasi lanjut rgba(167, 189, 45, 0.408)

Membuat susun atur berbilang lajur dengan CSS

menguasai susun atur grid CSS
membina susun atur flexbox dengan CSS

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