CSS là gì? Cách thức hoạt động và những thuật ngữ trong CSS

CSS là gì? HTML CSS là gì? CSS có các phiên bản nào? Đây là thuật ngữ quen thuộc đối với những người hay làm việc với website. Tuy nhiên đối với người mới, chưa chắc họ đã hiểu hết khái niệm CSS là gì và những định nghĩa quan trọng liên quan. Chính vì vậy, bài viết này của Tophost sẽ giúp bạn hiểu rõ hơn về vấn đề này. Cùng theo dõi nhé! 

CSS là gì?

CSS là ngôn ngữ tạo phong cách cho trang website thường gặp hiện nay. CSS là từ viết tắt của Cascading Style Sheet language. Chúng sử dụng để tạo phong cách và định kiểu cho những yếu tố được viết dưới dạng ngôn ngữ đánh dấu, như là HTML. CSS có thể điều khiển định dạng của nhiều trang website cùng lúc để tiết kiệm công sức cho người viết website.CSS sẽ phân biệt cách hiển thị của trang website với nội dung chính của trang bằng việc điều khiển bố cục, màu sắc, và font chữ trên chính trang web đó.

css-la-gi

CSS được tăng trưởng bởi W3C (World Wide web Consortium) vào năm 1996, vì một lý do giản đơn. HTML không được thiết kế để gắn tag để giúp định dạng trang web. bạn chỉ có thể sử dụng nó để “đánh dấu” lên website.

Phiên bản 3.2 xuất hiện các tag như <font> trong HTML đã gây ra nhiều rắc rối cho lập trình viên. Thực tế, website có nhiều font khác nhau, màu nền và cả đa dạng phong cách. Viết lại code cho trang web là một quá trình cực kỳ khó khăn và vô cùng cực nhọc. Vì vậy CSS được tạo ra bởi W3C để giải quyết vấn đề nan giải này.

Mối tương quan giữa CSS và HTML là rất mật thiết. HTML là ngôn ngữ markup là nền tảng của site. Trong khi đó CSS định hình phong cách bao gồm những thứ tạo nên giao diện mà bạn thấy của site. Chính vì vậy, mối quan hệ của chúng là không thể tách rời. 

Lợi ích khi sử dụng CSS là gì?

Về lý thuyết, CSS có thể không có cũng được. Điều này chỉ xảy ra trong trường hợp website chỉ chứa một trang văn bản không chứa bất kỳ cái khác. Website chỉ chứa một trang văn bản thì bạn không cần cực nhọc làm chi đúng không. Do đó, CSS ra đời là có nguyên nhân của nó. Theo đó, về thực tế, việc sử dụng CSS sẽ mang lại cho bạn một số lợi ích như sau. 

Giải quyết một vấn đề lớn

Trước khi có CSS, các thẻ như màu sắc, phông chữ,  kiểu nền, cách sắp xếp phần tử, đường viền và kích thước phải được lặp lại trên mọi trang web. Đây là một quá trình rất dài tốn nhiều thời gian và công sức. Ví dụ: nếu như bạn đang tăng trưởng một trang website lớn nơi phông chữ và nội dung màu được thêm vào mỗi trang chúng sẽ biến mình thành một quá trình dài và tốn kém. CSS đã xuất hiện lần đầu để xử lý vấn đề này. Chúng là một khuyến cáo của W3C.

css-la-gi

Nhờ CSS mà source code của trang web sẽ được tổ chức gọn gàng hơn, trật tự hơn. Những thông tin trang web sẽ được tách bạch hơn trong việc định dạng hiển thị. Từ đấy, quá trình cập nhập nội dung sẽ dễ dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML.

Tiết kiệm thời gian 

Khái niệm kiểu CSS được lưu trong các tệp CSS bên ngoài vì thế có thể khác biệt toàn bộ trang web bằng cách chỉnh sửa chỉ một file. Sử dụng CSS sẽ giúp cho bạn không cần thực hiện lặp lại các mô tả cho từng thành phần. Từ đó, người dùng có thể tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại giúp làm chủ đơn giản hơn các lỗi không đáng có. CSS tạo ra nhiều style không giống nhau nên sẽ được áp dụng với nhiều trang website, từ đấy giảm tránh việc lặp lại các định dạng của các trang website giống nhau.

Cung cấp thêm các thuộc tính quan trọng 

Nếu như bạn đã biết được CSS là gì bạn cũng hiểu được mức độ quan trọng của các thuộc tính của CSS. Theo đó, CSS sẽ cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện trang web một cách hoàn chỉnh nhất. CSS giúp người dùng sử dụng nhiều styles hơn trên website của mình. Do đó khả năng điều chỉnh trang của bạn trở nên vô hạn. 

Cách thức hoạt động của CSS là gì?

CSS sử dụng cấu trúc tiếng Anh giản đơn để tạo ra một bộ các quy tắc bạn có thể tận dụng. Như Tophost đã nói ở trên, HTML không được dùng để tạo cách điệu cho các yếu tố, nó chỉ đánh dấu từng phần để biết được yếu tố đó là gì thôi. Ví dụ bạn có một văn bản để đăng trên website nhưng việc làm sao để tạo ra cách điệu cho văn bản đó? Syntax của CSS rất giản đơn. Chúng có phần block chọn và block khai báo. Bạn có thể chọn một yếu tố và khai báo làm gì với nó. Rất đơn giản phải không?

Tuy vậy, cũng có nhiều quy tắc cần ghi nhớ.

Selector sẽ trở về yếu tố HTML bạn phải cần muốn tạo phong cách. Block khai báo sẽ gồm có một hay nhiều 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 CSS và giá trị, cách nhau bởi dấu 2 chấm. Khai báo CSS luôn kết thúc bằng dấu chấm phẩy. Block khai báo được đặt trong dấu ngoặc nhọn.

Hãy xem qua ví dụ:

Toàn bộ các thành phần trong element sẽ sử dụng màu xanh và in đậm.

css-la-gi

Tìm hiểu về các loại CSS 

CSS có 3 loại là Inline, External và Internal. Cụ thể chi tiết sẽ được Tophost trình bày ngay sau đây, mời bạn theo dõi nhé! 

Style CSS Internal là style được tải lên mỗi khi trang website được refresh. Do đó nó tăng thời gian tải trang. Chúng ta sẽ không sử dụng một style CSS cho nhiều trang vì nó chỉ áp dụng cho từng trang một. Tuy vậy, ích lợi của style CSS Internal là khi mọi thứ đã đặt trong một trang thì chúng chia sẻ trang để xem trước dễ dàng hơn.

Công thức sử dụng Style External là dễ dùng nhất. Mọi thứ được lưu trong tệp .css. nghĩa là tôi có thể tạo cách điệufile khác áp dụng CSS vào trang bạni muốn. External style sẽ cải thiện thời gian tải trang rất nhiều. Khác với 2 loại trên, Inline là loại hoạt động với một yếu tố cụ thể có tag

Các phiên bản của CSS

CSS được được tạo ra tiên vào ngày 10/10/1994 bởi Håkon Wium Lie. tiếp tục đấy, các phiên bản của CSS dần được hình thành qua nhiều giai đoạn. Từ lúc xuất hiện đến nay, CSS đã có nhiều phiên bản khác nhau. Các phiên bản mới sẽ giúp vá các lỗi của phiên bản cũ và mang đến nhiều cải tiến hơn.

Phiên bản 1

Với phiên bản trước tiên CSS có nhiều dấu hiệu cụ thể như: tính chất font chữ, màu văn bản, hình nền, các thuộc tính văn bản, căn lề, định vị cho các yếu tố, nhận dạng duy nhấtchia loại chung các nhóm tính chất.

Phiên bản 2

CSS phiên bản 2 được W3C phát triển vào tháng 5 năm 1998. Với những cải tiến từ phiên bản CSS trước tiên và mang đến những cải tiến mới như định vị tuyệt đối, tương đối và cố định các yếu tố chỉ mục z. định nghĩa về các kiểu phương tiện, giúp đỡ và hỗ trợ cho các biểu định kiểu âm thanh và văn bản hai chiều. xảy ra các kiểu font chữ mới để định dạng văn bản.

CSS 2.1

ngoài ra, sau phiên bản 2 còn có một sự nâng cấp khác là CSS 2.1 được release vào tháng 4 năm 2011. Nhằm mục đích sửa lỗi và loại bỏ những tính năng kém hoặc không tương thích cho người dùng.

CSS3

CSS3 là phiên bản thay thế cho CSS2 với sự chỉnh sửa Đặc biệt là module. Các module có cơ hội mở rộng các tính năng được xác định trong CSS2. Nhằm duy trì năng lực tương thích ngược.

Đặc biệt, CSS3 Mang đến các bộ chọn (selector) và tính chất (properties) mới cho phép linh hoạt hơn với bố cục và giải thích trang. Nhờ đấy, người lập trình có thể làm ra các hiệu ứng hình ảnh mà không cần tạo ra hình ảnh trước đó.

CSS 4

CSS 4 là phiên bản kế thừa CSS 3 hiện vẫn đang được cập nhật, phát triển và được dự đoán sẽ có rất nhiều phương thức mới được chèn vào như: Mutability, Hyperlink…

Cách nhúng CSS vào website

Để CSS có thể hoạt động trên website hoặc HTML Documents, bạn phải tiến hành nhúng CSS vào website. Ngược lại, các định dạng CSS sẽ không thực thi trên HTML. Theo đó, chúng ta sẽ có 3 cách nhúng CSS vào website, cụ thể: 

  • Inline CSS – Thông qua cặp thẻ <style> </style> bạn có thể nhúng trực tiếp vào tài liệu HTML.
  • Internal CSS – Để tạo ra nơi viết mã CSS bạn dùng thẻ <style> bên trong thẻ <head> của HTML.
  • External CSS – Thông qua cặp thẻ <link> bạn có thể tạo một tập tin .css riêng và nhúng vào tài liệu HTML.

css-la-gi

Inline CSS

Đặt thuộc tính style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính định dạng CSS. Mã CSS chỉ tác động nên chính phần tử đó.

Internal CSS

Đặt các cặp thuộc tính định dạng CSS vào bên trong cặp thẻ <style type=”text/css”></style>

Cặp thẻ <style type=”text/css”></style> thì được đặt bên trong cặp thẻ <head></head>

External CSS

Với External CSS: bạn có thể đặt các thuộc tính định dạng vào bên trong tập tin CSS. Chúng là tập tin hoàn toàn độc lập so với file. File này thường được đặt phần mở rộng là .css. Tiếp theo bạn có thể dùng thẻ link <link rel=”stylesheet” type=”text/css” href=”đường dẫn đến tập tin CSS”> đặt ở phần head (cặp thẻ <head></head> của các tập tin HTML) để có thể thực hiện nhúng tập tin CSS vào trang web.

css-la-gi

Các thuật ngữ phổ biến trong HTML bạn nên biết 

Bên cạnh việc nắm được khái niệm CSS là gì, người dùng cũng cần nắm những khái niệm trong HTML để hiểu rõ hơn về chúng. Trong đó có khá nhiều thuật ngữ tuy nhiên sẽ có 3 loại phổ biến bạn cần nắm đầu tiên đó là Elements, Tags, Attributes,… 

Elements

Elements là các chỉ định để xác định cấu trúc nội dung của đối tượng có trong trang web. Các yếu tố thường sử dụng có thể là cấp độ tiêu đề xác định từ cấp <h1> đến <h6>, đoạn văn (xác định là <p>) danh sách tiếp tục là <a>, <div>, <span>, <strong>, <em>. Đặc biệt tên mỗi Element được đặt bên trong dấu “<>”. 

Tags

Thẻ Tag là khái niệm tiếp theo bạn cần nắm. Theo đó, chúng ta sẽ sử dụng dấu “< >” bao quanh tên element tạo nên tag (tức là thẻ). Một thẻ mở sẽ đánh dấu một element bắt đầu, ví dụ <div>. Còn một thẻ đóng có chứa dấu gạch chéo ở phía sau dấu “<”, sẽ đánh dấu sự kết thúc của một element, ví dụ, </div>. nội dung nằm ở phần giữa thẻ mở với thẻ đóng chính là nội dung Element. 

Attributes

Attribute đóng vai trò cung cấp thông tin thuộc tính bổ sung cho một Elements. Những thuộc tính phổ biến thường được sử dụng là: 

  • id (xác định một element) 
  • class (phân loại element)
  • src (xác định nguồn của nội dung nhúng) 
  • href (cung cấp tham chiếu hyperlink đến tài nguyên liên kết) 

Những thuộc tính kể trên trong HTML sẽ được xác định ngay sau tên của thành phần và nằm bên trong thẻ mở. Ta có thể hiểu theo cách nói khác như sau, thuộc tính sẽ gồm tên và giá trị. Việc định dạng cho thuộc tính có tên của nó sẽ được đứng sau dấu “=”. Kế tiếp là giá trị thuộc tính, ví dụ: element <a> có thuộc tính href. css-la-gi

Các thuật ngữ phổ biến của CSS là gì?

Khi đã nắm được CSS là gì, bạn sẽ bắt đầu tìm hiểu đến các thuật ngữ liên quan. Một số khái niệm phổ biến mà bạn cần biết của ngôn ngữ CSS là selectors, properties, và values.

Selectors

Khi có yếu tố chèn vào trang web và được tạo kiểu bằng CSS thì Selector thực hiện việc chỉ định chính xác thành phần của HTML. Điều này giúp xác định đúng mục tiêu và kiểu áp dụng như sắc màu, kích thước hay vị trí.

Selector bao gồm nhiều vòng style không giống nhau kết hợp lại để chọn những vấn đề độc nhất, tùy thuộc theo mức độ nhất định theo mong muốn của người sử dụng. Ví dụ, người dùng chọn một đoạn xác định trên một trang hoặc chọn mỗi đoạn trên một trang.

Mỗi Selector thường có một giá trị thuộc tính mục đích, nổi bật nhất như một id, class hoặc loại phần tử (ví dụ <h1> hoặc <p>). Theo đó, các Selector sẽ theo sau dấu “{}” trong CSS.

Properties

Khi có bất kỳ phần tử nào được chọn thì thuộc tính xác định kiểu properties sẽ áp dụng cho nó. Tên của thuộc tính được đặt trong dấu sau “{}” của Selector và ngay trước dấu “:”. 

Có nhiều loại thuộc tính mà người dùng được phép sử dụng như color, width, background, height, font-size cùng một số thuộc tính mới khác.

Ví dụ đoạn code sau sẽ xác định các thuộc tính color, front-size áp dụng cho tất cả <p>:

p {

color: …;

font-size: …;

}

Values

Bạn có thể chọn một Element với Selector, đồng thời xác định kiểu thuộc tính sẽ áp dụng với Property. Tiếp theo, họ tiến hành xác định hành vi Property tương ứng với một giá trị Value. Những giá trị được xác định này sẽ là văn bản nằm giữa dấu “:” và dấu “;”.

Ví dụ: Nếu bạn chọn toàn bộ thuộc tính của <p>, giá trị thuộc tính front-size là 16 pixel và đặt giá trị thuộc tính color thành blue. Lúc này, đoạn mã có dạng như sau:

p {

color: blue;

font-size: 16px;

}

Trên đây là toàn bộ những kiến thức về CSS là gì và những thông tin liên quan đến CSS, HTML. Mong rằng những kiến thức Tophost cung cấp sẽ hữu ích cho bạn. Nếu còn bất kỳ thắc mắc nào khác, đừng ngại liên hệ với chúng tôi nhé! 

 

Leave a Comment

Email của bạn sẽ không được hiển thị công khai.

GỬI CÂU HỎI CHO CHÚNG TÔI

BÀI VIẾT LIÊN QUAN