Cẩm nang thiết kế website: Cấu trúc CSS – P2

Sự khác biệt giữa thuộc tính (property) và cong ty thiet ke web bộ chọn (selector) là gì? Làm thế nào để khai báo sự khác biệt cho một block và cách thức khai báo CSS như thế nào? Làm thế nào để biết sự khác nhau giữ pseudo class (lớp) và pseudo element  (phần tử)?

Loạt bài này sẽ mang đến một bài giời thiệu cơ bản về thuật ngữ mà bất cứ nhà thiết kế web nào cũng nên dưa vào vốn kiến thức của mình. Nó chắc chắn sẽ không phải là một bản danh sách đầy đủ nhưng đó sẽ là thiet ke web cong ty các thuật ngữ thường gặp và gây khó khăn cho những nhà thiết kế web khi mới bắt đầu. Ở bài trước bạn đã tìm hiểu về cấu trúc HTML và bây giờ chúng ta sẽ đào sâu hơn nữa về cấu trúc của CSS.

Cẩm nang thiết kế website: Cấu trúc CSS – P2

CSS

Cascading Style Sheets (CSS) cung cấp kiểu dáng và định dạng cho toàn bộ nội dung trên trang HTML. Cũng như bài trước, chúng ta sẽ cắt nghĩa CSS theo từng phần Cascading và Style Sheet.

Chúng ta sẽ bắt đầu từ cuối trước – style sheet. CSS là một ngôn ngữ kê khai kiểu dáng trình bày (style sheet) trái ngược với ngôn ngữ đánh dấu (markup) như HTML hoặc ngôn ngữ dạng kịch bản như JavaScript. Nói một cách dễ hiểu CSS là ngôn ngữ được sử dụng chủ yếu để định dạng văn bản. CSS giống như phần kem trang trí trên chiếc bánh HTML, điều này có nghĩa là nếu không có CSS, thiet ke web chuyen nghiep HTML sẽ giống như một chiếc bánh nướng thô kệch và chán ngắt.

Phần giải nghĩa khó hơn là cascading (tầng lớp) – Cách thức style sheet hoạt động là đưa ra một quy định áp đặt tại một vị trí từ trên xuống dưới theo tầng lớp, ảnh hưởng đến các phần khác nhau của văn bản, cho dù bạn có muốn hay không.

Cascade thật ra có toàn bộ các quy định mà nó luôn tuân thủ trong việc quyết định các kiểu dáng được áp dụng trong văn bản. Cascade chia các quy định theo từng mức ưu tiên khác nhau. Khi cùng lúc có nhiều quy định được áp dụng lên một phần tử, thiet ke web cong ty quy dịnh nào có mức ưu tiên cao nhất sẽ được áp dụng và bỏ qua các quy định khác.

CSS3

CSS3 là phiên bản thứ 3 của CSS. Ở CSS2  đã có khối lượng thông số đồ sộ, CSS3 không những kế thừa mà còn phân chia mọi thứ thành từng đoạn được gọi là module. Một vài ví dụ, các module bao gồm : CSS Color, Media Queries, CSS Animations, Flexible Box Layout …

Mỗi module hoạt động như một đơn vị, dich vu thiet ke web một vài module được phát triển đến trạng thái hoàn chỉnh so với các module còn lại. Ví dụ Selectors Level 3 module đã đạt đến trạng thái “Khuyên dùng” – điều này có nghĩa là nó đã sẳn sàng để được sử dụng, trong khi đó CSS Flexible Box Layout module vẫn dang còn trong trạng thái “dự thảo thử nghiệm” và đang được chỉnh sửa.

Điều thú vị là các module dù đã hay chưa hoàn chỉnh, vẫn được nhiều nhà phát triển web áp dụng, dù dôi khi rất ít trình duyệt hỗ trợ chúng. Vì vậy chúng ta cần nên cẩn trọng khi áp dụng những tính năng mới của CSS3, phải chắc kiểm tra với sự tương thích các trình duyệt.