HTML và CSS có gì khác nhau?

Nếu ta ví HTML giống như bộ khung của một trang web, thì CSS chính là phần da thịt đắp lên để hoàn thiện giao diện cho website đó. HTML và CSS vốn là hai ngôn ngữ hoàn toàn độc lập với nhau, giữa chúng tồn tại rất nhiều điểm khác biệt mà bạn nên lưu tâm.  

Sự khác biệt giữa HTML và CSS
Sự khác biệt giữa HTML và CSS

Định nghĩa HTML và CSS

Nếu bạn đang có ý định xây dựng một trang web, thì chắc hẳn bạn đã nghe đến 2 khái niệm HTML và CSS. Chúng giống như tay phải và tay trái của các lập trình viên frontend, hỗ trợ lẫn nhau trong quá trình thiết kế nên một website hoàn chỉnh. 

HTML

HTML (Hypertext Markup Language) được tạo ra vào năm 1989 bởi nhà khoa học máy tính người Anh Tim Berners-Lee. Đây là một ngôn ngữ đánh dấu dùng để mô tả nội dung trên các trang web như một đề mục hoặc một đoạn văn bất kỳ. Trong HTML, bạn sẽ sử dụng các thẻ để thêm các đoạn văn, tiêu đề, hình ảnh, bullet và những cấu trúc khác. Việc sử dụng HTML để viết nội dung trên trang web cũng gần giống với cách bạn làm việc trên Word.

HTML
HTML

Tập hợp một chuỗi các phần tử sẽ tạo nên một trang HTML. Mỗi phần tử sẽ gồm thẻ mở, thẻ đóng và nội dung. Tuy nhiên, có một số trường hợp ngoại lệ như phần tử <br> không có thẻ đóng và nội dung. Chúng được gọi là các phần tử trống. Ngoài ra, các phần tử HTML còn có thể lồng vào nhau (phần tử này ở trong phần tử khác).

Ví dụ với các phần tử lồng nhau trong HTML
Ví dụ với các phần tử lồng nhau trong HTML

Nhờ có công cụ này mà trình duyệt có thể xác định tiêu đề, phần mở đầu và kết thúc của trang web một cách dễ dàng.

CSS

CSS (Cascading Style Sheets) là thành tựu phát minh của Hakom Lie và Bert Bos, phát hành vào năm 1996. Công cụ này mô tả cách mà những phần tử HTML được trình bày trên trang web. Không giống với HTML, CSS tập trung vào việc thay đổi và định hình phong cách cho website chứ không can thiệp đến nội dung. 

CSS
CSS

Thuộc tính của CSS có thể được chia làm 2 loại: bố cục (layout) và bản trình bày (presentation). Bố cục xác định vị trí của các phần tử trong trang. Bản trình bày quyết định kích cỡ, màu sắc, font chữ, màu nền và hình ảnh nền. 

Cú pháp của CSS gồm các khối khai báo (declaration block) và các bộ chọn (selector). Trong đó bộ chọn trỏ đến phần tử HTML được tạo kiểu, khối khai báo chứa tối thiểu 1 khai báo, ngăn cách nhau bởi dấu chấm phẩy. Mỗi khai báo gồm một tên thuộc tính và một giá trị, phân tách nhau bởi dấu hai chấm. Các khối khai báo nằm giữa dấu ngoặc nhọn.

Sự khác biệt giữa HTML và CSS

  • Chức năng: HTML được sử dụng để xác định cấu trúc một trang web, không được dùng với mục đích trình bày và hiển thị. CSS được sử dụng để tạo kiểu cho trang web thông qua các đặc điểm phong cách khác nhau, dùng với mục đích trình bày và hiển thị.  
  • Thành phần: Cấu trúc cơ bản của HTML gồm các thẻ và nội dung. CSS được cấu tạo bởi các bộ chọn và khối khai báo. 
  • Tính liên quan: CSS có thể được sử dụng trong các file HTML. Nhưng HTML thì không thể dùng được trong các style sheet của CSS. 
  • Phương pháp sử dụng: Trong HTML, phương pháp sử dụng là không xác định. Trong CSS, bạn có thể sử dụng style sheet External, Internal hoặc Inline.  
  • Sao lưu và hỗ trợ: So với CSS, HTML có ít sao lưu và hỗ trợ hơn. 

Giờ thì bạn không thể nhầm lẫn giữa 2 ngôn ngữ này nữa rồi phải không nào? Để có thể tạo nên những website với bố cục khoa học, giao diện bắt mắt và hiệu ứng thu hút thì, bạn hãy học cách sử dụng đồng thời cả HTML và CSS một cách hiệu quả.

Nếu bạn quan tâm, hãy xem các vị trí đang tuyển dụng của Got It tại: bit.ly/gotit-hanoi và đọc thêm về quy trình tuyển dụng tại đây.

branding
branding
February 07, 2021
0
Share this post to:
Tags:
0 Comments
Inline Feedbacks
View all comments
Các bài viết liên quan
CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

CSS là gì? Kinh nghiệm giúp bạn tự học CSS tại nhà không nên bỏ qua!

Tự học CSS là một quy trình không có điểm dừng, vì thế những người mới bắt đầu sẽ dễ bị rối trong thư viện kiến thức về CSS. Vậy tự học CSS nên bắt đầu với những điều gì? Cùng tìm hiểu nhé! Mục lụcCSS là gì?Bạn nên chuẩn bị gì trước khi tự […]
Những code HTML cơ bản nhất

Những code HTML cơ bản nhất

Loại code HTML cơ bản dễ học nhất hiện nay là gì? Những người lập trình viên mới vào nghề thường khá lúng túng không biết nên bắt đầu học từ đâu và học gì dễ hiểu dễ thực hành nhất. Bài viết này sẽ chia sẻ đến bạn những thẻ HTML đơn giản và […]
Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Ngôn ngữ HTML là gì? Tìm hiểu cấu trúc HTML

Cấu trúc HTML mạch lạc, khoa học giúp cho website hoạt động ổn định. Hiện nay, mỗi website đều được xây dựng với những cấu trúc khác nhau. Vậy khi phát triển website, lập trình viên nên xây dựng cấu trúc ngôn ngữ web HTML như thế nào? Got It sẽ chia sẻ những thông […]
Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Giới thiệu về HTML – ngôn ngữ web phổ biến nhất hiện nay

Những thông tin giới thiệu về HTML sẽ giúp những người mới học lập trình trau dồi kiến thức cơ bản. Hiện nay có rất nhiều loại ngôn ngữ web mới với những ưu điểm nổi bật, nhưng HTML vẫn là loại ngôn ngữ được nhiều lập trình viên ưu tiên sử dụng. Cùng tìm […]
Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Thẻ style trong HTML là gì? Các thuộc tính trong thẻ style

Style trong HTML là một thuộc tính đặc biệt dùng để khai báo các định dạng cho thẻ HTML như màu sắc, font chữ, cỡ chữ, màu nền,… Bài viết này sẽ chia sẻ những kiến thức cơ bản về thẻ style và một số thuộc tính của thẻ này.    Mục lục1. Thẻ style trong […]
Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Stylesheet là gì? Chức năng và lợi ích của Stylesheet

Trước đây, khi mỗi trang web được hiển thị, người ta không thể thay đổi bất cứ thứ gì trên đó. Bài viết này sẽ chia sẻ kiến thức Stylesheet là gì và khả năng hỗ trợ của nó trong HTML động nhằm thực hiện những thay đổi trên trang. Mục lục1. Khái niệm Stylesheet […]