Thứ Hai, 15 tháng 6, 2015

Giới thiệu về CSS

10:48 0 Comment
Để viết được một trang web hoàn thiện, trước hết bạn nên học về HTML/CSS rồi sau đó là học lap trinh php. Bài học này tôi xin được Giới thiệu về CSS đến các bạn. Vậy CSS là gì? CSS đề làm gì? và CSS làm việc ở đâu?

* Lưu ý: Các bạn cần lắm vững kiến thức HTML trước khi tìm hiểu CSS.

1. CSS là gì?

CSS là viết tắt của cụm từ Cascading Style Sheets. Nó là một ngôn quy định cách trình bày một văn bản dạng HTML, XHTML, XML …

 2. CSS đề làm gì?

  • CSS bổ sung và hoàn thiện những điểm còn thiếu trong văn bản HMTL.
  • Giúp ta dễ dàng để trình bày một nội dung một cách phức tạp và tinh vi nhất.
  • Xây dựng khuôn mẫu bên ngoài, giúp việc điều chỉnh, sửa chữa dễ dàng.

3. Vùng làm việc của CSS

Đối với một văn bản HTML thì CSS có 3 kiểu khai báo CSS.

3.1 Khai báo CSS nội tuyến

CSS nội tuyến là kiểu khai báo CSS ngay trong thẻ HTML cần định dạng
style="thuộc_tính_1:giá_trị_1; thuộc_tính_2:giá_trị_2; ... "
Trong đó:

  • thuộc_tính: là các thuộc tính sử dụng để định dạng.
  • giá_trị: là giá trị xác định của thuộc tính.

Ví dụ: Thay đổi màu chữ của nội dung trong thẻ <h1></h1>
<!DOCTYPE HTML>
<html>
 <head></head>
 <body>
  <h1 style="color:red" >Thế Giới WEB</h1>
 </body>
</html>
 3.2 Khai báo trong phần <head></head> của văn bản HTML
Khai báo vùng làm việc của CSS trong phần head của văn bản HTML ta sử dụng cặp thẻ <style></style>
<style type="text/css">
  đối_tượng{
    thuộc_tính_1:giá_trị_1;
    thuộc_tính_2:giá_trị_2;
    ...
  }
</style>
Trong đó:

  • đối_tượng: là đối tượng muốn định dạng.
  • thuộc_tính: là các thuộc tính sử dụng để định dạng.
  • giá_trị: là giá trị xác định của thuộc tính.


Ví dụ: Thay đổi màu chữ của nội dung trong thẻ <h1></h1>
<!DOCTYPE HTML>
<html>
 <head>
  <style type="text/css">
   h1{
     color:red;
     font-family:arial;
   }
  </style>
 </head>
 <body>
  <h1>Thế Giới WEB</h1>
 </body>
</html>

3.3 Khai báo ra một file CSS độc lập.
Để làm việc với CSS từ bên ngoài thì ta cần biết

Thứ nhất: Cú pháp của nội dung trong file CSS.

Nội dung trong file CSS sử dụng cú pháp tương tự như cú pháp CSS trong phần head
<style type="text/css">
  đối_tượng{
    thuộc_tính_1:giá_trị_1;
    thuộc_tính_2:giá_trị_2;
    ...
  }
</style>
Thứ hai: Để sử dụng được file CSS đó trong văn bản HTML

Triệu gọi file CSS đó vào phần head trong văn bản HTML theo cú pháp:
<link rel="stylesheet" type="text/css" href="đường_dẫn_CSS" />
Trong đó:

đường_dẫn: là đường dẫn đến file CSS cần triệu gọi.

Ví dụ: Thay đổi màu chữ của nội dung trong thẻ <h1></h1>

b1: Tạo file style.css có nội dung:
h1{
 color:red;
}
b2: triệu gọi vào trong file HTML. Ở đây ta đặt file style.css nằm ngang hàng với file HTML.
<!DOCTYPE HTML>
<html>
 <head>
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <h1>Thế Giới WEB</h1>
 </body>
</html>
Lưu ý: Đối với một thuộc tính của một đối tượng. Nếu chúng ta sử dụng cả 3 cách khai báo trên với nó thì thứ tự ưu tiên sẽ là CSS nội tuyến > CSS trong phần head > CSS bên ngoài > CSS mặc định của trình duyệt.

 4. Chú thích trong CSS
Để ghi chú một nội dung hay một đoạn mã lệnh không muốn thực thi ta sử dụng cú pháp:
/* Nội dung chú thích  */
Nguồn: the gioi web

SHARE THIS

0 nhận xét:

Lưu ý: Chỉ thành viên của blog này mới được đăng nhận xét.