Lợi hại của việc sử dụng external style sheets

none, block, inline, inline-block, table, grid, flex, list-item
div, h2, h2, p->block,
span, a, b, u,->inline,
ul->block

jQuery, AngularJS, ReactJS, BackboneJS
React->Một framework hiển thị view chú ý đến hiệu năng (performance-minded) được tạo ra bởi Facebook. React cũng dùng cái gọi là "DOM ảo" ("virtual DOM") để tăng hiệu năng bằng cách xuất ra một hiển thị ảo, sau đó kiểm tra sự khác biệt giữa hiển thị ảo và những gì có trên DOM và tạo một bản vá (a patch). Về cấu trúc của react thì đơn giản hơn angularjs, React yêu cầu tạo một class để định nghĩa những HTML cần hiển thị. Đó là những gì chúng ta cần tạo ra trong phần JavaScript.
Angular JS và React JS có nhiều khác biệt lớn, nhưng chúng đều có thể thực hiện những việc/nhiệm vụ giống nhau. Tôi có thiên vị React. Angular là 1 framework đầy đủ tính năng hơn nhiều so với React, React thì không thực sự là 1 framework, nhưng điều đó chẳng có nghĩa gì khi mà tôi không cần quá nhiều những tính năng mà Angular cung cấp. Với React, tôi viết ít code hơn nhưng làm được nhiều việc hơn, và React có hiệu năng tốt hơn Angular do React cài đặt DOM ảo (virtual DOM). Nhưng cũng phải nói, hỗ trợ cho Angular thì lớn hơn rất rất nhiều, cộng đồng lớn hơn, còn React chỉ mới bắt đầu.

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 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.

Nội dung chính bài viết

• Định nghĩa về CSS là gì?
• CSS hoạt động như thế nào?
  • Một số quy tắc cần ghi nhớ khi khai báo CSS
• 3 loại CSS: External Style CSS, Inline Style, Internal Style CSS.
  • External Style Sheet
  • Internal Style CSS
  • Inline style
• CSS có vai trò gì trên website
  • CSS giải quyết vấn đề lớn liên quan đến HTML
  • CSS tiết kiệm thời gian làm việc
• Kết luận

Đị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ụ:

Phần viết văn bản

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 (h2)
• 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

đượ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ẻ

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