CSS (Cascading Style Sheets) được sử dụng để định dạng và trình bày trang web. Nó cho phép bạn tạo các quy tắc kiểu dáng, áp dụng các màu sắc, căn chỉnh, kích thước, đường viền và các hiệu ứng khác cho các phần tử HTML.

1. CSS là gì?

CSS là viết tắt của Cascading Style Sheets, nó là ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Bạn có thể hiểu rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc…

Xem thêm bài viết về chủ đề ngôn ngữ lập trình:

- JSON là gì? Trọn bộ kiến thức tổng quan về JSON
- JavaScript là gì? Kiến thức cơ bản cho người mới bắt đầu
- Ngôn ngữ lập trình C và C++ khác nhau như thế nào?

2. CSS dùng để làm gì?

Dưới đây là một số mục đích chính của việc nhúng CSS vào HTML Định dạng và trình bày: CSS cho phép bạn thay đổi font chữ, kích thước và màu sắc của văn bản, thiết lập đường viền và màu nền cho các phần tử HTML. Bằng cách sử dụng CSS, bạn có thể tạo giao diện hấp dẫn và đồng nhất cho trang web của mình.

Độ phản hồi (Responsive design): CSS cho phép bạn tạo ra giao diện đáp ứng, tức là giao diện có thể thay đổi dựa trên kích thước và thiết bị mà trang web đang được truy cập. Bằng cách sử dụng các phương thức như media queries, bạn có thể điều chỉnh kiểu dáng của trang web để nó phù hợp với mọi loại màn hình từ máy tính để bàn đến điện thoại di động

Quản lý trình bày: CSS cho phép bạn sắp xếp và căn chỉnh các phần tử trên trang web của bạn. Bằng cách sử dụng các thuộc tính như float, position, và display, bạn có thể điều chỉnh vị trí và cách phần tử hiển thị trên trang.

Hiệu ứng và chuyển động: CSS cung cấp các hiệu ứng và chuyển động cho các phần tử HTML. Bạn có thể tạo hiệu ứng hover, chuyển động, động hoặc thậm chí tạo ra các hiệu ứng chuyển động phức tạp bằng sử dụng CSS và các thuộc tính như transition, animation, và transform.

Tối ưu hóa SEO: Sử dụng CSS đúng cách cũng có thể tối ưu hóa trang web của bạn cho công cụ tìm kiếm. Bằng cách định dạng nội dung và cung cấp thông tin cần thiết cho các phần tử HTML, bạn có thể giúp công cụ tìm kiếm hiểu rõ hơn về nội dung của trang web và cải thiện khả năng tìm thấy và xếp hạng của nó..

3. Cách nhúng CSS vào HTML

Để chèn ảnh vào trang web của bạn bằng HTML, bạn cần sử dụng thẻ và cung cấp đường dẫn (URL) tới tệp ảnh.

a. Inline CSS: Đây là cách thêm css trực tiếp trên thẻ html cần định dạng. Tập hợp các style css được khai báo bên trong thuộc tính style của thẻ.

Ưu điểm của Internal CSS: Chỉ một trang ảnh hưởng bởi stylesheet Classes và IDs có thể được dùng bởi internal stylesheet. Không cần phải upload nhiều files. HTML và CSS có thể là một file.

Nhược điểm của Internal CSS: Tăng thời gian load time. Nó ảnh hưởng tới một trang – không hữu dụng nếu bạn sử dụng cùng một CSS cho nhiều trang.

Dưới đây là cách thực hiện

<p style="color: red; font-size: 18px;">Đây là đoạn văn có màu đỏ và kích thước 18px.</p>

b. Internal CSS:

Bạn có thể đặt CSS trực tiếp trong phần của tệp HTML bằng cách sử dụng thẻ <style>

Ưu điểm của External CSS: Kích thước trang HTML nhỏ hơn cấu trúc gọn hơn. Tốc độ load trang nhanh hơn. Một file .css có thể được dùng cho nhiều.

Nhược điểm của External CSS: Cho tới khi external CSS được load lên, trang của bạn sẽ không được tải hoàn toàn.

Dưới đây là cách thực hiện:

<head>
  <style>
    p {
      color: red;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Đây là đoạn văn có màu đỏ và kích thước 18px.</p>
</body>

c. External CSS: Bạn có thể tạo một tệp CSS riêng biệt (ví dụ: styles.css) và sau đó liên kết tệp CSS đó vào tệp HTML bằng thẻ .

Ưu điểm của Inline CSS: Hữu dụng nếu bạn muốn test hoặc xem trước thay đổi. Hữu dụng để sửa nhanh. Số requests HTTP ít hơn.

Nhược điểm của Inline CSS: Inline CSS phải được áp dụng cho mỗi element.

Dưới đây là cách thực hiện

  • Tệp HTML:
<head>
  <link rel="stylesheet" href="styles.cssb ">
</head>
<body>
  <p>Đây là đoạn văn có áp dụng CSS từ tệp styles.css.</p>
</body>
  • Tệp CSS:
p {
  color: red;
  font-size: 18px;
}

Trong cả hai phương pháp internal CSS và external CSS, bạn có thể sử dụng các tùy chọn CSS để áp dụng kiểu cho các phần tử HTML như class, id, hoặc chọn các phần tử con bên trong một phần tử cụ thể.

Tổng kết

Trong bài viết này, chúng ta đã tìm hiểu về CSS và cách sử dụng nó để định dạng và trình bày một trang web. Đây là một kỹ năng cơ bản và cần thiết trong công việc của các lập trình viên web developer. Vì thế hãy thật nắm vững các kiến thức này nhé!

Stringee hiện là đơn vị cung cấp bộ giải pháp giao tiếp Communication APIs giúp doanh nghiệp dễ dàng tích hợp các tính năng giao tiếp như gọi thoại/gọi video/chat vào ứng dụng hoặc website sẵn trong thời gian ngắn với chi phí tối ưu nhất. Giải pháp này cũng được hỗ trợ cho nền tảng React Native, chi tiết xin mời quý bạn đọc xem thêm tại đây.