Rumah >hujung hadapan web >tutorial css >Meneroka warna dalam CSS

Meneroka warna dalam CSS

Mary-Kate Olsen
Mary-Kate Olsenasal
2025-01-30 00:10:09836semak imbas
<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> Exploring Colors in CSS 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 Exploring Colors in CSS

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> Exploring Colors in CSS

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

<p> Exploring Colors in CSS

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

<p> Exploring Colors in CSS 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn