CSS cùng với HTML và JavaScript là ba công nghệ cốt lõi đối với một Web Developer. Nắm vững kiến thức và sử dụng thành thạo CSS giúp bạn tạo ra các website đẹp mắt, dễ sử dụng, có khả năng truy cập cao và hiệu suất tốt. Nếu bạn đang tìm hiểu CSS là gì và cách sử dụng CSS để thiết kế website đáp ứng được các yếu tố trên, đây chính là bài viết dành cho bạn.

Đọc bài viết này để hiểu rõ hơn:

  • CSS là gì? 
  • Cách hoạt động và vai trò của CSS 
  • Cấu trúc cơ bản của cú pháp CSS
  • Các thao tác thiết kế web với CSS
  • 3 cách nhúng CSS vào trang web
  • Các câu hỏi thường gặp về CSS

CSS là gì?

CSS (viết tắt của Cascading Style Sheets) là ngôn ngữ style sheets, được sử dụng để mô tả cách trình bày các tài liệu được viết bằng ngôn ngữ đánh dấu (HTML, XML, SVG). CSS giúp kiểm soát cách trình bày của các yếu tố HTML gồm:

  • Màu sắc: Màu nền, màu chữ, màu viền,…
  • Phông chữ: Kiểu chữ, kích thước chữ, độ dày chữ,…
  • Bố cục: Vị trí các yếu tố, kích thước, căn chỉnh,…
  • Hiệu ứng: Hiệu ứng chuyển tiếp, hiệu ứng di chuột,…

Đọc thêm: Giải đáp “tất tần tật” những điều cần biết về HTML

CSS hoạt động thế nào?

Mỗi trình duyệt sẽ có các bước xử lý quá trình tải trang web khác nhau. Dưới đây là những giai đoạn chung:

  • Tải HTML: Trình duyệt tải trang HTML từ máy chủ web.
  • Tạo DOM: Trình duyệt chuyển đổi HTML thành DOM (Document Object Model). Đây là một mô hình cây thể hiện cấu trúc của trang web.
  • Tải tài nguyên: Song song với quá trình tạo DOM, trình duyệt cũng tìm kiếm và tải các file CSS, JavaScript, hình ảnh, các video và một số tài nguyên có liên quan đến trang web.
  • Quá trình tạo CSSOM: Trình duyệt sẽ phân tích nội dung CSS và tạo ra CSSOM (CSS Object Model), một cấu trúc tương tự như DOM nhưng dành cho CSS, bao gồm các thông tin về màu sắc, kích thước và vị trí element. Dựa trên các bộ chọn tìm thấy, nó xác định quy tắc nào nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây render).
  • Áp dụng kiểu: Trình duyệt áp dụng các kiểu CSS cho các phần tử HTML tương ứng dựa trên các quy tắc chọn trong bảng kiểu.
  • Hiển thị trang web: Trình duyệt hiển thị trang web trên màn hình dựa trên các kiểu đã áp dụng (giai đoạn này được gọi là painting).

Ví dụ dùng CSS để định màu sắc và size chữ:

<!DOCTYPE html>
<html>

<head>
<title>Blog ITviec</title>
<style>

h1 {
  color: red;
  font-size: 24px;
}

p {
  color: blue;
  font-size: 16px;
}

</style>
</head>

<body>
<h1>Blog ITviec</h1>
<p>Chào mừng bạn đến với Blog ITviec</p>
</body>

</html>

Kết quả hiển thị trên trang web:

 

css là gì - cách sử dụng css để thiết kế web - itviec blog

Vai trò của CSS trong thiết kế website

CSS đóng vai trò quan trọng trong việc xây dựng và thiết kế website hay ứng dụng. Có 3 cách thêm CSS vào trang web HTML là Inline CSS (CSS nội tuyến), Internal CSS (CSS nội bộ) và External CSS (CSS bên ngoài). Khi được sử dụng đúng cách, CSS sẽ mang đến hàng loạt lợi ích trong việc phát triển và duy trì website.

  • Định dạng và tạo kiểu cho website:

CSS cho phép kiểm soát cách trình bày các yếu tố HTML gồm màu sắc, phông chữ, bố cục, hiệu ứng,… Trang web nếu không có CSS có thể sẽ rất nhàm chán, khó đọc, khó truy cập và không hiệu quả. Nắm vững kiến thức và sử dụng thành thạo CSS giúp Front end Developer tạo ra các website đẹp mắt, thu hút và dễ sử dụng.

Ví dụ khi chưa thêm CSS:

<!DOCTYPE html> 
<html> 

<head> 
<title>Blog ITviec</title>
</head> 

<body> 
<main> 
<h1>ITviec là gì?</h1> 
<p>ITviec là trang web tìm kiếm việc làm chuyên biệt cho ngành IT</p>  
</main> 
</body> 

</html>

Hiển thị trên trang web sẽ trông như thế này:

css là gì - cách sử dụng css để thiết kế web - itviec blog

Khi đã thêm CSS:

<!DOCTYPE html> 
<html> 

<head> 
<title>Blog ITviec</title> 
<style> 
main { 
width: 600px; 
height: 200px; 
padding: 10px; 
background: beige; 
} 

h1 { 
color: olivedrab; 
border-bottom: 1px dotted darkgreen; 
} 

p { 
font-family: sans-serif; 
color: orange; 
} 

</style> 
</head> 

<body> 
<main> 
<h1>ITviec là gì?</h1> 
<p>ITviec là trang web tìm kiếm việc làm chuyên biệt cho ngành IT</p> 
</main>
</body> 

</html>

Hiển thị trên trang web lúc này sẽ như hình bên dưới:

css là gì - cách sử dụng css để thiết kế web - itviec blog

  • Tách biệt nội dung và định dạng:

Khi sử dụng CSS nội bộ hoặc CSS bên ngoài, tệp nội dung (HTML) và định dạng (CSS) của website được tách biệt. Nhờ vậy, Front end Developer có thể dễ dàng thay đổi giao diện website mà không làm ảnh hưởng đến nội dung. 

  • Tăng khả năng truy cập:

CSS có thể được sử dụng để cải thiện khả năng truy cập của website cho người dùng khiếm khuyết bằng cách tạo ra các thiết kế dễ tiếp cận hơn, chẳng hạn tăng kích thước chữ hoặc thay đổi độ tương phản của màu sắc.

  • Tối ưu hóa hiệu suất website:

Việc sử dụng CSS đúng cách giúp tách biệt phần định dạng ra khỏi nội dung HTML giúp tập tin HTML giảm được kích thước. CSS cũng hỗ trợ lazy loading giúp tăng tốc độ tải trang web.

  • Tăng khả năng bảo trì:

Sử dụng CSS bên ngoài giúp việc bảo trì trang web nhanh chóng và thuận tiện hơn. Điều này là bởi tổ chức file CSS được tách riêng biệt với HTML. Khi cần điều chỉnh giao diện website, các lập trình viên chỉ cần thay đổi tập tin CSS mà không cần thay đổi mã HTML.

Cấu trúc cơ bản của cú pháp CSS

Các thuật ngữ cơ bản của CSS là gì?

Toàn bộ cấu trúc của CSS được gọi là một bộ quy tắc với 2 phần chính gồm: Bộ chọn (selector), Khối khai báo (Declaration Blocks).

  • Bộ chọn giúp xác định phần tử HTML cần muốn định dạng. Có nhiều loại bộ chọn khác nhau gồm: Bộ chọn theo thẻ (element selector), Bộ chọn theo class (class selector), Bộ chọn theo ID (id selector), Bộ chọn con cháu (descendant selector), Bộ chọn anh em (sibling selector).
  • Khai báo giúp xác định thuộc tính (property) và giá trị (value) của thuộc tính đó để định dạng cho phần tử được chọn. Các khai báo thường được ngăn cách với nhau bởi dấu “;”. Khối bao gồm một hoặc nhiều khai báo được đặt trong ngoặc nhọn {}.

Ví dụ: Bạn muốn tạo giao diện cho một trang web đơn giản với các thành phần sau:

  • Tiêu đề trang web: H1 có màu đỏ, font size 24px.
  • Nút “Liên hệ”: Button có màu xanh dương, chữ trắng, padding 10px 20px, bo tròn 5px.
  • Nội dung trang web: Paragraph có màu đen, font size 16px.

Đoạn code CSS sau đây sử dụng bộ chọn class để định dạng các thành phần trên:

/* style.css */

/* Định dạng tiêu đề trang web */

.tieu-de {

  color: red;
  font-size: 24px;

}

/* Định dạng nút "Liên hệ" */

.btn-lien-he {

  background-color: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;

}

/* Định dạng nội dung trang web */

.noi-dung {

  color: #333;
  font-size: 16px;

}

Các thuộc tính cơ bản của CSS

  • Màu sắc (Color): color (màu sắc văn bản), background-color (màu nền của phần tử), fill (màu cho nội dung SVG), stroke (màu cho đường viền SVG),…
  • Phông chữ (Font): font-family (kiểu chữ), font-size (cỡ chữ), font-weight (độ dày font chữ), text-decoration (đường viền dưới, gạch ngang, hoặc bóng đổ cho văn bản),…
  • Bố cục (Layout): display (kiểu hiển thị: block, inline, none,…), position (vị trí: static, relative, absolute, fixed,…), margin (lề), top (vị trí trên cùng), left (vị trí bên trái), right (vị trí bên phải), bottom (vị trí dưới cùng),…
  • Hiệu ứng (Effect): transition (hiệu ứng chuyển tiếp cho các thuộc tính CSS), animation (hiệu ứng hoạt hình), box-shadow (bóng đổ cho một phần tử), border-radius (Bo tròn góc cho một phần tử), filter (áp dụng bộ lọc cho một phần tử),…

Ví dụ:

h1 {

  color: red; /* màu chữ đỏ */
  font-size: 24px; /* kích thước chữ 24px */

}

p {

  color: blue; /* màu chữ xanh */
  font-size: 16px; /* kích thước chữ 16px */

}

Các loại bộ chọn trong CSS

Bộ chọn là một phần quan trọng trong CSS, giúp bạn chọn các phần tử HTML cụ thể để định dạng. Có nhiều loại Bộ chọn khác nhau, mỗi loại có chức năng riêng biệt.

  • Các bộ chọn cơ bản

Bộ chọn

 Đặc điểm Ví dụ
Bộ chọn phần tử (có thể được gọi là bộ chọn thẻ hoặc loại) Chọn tất cả các phần tử HTML có cùng tên thẻ.

p

Chọn <p>

Bộ chọn ID

 Chọn phần tử HTML có ID cụ thể. #my-id

Chọn <p id=”my-id”>hoặc <a id=”my-id”>
Bộ chọn class Chọn tất cả phần tử HTML có cùng class.

.my-class

Chọn <p class=”my-class”>và <a class=”my-class”>

Bộ chọn thuộc tính

 Chọn phần tử trên trang có thuộc tính được chỉ định. img[src]

Chọn <img src=”myimage.png”>nhưng không <img>
Bộ chọn lớp giả (Pseudo-class) Chọn phần tử được chỉ định, nhưng chỉ khi ở trạng thái được chỉ định.

a:hover

chọn <a>, nhưng chỉ khi con trỏ chuột di chuột qua liên kết.
  • Các bộ chọn nâng cao

Bộ chọn

 Đặc điểm Ví dụ
Bộ chọn con cháu (descendant selector) Chọn tất cả các phần tử con cháu của một phần tử được chọn.

div p

Chọn tất cả các đoạn văn bên trong các div.

Bộ chọn anh em (sibling selector)

 Chọn phần tử liền kề ngay sau phần tử được chọn. h1 + p

Chọn tất cả các đoạn văn liền kề ngay sau thẻ h1.
Bộ chọn con (child selector) Chọn tất cả các phần tử con trực tiếp của phần tử được chọn.

ul > li

Chọn tất cả mục danh sách (li) trực tiếp bên trong danh sách không thứ tự (ul).

Bộ chọn lân cận (adjacent sibling selector)

 Chọn phần tử liền kề ngay sau và cùng cấp với phần tử được chọn.

h1 ~ p

Chọn tất cả các đoạn văn liền kề ngay sau thẻ h1 và cùng cấp với nó.

Ngoài ra, CSS còn có một số bộ chọn khác như:

  • Universal selector: Chọn tất cả các phần tử HTML.
  • Pseudo-element selector: Chọn một phần cụ thể của phần tử HTML (ví dụ: ::before, ::after).

Các thao tác thiết kế giao diện web bằng CSS cơ bản

Thay đổi màu sắc

  • Sử dụng thuộc tính color để thay đổi màu sắc của text.
  • Sử dụng thuộc tính background-color để thay đổi màu nền của phần tử HTML.
  • Sử dụng thuộc tính gradient để tạo hiệu ứng chuyển màu cho nền của phần tử HTML.
  • Sử dụng thuộc tính filter để thêm các hiệu ứng filter cho phần tử HTML.

Ví dụ sử dụng thuộc tính background-color để thay đổi màu nền của phần tử HTML:

body {

  color: #000000;
  background-color: #ffffff;

}

h1 {

  color: #ff0000;

}

p {

  background-color: #00ff00;

}

Đọc thêm: Tổng hợp chi tiết và đầy đủ nhất về Bảng màu HTML

Định dạng bố cục

  • Sử dụng thuộc tính margin để tạo khoảng cách giữa body và các phần tử khác.
  • Sử dụng thuộc tính padding để tạo khoảng cách giữa nội dung body và đường viền.
  • Sử dụng thuộc tính text-align để căn lề text sang trái, phải, giữa hoặc hai đầu.
  • Sử dụng display: flex để kích hoạt flexbox cho body.
  • Sử dụng các thuộc tính flexbox như justify-content và align-items để căn chỉnh các phần tử theo chiều ngang và chiều dọc.

Ví dụ sử dụng thuộc tính background-color để thay đổi màu nền của phần tử HTML:

body {

  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;

}

Định dạng văn bản

  • Sử dụng thuộc tính font-family: để chọn font chữ cho phần tử HTML.
  • Sử dụng thuộc tính font-size: để định cỡ font chữ.
  • Sử dụng thuộc tính font-weight: để định độ dày mỏng của font chữ.
  • Sử dụng thuộc tính font-style: để định kiểu chữ như normal, italic, oblique,…
  • Sử dụng thuộc tính text-transform: để chuyển đổi kiểu chữ như uppercase, lowercase, capitalize,…
  • Sử dụng thuộc tính letter-spacing: để điều chỉnh khoảng cách giữa các ký tự.
  • Sử dụng thuộc tính word-spacing: để điều chỉnh khoảng cách giữa các từ.
  • Sử dụng thuộc tính text-shadow: để thêm bóng đổ cho text.

Căn chỉnh hình ảnh

  • Sử dụng thuộc tính margin: để tạo khoảng cách giữa hình ảnh và các phần tử khác.
  • Sử dụng thuộc tính float: để di chuyển hình ảnh sang trái hoặc phải.
  • Sử dụng thuộc tính text-align: để căn chỉnh hình ảnh trong một phần tử block.
  • Sử dụng display: flex để kích hoạt flexbox cho phần tử chứa hình ảnh.
  • Sử dụng các thuộc tính flexbox như justify-content và align-items để căn chỉnh hình ảnh theo chiều ngang và chiều dọc.
  • Sử dụng display: grid để kích hoạt grid layout cho phần tử chứa hình ảnh.
  • Sử dụng các thuộc tính grid layout như grid-template-columns và grid-template-rows để xác định kích thước của các cột và hàng.
  • Sử dụng các thuộc tính grid layout như justify-content và align-items để căn chỉnh hình ảnh trong grid.

3 cách nhúng CSS vào website

Như đã đề cập, có 3 cách phổ biến để nhúng CSS vào website: CSS nội tuyến (Inline CSS), CSS nội bộ (Internal CSS) và CSS bên ngoài (External CSS). Trong nội dung bên dưới, ITviec sẽ giúp bạn hiểu rõ hơn về từng cách nhúng CSS vào website.

CSS nội tuyến

CSS nội tuyến là cách thêm các kiểu CSS trực tiếp vào một phần tử HTML bằng cách sử dụng thuộc tính style. Nó cho phép bạn định nghĩa các kiểu riêng biệt cho từng phần tử cụ thể, thay vì phải áp dụng chung cho toàn bộ trang web hay một nhóm phần tử.

Ví dụ:

<p style="color: #FF0000; font-size: 20px; text-align: center;">Đây là văn bản với CSS nội tuyến.</p>

Ưu điểm của CSS nội tuyến

  • Dễ dàng sử dụng và áp dụng cho từng phần tử cụ thể.
  • Không cần tạo tệp CSS riêng.
  • Hữu ích cho việc chỉnh sửa nhanh chóng.

Nhược điểm của CSS nội tuyến

  • Khó quản lý khi cần áp dụng cho nhiều phần tử.
  • Mã HTML trở nên lộn xộn và khó đọc.
  • Không phù hợp cho các dự án lớn hoặc phức tạp.

CSS nội bộ

CSS nội bộ (hay còn gọi là CSS nhúng) là cách thêm các kiểu CSS vào bên trong trang HTML bằng cách sử dụng thẻ <style>. Nó cho phép bạn định nghĩa các kiểu CSS cho toàn bộ trang web hoặc cho một phần cụ thể của trang mà không cần tạo tệp CSS riêng.

Ví dụ: 

<!DOCTYPE html>
<html>

<head>
<title>CSS nội bộ</title>
<style>

body {

  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #333;

}

h1 {

  text-align: center;
  font-size: 24px;
  margin: 20px 0;

}

p {

  line-height: 1.5;

}

</style>
</head>

<body>

<h1>Tiêu đề</h1>
<p>Đây là nội dung đoạn văn bản.</p>

</body>

</html>

Ưu điểm của CSS nội bộ

  • Dễ sử dụng và triển khai.
  • Giữ cho mã HTML gọn gàng, dễ quản lý.
  • Không cần tạo tệp CSS riêng.

Nhược điểm của CSS nội bộ

  • Khó chỉnh sửa và bảo trì khi code phức tạp.
  • Khó chia sẻ và tái sử dụng cho các trang khác.
  • Không phù hợp cho các dự án lớn hoặc nhiều trang web.

CSS bên ngoài

CSS bên ngoài là cách thêm các kiểu CSS vào một trang web bằng cách lưu trữ chúng trong một tệp riêng (thường có phần mở rộng .css) và liên kết tệp đó với trang HTML bằng thẻ <link>. Nó cho phép bạn định nghĩa các kiểu CSS cho toàn bộ trang web hoặc cho một phần cụ thể của trang mà không cần nhúng trực tiếp vào HTML.

Ví dụ:

CSS

HTML

 
/* style.css */

body {

  font-family: Arial, sans-serif;

  font-size: 16px;

  color: #333;

}

h1 {

  text-align: center;

  font-size: 24px;

  margin: 20px 0;

}

p {

  line-height: 1.5;

}
 
<!DOCTYPE html>

<html>

<head>

<title>CSS bên ngoài</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Tiêu đề</h1>

<p>Đây là nội dung đoạn văn bản.</p>

</body>

</html>

Ưu điểm của CSS bên ngoài

  • Dễ dàng quản lý và chỉnh sửa code.
  • Giữ cho mã HTML gọn gàng, dễ đọc.
  • Tăng khả năng chia sẻ và tái sử dụng code.
  • Giảm bớt kích thước của tập tin HTML, đồng thời những tập tin CSS có thể được tải song song. Và khi chúng được tải lần đầu, sẽ được trình duyệt lưu vào bộ nhớ đệm, từ lần truy cập web thứ 2 trở đi, trình duyệt không cần tải lại chúng nếu chúng không bị thay đổi, giúp cho quá trình tải web nhanh hơn nhiều.

Nhược điểm của CSS bên ngoài

  • Yêu cầu kiến thức về HTML và CSS.
  • Có thể ảnh hưởng đến hiệu suất trang web nếu tệp CSS quá lớn.
  • Cần kiểm tra liên kết giữa tệp CSS và HTML.

Các câu hỏi về CSS là gì thường gặp

Mối quan hệ giữa CSS và HTML là gì?

Là ngôn ngữ đánh dấu siêu văn bản, HTML được sử dụng để tạo các trang web tĩnh. Trong khi đó, CSS là ngôn ngữ biểu định kiểu được sử dụng để xác định kiểu và cách trình bày tổng thể của các tệp và thành phần trang khác nhau bằng ngôn ngữ đánh dấu như HTML.

Responsive CSS là gì?

Responsive CSS là kỹ thuật sử dụng CSS để thiết kế giao diện web có thể tự động thích ứng với kích thước màn hình của thiết bị mà người dùng đang sử dụng. Nhờ đó, website có thể hiển thị đẹp mắt và dễ sử dụng trên mọi thiết bị, từ desktop, laptop, tablet đến smartphone.

Reset CSS là gì?

Reset CSS là một tập hợp các quy tắc CSS được sử dụng để xóa định dạng mặc định của trình duyệt cho các phần tử HTML. Nó giúp loại bỏ sự khác biệt về hiển thị trên các trình duyệt khác nhau và tạo ra một nền tảng thống nhất để bạn bắt đầu định dạng website của mình.

Có những framework CSS nào phổ biến?

Một số framework CSS được sử dụng nhiều như Bootstrap, Foundation, Materialize, Bulma, Ulkit, Semantic UI, Pure CSS, Milligram,… Để chọn framework phù hợp, trước tiên bạn cần xác định nhu cầu của dự án. Sau đó, cân nhắc về độ phức tạp, tính năng, khả năng tùy chỉnh,… Ngoài ra, hãy tham khảo thêm các đánh giá và so sánh các framework CSS.

Đọc thêm: Top 15+ framework back-end, front-end và mobile phổ biến nhất 2024

Mô hình hộp CSS (CSS Box Model) gồm những thành phần nào?

Mô hình hộp CSS xác định bố cục và thiết kế của các phần tử CSS gồm nội dung (như văn bản và hình ảnh, phần đệm (vùng xung quanh nội dung), đường viền (vùng xung quanh phần đệm) và lề (vùng xung quanh đường viền).

Ưu điểm và hạn chế của CSS là gì?

Ưu điểm của CSS:

  • Tách biệt nội dung và giao diện: CSS nội bộ và CSS bên ngoài có thể tách biệt nội dung (HTML) và giao diện (CSS) của website, giúp cho việc quản lý và cập nhật website dễ dàng hơn.
  • Kiểm soát giao diện: CSS cho phép bạn kiểm soát hoàn toàn giao diện của website, bao gồm màu sắc, font chữ, bố cục, v.v.
  • Responsive design: CSS giúp bạn tạo ra website có thể tự động thích ứng với kích thước màn hình của mọi thiết bị.
  • Tăng tốc độ tải trang: CSS bên ngoài giúp giảm kích thước của trang web bằng cách tách biệt nội dung và giao diện.
  • Tăng khả năng truy cập: CSS giúp website dễ sử dụng hơn cho người dùng có khiếm khuyết.

Hạn chế của CSS:

  • Khó học: CSS có thể khó học đối với người mới bắt đầu.
  • Phụ thuộc vào trình duyệt: Các trình duyệt khác nhau có thể hiển thị một số thành phần CSS khác nhau.
  • Khó khăn trong việc debug: Việc tìm kiếm lỗi CSS có thể khó khăn. Tuy nhiên, bạn có thể nhờ tới sự hỗ trợ của Chrome DevTools hoặc Firefox Developer Edition.
  • Khả năng tương tác hạn chế: CSS không thể tạo ra các hiệu ứng tương tác phức tạp.

Tổng kết về CSS là gì

Qua bài viết trên, có thể thấy CSS là một phần quan trọng trong việc xây dựng và thiết kế web. Hy vọng những kiến thức ITviec cung cấp trong bài đã giúp bạn hiểu hơn về CSS là gì cũng như cách sử dụng ngôn ngữ này. 

robby-2

Bạn thấy bài viết hay và hữu ích? Đừng ngại Share với bạn bè và đồng nghiệp nhé.

Và nhanh tay tham khảo việc làm IT “chất” trên ITviec!