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:

p {
  color: red;
}

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

p {
  background-color: darkorange;
}

<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:

rgb(<red>, <green>, <blue>)

<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

p {
  color: rgb(255, 0, 0); /* Equivalent to color: red; */
}

Menggabungkan intensiti yang berbeza mencipta pelbagai warna: <p>

p {
  color: rgb(168, 189, 45);
}

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

rgba(<red>, <green>, <blue>, <alpha>)

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

p {
  color: rgba(167, 189, 45, 0.408);
}

<p> model warna hex

warna hex menggunakan notasi heksadesimal:

<p> Simbol

mendahului kod heksadesimal enam digit. Setiap pasangan (

#rrggbb

, <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

p {
  color: #ff0000; /* Equivalent to color: rgb(255, 0, 0); and color: red; */
}

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

#rrggbbaa

<p> ini bersamaan dengan aa.

p {
  color: #a7bd2d68;
}

<p>

model warna HSL

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

p {
  color: red;
}

<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

p {
  background-color: darkorange;
}

dan

rgb(<red>, <green>, <blue>)

. <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!