CSS là gì? Cơ cấu bộ quy tắc CSS năm 2020 cần biết

CSS có vai trò quan trọng đối với website và có lẽ bạn cũng đã từng nghe qua về nó ở đâu đó. Nhưng để hiểu thật sự và tường tận về CSS thì không phải ai cũng biết. Hãy cùng LADIGI tìm hiểu về CSS là gì và lịch sử phát triển của nó nhé !

[toc]

1. CSS là gì

CSS (viết tắt từ cụm từ Cascading Style Sheets) là mã mà các bạn sử dụng để tạo kiểu cho Website. CSS cung cấp nền tảng cơ bản cho trang web của bạn để bắt đầu xây dựng. Cũng giống như là HTML, CSS không hẳn là một ngôn ngữ lập trình, không phải là một ngôn ngữ đánh dấu mà là kiểu ngôn ngữ định dạng kiểu.

CSS sẽ cung cấp hình thức và định dạng cho trang web. CSS sẽ giúp cho trang web của bạn trông đẹp hơn, bắt mắt hơn với phông chữ tùy thích, màu sắc đa dạng và hình nền đẹp hơn, thậm chí bạn có thể thêm cả hình động với những hiệu ứng 3D cho trang web thêm phần sống động.

Có lẽ tới đây bạn đã hiểu được phần nào khái niệm về CSS. Quá dễ phải không nào? Nhưng có lẽ rằng bạn vẫn đang tự hỏi rằng làm sao để tôi có thể sử dụng được ngôn ngữ lập trình này để phục vụ cho công việc. CSS là một trong những ngôn ngữ lập trình đơn giản dễ học nhưng bạn cũng cần phải có quá trình dài học tập, đầu tư vào nó. Chắc chắn rằng nhà tuyển dụng hay đồng nghiệp sẽ rất ấn tượng khi bạn sử dụng thành thạo CSS vì vậy hãy cố gắng nhé.

css là gì

CSS là ngôn ngữ lập trình cơ bản cho web

2. Lịch sử phát triển của CSS

Lịch sử phát triển của CSS là một quá trình dài đầy thử thách. CSS được Hakon Lie đề xuất lần đầu tiên vào tháng 10/1994. Hakon Lie là đồng nghiệp của Tim Berners- Lee  là người đặt nền móng cho internet với việc đề xuất phát triển ngôn ngữ HTML.

Trong thời điểm Hakon Lie đề xuất CSS cũng có rất nhiều đề xuất ngôn ngữ tạo kiểu mẫu khác. Nhưng cuối cùng tổ chức World Wide Web khuyến cáo sử dụng CSS và đã đưa ra phiên bản đặc tả đầu tiên CSS1.

Tháng 8/1996, Netscape là công ty phần mềm với trình duyệt đầu tiên trên thế giới đã trình diễn phiên bản thay thế cho CSS được gọi là Javascript Style Sheets. Tuy nhiên đặc tả này đã không nhận được sự hưởng ứng của cộng đồng.

Năm 1996, CSS được chấp nhận chính thức và công bố rộng rãi. Ngay từ những ngày đầu phát triển CSS đã gặp rất nhiều khó khăn nhất là vào năm 1996, Microsoft cho ra mắt IE3, giới hạn một số tính năng của CSS. Cho đến IE 4 cũng như Netscape 4X nó đã hỗ trợ nhiều hơn cho CSS mặc dù rằng vẫn còn một số lỗi. Sau nhiều cuộc tranh cãi, bàn luận  mà vẫn chưa giải quyết được các vấn đề còn tồn tại của CSS 1, nhà sản xuất đã nghiên cứu và cho ra đời CSS level 2 vào những năm 1997.

Từ tháng 5 /1998, CSS3 bắt đầu được đề cập và năm 2014 đã hoàn thiện. Cho đến tận IE 5 ra đời năm 2000 mới là phiên bản hỗ trợ đầy đủ nhất cho CSS1.

lịch sử css

CSS ra đời sớm và phát triển qua nhiều giai đoạn

3. Cơ cấu bộ quy tắc CSS

Toàn bộ cấu trúc CSS được gọi là bộ quy tắc. Người ta thường gọi là quy tắc cho ngắn gọn. Bộ quy tắc này có một số thành phần quan trọng mà chúng ta cần phải chú ý.

  • Bộ chọn Selector: Bộ chọn Selector là tên phần tử HTML bắt đầu của bộ quy tắc. Nó sẽ chọn xem phần tử nào được tạo kiểu. Như vậy thì để tạo kiểu cho một phần tử khác thì bạn chỉ cần thực hiện theo thao tác là thay đổi bộ chọn. Trong trường hợp ví dụ trên phần tử được tạo kiểu là phần tử p.
  • Tuyên bố Declaration: Một quy tắc như: color: red; sẽ xác định cho thuộc tính của phần tử bạn muốn tạo kiểu.
  • Thuộc tính Properties: Các cách mà bạn tạo kiểu cho phần tử HTML. Trong CSS bạn sẽ chọn thuộc tính mà bạn đang muốn tác động đến trong quy tắc của mình.
  • Giá trị thuộc tính: Bên phải thuộc tính sau dấu hai chấm chúng ta sẽ có giá trị thuộc tính, mà chọn thuộc tính cụ thể.

Chúng ta cũng cần phải lưu ý đến những điều quan trọng của cú pháp:

  • Bộ quy tắc ngoài bộ chọn phải được nằm trong dấu ngoặc nhọn {}.
  • Trong khai báo cần phải sử dụng dấu hai chấm (:) để tách các thuộc tính ra khỏi giá trị của nó.
  • Trong mỗi bộ quy tắc chúng ta cần phải sử dụng dầu chấm phẩy (;) để có thể phân biệt cho quy tắc khai báo kế tiếp.

quy tắc css web

Ví dụ minh họa cho bộ quy tắc CSS (1)

quy tắc css web

Ví dụ minh họa cho bộ quy tắc CSS (2)

4. Tại sao bạn cần học CSS

4.1. Thiết kế email độc đáo cho khách hàng

Email hiện nay đang được xem là một trong những công cụ Marketing Online vô cùng đắc lục. Bạn có thể tạo ra email độc đáo hơn, theo ý thích khách hàng dễ dàng bởi nó được sử dụng bằng định dạng CSS.

4.2. Tạo bản tin cho công ty

Sau khi đã gây ấn tượng với cấp trên và đồng nghiệp bởi email độc đáo bạn có thể sáng tạo hơn với mẫu bản tin công ty. CSS là vũ khí bí mật giúp bạn căn chỉnh bố cục và tùy chỉnh mẫu phù hợp với thương hiệu công ty bạn.

4.3. Tinh chỉnh trang Web WordPress

Như chúng ta đã biết thì đa số các trang web của công ty hiện nay sẽ được xây dựng trên nền tảng của WordPress. Nếu như bạn hiểu biết kiến thức cơ bản về CSS bạn có thể dùng chúng để thiết kế website, thêm vào nội dung và thay đổi trang web của công ty. Tinh chỉnh trang web WordPress theo ý muốn của mình sẽ dễ dàng hơn khi biết code CSS. Giúp Website của bạn đẹp, bắt mắt hơn, trải nghiệm cho người dùng tốt hơn, từ đó cải thiện được thứ hạng từ khóa SEO của website.

4.4. Xây dựng blog Tumblr hoàn chỉnh

Nếu như bạn đang muốn biến đam mê lập trình thành nghề nghiệp của mình thì hãy thiết lập blog Tumblr để đưa lên những kết quả của bạn làm được. Nếu như bạn đang muốn gửi sản phẩm thiết kế tới nhà tuyển dụng, bạn có thể thực hiện qua cách này cũng rất ấn tượng. Có kiến thức CSS bạn có thể lấy được mẫu Tumblr tạo ra sản phẩm độc đáo của chính mình.

4.5. Nâng cao kỹ năng thiết kế – học được nhiều hơn

Nếu như bạn giỏi về Photoshop bạn có thể tạo ra mockup ấn tượng về trang web của mình. Biết thêm CSS sẽ giúp biến những mockup đó thành các trang thực tế. Bạn sẽ trở thành nhà thiết kế biết làm lập trình mà nhiều công ty đang săn lùng.

CSS cũng là nền tảng web, hiểu được nền tảng giúp bạn dễ dàng học lên ở mức độ cao hơn. Bạn có thể tiếp cận được với các ngôn ngữ lập trình khác như Java, PHP nhanh hơn đồng nghĩa với cơ hội nghề nghiệp cũng nhiều hơn.

Tổng kết

CSS là ngôn ngữ nền tảng rất quan trọng và có nhiều ứng dụng trong thực tế. Hiểu được CSS là cơ sở vững chắc giúp bạn tìm hiểu những ngôn ngữ lập trình khác dễ dàng hơn.

Thuật ngữ cần biết

css, border css, css là gì, animation css, position trong css, css selector, flex css, transition css, position css, background image css, hover css, background css, animate css, css animation, transform css, display css, responsive css, css color, minify css, css background image, css transition, important css, css border, button css, jquery css, cursor css, overflow trong css, table css, overflow css, margin css, gradient css, bảng màu css, opacity css, bootstrap css, css box shadow, color css, css position, placeholder css, padding css, box shadow css, reset css, css gradient, @media css, css grid, css jquery, css flex, float css, css background, scroll css, css important

Bài viết cùng chủ đề

100 lần tự tìm hiểu cũng không bằng 1 lần được tư vấn




    Trả lời

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *