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

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 bgcolor=”#00BFF3”> 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:

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:  <input  name=”Search” type=”Text”  value=”Keyword”>. Để  á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.

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.

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:

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 }
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 */

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: 

    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: 

    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ẻ <style>. Theo mặc định,  thì khi một  trình duyệt không nhận  ra một  thẻ  thì nó  sẽ hiện  ra phần nội dung chứa trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS:
    body {background-color:#FFF } p { color:#00FF00 }  sẽ hiện  ra  trên  trình duyệt.
    Để tránh tình trạng này, bạn nên đưa vào thêm dấu <!– ở trước và –> ở sau khối code CSS. Như ví dụ trên sẽ viết lại là:

    1 <style type=”text/css”>
    2 <!--  body { background-color:#FFF }
    3 p { color:#00FF00 }  -->
    4 </style>
  3. Bên ngoài (liên kết với một file CSS bên ngoài)
    Tương  tự như cách 2 nhưng  thay vì đặt  tất cả các mã CSS  trong  thẻ  style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng được trình bày theo kiểu này.
    css2
    Nào bây giờ chúng ta hãy mở Notepad lên và thử thực hiện theo ví dụ sau:
    Đầu tiên chúng ta sẽ tạo ra một file vidu.html có nội dung như sau: 

    01 <html>
    02 <head>
    03 <title>Ví dụ</title>
    04 <link rel=”stylesheet” type=”text/css” href=”style.css” />
    05 </head>
    06 <body>
    07 <p>^_^ Welcome To My Blog ^_^</p>
    08 </body>
    09 </html>
    10 Sau đó hãy tạo một file style.css với nội dung:
    11 body {
    12 background-color:#FFF
    13 }
    14 p {
    15 color:#00FF00
    16 }

    Hãy đặt 2 tập tin này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả.
    Lưu ý:
    Để lưu 1 file với 1 đuôi khác .txt trong Notepad chúng ta chọn Save as type là All Files. Có  thể chọn Encoding  là UTF-8, nếu bạn chú  thích CSS bằng  tiếng Việt.
    Trong CSS chúng ta còn có thể sử dụng thuộc tính @import để nhập một tập tin CSS vào CSS hiện hành. Cú pháp: @import url(link)

2.4.  Sự ưu tiên:

Trước khi thực thi CSS cho một trang web. Trình duyệt sẽ đọc toàn bộ CSS mà  trang web có  thể được áp dụng, bao gồm: CSS mặc định của  trình duyệt, tập tin CSS bên ngoài  liên kết vào  trang web, CSS nhúng  trong  thẻ <style> và các CSS nội  tuyến. Sau đó,  trình duyệt sẽ  tổng hợp  toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền hình vậy, chỉ câu  trả  lời sau cùng mới được chấp nhận (smile)). Theo nguyên  tắc
đó  trình duyệt của bạn sẽ ưu  tiên cho các CSS nội  tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.

Ví dụ: Trong một trang web có liên kết tới file style.css có nội dung như sau:

1 p {
2 color:#333;
3 text-align:left;
4 width:500px
5 }

trong thẻ <style> giữa thẻ <head> cũng có một đoạn CSS liên quan:

1 p {
2 background-color:#FF00FF;
3 text-align:right;
4 width:100%;
5 height:150px
6 }

trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:

1 <p style="height:200px; text-align:center; border:1px solid #FF0000; color:#000" }>

Khi thực thi CSS trình duyệt sẽ đọc hết tất cả các nguồn chứa style rồi sẽ tổng hợp lại vào một CSS ảo và nếu có sự trùng lắp các thuộc tính CSS thì nó sẽ lấy thuộc tính CSS có mức ưu tiên cao hơn. Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng
mà phần tử p nhận được là:

1 p {
2 background-color:#FF00FF;
3 width:100%;
4 height:200px;
5 text-align:center;
6 border:1px solid #FF0000;
7 color:#000
8 }

Vậy  có  cách nào để  thay đổi độ ưu  tiên cho một  thuộc  tính nào đó? Thật  ra  thì trong CSS đã có sẵn một thuộc tính giúp chúng ta thực hiện điều này, đó chính là thuộc  tính  !important. Chỉ cần bạn đặt  thuộc  tính này  sau một  thuộc  tính nào đó theo cú pháp selector { property:value  !important }  thì  trình duyệt sẽ hiểu đây  là một thuộc tính được ưu tiên. Bây giờ, chúng ta cùng xét lại ví dụ trên nhưng có đặt thêm một số thuộc tính !important vào xem kết quả như thế nào nhé.

01 p {
02 width:500px;
03 text-align:left !important;
04 color:#333 !important
05 }
06 p {
07 background-color:#FF00FF;
08 width:100%;
09 height:150px !important;
10 text-align:right;
11 }
1 <p style="text-align:center; height:200px; border:1px solid #FF0000; color:#000">

Phần CSS sẽ tác động lên thuộc tính p là:

1 p {
2 background-color:#FF0000;
3 width:100%;
4 height:150px !important;
5 text-align:left !important;
6 border:1px solid #FF0000;
7 color:#333 !important
8 }

Lưu  ý: Cùng  một  thuộc  tính  cho  một  selector  thì  nếu  cả  hai  thuộc  tính  đều đặt !important thì cái sau được sử dụng.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: