Simple CSS Bài 2: Một Số Quy Ước

Dựa trên bài dịch của Pearl tại phpcodevn.com

2.1.  Cú pháp CSS:

Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau.

Ví dụ:

Để định màu nền cho một trang web là xanh nhạt chúng ta dùng đoạn mã sau:

HTML	CSS
	body { background-color:#00BFF3; }

Nhìn qua ví dụ trên ít nhiều chúng ta cũng thấy được mối tương đồng giữa các thuộc tính trong HTML và CSS cho nên nếu bạn đã học qua HTML thì cũng sẽ rất  dễ  dàng  tiếp  thu CSS. Bây  giờ  hãy  nhìn  vào  ví  dụ và các bạn xem nó có giống với cấu trúc sau không nhé.

Cú pháp cơ bản của CSS:

view source

print?

1	Selector { property:value; }

Trong đó:

• Selector: Chọn đối tượng

Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính trình bày. Nó là các thẻ HTML, class hay id (chúng ta sẽ học về 2 thành phần này ở bài học sau).

Ví dụ: body, h2, p, img, #title, #content, .username,…

Trong CSS ngoài viết tên selector theo tên tag, class, id. Chúng ta còn có thể viết  tên  selector  theo phân  cấp như để  chỉ  các  ảnh ở  trong #entry,  chúng  ta viết selector là #entry img, như vậy thì các thuộc tính chỉ định sẽ chỉ áp dụng riêng cho các ảnh nằm trong #entry.

Khi viết tên cho class, đôi khi sẽ có nhiều thành phần có cùng class đó, ví dụ như thẻ img và thẻ a cùng có class tên vistors nhưng đây lại là hai đối tượng khác nhau, 1 cái là ảnh của người thăm, 1 cái là liên kết tới trang người thăm. Nên nếu khi viết CSS ta ghi là .visitors { width:50 } thì sẽ ảnh hưởng tới cả hai thành phần. Và  trong  trường hợp này, nếu bạn có ý dùng CSS đó chỉ  riêng phần ảnh  thì chỉ nên ghi là img .visitors thôi.

Một  lối  viết  tên  selector  nữa  đó  là  dựa  trên  tên  các  thuộc  tính  có  trong HTML.  Ví  dụ  trong  HTML  ta  có  đoạn  mã  như  vầy:  . Để  áp  dụng  thuộc  tính  CSS  cho  riêng  ô  tìm kiếm này chúng ta sẽ dùng selector input[name="Search"].

Ngoài việc viết  tên selector cụ thể, chúng  ta cũng có  thể dùng một selector đại diện như * { color:red } sẽ tác động đến tất cả các thành phần có trên trang web làm cho chúng có text màu đỏ.

• Property: Thuộc tính

Chính là các  thuộc tính quy định cách trình bày. Ví dụ: background-color, font-family, color, padding, margin,…
Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì chúng ta phải dùng một dấu ; (chấm phẩy) để phân cách các thuộc tính. Tất cả các thuộc tính trong một selector sẽ được đặt trong một cặp ngoặc nhọn sau selector.

view source

print?

1	body { background:#FFF; color:#FF0000; font-size:14pt }

Để dễ đọc hơn, bạn nên viết mỗi thuộc tính CSS ở một dòng. Tuy nhiên, nó sẽ làm tăng dung lượng tập tin CSS của bạn. Do đó khi thiết kế các bạn cứ viết mỗi thuộc tính một dòng, tới khi đem CSS ra sử dụng bạn có thể sử dụng các công cụ để xóa các khoảng trống giúp cho tập tin CSS nhỏ hơn một chút, việc này cũng giúp chút ít việc tăng tốc độ tải trang web.

view source

print?

1

body {

2	background:#FFF;

3	color:#FF0000;

4	font-size:14pt;

5

}

Đối  với một  trang web  có  nhiều  thành  phần  có  cùng một  số  thuộc  tính,
chúng ta có thể thực hiện gom gọn lại như sau:

view source

print?

01

h1 {

02	color:#0000FF;

03	text-transform:uppercase;

04

}

05

h2 {

06	color:#0000FF;

07	text-transform:uppercase;

08

}

09

h3 {

10	color:#0000FF;

11	text-transform:uppercase;

12

}

view source

print?

1	h1,h2,h3 {

2	color:#0000FF;

3	text-transform:uppercase;

4

}

• Value: Giá trị của thuộc tính.

Ví dụ: như ví dụ trên value chính là #FFF dùng để định màu trắng cho nền trang.

Đối với một giá trị có khoảng trống, bạn nên đặt tất cả trong một dấu ngoặc kép.

Ví dụ: font-family: “Times New Roman”

Đối với các giá trị là đơn vị đo, không nên đặt một khoảng cách giữa số đo với đơn vị của nó.

Ví dụ: width:100 px. Nó  sẽ  làm CSS của bạn bị vô hiệu  trên Mozilla/Firefox hay Netscape.

Chú thích trong CSS:
Cũng như nhiều ngôn ngữ web khác. Trong CSS, chúng  ta cũng có  thể viết chú thích cho các đoạn code để dễ dàng  tìm,  sửa chữa  trong những  lần cập nhật sau. Chú thích trong CSS được viết như sau /* Nội dung chú thích */

view source

print?

1	/* Màu chữ cho trang web */

2

body {

3	color:red;

4

}

2.2.  Đơn vị CSS:

Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài và đơn vị đo góc, thời gian, cường độ âm thanh và màu sắc. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc. Sau đây là bảng liệt kê các đơn vị chiều dài và màu sắc dùng trong CSS.

Đơn vị chiều dài

Đơn vị	Mô tả
%	phần trăm
in	inch (1 inch = 2,54 cm)
cm	centimeter
mm	millimeter
em	1 em tương đương kích thước của font chữ đang được sử dụng trong đối tượng, nếu font chữ đang dùng là 14px thì 1 em = 14px. Đơn vị này rất hữu ích trong việc hiển thị để tránh phá vỡ cấu trúc trang, nếu như người dùng tăng cỡ chữ trong trình duyệt
ex	1 ex bằng chiều cao của chữ x in thường của font chữ đang được sử dụng trong đối tượng. Do đó, đơn vị này không những phụ thuộc và cỡ chữ mà còn phụ thuộc vào font chữ, vì chiều cao chữ x của font Times và font Tahoma không giống nhau.
pt	point ( 1 pt = 1/72 inch – với mặc định của màn hình máy tính là 72dpi (dot per inch))
pc	pica (1 pc = 12 pt)
px	pixel (điểm ảnh trên màn hình máy tính)

Đơn vị màu sắc

Đơn vị	Mô tả
Tên màu sắc	Tên tiếng Anh Ví dụ: blue, red, orange, green…
RGB (r,g,b)	Màu RGB với giá trị tuyệt đối R,G,B từ 0 tới 255
RGB (%r,%g,%b)	Màu RGB với giá trị tương đối R,G,B tính theo %
Hệ số 16 (Hex)	Màu RGB trong hệ số 16 Ví dụ: #FFFFFF: trắng, #000000: đen

2.3.  Vị trí đặt CSS:

Ở  trên chúng  ta đã  tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML?

Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML

1. Nội tuyến (kiểu thuộc tính)
   Đây  là một phương pháp nguyên  thủy nhất để nhúng CSS vào một  tài  liệu HTML  bằng  cách  nhúng vào  từng  thẻ HTML muốn  áp dụng. Và  dĩ nhiên  trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.
   Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.
   Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:
   view source

   print?

   1

   <html>

   2

   <head>

   3	<title>Ví dụtitle>

   4

   head>

   5	<body style=”background-color=#FFF;”>

   6	<p style=”color:green”>^_^ Welcome To My Blog ^_^p>

   7

   body>

   8

   html>

2. Bên trong (thẻ style)
   Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách  thứ nhất bằng cách rút  tất cả các  thuộc  tính CSS vào  trong  thẻ style  (để tiện cho công tác bảo trì, sửa chữa ấy mà).
   Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:
   view source

   print?

   01

   <html>

   02

   <head>

   03	<title>Ví dụtitle>

   04	<style type=”text/css”>

   05	body { background-color:#FFF }

   06	p { color:#00FF00 }

   07

   style>

   08

   head>

   09

   <body>

   10	<p>^_^ Welcome To My Blog ^_^p>

   11

   body>

   12

   html>

   Lưu ý: Thẻ style nên đặt trong thẻ head.
   Đối với những  trình duyệt cũ, không  thể nhận ra  thẻ