Class và ID

Cho đến bây giờ bạn đã thấy được CSS có thể thay đổi các đối tượng html như thế nào. Ví dụ khi bạn viết code CSS cho thẻ h1 hoặc p, thì bạn sẽ thấy nó được áp dụng cho tất cả các thẻ trong html. Nhưng không phải lúc nào bạn cũng muốn tất cả các thẻ p trong phần code của bạn đều bị ảnh hưởng. Có thể bạn muốn đoạn này chữ màu xanh, đoạn kia chữ màu đỏ và đậm. Chính vì thế Class và ID được thêm vào thẻ html để bạn có thể hướng tới một đối tượng cụ thể hơn trong code HTML của bạn. Do đó cho bạn thêm một lựa chọn nữa để thiết kế trang web.

Cách sử dụng Class

Dưới đây là đoạn code chỉ cho bạn thấy cách sử dụng class

<h1>Đoạn văn này có cùng class với đoạn văn thứ 3</h1>
<p>Đoạn văn bản này xuất hiện bình thường</p>
<p> Khi chúng ta gắn class cho thẻ html
chúng ta có thể  hướng tới đối tượng dễ dàng hơn cho dù
nó có ở cấp bậc nào đi chăng nữa</p>

Ở đoạn code trên bạn thấy sự xuất hiện của class=”classtext”, đây chính là class mà tôi thêm vào cho thẻ h1 và thẻ p. Bây giờ chúng ta sẽ tô đậm nó

p {font-family: helvetica; sans-serif;}
.classtext {font-weight: bold;}

Lưu ý: đoạn code trên bạn phải chèn vào phần head của tài liệu vì ở đây chúng ta sử dụng phương pháp nhúng CSS vào trong phần đầu của tài liệu HTML.

Kết quả là 2 đoạn văn bản có thẻ p sẽ được hiển thị với font Helvetica (hoặc nếu máy của bạn không có font này, nó sẽ cho hiển thị dòng font San Serif) nhưng đoạn văn có class=”classtext” sẽ được hiển thị vừa font Helvetica và in đậm. Đoạn văn bản nằm trong thẻ h1 thì có font là font mặc định của trình duyệt, nhưng nó cũng được in đậm bởi vì nó bị gắn với class=”classtext”. Thẻ span là cặp thẻ trắng sẽ không gây tác động gì cho đối tượng nằm trong nó vì chúng ta chưa định dạng gì cho nó hết.

Contextual Class Selector

Nếu bây giờ bạn chỉ muốn đoạn văn bản cuối cùng có màu đỏ thì phải làm sao? Bởi vì nếu bạn thêm

.classtext {font-weight:bold; color:red'}

thì đoạn văn bản nằm trong thẻ h1 cũng sẽ có màu đỏ và như thế không phải điều bạn muốn. Do vậy bạn có thể kết hợp thẻ đối tượng và tên class vào để tạo thành Selector.

p {font-family: helvetica; sans-serif;}
.classtext {font-weight: bold;}
p.classtext {color:red;}

như thế thì chỉ có đoạn văn bản thứ 3 là sẽ có màu đỏ hoặc bạn có thể làm cho 4 chữ chúng ta có thể được in nghiêng bằng cách sử dụng kết hợp

p.classtext span {font-style:italic;}

nếu bạn muốn bạn cũng có thể làm cho chữ cùng class nằm trong thẻ h1 in nghiêng bằng cách viết

.classtext span {font-style:italic;}

Tránh lạm dụng Class

Một trong những lỗi phổ biến nhất của những người mới bắt tay vào CSS là sử dụng quá nhiều class. Họ dùng class cho hầu hết các thẻ HTML và khai báo CSS cho từng class một. Làm như vậy thì cũng chẳng khác gì sử dụng thẻ HTML cả, vì nó cũng khó quản lý và thay đổi cũng rất khó khăn.

Cách sử dụng Class đúng cách là cho thẻ div bao quanh toàn bộ phần code mà bạn muốn hướng tới. Nếu bạn muốn hướng tới đối tượng nào nằm trong class đó, bạn luôn có thể kết hợp với phương pháp Contextual Class Selector để hướng tới nó.

Cách sử dụng IDs

ID được viết giống y như khi bạn viết code cho Class, chỉ có khác một điểm là bạn dùng ký hiệu dấu thăng (#) để thay cho dấu chấm . Nếu một đoạn văn bản được viết như sau

 Đây là đoạn văn bản bất kỳ

thì trong phần CSS code của nó sẽ như sau

p#classtext {color:red;}

Sự khác biệt giữa Class và ID

Nói ngắn gọn thì ID là duy nhất và Class được sử dụng nhiều lần. Ví dụ trên trang web các thành phần duy nhất như là Logo, Menu, Footer … những cái này nó chỉ xuất hiện một lần duy nhất trên trang chứ nó không lặp đi lặp lại trên cùng một trang. Còn khi sử dụng Class thì áp dụng cho những thành phần xuất hiện nhiều lần trên cùng một trang.

Ví dụ bạn thấy ở trên izwebz thì mỗi một bài post đều được định dạng giống hệt nhau và nó xuất hiện 10 lần trên một trang vì có 10 bài post trên một trang. Nếu bạn đặt ID cho từng post một thì bạn phải định dạng từng post một trong CSS. Còn nếu bạn đặt cho chúng có cùng class thì bạn chỉ việc định dạng một lần cho tất cả.

Một điểm khác biệt thứ 2 nữa đó là Class không phân biệt IN HOA hay in thường nhưng ID lại phân biệt IN HOA và in thường. Ví dụ id=”containerWraper” khác với id=”containerwraper”

Cuối cùng bạn có thể sử dụng nhiều class cho cùng một thành phần nhưng chỉ có duy nhất một ID. Ví dụ bạn có thể đặt class như dưới đây và các class này hoàn toàn độc lập với nhau.

Cú pháp của CSS

Dưới đây là một ví dụ rất đơn giản của CSS, nó được viết để định dạng thẻ h3 của tài liệu sẽ có màu xanh dương

h3 {color: blue;}

Do vậy nếu bạn có code HTML như sau

<h3>Đoạn văn bản này sẽ có màu xanh trong trình duyệt</h3>

Về cơ bản cú pháp của CSS bao gồm 2 phần chính: SelectorDeclaration. Selector dùng để xác định đối tượng nào sẽ chịu ảnh hưởng và Declaration sẽ quyết định đối tượng đó bị ảnh hưởng như thế nào. Ở ví dụ trên, thẻ h3Selector và phần {color: blue;}Declaration.

Trong Declaration cũng có 2 phần là: PropertyValue. Property quyết định cái gì sẽ chịu ảnh hưởng và Value quyết định nó sẽ bị ảnh hưởng như thế nào. Ở ví dụ trên color là Property nó quyết định sẽ tác động đến màu của h3 và blue là Value, nó quyết định màu sẽ là màu xanh.

Đoạn chữ này sẽ có màu xanh

Bạn có thể sử dụng những cách sau đây khi viết CSS

Nhóm nhiều Declaration vào một dòng

p {color:blue; font-size:12px; line-height:15px;}

và nếu bạn có một đoạn văn bản như sau trong code html

Đoạn văn bản này sẽ chịu ảnh hưởng của tất cả các Declaration ở trên

nó sẽ có màu xanh, cỡ chữ là 12px và độ cao giữa các dòng là 15px.

Lưu ý: Mỗi Declaration được ngăn cách bởi dấu chấm phẩy ; dấu chấm phẩy ở cuối cùng không bắt buộc, nhưng bạn nên cho vào để sau này nếu có thêm Declaration sẽ không bị quên

Nhóm nhiều Selector vào một dòng

Ví dụ nếu bạn muốn chữ từ h1 đến h6 có màu đỏ và được in nghiêng bạn có thể viết

h1 {color:red; font-style:italic;}
h2 {color:red; font-style:italic;}
...
h6 {color:red; font-style:italic;}

Hoặc bạn có thể nhóm tất cả lại để đỡ tốn công hơn

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}

Mỗi Selector được ngăn cách bằng dấu phẩy (,)

Một Selector có thể chịu ảnh hưởng bời nhiều luật

Ở ví dụ trên nếu bạn muốn thẻ h2 vừa được tô đậm và in nghiêng, bạn có thể thêm dòng sau

h1, h2, h3, h4, h5, h6 {color:red; font-style:italic;}
h2 {font-style:bold;}

Hướng đối tượng dựa vào cấp bậc XHTML

Trong bài trước bạn đã học về cấp bậc của XHTML, trong bài này tôi sẽ hướng dẫn bạn cách hướng đối tượng cụ thể nằm sâu hơn trong cấp bậc của HTML. Có 2 cách bạn có thể hướng đối tượng cụ thể là Contextual Selector và Child Selector

Contextual Selector

Nếu bạn viết code CSS như sau

p {color: blue;}

thì tất cả các thẻ <p> trong trang web sẽ có màu xanh. Nhưng nếu bạn chỉ muốn một đoạn nào đó có mầu xanh thôi chứ không phải toàn bộ trang. Lúc đó bạn sẽ dùng Contextual Selector có quy luật như sau:

div p {color: blue;}

Cách viết rất đơn giản, bạn chỉ cần liệt kê những thẻ “dẫn” đến thẻ bạn muốn hướng tới và cách nhau bằng một dấu cách. Thẻ nào gần nhất với dấu { … } là thẻ đó bị ảnh hưởng bởi CSS.

Chúng ta sẽ lấy một ví dụ nơi mà cấp bậc của XHTML phức tạp hơn để minh hoạ cho cách hướng đối tượng này.

<body>
  <h1>Cách hướng đối tượng <em>trong CSS</em> rất quan trọng</h1>
  <p>Ví dụ này sẽ chỉ cho bạn cách sử dụng<em> cấp bậc XHTML </em>
để hướng đối tượng </p>
  <p>Cách viết rất đơn giản, bạn chỉ cần <span>liệt kê <em>”đường dẫn”
</em>đến thẻ</span> cần hướng tới, thẻ nào nằm ở cuối cùng sẽ là đối
tượng bị ảnh hưởng </p>
</body>

Nếu bây giờ bạn bắt đâu viết code CSS

em {color: red;}

Thì tất cả chữ nằm trong thẻ <em> sẽ bị biến thành màu đỏ.

Nhưng nếu bây giờ bạn không muốn có chữ màu đỏ ở thẻ <h1> mà bạn chỉ muốn nó ở các thẻ <p> thôi. Bạn sẽ viết như sau

p em {color:red;}

Ở luật trên bạn đã thêm “đường dẫn” p vào trước em để chỉ ra rằng chỉ có thẻ <em> nào nằm trong <p> mới bị ảnh hưởng và cụ thể là sẽ có màu đỏ.

Ở ví dụ trên bạn thấy thẻ <em> nằm trong thẻ <span> cũng bị ảnh hưởng mặc dù nó không phải là “con đẻ” của thẻ <p> nhưng nó lại là “cháu nội” của thẻ <p> do vậy nó vẫn bị ảnh hưởng.

Bạn có thể gộp nhiều thẻ vào một Selector như sau

p span em {color:red;}

Ở luật này bạn đã chỉ ra rất chi tiết chỉ có thẻ <em> nằm trong thẻ <span> và nằm trong thẻ <p> mới bị ảnh hưởng. Trong cách dùng Contextual Selector này bạn có thể gộp bao nhiêu thẻ tùy thích miễn là thẻ bạn muốn hướng tới nằm ở cuối cùng sát cạnh dấu { … }

Nhưng bây giờ nếu bạn chỉ muốn từ “cấp bậc XHTML” ở đoạn văn thứ 2 có màu đỏ thì bạn sẽ không làm được với Contextual Selector. Bởi vì 2 đoạn văn đều có cấu trúc giống nhau. Cho nên bạn cần phải sử dụng đến Child Selector

Child Selector

Child Selector dùng để hướng tới đối tượng là “con cái” trực tiếp cúa chúng trong cấp bậc XHTML. Khi đó bạn có thể dùng dấu lớn hơn “&gt;” ở giữa hai thẻ

p > em {color:red;}

Với luật này bạn chỉ ra rằng chỉ có thẻ <em> là con trực tiếp của thẻ <p> mới bị ảnh hưởng. Còn chữ “đường dẫn” ở đoạn văn thứ 2 không phải là con trực tiếp do đó nó không bị ảnh hưởng bởi luật này.

Kết luận

Sử dụng thành thạo Contextual Selector sẽ giúp bạn rất nhiều trong quá trình thiết kế giao diện. Có người do không nắm vững khái niệm này đã lạm dụng ID và Class chỉ để hướng tới những đôi tượng cụ thể trong cấp bậc, làm cho code XHTML và CSS của họ trở nên phức tạp và không gọn gàng. Tất nhiên nếu đôi khi bạn không thể hướng tới một đối tượng cụ thể, bạn có thể sử dụng vài ID và Class. Nhưng đừng tuỳ tiện sử dụng chúng chỉ vì bạn không nắm rõ cấp bậc XHTML.

Simple CSS Bài 1: Giới Thiệu

1.1.  CSS là gì?

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ – làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. CSS ( là từ viết tắt của Cascading Style Sheet, có thể tạm dịch là bản kiểu mẫu song song)  là một ngôn ngữ quy định cách  trình bày cho các  tài  liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

1.2.  Tại sao CSS?

Nếu bạn đã  từng học qua HTML thì cũng biết HTML cũng hỗ trợ một  số thuộc  tính định dạng cơ bản cho text, picture, table, … nhưng nó không  thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù  trên một hệ  thống  sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. Sử dụng  các mã định dạng  trực  tiếp  trong HTML  tốn hao nhiều  thời gian thiết  kế  cũng như  dung  lượng  lưu  trữ  trên  đĩa  cứng.  Trong  khi  đó CSS  đưa  ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay  cả  khi  bạn muốn  thay  đổi một  thuộc  tính  trình bày nào đó. Hãy  thử  tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều  thời gian. Nhưng với việc  sử dụng CSS việc đó  là hoàn  toàn đơn giản cũng như là bạn có một trò ma thuật nào đó.

Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,… CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

1.3.  Học CSS cần những gì?

Thật  sự không  có một điều kiện gì được quy định khi học CSS. Nhưng ở một khía cạnh nào đó  thì một sự chuẩn bị cho một cuộc hành  trình dù  là dễ nhất vẫn không thừa vì ít nhất nó sẽ giúp bạn làm tốt hơn.

  • Hành  trang  thứ nhất mà bạn nên có  là một kiến  thức về HTML, nó không thật sự cần thiết nếu bạn chỉ dùng CSS để trình bày cho một  trang HTML có sẵn (như  làm skin cho blog chẳng hạn), nhưng bạn vẫn cần biết ý nghĩa một số thẻ HTML, nó sẽ có ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình bày một trang web của riêng mình thì tùy theo quy mô trang web, bạn cần phải học thêm cả HTML, XHMTL, Javascript và một số ngôn ngữ lập trình web khác.
  • Hành trang  thứ hai chính  là một  trình soạn  thảo văn bản để bạn có  thể viết mã CSS. Ở đây, Pearl khuyên bạn nên sử dụng một trình soạn thảo đơn giản như Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. Nó sẽ giúp bạn chắc là code là của bạn và không có bất kỳ một sự can thiệt nào từ chương trình như khi dùng DreamWeaver, FrontPage, Golive,…
  • Hành trang thứ ba của bạn chính lả một phiên bản mới nhất của trình duyệt mà bạn thường dùng.

Và một điều nữa mà mình muốn đề nghị đó là các bạn hãy dành một ít thời gian để thực hành CSS sau mỗi bài học nó sẽ  thật sự có  ích cho bạn. Thực hành chẳng những  giúp bạn  vận dụng  nhuần  nhuyễn  các bài học mà  còn  có  tác dụng giải thích ngược lại những lý thuyết mà bạn chưa hiểu.

Bây giờ nếu bạn đã  thật sự chuẩn bị chúng  ta hãy chuyển qua chương  tiếp theo để thật sự bước chân vào thế giới CSS.

Bài viết của link2caro – Cộng Đồng WordPress Việt Nam

Tìm hiểu về công nghệ HTML 5 và CSS 3

Cascading Style Sheets, hay còn gọi tắt là CSS, là những file hỗ trợ cho trình duyệt Web trong việc hiển thị một trang HTML. Về cơ bản, các trang HTML như bộ xương – khuôn khổ cơ bản – của một trang web – trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên được hiển thị như thế nào. CSS cho phép bạn kiểm soát phông chữ, màu chữ, kiểu nền…, của một trang HTML.

CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dàng hơn. Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêu đề cũng như các thành phần của một trang Web. Mặc dù đã có một số cách khác nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ phải thay đổi từng thành phần riêng lẻ trên mỗi trang. CSS đã giúp cho việc thay đổi phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên toàn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây. Khác...