Hướng dẫn how do i add color to css code? - làm cách nào để thêm màu vào mã css?

Những thứ có thể có màu

Ở cấp độ phần tử, mọi thứ trong HTML đều có thể áp dụng màu cho nó. Thay vào đó, chúng ta hãy xem xét mọi thứ về các loại thứ được vẽ trong các yếu tố, chẳng hạn như văn bản và biên giới, v.v. Đối với mỗi người, chúng ta sẽ thấy một danh sách các thuộc tính CSS áp dụng màu sắc cho chúng.

Ở cấp độ cơ bản, thuộc tính

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Chữ

Bất cứ khi nào một phần tử được hiển thị, các thuộc tính này được sử dụng để xác định màu của văn bản, nền của nó và bất kỳ trang trí nào trên văn bản.

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Màu sắc để sử dụng khi vẽ văn bản và bất kỳ trang trí văn bản nào (chẳng hạn như bổ sung các dòng dưới hoặc lớp phủ, các dòng tấn công, v.v.

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Màu nền của văn bản.

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Định cấu hình hiệu ứng bóng để áp dụng cho văn bản. Trong số các tùy chọn cho bóng là màu cơ sở của bóng (sau đó được làm mờ và được trộn với nền dựa trên các tham số khác). Xem văn bản thả bóng trong văn bản cơ bản và kiểu chữ để tìm hiểu thêm.

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Theo mặc định, trang trí văn bản (như gạch chân, strikethroughs, v.v.) sử dụng thuộc tính

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Màu sắc để sử dụng khi vẽ các ký hiệu nhấn mạnh liền kề với từng ký tự trong văn bản. Điều này được sử dụng chủ yếu khi vẽ văn bản cho các ngôn ngữ Đông Á.

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Màu để sử dụng khi vẽ Caret (đôi khi được gọi là con trỏ đầu vào văn bản) trong phần tử. Điều này chỉ hữu ích trong các yếu tố có thể chỉnh sửa, chẳng hạn như

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Hộp

Mỗi phần tử là một hộp có một số loại nội dung, và có nền và đường viền ngoài bất kỳ nội dung nào mà hộp có thể có.

Xem phần Biên giới để biết danh sách các thuộc tính CSS bạn có thể sử dụng để đặt màu của đường viền của hộp.

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Màu nền để sử dụng trong các khu vực của yếu tố không có nội dung tiền cảnh.

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Màu để sử dụng khi vẽ các cột tách dòng của văn bản.

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Màu để sử dụng khi vẽ một phác thảo xung quanh bên ngoài phần tử. Đề cương này khác với đường viền ở chỗ nó không được đặt không gian cho nó trong tài liệu (vì vậy nó có thể trùng lặp nội dung khác). Nó thường được sử dụng làm chỉ số tiêu điểm, để hiển thị phần tử nào sẽ nhận được các sự kiện đầu vào.

Biên giới

Xem phần Biên giới để biết danh sách các thuộc tính CSS bạn có thể sử dụng để đặt màu của đường viền của hộp.

Màu nền để sử dụng trong các khu vực của yếu tố không có nội dung tiền cảnh.

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

Màu để sử dụng khi vẽ các cột tách dòng của văn bản.

Bất kỳ yếu tố nào cũng có thể có một đường viền được vẽ xung quanh nó. Một đường viền phần tử cơ bản là một dòng được vẽ xung quanh các cạnh của nội dung phần tử. Xem các thuộc tính hộp trong mô hình hộp để tìm hiểu về mối quan hệ giữa các yếu tố và biên giới của chúng và đường viền kiểu dáng bằng cách sử dụng CSS để tìm hiểu thêm về việc áp dụng các kiểu cho biên giới.

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

Chỉ định một màu duy nhất để sử dụng cho mọi bên của đường viền của phần tử.

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

Cho phép bạn đặt màu của phía tương ứng của đường viền của phần tử.

This is the first box.

This is the second box.

6 và

This is the first box.

This is the second box.

7

Với những điều này, bạn có thể đặt màu được sử dụng để vẽ các đường viền gần nhất với đầu và cuối của khối đường viền bao quanh. Trong chế độ viết từ trái sang phải (chẳng hạn như cách viết tiếng Anh), đường viền khởi động khối là cạnh trên và đầu khối là đáy. Điều này khác với đầu và kết thúc nội tuyến, là các cạnh trái và phải (tương ứng với nơi mỗi dòng văn bản trong hộp bắt đầu và kết thúc).

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

Chúng cho phép bạn tô màu các cạnh của đường viền gần nhất với đầu và phần cuối của phần bắt đầu của các dòng văn bản trong hộp. Bên nào sẽ thay đổi tùy thuộc vào các thuộc tính

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

Cho phép bạn vẽ hình ảnh bằng cách sử dụng các lệnh vẽ các hình dạng, mẫu và dòng cụ thể để tạo ra một hình ảnh. Các lệnh SVG được định dạng là XML và có thể được nhúng trực tiếp vào trang web hoặc có thể được đặt trong trang bằng phần tử

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Thư viện đồ họa web là API dựa trên ES OpenGL để vẽ đồ họa 2D và 3D hiệu suất cao trên web. Xem hướng dẫn WebGL của chúng tôi để tìm hiểu thêm.

Cách mô tả một màu

Để thể hiện màu trong CSS, bạn phải tìm cách dịch khái niệm "màu" tương tự thành dạng kỹ thuật số mà máy tính có thể sử dụng. Điều này thường được thực hiện bằng cách chia màu thành các thành phần, chẳng hạn như bao nhiêu của một tập hợp các màu chính để trộn với nhau, hoặc sáng để tạo màu. Như vậy, có một số cách bạn có thể mô tả màu sắc trong CSS.

Để thảo luận chi tiết hơn về từng loại giá trị màu, hãy xem tham chiếu cho đơn vị CSS

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Từ khóa

Một tập hợp các tên màu tiêu chuẩn đã được xác định, cho phép bạn sử dụng các từ khóa này thay vì các biểu diễn màu của màu nếu bạn chọn làm như vậy và có một từ khóa thể hiện màu chính xác bạn muốn sử dụng. Các từ khóa màu bao gồm các màu chính và thứ cấp tiêu chuẩn (như

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

Xem các từ khóa màu trong

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Giá trị RGB

Có ba cách để thể hiện màu RGB trong CSS.

Ký hiệu chuỗi thập lục phân

Ký hiệu chuỗi thập lục phân đại diện cho một màu sử dụng các chữ số thập lục phân để biểu thị từng thành phần màu (đỏ, xanh lá cây và xanh dương). Nó cũng có thể bao gồm một thành phần thứ tư: kênh alpha (hoặc độ mờ). Mỗi thành phần màu có thể được biểu diễn dưới dạng một số từ 0 đến 255 (0x00 và 0xff) hoặc, tùy chọn, dưới dạng một số từ 0 đến 15 (0x0 và 0xF). Tất cả các thành phần phải được chỉ định bằng cùng một số chữ số. Nếu bạn sử dụng ký hiệu một chữ số, màu cuối cùng được tính bằng cách sử dụng chữ số của mỗi thành phần hai lần; nghĩa là,

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 290px;
  height: 100px;
  margin: 0;
  padding: 4px 6px;
  font: 28px "Marker Felt", "Zapfino", cursive;
  display: flex;
  justify-content: center;
  align-items: center;
}

Một màu trong ký hiệu chuỗi thập lục phân luôn bắt đầu với ký tự

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

Chỉ định một màu toàn phần có thành phần màu đỏ là số thập lục phân

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

Chỉ định một màu có thành phần màu đỏ là số thập lục phân

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

Chỉ định một màu có thành phần màu đỏ là số thập lục phân

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

Chỉ định một màu có thành phần màu đỏ là số thập lục phân

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

Chỉ định một màu có thành phần màu đỏ là số thập lục phân

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

.boxLeft {
  float: left;
  background-color: rgb(245, 130, 130);
  outline: 2px solid darkred;
}

Ví dụ, bạn có thể đại diện cho màu mờ đục màu xanh lam là

.boxRight {
  float: right;
  background-color: hsl(270deg, 50%, 75%);
  outline: 4px dashed rgb(110, 20, 120);
  color: hsl(0deg, 100%, 100%);
  text-decoration: underline wavy #88ff88;
  text-shadow: 2px 2px 3px black;
}

9 hoặc

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

0. Để làm cho nó mờ đục 25%, bạn có thể sử dụng

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

1 hoặc

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

2.

Ký hiệu chức năng RGB

Ký hiệu chức năng RGB (Red/Green/Blue), như ký hiệu chuỗi thập lục phân, biểu thị màu sắc bằng các thành phần màu đỏ, xanh lục và xanh dương của chúng (cũng như, tùy chọn, thành phần kênh alpha cho độ mờ đục). Tuy nhiên, thay vì sử dụng chuỗi, màu được xác định bằng hàm CSS

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

Mỗi phải là giá trị

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

<div id="box">
  <label for="colorPicker">Border color:label>
  <input type="color" value="#8888ff" id="colorPicker" />
  <p id="output">p>
div>

Kênh Alpha là một số giữa 0,0 (trong suốt hoàn toàn) và 1.0 (mờ hoàn toàn). Bạn cũng có thể chỉ định tỷ lệ phần trăm trong đó 0% giống với 0,0 và 100% giống như 1.0.

Ví dụ, một màu đỏ sáng có thể được biểu diễn là #box { width: 500px; height: 200px; border: 2px solid rgb(245, 220, 225); padding: 4px 6px; font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"; } 0 hoặc #box { width: 500px; height: 200px; border: 2px solid rgb(245, 220, 225); padding: 4px 6px; font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"; } 1.

Ký hiệu chức năng HSL

Sơ đồ dưới đây cho thấy một xi lanh màu HSL. Huế xác định màu thực tế dựa trên vị trí dọc theo một bánh xe màu hình tròn đại diện cho màu sắc của phổ nhìn thấy được. Độ bão hòa là một tỷ lệ phần trăm của bao nhiêu cách giữa một màu xám và có lượng tối đa có thể của màu sắc đã cho. Khi giá trị của độ chói (hoặc độ sáng) tăng lên, màu sắc chuyển từ tối nhất có thể sang độ sáng nhất có thể (từ đen sang trắng). Hình ảnh lịch sự của người dùng Sharkd trên Wikipedia, được phân phối theo giấy phép CC By-SA 3.0.

Giá trị của thành phần màu sắc (h) của màu HSL là một góc từ màu đỏ xung quanh đến màu vàng, xanh lá cây, màu xanh lam, xanh dương và màu đỏ tươi (kết thúc màu đỏ một lần nữa ở 360 °) xác định màu cơ bản là gì. Giá trị có thể được chỉ định trong bất kỳ đơn vị

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

Thành phần bão hòa của màu của màu chỉ định bao nhiêu phần trăm của màu cuối cùng bao gồm màu sắc được chỉ định. Phần còn lại được xác định bởi mức màu xám được cung cấp bởi thành phần độ chói (L).

Hãy nghĩ về nó giống như tạo ra màu sơn hoàn hảo:

1. Bạn bắt đầu với sơn cơ bản, cường độ tối đa có thể cho một màu nhất định, chẳng hạn như màu xanh cường độ cao nhất có thể được biểu thị bằng màn hình của người dùng. Đây là thành phần màu sắc (h): một giá trị đại diện cho góc xung quanh bánh xe màu cho màu sắc sống động mà chúng tôi muốn sử dụng làm cơ sở của chúng tôi.hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
2. Sau đó chọn một loại sơn màu xám tương ứng với mức độ sáng của bạn muốn màu; Đây là độ chói. Bạn có muốn nó rất sáng và gần như trắng, hoặc rất tối và gần với màu đen hơn, hoặc ở đâu đó ở giữa? Điều này được chỉ định bằng tỷ lệ phần trăm, trong đó 0% là hoàn toàn đen và 100% là hoàn toàn trắng (bất kể độ bão hòa hay màu sắc). Ở giữa các giá trị là một khu vực màu xám theo nghĩa đen.
3. Bây giờ bạn có một loại sơn màu xám và một màu sắc hoàn hảo, bạn cần phải trộn chúng lại với nhau. Thành phần bão hòa của màu sắc cho thấy tỷ lệ phần trăm của màu cuối cùng phải bao gồm màu sắc hoàn toàn sống động đó. Phần còn lại của màu cuối cùng được tạo thành từ sơn màu xám đại diện cho độ bão hòa.

Bạn cũng có thể tùy chọn bao gồm một kênh alpha, để làm cho màu nhỏ hơn 100% mờ đục.

Dưới đây là một số màu mẫu trong ký hiệu HSL:

table {
  border: 1px solid black;
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border-spacing: 0;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid black;
  padding: 4px 6px;
  text-align: left;
}

th {
  background-color: hsl(0, 0%, 75%);
}

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Lưu ý: Khi bạn bỏ qua đơn vị của màu sắc, nó được cho là ở độ (

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

#box {
  width: 500px;
  height: 200px;
  border: 2px solid rgb(245, 220, 225);
  padding: 4px 6px;
  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif";
}

Ký hiệu chức năng HWB

Giống như ký hiệu chức năng HSL ở trên, hàm hwb () sử dụng cùng một giá trị màu sắc. Nhưng thay vì độ nhẹ và độ bão hòa, bạn chỉ định giá trị độ trắng và màu đen theo tỷ lệ phần trăm. Các giá trị không được phân tách bằng dấu phẩy và giá trị alpha tùy chọn có thể được bao gồm (nó phải được đi trước bởi một dấu gạch chéo phía trước

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Dưới đây là một số ví dụ về việc sử dụng ký hiệu HWB:

/* These examples all specify varying shades of a lime green. */
hwb(90 10% 10%)
hwb(90 10% 10%)
hwb(90 50% 10%)
hwb(90deg 10% 10%)
hwb(1.5708rad 60% 0%)
hwb(.25turn 0% 40%)

/* Same lime green but with an alpha value */
hwb(90 10% 10% / 0.5)
hwb(90 10% 10% / 50%)

Sử dụng màu sắc

Bây giờ bạn đã biết những thuộc tính CSS nào tồn tại cho phép bạn áp dụng màu sắc cho các phần tử và các định dạng bạn có thể sử dụng để mô tả màu sắc, bạn có thể kết hợp nó lại với nhau để bắt đầu sử dụng màu sắc. Như bạn có thể đã thấy từ danh sách dưới những thứ có thể có màu sắc, có rất nhiều thứ bạn có thể tô màu với CSS. Chúng ta hãy xem xét điều này từ hai phía: sử dụng màu trong một bảng kiểu và thêm và thay đổi màu sắc bằng cách sử dụng mã JavaScript để thay đổi kiểu của các yếu tố.

Chỉ định màu sắc trong các kiểu dáng

Cách dễ nhất để áp dụng màu sắc cho các yếu tố, và cách bạn thường làm điều đó để chỉ định màu trong các CS được sử dụng khi hiển thị các yếu tố. Mặc dù chúng tôi sẽ không sử dụng mọi tài sản được đề cập trước đây, chúng tôi sẽ xem xét một vài ví dụ. Khái niệm này giống nhau bất cứ nơi nào bạn sử dụng màu sắc.

Chúng ta hãy xem một ví dụ, bắt đầu bằng cách nhìn vào kết quả mà chúng ta đang cố gắng đạt được:

HTML

HTML chịu trách nhiệm tạo ví dụ trên được hiển thị ở đây:

<div class="wrapper">
  <div class="box boxLeft">
    <p>This is the first box.p>
  div>
  <div class="box boxRight">
    <p>This is the second box.p>
  div>
div>

Điều này khá đơn giản, sử dụng

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

Điều kỳ diệu xảy ra, như thường lệ, trong CSS, nơi chúng ta sẽ áp dụng màu sắc xác định bố cục cho HTML ở trên.

CSS

Chúng tôi sẽ xem xét các CSS để tạo kết quả trên một mảnh tại một thời điểm, vì vậy chúng tôi có thể xem xét từng phần thú vị một.

.wrapper {
  width: 620px;
  height: 110px;
  margin: 0;
  padding: 10px;
  border: 6px solid mediumturquoise;
}

Lớp

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>

<table>
  <thead>
    <tr>
      <th scope="col">Color in HSL notationth>
      <th scope="col">Exampleth>
    tr>
  thead>
  <tbody>
    <tr>
      <td><code>hsl(90deg, 100%, 50%)code>td>
      <td style="background-color: hsl(90deg, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(90, 100%, 50%)code>td>
      <td style="background-color: hsl(90, 100%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 50%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 50%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 75%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 75%);"> td>
    tr>
    <tr>
      <td><code>hsl(0.15turn, 90%, 50%)code>td>
      <td style="background-color: hsl(0.15turn, 90%, 50%);"> td>
    tr>
    <tr>
      <td><code>hsl(270deg, 90%, 50%)code>td>
      <td style="background-color: hsl(270deg, 90%, 50%);"> td>
    tr>
  tbody>
table>