CSS là gì? Hướng dẫn cách viết mã CSS cho người mới bắt đầu

CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ định dạng trang web, được sử dụng để kiểm soát cách hiển thị của các phần tử HTML trên trang web. CSS được sử dụng để tạo ra giao diện trang web, bao gồm các thuộc tính như màu sắc, phông chữ, kích thước và khoảng cách giữa các phần tử trên trang web.

Với CSS, người thiết kế web có thể tách biệt giao diện và nội dung, giúp cho việc bảo trì và sửa đổi trang web trở nên dễ dàng hơn. CSS còn giúp tăng tính linh hoạt của trang web, cho phép thay đổi giao diện trang web một cách dễ dàng và nhanh chóng.

Cú pháp của CSS gồm các quy tắc CSS được đặt trong cặp dấu ngoặc nhọn và bao gồm một hoặc nhiều thuộc tính và giá trị. Các quy tắc CSS có thể được sử dụng trong tệp riêng biệt hoặc được nhúng trực tiếp vào trang HTML.

Các thuộc tính CSS cơ bản bao gồm màu sắc và nền, phông chữ và kiểu chữ, kích thước và khoảng cách, định vị và bố trí. CSS cũng cung cấp các tính năng tạo hiệu ứng, chẳng hạn như chuyển động và ánh sáng đổ bóng, giúp tạo ra giao diện trang web đẹp mắt và chuyên nghiệp.

Trong thời gian gần đây, CSS đã phát triển nhiều, cung cấp các tính năng mới và cải thiện hiệu suất. Ví dụ như CSS Grid, CSS Flexbox, CSS Animations, CSS Variables, CSS Modules và nhiều công cụ khác giúp người thiết kế web có thể tạo ra trang web đẹp mắt, dễ dàng bảo trì và hiệu quả.

Có thể nói HTML và CSS có mối quan hệ mật thiết với nhau. Nếu HTML là nền tảng của một website thì CSS là toàn bộ tính thẩm mỹ của trang web đó. Hay có thể nói dễ hiểu HTML là khung xương còn CSS là da thịt của trang web.

XEM THÊM:

• Review các nơi đào tạo BA uy tín
• Chuyên gia BA là ai? Họ làm gì trong dự án

Tìm hiểu về bố cục và cấu trúc của đoạn CSS

Sau khi đã tìm hiểu CSS là gì. Chúng ta hãy cùng xem xét về bố cục và cấu trúc của một đoạn CSS như thế nào.

Bố cục của đoạn CSS 

Để tạo bố cục cho một đoạn CSS, ta sử dụng hình hộp để quản lý vị trí và khoảng trống của các phần tử trên trang web. Mỗi hình hộp bao gồm các thuộc tính chính như sau:

• Padding: Là khoảng cách giữa nội dung và viền của phần tử (ví dụ: khoảng cách giữa đoạn văn bản và khung bao quanh nó).
• Border: Là đường viền bao quanh phần tử, nằm bên ngoài phần đệm.
• Margin: Là khoảng cách giữa phần tử và các phần tử khác xung quanh nó, bao gồm cả khoảng cách giữa phần tử và cạnh của trình duyệt.

Các thuộc tính này giúp ta điều chỉnh vị trí và khoảng trống của các phần tử trên trang web một cách chính xác. Điều này đảm bảo rằng bố cục của trang web được xây dựng một cách đồng nhất và dễ dàng để đọc và tương tác.

Xem thêm: Ứng dụng mobile bằng ngôn ngữ flutter dễ dàng, tiện lợi

Cấu trúc của đoạn CSS

Một đoạn CSS (CSS block) bao gồm một tập hợp các quy tắc CSS (CSS rules) được đặt trong cặp dấu ngoặc nhọn {}. Mỗi quy tắc CSS bao gồm hai phần chính: selector và declaration block.

Một đoạn CSS (Cascading Style Sheets) thường có cấu trúc như sau:

Trong đó:

• selector là phần tên hoặc định danh của phần tử HTML mà bạn muốn áp dụng kiểu CSS.
• property là thuộc tính của phần tử HTML mà bạn muốn thay đổi kiểu.
• value là giá trị của thuộc tính mà bạn muốn thiết lập cho phần tử HTML.

Selector: Selector (bộ chọn) là phần quy định phần tử HTML nào sẽ được áp dụng các thuộc tính CSS. Selector có thể là tên thẻ HTML, class, ID hoặc các thuộc tính khác của phần tử HTML. Ví dụ:

• Tên thẻ HTML: p {...}
• Class: .container {...}
• ID: #header {...}
• Các thuộc tính khác: [type="text"] {...}

Declaration block: Declaration block (khối khai báo) chứa các thuộc tính CSS và giá trị được áp dụng cho các phần tử được chọn bởi selector. Mỗi thuộc tính được bao gồm bởi một cặp key-value, với giá trị được đặt trong dấu ngoặc kép. Ví dụ:

selector {
property1: value1;
property2: value2;
property3: value3;
}

Trong đó:

• property1, property2, property3 là tên của các thuộc tính CSS như color (màu chữ), font-size (kích thước chữ), background-color (màu nền), margin (khoảng cách lề)...
• value1, value2, value3 là giá trị tương ứng của các thuộc tính CSS. Ví dụ: #FFF (mã màu trắng), 16px (kích thước chữ là 16 pixel), #333 (mã màu đen nhạt), 10px (khoảng cách lề 10 pixel)...

Một đoạn CSS có thể chứa nhiều quy tắc CSS và mỗi quy tắc CSS có thể chứa nhiều thuộc tính và giá trị. Tất cả các quy tắc và thuộc tính trong đoạn CSS đó sẽ được áp dụng cho các phần tử HTML tương ứng được chọn bởi selector.

Ví dụ 1: nếu bạn muốn thiết lập màu chữ cho các phần tử h1 trong tài liệu HTML của mình thành màu đỏ, bạn có thể sử dụng đoạn CSS sau:

Khi trình duyệt tải tài liệu HTML và CSS của bạn, nó sẽ áp dụng đoạn CSS này vào tất cả các phần tử h1, và thay đổi màu chữ của chúng thành màu đỏ.

Ví dụ 2:
p {
color: #333;
font-size: 16px;
margin: 10px;
}
.container {
background-color: #FFF;
border: 1px solid #333;
padding: 10px;
}

Trong đoạn CSS trên, các thuộc tính color, font-size và margin sẽ được áp dụng cho tất cả các thẻ

trên trang web, trong khi các thuộc tính background-color, border và padding sẽ được áp dụng cho tất cả các phần tử có class là "container".

Ưu điểm khi sử dụng ngôn ngữ CSS là gì?

CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để định dạng và trang trí các tài liệu HTML và XML. Dưới đây là một số ưu điểm của ngôn ngữ CSS:

• Tách biệt giữa kiểu và nội dung: CSS cho phép tách biệt giữa kiểu và nội dung của tài liệu, cho phép các nhà phát triển thiết kế các trang web với giao diện và cấu trúc riêng biệt. Điều này giúp cho việc thay đổi kiểu dáng của trang web dễ dàng hơn, mà không cần phải thay đổi nội dung.
• Giảm thiểu thời gian tải trang: Sử dụng CSS giúp giảm thiểu thời gian tải trang, do các thuộc tính của CSS có thể được lưu trữ trong một tệp riêng biệt và được sử dụng cho nhiều trang web khác nhau. Điều này giúp giảm băng thông và tăng tốc độ trang web.
• Giúp tối ưu hóa SEO: Sử dụng CSS giúp tối ưu hóa SEO (tối ưu hóa công cụ tìm kiếm), do các phần tử HTML có thể được định dạng bằng cách sử dụng các lớp và ID CSS. Điều này giúp các công cụ tìm kiếm hiểu được nội dung của trang web và xếp hạng nó cao hơn trong kết quả tìm kiếm.
• Linh hoạt và dễ dàng bảo trì: Sử dụng CSS giúp cho các trang web linh hoạt và dễ dàng bảo trì. Khi thay đổi kiểu của một trang web, chỉ cần thay đổi các tệp CSS, mà không cần phải thay đổi mã HTML của trang.
• Tính đồng nhất: CSS cho phép tạo kiểu đồng nhất cho tất cả các trang web trên cùng một trang web hoặc các trang web khác nhau. Điều này giúp giữ cho trang web có giao diện đồng nhất và dễ dàng nhận diện.
• Cải thiện trải nghiệm của người dùng: CSS làm cho trang web dễ nhìn hơn và nó còn giúp các website có định dạng thân thiện với người dùng. Khi các chuyên gia CNTT sắp xếp nút và văn bản ở vị trí hợp lý, trải nghiệm người dùng sẽ được cải thiện.

Tóm lại, CSS là một công cụ quan trọng để thiết kế và tạo kiểu cho các trang web. Ngoài ra, CSS còn có thể được sử dụng để tạo kiểu cho các tài liệu khác như tài liệu PDF, tài liệu văn bản, hoặc các ứng dụng khác. Điều này giúp cho việc tạo kiểu được đồng nhất trên nhiều nền tảng và cho nhiều loại tài liệu.

Cuối cùng, CSS là một công nghệ mở và miễn phí, điều này có nghĩa là bất kỳ ai cũng có thể học và sử dụng nó để tạo kiểu cho trang web của mình. Nó cũng có nhiều tài liệu và hỗ trợ trực tuyến, giúp cho người mới bắt đầu và những người có kinh nghiệm tận dụng tối đa các tính năng của CSS.

Mối quan hệ của HTML và CSS là gì?

CSS và HTML là hai ngôn ngữ được sử dụng phổ biến trong thiết kế và phát triển trang web. Như đã nói ở trên, HTML là khung xương còn CSS là da thịt của trang web. Tuy nhiên, chúng có nhiệm vụ và mối quan hệ khác nhau trong quá trình tạo nên một trang web hoàn chỉnh.

HTML (Hypertext Markup Language) là ngôn ngữ định dạng văn bản cơ bản được sử dụng để tạo các thành phần trên trang web như tiêu đề, đoạn văn bản, hình ảnh và liên kết. Nó xác định các thành phần này bằng cách sử dụng các thẻ và thuộc tính.

Trong khi đó, CSS (Cascading Style Sheets) được sử dụng để tạo kiểu cho các thành phần HTML trên trang web. Nó cho phép định dạng các thành phần này với các thuộc tính như màu sắc, kích thước, phông chữ và định dạng bố cục. CSS có thể được áp dụng trực tiếp cho một thành phần hoặc cho một nhóm các thành phần trên trang web.

Mối quan hệ giữa CSS và HTML là rất chặt chẽ. Vì HTML xác định các thành phần trên trang web, việc sử dụng CSS để tạo kiểu cho các thành phần này giúp tách riêng phần nội dung (content) và phần giao diện (presentation) trên trang web. Điều này cho phép thiết kế và phát triển trang web trở nên linh hoạt hơn, vì nó cho phép thay đổi giao diện của trang web mà không làm ảnh hưởng đến nội dung. Nó cũng cho phép tạo kiểu đáp ứng, giúp trang web hiển thị tốt trên các thiết bị khác nhau.

Vì vậy, CSS và HTML là hai công cụ rất quan trọng trong quá trình thiết kế và phát triển trang web, và chúng hoạt động cùng nhau để tạo ra một trang web đẹp và chuyên nghiệp.

Lợi ích của việc sử dụng CSS trong thiết kế website

Giải quyết được vấn đề bất cập 

Trước khi CSS ra đời, các thông tin về phông chữ, màu sắc, kiểu nền, sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mỗi trang web. Điều này khiến chúng ta tốn rất nhiều thời gian và công sức. 

Ví dụ, nếu bạn phát triển một trang web lớn và muốn thêm phông chữ và màu sắc cho mỗi trang, quá trình này sẽ rất dài dòng và tốn kém. Tuy nhiên, CSS đã được phát triển để giải quyết vấn đề này. Và đó cũng là một khuyến cáo của W3C (W3C - World Wide Web Consortium là một tổ chức quốc tế không vị lợi nhằm phát triển các tiêu chuẩn và các công nghệ liên quan đến World Wide Web (WWW).

Việc sử dụng CSS giúp cho source code của trang web được tổ chức gọn gàng hơn và dễ quản lý hơn. Nội dung trang web được tách biệt trong việc định dạng hiển thị, giúp quá trình cập nhật nội dung dễ dàng hơn và tránh làm rối mã HTML.

Tiết kiệm công sức và thời gian

CSS cũng giúp tiết kiệm thời gian vì kiểu CSS được lưu trong các tệp CSS bên ngoài, do đó có thể thay đổi toàn bộ trang web chỉ bằng cách thay đổi một tệp. Bằng cách sử dụng CSS, bạn không cần phải lặp lại các mô tả cho từng phần tử, giúp tối ưu hóa quá trình làm việc và giảm thiểu lỗi không cần thiết.

Cung cấp nhiều thuộc tính hơn

CSS cung cấp nhiều thuộc tính hơn HTML để định nghĩa giao diện của trang web, giúp người dùng có thể áp dụng nhiều kiểu dáng khác nhau cho cùng một trang web HTML, tăng tính đa dạng và tùy chỉnh của trang web.

Quy trình hoạt động của ngôn ngữ CSS

• Bước 1: Trình duyệt tải HTML

Trình duyệt tải và phân tích cú pháp của tài liệu HTML, tạo ra cây DOM (Document Object Model) để đại diện cho tài liệu trong bộ nhớ của máy tính.

• Bước 2: Tải tài nguyên

Trình duyệt tìm và tải các tài nguyên được liên kết với tài liệu HTML, chẳng hạn như hình ảnh, video, và các tài liệu CSS liên kết khác. Tiếp đó, JavaScript sẽ được xử lý trong quá trình này.

• Bước 3: Phân tích cú pháp CSS

Trình duyệt phân tích cú pháp CSS đã tải xuống và tạo ra một cây kết xuất. Nó sẽ tìm và nhóm các quy tắc CSS theo loại bộ chọn, ví dụ như phần tử, lớp, ID, v.v.

• Bước 4: Áp dụng quy tắc CSS

Trình duyệt áp dụng các quy tắc CSS cho các phần tử tương ứng trên cây DOM dựa trên các bộ chọn đã được xác định. Nếu có nhiều quy tắc áp dụng cho cùng một phần tử, trình duyệt sẽ quyết định quy tắc nào có ưu tiên hơn.

• Bước 5: Xác định độ ưu tiên

Để xác định độ ưu tiên của các quy tắc CSS, trình duyệt sử dụng một bộ quy tắc ưu tiên được xác định trong các tiêu chuẩn của CSS. Ví dụ: quy tắc nào được khai báo cuối cùng sẽ được ưu tiên hơn quy tắc khác.

• Bước 6: Đính kèm kiểu

Trình duyệt đính kèm kiểu cho các phần tử tương ứng trên cây DOM, thay đổi các thuộc tính như màu sắc, kích thước, v.v.

• Bước 7: Kết xuất trang web

Cuối cùng, trình duyệt sẽ kết xuất trang web, tức là hiển thị nó trên màn hình. Trình duyệt sẽ xác định vị trí và kích thước của các phần tử trên trang dựa trên các quy tắc CSS đã được áp dụng. Giai đoạn này chính là painting.