Cách sử dụng màu trong CSS

Lưu ý: Bài viết nhằm tóm tắt nội dung thực hiện project & giúp bạn nắm bắt các phần được hướng dẫn một cách đơn giản nhất. Tuy nhiên, hãy theo dõi video để học hỏi các kiến thức và kỹ thuật chi tiết nhất từ tác giả.

Các cách sử dụng màu trong CSS

Bài hướng dẫn được thực hành tiếp tục từ code của bài trước, bạn có thể quay lại bài TỔNG QUAN CSS & CÁC CÚ PHÁP CƠ BẢN để tải về project sẵn có.

Màu HTML được chỉ định bằng cách sử dụng tên màu được xác định trước hoặc giá trị RGB, HEX, HSL, RGBA, HSLA,...

Ở file Style.css, bạn có thể chỉ định màu qua thuộc tính Color:


h1{
    color: aqua;
    /* Sử dụng tên trong của màu sắc */

    color: #00ffff;
    /* Sử dụng mã màu hexan  */

    color: rgb(0, 255, 255);
    /* Sử dụng phối màu rgb() red green blue */

    color: rgba(0, 255, 255, 1);
    /* Tương tự rgb() và thêm 1 thông số là độ mờ */

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Ta được kết quả

Các chú ý khi sử dụng màu trong thiết kế website

Chỉ nên sử dụng một màu cơ bản, và sử dụng thêm trong trang web là màu đó với cường độ đậm nhạt khác nhau

Ví dụ:

Ta cũng nên sử dụng màu thông qua ý nghĩa thông dụng của nó:

Bạn có thể xem thêm thông tin về cách sử dụng màu trong khóa học miễn phí trên Udemy, đồng thời cũng được hướng dẫn về các phần khác như font chữ, cách quản lí whitespace.

https://www.udemy.com/web-design-secrets/

Chọn màu

https://flatuicolors.com/

Hoàn thiện trang HTML của Blog

Java


<!DOCTYPE html>
<html>
    <head>
        <title>HTML co ban</title>
        <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>HOWKTEAM BLOG</h1>
        <h2>HOWKTEAM</h2>
       
        <!--heading tieu de cua cac phan trong website-->
        <p>
            <strike>Hello Kter</strike>  <!--tao chu co gach ngang-->
            <br> <!--break co tac dung giup xuong dong-->
            <hr>
            <b>HOWKTEAM</b> <!--bold tao chu in dam-->
            <em>HOWKTEAM</em> <!-- Emphasize tao chu in nghieng-->
            <u>HOWKTEAM</u> <!--underline tao chu co gach chan-->
            Lorem, ipsum dolor sit amet consectetur adipisicing elit.
             Rem debitis eos dolorem itaque tempore libero ipsa quibusdam fuga, vel,
              molestiae maxime harum consequatur architecto repellat dolores cupiditate iure nisi fugiat?
            Lorem ipsum, dolor sit amet consect <br>etur adipisicing elit. Nulla, culpa.
        </p>
        <h2>HOWKTEAM 2</h2>
        <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas, incidunt dolores perferendis sapiente,
            quas voluptatem cumque ipsa accusantium ab possimus iusto quo porro esse eius nemo explicabo quasi rerum! Cumque.
        </p>
        <!-- Noi ban chua van ban-->
        <img  src="https://www.howkteam.vn/Content/areacontent/images/HowKteamLogo.png" alt="PHoto">
        <!-- src source alt alternative -->
        <a href="https://www.howkteam.vn/">Link dan den HOWKTEAM</a>
         <form>
            <input type="text" placeholder="dien ten cac ban vao day">
            <input type="submit" value="gui tin nhan">
            <textarea cols="100" rows="10" placeholder="hello anh em"></textarea>
         </form>
         <img src="http://static.tvtropes.org/pmwiki/pub/images/AverageMan1.jpg" alt="">
         <h4>MY NAME IS ABC</h4>
         <div>
             SĐT: 099999999
         </div>
         <div>
             Địa chỉ: số 1, quận 2
         </div>
         <div>
             Email: blogtest@gmail.com
         </div>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

Project tham khảo

Nếu việc thực hành theo hướng dẫn không diễn ra suôn sẻ như mong muốn. Bạn cũng có thể tải xuống PROJECT THAM KHẢO ở link bên dưới!

Kết luận

Ở bài này chúng ta đã cùng tìm hiểu về cách sử dụng màu trong CSS và hoàn thiện HTML của trang Blog.

Ở bài sau chúng ta sẽ cùng nói về CSS MODEL BOX.

Cảm ơn các bạn đã theo dõi bài viết, hãy để lại bình luận và góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Cách sử dụng màu trong CSS dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like hoặc +1 Google để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần BÌNH LUẬN bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

Tải xuống

Tài liệu

Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Cách sử dụng màu trong CSS dưới dạng file PDF trong link bên dưới.

Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com

Đừng quên like và share để ủng hộ Kteam và tác giả nhé!

Thảo luận

Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.

CỘNG ĐỒNG HỎI ĐÁP HOWKTEAM.COM

GROUP THẢO LUẬN FACEBOOK

Nội dung bài viết

Dẫn nhập
Nội dung
Các cách sử dụng màu trong CSS
Các chú ý khi sử dụng màu trong thiết kế website
Hoàn thiện trang HTML của Blog
Project tham khảo
Kết luận
Tài liệu
Thảo luận
Tải xuống
- Tài liệu
Thảo luận

Tác giả/Dịch giả

Kteam

Khóa học

Lập trình Front End cơ bản với website Landing Page

Nếu bạn yêu thích lập trình web nhưng còn lơ ngơ không biết bắt đầu từ đâu hay đã biết cơ bản mà chưa làm được một sản phẩm nhất định nào, thì đây chính là khóa học dành cho bạn – LẬP TRÌNH FRONT END CƠ BẢN VỚI WEBSITE LANDING PAGE.

Trong phần này, Kteam sẽ giới thiệu cho các bạn về nội dung chúng ta sẽ được hướng dẫn cho khóa học này, cũng như là project mà chúng ta sẽ cùng nhau thực hiện.

Nào! Bắt đầu thôi!