Những bước tiếp theo trên con đường trở thành cao thủ CSS

Ngày nay, việc hiểu và có thể vận dụng tốt CSS là điều rất cần thiết đối với một lập trình viên chuyên lập trình web. Tuy nhiên, hầu hết đa số mọi người vẫn còn nắm chưa tốt về lãnh vực này.

Trong bài trước, chúng ta đã đề cập đến những bước cơ bản trong CSS. Hôm nay, bài viết này sẽ tiếp tục đưa ra những ví dụ cơ bản, cách sử dụng FireBug, chỉ cho bạn làm thế nào để thực hiện hiệu ứng rollover, và các mẹo để lập trình CSS.

Kỹ thuật Box Model

Một trong những concept của CSS chính là kỹ thuật box model, xoay quanh các nhân tố HTML trong một page. Bài viết trước đã giới thiệu cho các bạn một ứng dụng tuyệt với là Firebug và tool tương tự được cài đặt ở Chrome. Nếu bạn đã cài đặt và có cơ hội thử, bạn sẽ thấy rõ việc rê chuột qua bất kỳ thành phần nào trong source code HTML trong một box nhỏ được làm nổi bật nằm ở dưới góc trái dưới cùng bao quanh thành phần của page phía trên. Phần đánh dấu đó gọi là box model.



Một trong những lỗi hàng đầu của bất kỳ người mới học CSS nào sẽ mắc phải chính là cảm thấy bối rối giữa MARGIN và PADDING. Hãy xem lại hướng dẫn ở trang w3schools, lưu ý rằng chúng có những thuộc tính rất khác.

Một điều thú vị khác là thuộc tính của đường biên dẫn theo không gian thật và do đó cũng gây ảnh hưởng đến vị trí. MARGIN phân tích không gian xung quanh đường biên của một thành phần HTML. PADDING phân tích không gian bên trong đường biên đó. Chỉ có PADDING mới có thuộc tính để thực hiện việc đó.



Những điều kỳ diệu khác của FireBug

FireBug không chỉ cho phép bạn xem cấu trúc phân cấp bên trong các thuộc tính mà vừa được chọn bằng con trỏ, nó còn cho phép bạn vừa tuỳ chỉnh vừa vô hiệu hoá luật CSS ngay trực tiếp trên page.

Càng hữu dụng hơn là khả năng chỉnh sửa những luật này. Chỉ cần double-click chuột là có thể chỉnh sửa các giá trị hoặc thay đổi các thuộc tính hoặc thậm chí bạn có thể thêm các thuộc tính mới thông qua việc double-click vào khoảng trắng. Nó thật sự là một công cụ mạnh mẽ một cách đáng kinh ngạc để debug những thay đổi nhỏ trong CSS mà không cần phải lưu lại và refresh liên tục, nhưng hãy nhớ rằng chúng vẫn chưa được lưu thật mà chỉ là thay đổi trong một khoảng thời gian ngắn trước khi đưa chúng thật sự vào file CSS.

Một tiện ích khác của những tool này là chỉ ra chính xác vị trí của file CSS và số dòng cụ thể của code. Nó thật sự giúp ích cho những site WordPress khi mà plugin sẽ thường xuyên được import các stylesheet hoặc khi một theme chứa nhiều stylesheet khác nhau.

Hiệu ứng :hover

Một trong những thứ đầu tiên mà mọi người muốn làm với site của mình là thêm hiệu ứng rê chuột. Ngày xưa, hiệu ứng rê chuột ( link hay thành phần nào của HTML sẽ thay đổi khi rê chuột vào) thường được thêm vào bằng cách sử dụng các mã javascript đơn giản. Giờ đây, với CSS bạn có thể sử dụng :hover cho bất kỳ thành phần nào của web. Tuy nhiên nếu bạn trông đợi những thứ như click chuột khi nó thay đổi dưới con trỏ, cách tốt nhất vẫn là sử dụng javascript với một vài action.

Để sử dụng hiệu ứng rê chuột, bạn có thể sử dụng cùng các thành phần như thành phần bình thường và đơn giản thêm vào :hover ở cuối cùng.

a { color: black;}
a:hover {color:red;}

Hover là một trong 3 mã giả trong CSS. Ngoài ra CSS verson 3 còn được tích hợp nhiều hơn, bạn có thể tìm thấy nhiều hơn tại trang w3school.

Một số loại thú vị khác:


:first-letter

Sử dụng khi muốn tạo hiệu ứng "dropcap" cho chữ trong đoạn văn

:first-child

Lệnh này xảy ra với thành phần đầu tiên của một chuỗi liên quan nhau, rất hữu dụng khi bạn muốn tạo ký tự | giữa các link chỉ bằng CSS (menu), nhưng cần tránh việc duplicate tại điểm đầu hay cuối của một list các link.

Những thuộc tính khác? Cách cheat và dùng editor để dự đoán thuộc tính trong CSS.

Dĩ nhiên, bạn không thể nào mong biết được tất cả thuộc tính bạn sẽ làm việc trong CSS. Đó là lý do bài viết đưa ra một vài loại cheat và phần hay nhất có thể được tìm thấy tại pxleyes.com



Một cách hữu dụng khác để chắc rằng bạn dùng đúng tên thuộc tính là sử dụng một editor hoặc một text-editor mà hiểu mã CSS và có thể đưa ra dự đoán loại thuộc tính mà bạn đang gõ. Bài viết sử dụng tool CSS Edit (40$) trên máy Mac. Hãy cho chúng tôi biết nếu bạn có một giới thiệu khác free hay hơn.


Mở rộng

Trên chỉ là những giới thiệu ban đầu về CSS, nhưng hi vọng có thể giúp bạn có cái nhìn tốt hơn về CSS. Bạn nên tham khảo tại CSS Cool Tricks article và đây là một số địa chỉ về CSS:

- Tizag có một hướng dẫn rất rộng giúp bạn hiểu rõ về những thuộc tính cơ bản và học bằng cách bắt tay vào làm trực tiếp. Tizag cũng khá tốt về MySQL và PHP mà bạn có thể nghiên cứu. Một địa chỉ tuyệt vời.

- CSS-Tricks được tạo bởi một nhân vật rất tài năng và chính site này cũng là một site được thiết kế từ CSS rất tốt. Một vài hướng dẫn có thể hơi nâng cao nhưng cũng không khó để nắm bắt.

- W3-Schools có thể là nơi rất tốt để bạn hiểu CSS, nơi mà bạn có cái nhìn cơ bản hơn là hiểu qua những tut có sẵn.

- Smashing Magazine là một site thú vị khác, không chỉ cặn kẽ về CSS, site còn mở rộng khá nhiều để bạn tìm hiểu.

CSS là thứ thú vị khi được so sánh với HTML hay các ngôn ngữ lập trình khác, hi vọng bài viết giúp ích bạn trong việc có một tia sáng về CSS. Các lời góp ý giới thiệu, các link hay câu hỏi về CSS khác đều được chào mời tại đây


Nguồn: makeuseof.com

Tags: Web, CSS, HTML, Box


Our Sponsor

BMW 320i * BMW 520i * BMW 720i