Xem bài 1
Sự khác biệt giữa thuộc tính (property) và 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à 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.
CSS
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, 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ử, 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ị, 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.
Phân tích cấu trúc CSS
Một trong những khái niệm cốt lõi mà bạn sẽ cần phải hiểu khi làm việc với CSS là tên từng bộ phận riêng lẻ của cấu trúc CSS. Dành thời gian tìm hiểu để làm chủ ngôn ngữ này sẽ giúp cho bạn sự hiểu biết đáng kể trong các bài hướng dẫn, sách và các nguồn tài liệu khi bạn đang tự học CSS. Ví dụ, khi nghe đến “property” (thuộc tính), bạn phải nghĩ đến ngay được là chủ đề dang thảo luận là gì.
Để bắt đầu, chúng ta cùng tìm hiểu bảng cấu trúc cơ bản của 1 dòng CSS. Như bạn đã thấy, có 3 bộ phận khác biệt: đó là selector (đối tượng được chọn hay bộ chọn), property (thuộc tính) và value (giá trị).
Selector (bộ chọn)
Phần đầu tiên mà chúng ta sẽ tìm hiểu là bộ chọn – selector. Như tên gọi của nó, đây là cách chọn hay xác định một đối tượng nào đó mà bạn muốn áp dụng định dạng, CSS sử dụng các phần đơn giản được tham chiếu đến DOM (xem lại bài 1) và áp dụng định dạng lên đối tượng được xác định lựa chọn. Như hình minh họa, đoạn mã trên bộ chọn nhắm vào các đối tượng (selector) là các đoạn văn bản (paragraph) và thiết lập giá trị (value) có thuộc tính (property) là màu đen cho chúng.
Đôi khi các selector khá đơn giản như ví dụ trên, và có lúc chúng khá phức tạp. Chúng ta sẽ xem xét thêm selector phức tạp ở cuối bài
Property (thuộc tính)
Thuộc tính là diện mạo của đối tượng được chọn dể thay đổi. Mỗi phần tử (element) HTML là một đối tượng phức tạp có thể liên kết với một loạt các thuộc tính. Ví dụ, như hình minh họa, đối tượng được chọn là các phần tử văn bản <p> chứa nhưng thông số mặc định về kích cỡ chữ (font-size), màu sắc (color), khoảng cách giữa các dòng (line-height) và nhiều thứ khác. Những thông số này có thể bị ghi đè bằng CSS để thay thế giá trị mặc định.
Một số đặc tính chỉ ảnh hưởng đến mặt thẩm mỹ không đáng kể, nhưng một số khác có thể tác động lớn đến mặt bố cục trang web. Những thuộc tính thậm chí còn gây ra phiền phức hơn bởi mội trình duyệt thường thiết lập các giá trị mặc định của riêng mình không theo một chuẩn nào cả. Những dự án như Normallize.css có thể giúp bạn tiết kiệm hàng tá giờ làm việc để thống nhất chuẩn thông số và loại bộ các giá trị mặc định của từng trình duyệt tạo nên.
Value (giá trị)
Sau khi bạn nhắm đến đối tượng bạn cần thay đổi (selector) và phần nào của đối tượng bạn muốn thay đổi, nào bây giờ bạn cần xác định thứ gì cần thay đổi! Mục giá trị cho phép bạn xác định thiết lập mới do bạn chỉ định thay thế thông số mặc định do trình duyệt đặt ra. Thí dụ, trình duyệt thường mặc định các dòng văn bản có màu đen, nhưng bạn nghĩ màu xám sẽ tốt hơn, do dó bạn sẽ viết đoạn mã trong đo màu sắc sẽ có giá trị là #4b4b4b
Thuật ngữ “giá trị” có thể gây chút bối rối bởi vì bạn có thể ngay lập tức nghĩ đến các con số. Thực tế nhiều giá trị CSS là những con số. Các giá trị có thể được thể hiện bằng pixel (font-size: 10px), tỷ lệ phần trăm (chiều rộng: 33,33%), ems (line-height: 1em), vv … nhưng chúng cũng có thể được thể hiện bằng cách khác. Hãy xem xét các ví dụ sau:
a {
display: block;
background-image: url('picta.jpg');
color: #fff;
text-decoration: none;
}
Như các bạn đã thấy, đoạn CSS trên có nhiều giá trị, nhưng chẳng có con số nào. Vậy bạn nên nhớ rằng “value” chỉ là một thuật ngữ khá chung chung và có thể có nhiều kiểu giá trị khác nhau.
Các loại Selectors
Chắc khi đọc đến dây, bạn đã có những khái niệm thế nào là selector, thế nhưng bạn có biết có rất nhiều loại selector khác nhau? Đây là một trong số đó bạn nên biết
Các loại selector
Đây là các loại selector cơ bản nhất. Theo selectors level 3 module, “một loại selector là đại diện một thể loại của phần tử HTML trong cây văn bản (document tree)”. Để dễ hiểu hơn, bạn hãy xem ví dụ bên dưới, đây là các loại selector nhắm đến đối tượng là các phần tử HTML đơn giản
h1 {...}
p {...}
Class Selector và ID Selector
Selector phổ biến thứ hai mà bạn thường gặp đó là Class Selectors (bộ chọn theo lớp) và ID Selectors (bô chọn theo ID). Như trong bài 1 bạn đã học, sự khác biệt lớn nhất giữa 2 loại này đó chính là Class Selector có thể được tái sử dụng nhiều lần còn ID Selector chỉ được sử dụng 1 lần duy nhất trên cùng 1 trang web.
Bạn có thể áp dụng class selector lên các đối tượng trên trang HTML với cách viết bắt đầu bằng 1 dấu chấm (.), Tương tự bạn có áp dụng ID selector lên một đối tượng bằng cách viết mã bắt đầu bằng biểu tượng # (hash). Xem ví dụ.
.someClass {...} /* class selector */
#someID {...} /* ID selector */
Attribute Selectors
Class và ID thật chất là thuộc tính của HTML, chúng phổ biến đến mức trở thành các bộ chọn selector đặc biệt, nhưng còn có nhiều thuộc tính khác ví dụ như
Design Shack Apple
Ở đây chúng ta có một vài phần tử <a> chứa các thuộc tính href. Bạn thừ hiểu rằng chúng ta có thể sử dụng CSS để nhắm mục tiêu là tất cả các thẻ <a> cùng một lúc, nhưng bạn liệu có biết chúng ta còn có thể nhắm mục tiêu cụ thể dựa vào giá trị href cụ thể?
a[href='http://designshack.net/'] {color: #fff;}
Như ví dụ trên, chúng ta sử dụng một bộ chọn thuộc tính (attribute selector ) để chỉ nhắm mục tiêu href với giá trị có ‘http://designshack.net/’ và thay đổi màu sắc của nó thành màu trắng. Đoạn mã này hoàn toàn bỏ qua các thẻ <a> khác trong ví dụ trên. Attribute selectors sinh ra một số các bộ chọn CSS phức tạp nhất mà bạn từng thấy.
li a[class*='stooge'][title^='the'] {color: red;}
May mắn thay, chúng tôi có một bài viết tuyệt vời hướng dẫn tất cả các bạn về bộ chọn thuộc tính kèm giải thích chi tiết tại đây
Descendant, Children and Sibling Selectors
Nếu bạn đã học về DOM ở bài một bạn sẽ hiểu Descendant, Children và Sibling Selectors chọn các đối tượng theo mối cấp độ quan hệ của chúng trên cây phả hệ (family tree). Ví dụ cách viết đoạn mã css tổ hợp thừa hưởng ( descendant combinator ) dưới đây nhắm đến các đối tượng ở cấp độ hậu duệ (thừa hưởng). Ví dụ:
header p {...}
Đoạn mã trên áp dụng cho các đối tượng thừa hưởng từ phần tử header. Bạn nên chú ý các đối tượng thừa hưởng (descentdant) không giống với các đối tượng con (children). Cũng giống gia đình bạn, tất cả các phần tử con của header chắc chắn được gọi là các đối tượng hậu duệ nhưng không hẵn tất cả các hậu duệ là đối tượng con của header. Đoạn mã trên nhắm đến các đối tượng là các đoạn văn bản nằm trong thẻ header
Giả sử chúng ta có 1 đoạn mã HTML như sau:
Child and descendant of header
Child and descendant of header
Descendant of header, not a child of header.
Nào bây giờ bạn muốn chọn một số đối tượng con nhưng không muốn chọn tất cả các đối tượng hậu duệ của header. Để thực hiện điều này bạn phải viết tổ hợp con (children combinator). Ở trong ví dụ trên, chỉ có 2 đối tượng con là 2 đoạn văn bản p đầu tiên được chọn.
header > p
Tiếp theo, tổ hợp anh em (sibling combinator)
/* Tổ hợp anh em liền kề - Adjacent sibling combinator */
h1 + p {...}
/* Tổ hợp anh em tổng thể - General sibling combinator */
h1 ~ p {...}
Selector đầu tiên ở ví dụ trên sẽ nhắm đến bất kỳ đoạn văn bản nào nằm liền kề thẻ h1 (quan hệ anh em liền kề – adjacent sibling)
Trong khi dó selector thứ hai nhắm đến tất cả các đoạn văn bản p trong thẻ H1 bất chấp nó có nằm kề hay không.
Pseudo Classes và Pseudo Elements
Đây là một loại selector đặc biệt. Để dễ hình dung bạn có thể xem hình minh họa bên dưới
Ở đây bạn có thể nhận ra một vài pseudo classes quen thuộc như :hover (selector cho đối tượng khi được con trỏ đặt lên) và một số pseudo elements lạ lẫm như :before và :before. Chúng là gì?
Rất đơn giản, bạn chỉ cần nhờ rằng pseudo classes áp dụng cho tất cả các phần tử hoặc các trạng thái của phần tử trong khi đó pseudo elements chỉ nhắm đến áp dụng cho một phần của phần tử. Ví dụ, pseudo classes :hover sẽ ảnh hưởng toàn bộ các thẻ a, p, div … nhưng dối với pseudo elements như :first-line sẽ không ảnh hưởng toàn bộ mà chỉ áp dụng cho đoạn dòng dầu tiên đoạn văn bản.
Bài viết này chưa toàn diện toàn diện nhưng nó cũng đã tóm lược cấu trúc cơ bản của CSS. Nếu bạn gặp khó khăn trong một số thuật ngữ khác của CSS, bạn có thể tìm hiểu thêm ở một bài viết khác chi tiết hơn bằng công cụ tìm kiếm trên trang.
Web Design Vocabulary Refresh by Joshua Johnson – designshack.net
