Tìm hiểu các phần tử và thuộc tính cơ bản trong CSS áp dụng trong mã nguồn Blogger

CSS (Cascading Style Sheets): được hiểu là các tập tin định kiểu theo tầng dùng để mưu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML, XHML hoặc XML, SVG, XUL,... (nguồn: Wikipedia)

Trên thực tế ngôn ngữ phổ biến nhất là HTML bản thân nó vẫn có thể thể hiện được phần nào khả năng của CSS nhưng CSS vẫn mang trong mình sức mạnh nổi trội nhất trong việc thể hiện những phong cách đồ họa cho một trang web, có thể kể ra một số ưu điểm nổi bật sau đây:

- Với CSS, một tài liệu HTML hoặc XML được phân chia rõ ràng phần định dạng hiển thị và phần nội dung, nhờ đó mã nguồn của trang web trở nên gọn gàng và dễ dàng nâng cấp giao diện khi cần thiết mà không làm ảnh hưởng đến nội dung hoặc ngược lại.

- CSS giúp bạn tiết kiệm thời gian khi bạn đỡ phải lặp lại các đoạn code giống nhau đối với các trang web giống nhau.

- CSS không yêu cầu cao trong cú pháp thể hiện nên bạn sẽ dễ dàng tiếp cận và sử dụng ngôn ngữ này, đồng thời trong quá trình sử dụng sẽ ít bị lỗi hơn.

Bản chất của CSS là định kiểu cho các nội dung viết bằng HTML do đó có thể nói HTML là nội dung còn CSS là hình thức và chính vì thế CSS và HTML luôn đi liền và không thể tách rời nhau. Có thể có nhiều cách thể hiện ngôn ngữ CSS khác nhau nhưng cơ bản vẫn có ba cách sau đây:

- Nội dung CSS được đóng gói thành một tập tin dạng *.css và được lưu ở các host Script, CSS kiểu này được sử dụng theo phương pháp nhúng Script.

- Nội dung CSS được thể hiện ngay trên tài liệu HTML hoặc XML và thường trình bày ở phần đầu trang để định dạng cho cả trang web theo kiểu:

<head>

.... CSS...

</head>

- Nội dung CSS được nhúng ngay trên các thẻ của HTML bằng cách sử dụng thuộc tính Style.

Cú pháp thường dùng của CSS rất cơ bản:

css_selector {thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2; ... thuộc tính n: giá trị n;}

Trong đó:

css_selector: là vùng chọn hay còn gọi là phần tử của CSS, các thuộc tính thường mang những giá trị có thể thay đổi để cho ra các diện mạo khác nhau cho cách hiển thị của trang web.

Dựa trên cú pháp ta thấy có hai thành phần cơ bản trong CSS đó là các phần tử và các thuộc tính, bài này chúng ta cùng tìm hiểu các thành phần cơ bản này.

1. Các phần tử cơ bản trong CSS

Nếu bạn mở một tài liệu XML, cụ thể là mẫu Template của Blogger bạn sẽ thấy một số phần tử rất quen thuộc của CSS, trên tài liệu XML của Blogger thì nội dung CSS chủ yếu được chứa trong cặp thẻ: <b:skin> .. css... ]]></b:skin>. chúng ta cùng tìm hiểu một số phần tử cơ bản sau đây:

- body: đây là phần tử của CSS có chức năng bao quát toàn bộ trang web bao gồm hình nền, màu chữ, bố cục chung.

- a:link: biểu thị màu cho các các liên kết hay URL ở trạng thái hiển thị cơ bản, mặc định là màu xanh dương.

- a:visited: biểu thị màu cho các liên kết đã truy cập, mặc định là màu tím.

- a:hover: biểu thị màu cho các liên kết khi ta di chuyển con trỏ chuột qua liên kết đó.

- header: định dạng cấu hình cho phần đầu trang bao gồm nền đầu trang, tiêu đề trang, cỡ chữ, màu chữ cho tiêu đề trang.

- wrapper: đây là phần tử không đứng độc lập mà đi theo sau một phần tử để biểu thị ý nghĩa, ví dụ: header-wrapper (khung vực đầu trang); main-wrapper (khu vực nội dung trang); sidebar-wrapper (khu vực thanh bên),.. phần tử kết hợp này có chức năng tùy chỉnh các thành phần trong vùng phần tử đó chọn.

- h1, h2, h3,...: là các phần tử có chức năng phân cấp cho tiêu đề, trong đó mỗi tiêu đề có thể được phân cấp ở 6 mức tức là từ h1 đến h6. mức độ phân cấp của h1 là cao nhất.

- post: biểu thị các thuộc tính của bài đăng bao gồm cỡ chữ, màu chữ, kiểu chữ, ..

- post h1, h2, h3,..: biểu thị các thuộc tính cho tiêu đề bài đăng.

- post blockquote: biểu thị các thuộc tính liên quan đến nội dung văn bản trích dẫn.

- sidebar: thanh bên, sidebar h1, h2,.. là tiêu đề thanh bên (tiện ích).

- Footer: chân trang

- outer-wrapper: biểu thị thuộc tính cho nền ngoài trang.

- search: định kiểu cho ô tìm kiếm.

- menu hoặc menuku: biểu thị các thuộc tính cho menu chính

- menu li: biểu thị thuộc tính cho các trang trên menu

- menu li ul: biểu thị thuộc tính cho các menu con.

- a.readmore: biểu thị thuộc tính cho nút "Đọc thêm"

- post img: biểu thị thuộc tính cho hình ảnh được chèn vào trong bài đăng.

2. Các thuộc tính cơ bản trong CSS

Các thuộc tính là những thành phần chứa biến, chúng có thể thay đổi để mang lại những diện mạo khác nhau cho trang web. Một số thuộc tính cơ bản sau đây:

- Background: Nền, bao gồm màu nền hoặc hình nền. Thuộc tính này quy định nền cho các phần tử chứa nó.

- color: quy định màu cho chữ của phần tử chứa nó.

- font: quy định kiểu chữ, một số thuộc tính kép như: font-size: cỡ chữ; font-family: liệt kê một nhóm các font theo mức độ ưu tiên sử dụng.

- size: quy định cỡ cho đối tượng chứa trong phần tử chứa nó.

- float: quy định vị trí tương đối cho đối tượng như căn trái, phải, giữa,..

- width: quy định chiều rộng cho đối tượng thường đo bằng px (pixel).

- height: quy định chiều cao cho đối tượng.

- border: quy định đường viền cho đối tượng.

- shadow: quy định về độ đổ bóng cho đối tượng.

- solid: quy định màu cho đường viền hoặc màu góc xiêm.

- font-weight: quy định độ thanh, đậm của font chữ.

- repeat: quy định về tính lặp lại cho đối tượng như hình nền, cách biểu thị kiểu repeat-x (lặp lại theo phương ngang); repeat-y (lặp lại theo phương dọc) hoặc no-repeat (không lặp lại).

Đó là một số thuộc tính và phần tử cơ bản nhất trong CSS mà bất cứ ai muốn trở thành Webdesigner đều phải biết để tự phát triển và nâng cấp cho website của mình. Hiểu được ý nghĩa cơ bản của các phần tử và thuộc tính trong CSS sẽ giúp bạn có thể tự tay chỉnh sửa giao diện web theo ý muốn và hơn thế nữa là bạn có thể tạo ra những mẫu template để chia sẻ cho cộng đồng blogger.

Trên thực tế thì các phần tử cũng như thuộc tính của CSS là rất đa dạng và nhiều cách thể hiện khác nhau, việc hiểu hết chúng là không hề đơn giản đó là chưa kể tới việc bạn tự tay viết ra những đoạn code CSS hoàn chỉnh còn phức tạp hơn gấp nhiều lần so với việc bạn hiểu chúng. Tuy nhiên, xét ở cấp độ đọc và chỉnh sửa các tài liệu CSS có sẵn thì việc hiểu ý nghĩa của các thành phần cơ bản kể trên cũng đã là thành công bước đầu rồi.

Bạn nên tìm đọc trên Google:
- Tự học CSS cơ bản
- các thuộc tính trong CSS
- CSS và HTML,...

CHÚC BẠN THÀNH CÔNG