Định nghĩa về CSS là gì?
CSS là gì? CSS là tên viết tắt của Cascading Style Sheets nó mô tả cách hiển thị của các phần tử HTML được hiển thị trên màn hình, giấy hoặc trong các phương tiện khác
Ví dụ: dưới đây là mô tả của CSS
Hiểu đơn giản hơn, CSS là ngôn ngữ tạo phong cách cho trang web của bạn thể hiện như màu sắc, kiểu chữ, font chữ...được viết dưới dạng ngôn ngữ đánh dấu như HTML. Ưu điểm của lập trình CSS là nó có thể điều khiển định dạng của nhiều trang web cùng một lúc giúp tiết kiệm thời gian và công sức cho người viết web.
CSS hoạt động như thế nào?
CSS dùng cấu trúc tiếng Anh để định nghĩa một bộ quy tắc bạn có thể tận dụng chúng. HTML không được dùng để tạo ra style cho website, nó chỉ giúp bạn đánh dấu từng phần để giúp bạn biết yếu tố đó là gì.
Ví dụ: <p> Phần viết văn bản </p>
Làm thế nào để tạo ra style cho văn bản đó? Cú pháp của CSS rất đơn giản. Trong CSS có phần bộ chọn và khối khai báo. Bạn sẽ chọn một yếu tố và khai báo nó làm gì. Đến đây thì bạn hiểu rồi đúng không!
Một số quy tắc cần ghi nhớ khi khai báo CSS
- Selector (bộ chọn) sẽ trỏ đến phần tử HTML để tạo kiểu (h1)
- Declaration (khối khai báo) cách nhau bởi dấu chấm phẩy(;)
- Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm(:)
- Khai báo CSS luôn kết thúc bằng dấu chấm phẩy(;), và khối khai báo được đặt trong dấu ngoặc nhọn({}).
Ví dụ minh họa
Tất cả các phần tử trong <p> được căn giữa, màu đỏ và kích thước font chữ 32px
Tương tự, có thể viết như này nữa nhé!
Hai cách viết trên đều giống nhau, bạn đọc có thể sử dụng 1 trong 2.
3 loại CSS: External Style CSS, Inline Style, Internal Style CSS.
External Style Sheet
External CSS được sử dụng nhiều nhất vì nó thuận tiện nhất. Mọi thứ được lưu trong file .css. Có nghĩa là bạn có thể tạo phong cách ở file khác áp dụng CSS vào trang bạn muốn. External style sẽ cải thiện thời gian tải trang rất nhiều.
Định dạng External Style Sheet trong CSS
Ví dụ: Định dạng External Style Sheet được liên kết với các trang HTML bằng thẻ <link>
Internal Style CSS
Internal Style CSS là style được tải lên mỗi khi trang web được refresh. Vì vậy, nó làm tăng thời gian tải trang. Ngoài ra, bạn sẽ không dùng được một style CSS cho nhiều trang vì nó chỉ áp dụng cho từng trang một. Tuy nhiên, lợi ích của style CSS Internal là khi mọi thứ đã đặt trong một trang thì nó dễ chia sẻ trang để xem trước hơn.
Ví dụ
Inline style
Cuối cùng, chúng ta sẽ nói về style Inline style. Inline hoạt động với một yếu tố nhất định có tag <style>. Mỗi thành phần đều cần được tạo phong cách riêng, vì vậy đây không hẳn là cách tốt nhất và dễ nhất để xử lý CSS. Nhưng có thể khá tiện lợi, vì nếu bạn muốn thay đổi chỉ một yếu tố, bạn không cần truy cập trực tiếp vào file CSS để chỉnh sửa mà sử dụng Inline CSS.
CSS có vai trò gì trên website
CSS được sử dụng để xác định style cho trang web của bạn, bao gồm thiết kế, bố cục và các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau.
CSS giải quyết vấn đề lớn liên quan đến HTML
- HTML KHÔNG BAO GIỜ chứa các thẻ định dạng một trang web!
- HTML được tạo ra để mô tả nội dung của một trang web, như:
<h1> Đây là một tiêu đề </h1>
<p> Đây là một đoạn văn. </p>
Khi các thẻ như <font> và các thuộc tính màu được thêm vào đặc tả HTML 3.2, dường như nó bắt đầu là một cơn ác mộng cho các nhà phát triển web. Việc phát triển các trang web lớn, nơi các phông chữ và thông tin màu sắc được thêm vào từng trang, đã trở thành một quá trình lâu dài và tốn kém.
Để giải quyết vấn đề này, World Wide Web Consortium (W3C) đã tạo CSS.
CSS đã xóa định dạng kiểu khỏi trang HTML!
CSS tiết kiệm thời gian làm việc
Các định nghĩa style thường được lưu trong các tệp .css external.
Với tệp external sheets, bạn có thể thay đổi giao diện của toàn bộ trang web bằng cách thay đổi một tệp!
>>HTML và CSS là gì?
Kết luận
Đọc hết bài viết rồi, hãy cùng Brandinfo tổng hợp lại bài viết CSS là gì nhé:
- CSS được tạo để kết hợp với ngôn ngữ HTML để tạo phong cách cho trang web.
- Có 3 loại style CSS chính: external style css, internal style css và inline css. Bạn có thể sử dụng External Style CSS để tạo phong cách cho nhiều trang cùng lúc.
- Bạn sẽ không phải đi đâu xa để thấy cách triển khai CSS vì bản thân nó cũng quan trọng như chính ngôn ngữ markup vậy.
Cuối cùng, Brandinfo hy vọng bạn thấy bài viết này hữu dụng để thêm thông tin CSS là gì. Nếu có bất kỳ thắc mắc nào hãy để lại bình luận bên dưới.