Làm quen với CSS

1. Sự ra đời của CSS

Khi trở nên rõ ràng rằng trình duyệt không chỉ được sử dụng cho mục đích khoa học, mà còn để giải trí, thì ngay lập tức sự thiếu hụt về đa phương tiện: video, hoạt hình, màu sắc, âm thanh, độ trong suốt, v.v. đã được nhận ra.

Ban đầu, người ta muốn thêm nhiều thẻ hơn cho việc này, nhưng sau đó họ hiểu rằng sẽ có hàng trăm thẻ mới và chúng sẽ làm phức tạp việc làm việc với tài liệu HTML. Vì vậy, ý tưởng tách biệt "sự trang trí tài liệu" (thiết kế) khỏi nội dung của nó ra đời. Đó chính là cách mà CSS xuất hiện.

Cascading Style Sheets (CSS) hay Bảng mẫu kiểu tầng, là một trong những thành phần quan trọng nhất của phát triển web, chịu trách nhiệm định dạng hình ảnh cho các trang web.

CSS là một tập hợp các thuộc tính, mỗi thuộc tính có một tên và một giá trị. Nhà phát triển web chỉ định các thuộc tính này, và trình duyệt sẽ thực hiện hiển thị chúng. Các thuộc tính này có thể được áp dụng cho hầu hết mọi phần tử. Ví dụ về định dạng CSS:

Có dưới 100 thuộc tính CSS (được gọi là thuộc tính CSS). Nhưng chúng có thể tương tác với nhau một cách tinh tế và tạo nên các hiệu ứng rất bất ngờ. Trên CodeGym, bạn sẽ học cách làm việc với chúng và tạo ra phép thuật thực sự trên trang 🦄.

2. Kiểu của các phần tử

Với mỗi phần tử HTML, bạn có thể chỉ định kiểu CSS riêng bằng cách sử dụng thuộc tính style.

Ví dụ:

      
<p style="color: blue; font-size: 16px;">Đây là một ví dụ về kiểu nhúng.</p>
      
    

Kiểu này thông báo cho trình duyệt rằng văn bản bên trong đoạn cần được hiển thị bằng màu xanh, và kích cỡ phông chữ phải là 16 pixel.

Thực sự ở đây có hai "kiểu":

• color = blue
• font-size = 16px

Chỉ là chúng được chỉ định trên một dòng và phân tách bằng dấu chấm phẩy.

Bạn cũng có thể, ví dụ, tạo một hình chữ nhật màu đen và viết văn bản màu trắng lên đó. Mã trông sẽ như thế này:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Văn bản màu trắng trên nền đen 
</div>
      
    

3. Màu sắc

Chúng ta sẽ tìm hiểu sâu hơn về các kiểu CSS sau khi học xong HTML. Nhưng để bạn thích thú hơn, hôm nay chúng ta sẽ tìm hiểu về màu sắc. Với CSS, bạn có thể chỉ định bất kỳ màu sắc nào mà máy tính có thể hiển thị, và thậm chí nhiều hơn thế.

Màu sắc trong CSS là một phần quan trọng trong việc tạo kiểu cho các trang web. Chúng cho phép tạo ra các giao diện trực quan hấp dẫn và dễ sử dụng. Có nhiều cách để chỉ định màu sắc trong CSS, mỗi cách có đặc điểm và ứng dụng riêng.

1. Tên màu (Color Names)

CSS hỗ trợ hơn 140 tên màu tiêu chuẩn. Đây là một cách đơn giản và dễ hiểu để chỉ định màu sắc.

      
<div style="color: lightblue;"> Màu xanh nhạt văn bản</div>
      
    

Một số tên màu phổ biến:

2. Giá trị thập lục phân (Hexadecimal Values)

Còn một cách khác nữa để bạn có thể chỉ định màu sắc, đó là mã hóa thập lục phân. Cách này cho phép bạn chọn đến 16 triệu sắc thái màu sắc — không thể tưởng tượng nổi việc đặt tên cho số lượng màu này, vì vậy người ta sử dụng các số.

Các giá trị thập lục phân được chỉ định bằng cách sử dụng ký tự #, sau đó là sáu chữ số hoặc chữ cái, biểu thị cường độ của các màu đỏ, xanh lá và xanh dương (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Màu đỏ trên nền xanh lá </div>
      
    

Bạn sẽ thường thấy cách chỉ định màu này trong các ví dụ. Chúng ta sẽ quay lại chủ đề này khi học CSS chi tiết hơn.