Error message

Notice: Undefined offset: 1 in nice_menus_block_view() (line 306 of /home/mamast08nv/public_html/sites/all/modules/nice_menus/nice_menus.module).

Sử dụng CSS

1.      Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

 

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

Nội fung file index.html

 

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

2.      Kết nối file CSS vào file HTML

Chúng ta kết nối file CSS vào file HTML thông qua thẻ <link>, cách sử dụng thẻ này như thế nào:

a)     Định nghĩa và sử dụng

  • Tag <link /> xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài.
  • Tag <link /> được dùng phổ biến nhất là link tới tài liệu css.
  • Tag <link /> được viết bên trong tag <head>

b)     Cấu trúc

<head>
<link rel="stylesheet" type="text/css" href="filecss.css" />
<head>

c)      Thuộc tính

Cách sử dụng: <link thuoctinh="giatri" />

c.1) Thuộc tính tùy chọn

 

c.2) Thuộc tính tổng quát

Thuộc tính class

Định nghĩa và sử dụng

  • Thuộc tính class thường được sử dụng cho những nội dung có cùng định dạng, việc sử dụng một class thuận tiện để chỉnh sửa giống nhau của các thành phần.
  • Thuộc tính class được dùng chủ yếu để định dạng nội dung thông qua css, hoặc được dùng để điều khiển thành phần trong HTML thông qua script.
  • Thuộc tính class được sử dụng đa số các tag, ngoài trừ: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, và <title>.
  • Trong một tag có thể có chứa nhiều thuộc tính class, mỗi class phải ngăn cách nhau bằng một khoảng trắng.

Chú ý: Tên class không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên class không nên đặt quá dài hay dùng ký tự đặc biệt, vì như thế sẽ khó quản lý sau này.

Cấu trúc trong HTML

<tag class="tenclass"><tag>

Cấu trúc trong CSS

tag.tenclass { thuộc tính: giá trị;}

Thuộc tính id

Định nghĩa và sử dụng

  • Một thuộc tính id chỉ được dùng duy nhất cho một tag trong cùng văn bản (giống như chứng minh nhân dân chỉ sử dụng cho một người vậy), sử dụng nhiều lần vẫn chạy nhưng khi check validator sẽ bị báo lỗi.
  • Thuộc tính id được dùng chủ yếu để định dạng nội dung thông qua css, hoặc được dùng để điều khiển thành phần trong HTML thông qua script.
  • Thuộc tính id thường được sử dụng cho những nội dung lớn, hay những nội dung có định dạng riêng (duy nhất) trong văn bản.
  • Trong một tag có thể có chứa duy nhất một thuộc tính id, có thể sử dụng kết hợp với thuộc tính class .

Chú ý: Tên id không được bắt đầu bằng số, vì điều này chỉ hỗ trợ trong trình duyệt Internet Explorer.
Tên id không nên đặt quá dài hay dùng ký tự đặc biệt, vì như thế sẽ khó quản lý sau này.

Cấu trúc trong HTML

<tag id="tenid"><tag>

Cấu trúc trong CSS

tag#tenid { thuộc tính: giá trị;}

Thuộc tính style

Định nghĩa và sử dụng

  • Thuộc tính style được dùng để định dạng trực tiếp cho một thành phần.
  • Khi sử dụng thuộc tính style, định dạng sẽ được ưu tiên hơn so với các định dạng khác.

Cấu trúc trong HTML

<tag style="thuộc tính: giá trị;"><tag>

Thuộc tính title

Định nghĩa và sử dụng

  • Thuộc tính title được dùng để xác định thêm thông tin cho một thành phần.
  • Thông tin này thường được hiển thị khi di chuyển chuột trên thành phần.

Cấu trúc trong HTML

<tag title="giá trị"><tag>

Bảng thuộc tính:

 

c.3) Thuộc tính sự kiện

 

d)     Cách kết nối file CSS vào file HTML

Ví dụ:

 

Thuộc tính href ta phân tích như sau:

  • style.css là một file có tên là style với định dạng file là .css
  • css là folder chứa file style.css

Như vậy css/style.css sẽ dẫn đường dẫn tới file style.css trong thư mục css.

3.      Cách viết một nội dung CSS

Viết nội dung CSS theo cấu trúc như sau:

Bộ chọn { thuộc tính: giá trị; }

Ví dụ:

p { color: red; }
 
 

Chúng ta có thể viết nhiều cặp thuộc tínhgiá trị cho bộ chọn, mỗi cặp thuộc tính và giá trị có thể viết cách nhau bởi dấu chấm phẩy.

Ví dụ:

p { color: red; float: left; padding-left: 10px; }

 

4.      Cách viết bộ chọn CSS

Giả sử ta có file HTML như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hoc thiết kế website</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen,print" />
</head>

<body>
<div id="content">
<ul>
<li>Mục 01</li>
<li>Mục 02</li>
<li>Mục 03</li>
<li>Mục 04</li>
</ul>
<p>Đoạn văn</p>
</div>

<div class="navi">
<p>Nội dung navi</p>
</div>
</body>
</html>

a)     Bộ chọn theo tên id

tag#tênid { thuộc tính: giá trị; }. Bắt buộc phải có ký tự dấu "#" và tênid

ví dụ: div#content { width: 600px; }

b)     Bộ chọn theo tên class

tag.tênclass { thuộc tính: giá trị; }. Bắt buộc phải có ký tự dấu "." và tênclass

ví dụ:  div.navi { background: #333333; }

c)      Bộ chọn theo cấp bậc

[tag cha] [tag con] [tag cháu] { thuộc tính: giá trị; }

  • Cấu trúc này không bắt buộc, tuy nhiên cấu trúc này sẽ thuận tiện trong việc điều chỉnh các thành phần con bên trong, và cũng để xác định thứ tự ưu tiên trong CSS.
  • Trong file HTML bên trên, trong phần contentnavi đều có tồn tại thành phần <p> nếu sử dụng cách chọn tag { thuộc tính: giá trị;} thì ta sẽ không thể nào chọn được đâu là thành phần thuộc content, đâu là thành phần thuộc navi, tuy nhiên sử dụng cách chọn theo cấp bậc thì việc này lại rất dễ dàng:

Ví  dụ:

div#content p { color: #333333; } /* Chon thanh phan p theo content*/
 
div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/
 
div#content ul li { display: inline; } /* Chon thanh phan li theo content*/
 

5.      Cách viết một comment trong file CSS

 

Comment là một dạng ghi chú, giúp người viết code giải thích nghĩa cho từng đoạn code, cách viết một comment trong CSS như sau:

/* Đây là dòng comment */

 

 Xem thêm tài liệu html css ở mục chia sẻ

Đào tạo lập trình chúc các bạn thành công

 Tin tức khác:

 + Khóa học lập trình web php

 + Khóa học thiết kế web

 + Khóa đào tạo quản trị web