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. Mục
lục
Đị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.
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ử
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].
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.
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ả.
CSS được thêm vào các trang HTML để định dạng trang web theo quy tắc CSS. Có ba cách để liên kết CSS với HTML. Nội dung chính
CSS nội tuyến [Inline CSS]
CSS nội tuyến [inline] được sử dụng để áp dụng CSS trên một dòng hoặc một phần tử. Để sử dụng CSS nội tuyến, bạn phải sử dụng thuộc tính style cho thẻ có liên quan.
Cú pháp:
Ví dụ:
CSS nội tuyến áp dụng cho thẻ heading này.
Thẻ p này không bị ảnh hưởng.
Ouput:
Sự bất lợi của CSS nội tuyến
- Bạn không thể sử dụng dấu nháy kép '"' bên trong CSS nội tuyến. Ví nếu bạn dùng dấu nháy kép thì trình duyệt sẽ hiểu đó là dấu kết thúc thuộc tính style.
- CSS nội tuyến không được tái sử dụng.
- CSS nộ tuyến khó khăn trong việc chỉnh sửa vì chúng không được lưu trữ ở một nơi.
- Không thể tạo các pseudo-code và pseudo-class với CSS nội tuyến.
- CSS nội tuyến không lợi dụng bộ nhớ cache của trình duyệt.
CSS nội bộ [Internal CSS]
Nội bộ CSS được sử dụng để áp dụng CSS trên một tài liệu hoặc trang. Nó có thể ảnh hưởng đến tất cả các yếu tố của trang. Nó được viết bên trong thẻ trong phần của html.
Ví dụ 1:
p {
color:blue
}
Ví dụ 2:
body {
background-color: linen;
}
h2 {
color: red;
margin-left: 80px;
}
CSS nội bộ áp dụng cho thẻ heading này.
Thẻ p này không bị ảnh hưởng.
Ouput:
CSS bên ngoài [External CSS]
CSS bên ngoài được sử dụng để áp dụng CSS trên nhiều trang. Ở đây, chúng ta viết tất cả các mã CSS trong một tệp css. Phần mở rộng của nó phải là .css ví dụ style.css.
Ví dụ:
File: style.css
body {
background-color: lightblue;
}
h2 {
color: navy;
margin-left: 20px;
}
Bạn cần phải liên kết file style.css này với các trang html như sau:
Liên kết với tập tin CSS bên ngoài.
Màu nền là lightblue.
Ouput:
Thẻ phải được sử dụng trong phần của html.
Ghi đè quy tắc CSS
Dưới đây là các quy tắc để ghi đè quy tắc CSS.
Bất kỳ CSS nội tuyến nào cũng có ưu tiên cao nhất. Vì vậy, nó sẽ ghi đè bất kỳ quy tắc được định nghĩa trong thẻ ... hoặc các quy tắc được định nghĩa trong bất kỳ tập tin CSS bên ngoài.
Bất kỳ quy tắc nào được định nghĩa trong thẻ ... sẽ ghi đè các quy tắc được định nghĩa trong bất kỳ tập tin CSS bên ngoài.
Bất kỳ quy tắc nào được định nghĩa trong tập tin CSS bên ngoài đều có mức độ ưu tiên thấp nhất và các quy tắc được xác định trong tệp này sẽ chỉ được áp dụng khi hai quy tắc trên không áp dụng.