HTML và CSS, ngôn ngữ định dạng tạo phong cách riêng cho trang web

 

Giải thích ký hiệu:
HTML (Hypertext Markup Language): Ngôn ngữ định dạng siêu văn bản.
CSS (Cascading Style Sheets): Địnhh dạng bảng theo tầng

Để dễ hình dung, bạn cứ tưởng tượng khi so sánh trang web và cơ thể người thì: HTML giống như là bộ xương, ngôn ngữ lập trình (PHP, ASP, C#,…) là máu thịt, còn CSS chính là quần áo và son phấn (và cả hình xăm :))
Với so sánh như trên bạn có thể thấy HTML và CSS là 2 ngôn ngữ định dạng cực kỳ quan trọng trong thiết kế web, nó giúp tạo ra phong cách riêng cho từng trang web bằng cách kết hợp HTML và CSS.

Đôi lời về HTML:

HTML dịch ra có nghĩa là Ngôn ngữ đánh dấu siêu văn bản, nó không được coi là một ngôn ngữ lập trình vì nó thiên về định dạng, ko có các đặc điểm của lập trình như xuất/nhập dữ liệu, vòng lặp,…

Đặc điểm:

  • HTML dùng để định hình một trang web, giúp cho trang web có kết cấu như mình mong muốn như hình nằm chỗ nào, chữ chỗ nào, chữ lớn, bé, đậm, nhạt,…
  • Bạn có thể thiết kế một trang web chỉ có HTML, và ta thường gọi nó là web tĩnh. Đó thường là những trang giới thiệu, quy định, điều khoản chẳng hạn.
  • Nếu trang web cần có cơ sỡ dữ liệu để chứa thông tin về bài viết, thành viên, đánh giá,…HTML không làm được.
  • HTML có mặt ở mọi trang web cho dù trang web đó dùng ngôn ngữ lập trình nào, nó luôn được lồng vào trong các ngôn ngữ lập trình để vừa làm công việc xuất hoặc nhập dữ liệu và đồng thời tạo hình cho trang web.
  • Nếu cho bạn một thử thách chỉ dùng lập trình mà ko chèn thẻ HTML nào bạn không thể tạo ra được một trang web. Có chăng chỉ là những dòng chữ đơn điệu trên màn hình.

Tổng quan về CSS:

CSS khác HTML ở chỗ là tự nó không tạo ra được một trang web. Nó chỉ là thành phần hỗ trợ, lồng vào HTML để định dạng, hiển thị trang web một cách tối ưu.
Bạn có thể hiểu thế này, HTML tự nó cũng định dạng được trang web và tạo sắc thái cho trang web, nhưng tại sao phải cần thêm CSS, bởi vì thứ nhất là HTML không đầy đủ tính năng như CSS, thứ 2 là nếu chỉ dùng HTML, code của bạn sẽ dài dòng và có thể lặp đi lặp lại các mã định dạng làm chậm tốc độ xử lý.

Nhưng nếu có CSS hỗ trợ, CSS sẽ khai báo thuộc tính trong một class, và sau đó trong HTML chỉ việc gọi tên class đó ở mọi nơi có định dạng giống như vậy mà không cần phải lặp đi lặp lại một mớ các mã định dạng.

Có 3 kiểu sử dụng CSS cho thiết kế web:
– External CSS: CSS ngoại tuyến
– Internal CSS: CSS nội tuyến
– Inline CSS: CSS cục bộ hoặc trực tiếp
Ví dụ cách sử dụng:

 

External CSS: bạn phải tạo một file với tên bất kỳ và có đuôi .css, ví dụ style.css, sau đó file web sẽ liên kết tới file này.

Ví dụ:
Nội dung file style.css:

.format{font-size:18px; color:#0000FF;}

Nội dung file web sẽ có dạng như này:

<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div class="format">Text này có độ lớn 18px, màu xanh</div>
</body>

Internal CSS: Bạn khai báo các thuộc tính tại đầu trang web, ví dụ:

<head>
<style type="text/css">
.format{font-size:18px; color:#0000FF;}
</style>
</head>

Trong phần nội dung web sẽ khai báo giống như external CSS:

<div class="format">Text này có độ lớn 18px, màu xanh</div>

Inline CSS: Chèn trực tiếp mã CSS vào thẻ HTML:
Ví dụ:
<div style="font-size:18px; color:#0000FF;>Text này có độ lớn 18px, màu xanh</div>

Bạn có thể thấy tên thuộc tính có dấu chấm “.”, đôi khi không có dấu hoặc có dấu thăng “#”,… chúng khác nhau vì có liên quan đến selector. Các bạn có thể tìm hiểu thêm theo link ở cuối bài.

Mức độ ưu tiên:
Theo thứ tự: Inline > Internal > External
Ví dụ bạn có sử dụng file .css rồi, nhưng giờ bạn cần thay đổi một chút định dạng nhưng ko sửa được file .css, bạn có thể dùng cách trực tiếp (Inline CSS) để “đè” lên thuộc tính trong file .css.

Về ứng dụng của 3 cách này: các site lớn, sitemap phức tạp thì chắc chắn phải dùng loại External CSS.
Các trang web đơn lẻ có thể sử dụng Internal CSS để tránh tạo thêm file.
Riêng Inline CSS chỉ dùng cho mục đích bất khả kháng, tạm thời hoặc trường hợp trang web ko có nhiều định dạng. Một số trang đánh giá xếp hạng trang web cực kỳ thị loại này, nó chắc chắn sẽ là điểm trừ cho bạn nếu có dùng inline css cho trang web.

Để tìm hiểu về HTML và CSS, bạn có thể vào trang này: http://www.w3schools.com. Trang web này không những hướng dẫn đầy đủ về HTML, CSS, Javascript, PHP,… mà nó còn có phần test trực tiếp code trên trang.


Xem thêm:
loading...

Like nếu bạn thấy hay, và nhớ chia sẻ cho bạn bè
 
Bình luận với tài khoản Facebook:

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *