Rate this post
CSS là chữ viết tắt của thuật ngữ Cascading Style Sheets. Nó kiểm soát các khía cạnh trực quan của các trang web, cho phép các nhà thiết kế chọn phông chữ, màu sắc, bố cục và hơn thế nữa. Cùng với HTML và JavaScript, CSS là một phần của các khối cơ bản của phát triển web.
Bạn có thể tự hỏi mình, “Tôi đã sử dụng CSS trước đây chưa?”
câu trả lời chắc chắn là đúng. CSS thêm phong cách cho trang web của bạn. Nếu không có nó, bạn sẽ chỉ thấy các phần tử HTML nhạt nhẽo không có cấu trúc, không có màu sắc và các dòng văn bản và hình ảnh được trộn lẫn vào nhau. Điều đó không hấp dẫn lắm phải không? CSS bước vào để cung cấp cho trang web của bạn sự thay đổi cần thiết. Các tệp CSS biến trang web của bạn từ một tài liệu nhạt nhẽo thành một tác phẩm nghệ thuật.
Các bài viết liên quan:
Vì vậy, hãy tiếp tục, chuẩn bị sẵn nguồn cung cấp nghệ thuật kỹ thuật số của chúng tôi và bắt đầu vẽ một bức tranh tuyệt đẹp về hành trình của chúng tôi trong lĩnh vực công nghệ bằng cách tìm hiểu về mục đích của CSS.
CSS là gì?
Trình bày màu và bố cục trang web.
CSS ảnh hưởng đến các yếu tố khác nhau trong tài liệu đánh dấu bao gồm màu sắc, phông chữ, đường viền và lề.
CSS là viết tắt của Cascading Style Sheets. Nó là một ngôn ngữ tạo kiểu điều khiển nhiều yếu tố hình ảnh cho một trang web.
Trước khi có CSS, các nhà phát triển đã gặp khó khăn khi làm việc với mã HTML để định dạng nội dung của họ trong một tài liệu, và thậm chí sau đó nội dung còn rất hạn chế. HTML chỉ nhằm mục đích chỉ là một ngôn ngữ đánh dấu để liên kết các tài liệu trực tuyến khác nhau với nhau. HTML không bao giờ được dùng để định dạng một trang.
Khi HTML 3.2 trình bày các thẻ định dạng kiểu cho các thuộc tính như phông chữ, nó đã gây khó khăn cho các nhà phát triển. Các lập trình viên sẽ dành một quá trình dài và tốn kém để mã hóa các trang mã HTML dài. Điều này gây khó khăn cho việc tìm lỗi trong cú pháp HTML nếu trang web xảy ra sự cố.
World Wide Web Consortium (W3C) đã nhận thấy điều này và đã thông qua CSS để giải quyết vấn đề. Sau đó, họ tiếp tục thành lập Nhóm làm việc CSS dành riêng để phát triển phiên bản CSS mà chúng ta có ngày nay.
CSS đã làm cho HTML và thế giới công nghệ nói chung ủng hộ và loại bỏ tất cả các thẻ HTML định dạng kiểu khỏi trang và thay thế chúng bằng danh sách các quy tắc được gọi là trang định kiểu.
Nếu bạn nghĩ về sự phát triển của một ngôi nhà hoặc bất kỳ loại tòa nhà nào, HTML đại diện cho cấu trúc cơ bản của tòa nhà: tường, cầu thang và cửa ra vào. CSS sẽ đại diện cho màu sơn, đồ trang trí và phong cách của tòa nhà. Trong khi HTML cung cấp cấu trúc cơ sở của bạn, CSS cung cấp phong cách cho trang web của bạn— làm cho nó nổi bật giữa các trang web khác trên Internet.
Kiểu bao gồm màu nền, bố cục và thậm chí cả kiểu hiển thị cho nhiều loại thiết bị khác nhau. Bạn thậm chí có thể thêm hình ảnh động với khung hình chính CSS. Ngoài ra, CSS hoàn toàn tách biệt với HTML và nó có thể được sử dụng bởi bất kỳ ngôn ngữ đánh dấu nào, bao gồm XHTML (một biến thể của HTML) và XML (Ngôn ngữ đánh dấu mở rộng).
CSS hoạt động như thế nào?
CSS mang lại phong cách cho các trang web của bạn bằng cách tương tác với các thành phần HTML riêng lẻ được gọi là các phần tử. Ngôn ngữ cho phép tách nội dung và trình bày. Điều này cải thiện khả năng truy cập và hiệu suất trong xử lý trang web. Nó cũng cung cấp tính linh hoạt hơn trên nhiều trang và giảm sự lặp lại và khó khăn trong mã HTML. Các nhà phát triển tạo kiểu CSS của họ thông qua trình xử lý văn bản hoặc trình soạn thảo văn bản và liên kết CSS với HTML theo ba cách khác nhau.
External CSS, phương pháp được khuyến nghị nhất, được lưu dưới dạng tệp riêng biệt từ tài liệu HTML với phần mở rộng .css. Sau đó, mọi trang HTML sẽ kéo các quy tắc kiểu chỉ từ một tham chiếu CSS. Phương pháp này được khuyến nghị nếu bạn có một số quy tắc có thể trải dài trên nhiều trang trên trang web của mình. Để sử dụng biểu định kiểu bên ngoài, bạn bao gồm thẻ liên kết trong phần tiêu đề của tệp HTML nguồn đến tệp .css của bạn.
Internal CSS được bao gồm trong phần tiêu đề của tệp HTML của bạn nhưng trong thẻ định kiểu. Các biểu định kiểu nội bộ được khuyến nghị nếu bạn có một trang duy nhất với một vài quy tắc duy nhất đối với các trang khác trên trang web của bạn.
Inline CSS nằm trong các phần tử trong tệp HTML của bạn. Đây là những đoạn CSS nhỏ được viết vào mã. Các biểu định kiểu nội tuyến chỉ nên được sử dụng khi kiểu là một phiên bản mã hóa duy nhất trong toàn bộ trang web của bạn.
Làm cách nào để sử dụng CSS?
CSS có thể ảnh hưởng đến một số trang của trang web chỉ với một tệp. Điều này bao gồm việc khai báo các kiểu dáng cho các thiết bị và kích thước màn hình khác nhau.
Cú pháp CSS đơn giản và bao gồm một tài liệu văn bản thuần túy được gọi là biểu định kiểu. Các trang định kiểu được tách thành các khối mã được gọi là quy tắc. Quy tắc CSS bao gồm hai phần để làm việc với mã HTML.
- Phần đầu tiên của quy tắc CSS là selector. selector khai báo phần tử nào trong tài liệu HTML mà nhà phát triển muốn tạo kiểu. Bạn có thể gọi quy tắc bằng selector áp dụng cho các đoạn văn (được xác định bằng thẻ ‘p’) và nó sẽ ảnh hưởng đến tất cả các đoạn trong tài liệu HTML của bạn.
Các selector áp dụng cho HTML theo hai cách. Bạn có thể áp dụng phong cách của mình cho tất cả các yếu tố trên trang web như đã đề cập trước đó hoặc áp dụng nó cho một số trang nhất định trong một trang thông qua các thuộc tính. selector CSS cho các thuộc tính HTML được xác định ở hai dạng: id và class.
Id ảnh hưởng đến một số nhận dạng duy nhất trong tài liệu. Chúng sẽ được đánh dấu bằng ký hiệu ‘#’. Id không thể chia sẻ cùng một tên nhận dạng với một id khác trong tài liệu. Nếu bạn muốn sử dụng cùng một tên định danh cho nhiều phần tử trong tài liệu, bạn sẽ sử dụng thuộc tính class. Ký hiệu ‘.’ Đại diện cho thuộc tính lớp mà bạn muốn tạo kiểu trong mã CSS của mình. Cả hai thuộc tính đều phân biệt chữ hoa chữ thường và bắt đầu bằng các ký hiệu và chữ cái nhận dạng của chúng. Chúng có thể bao gồm các ký tự chữ và số, dấu gạch nối và dấu gạch dưới trong tên của chúng.
- Phần thứ hai của quy tắc CSS là khối khai báo. Khối này là một danh sách các khai báo bao gồm một thuộc tính, một giá trị và dấu hai chấm giữa hai mục. Các khai báo này được bao quanh bởi dấu ngoặc nhọn hoặc dấu ngoặc nhọn trong quy tắc CSS.
Thuộc tính là các mục bị ảnh hưởng trong selector. Chúng bao gồm, nhưng không giới hạn, kích thước phông chữ, màu sắc, bố cục và lề. Các thuộc tính được chỉ định trong tiêu chuẩn CSS và có một tập hợp các giá trị có thể có. Giá trị là cài đặt mà bạn muốn chèn vào thuộc tính của mình để thay đổi cách trình bày của chúng trên trang HTML. Giá trị có thể là một loạt các từ khóa, giá trị số hoặc phép đo.
Nếu nhiều khai báo được bao gồm trong một khối, dấu chấm phẩy phải tách từng khai báo để chúng hoạt động trong quy tắc.
Bây giờ chúng ta đã biết quy tắc CSS là gì và nó bao gồm những gì, chúng ta cần tìm hiểu thứ tự chạy của CSS. Đây là nơi mà “phân tầng” trong CSS xuất hiện.
Bạn có thể bao gồm một số quy tắc trên nhiều trang định kiểu, nhưng nếu chúng xung đột với nhau thì sao? Khi điều này xảy ra, các kiểu sẽ phân tầng thành các kiểu mới bằng cách sử dụng thứ tự ưu tiên để xác định mã HTML trả lời cho kiểu nào. Các mức độ ưu tiên là:
- Ưu tiên 1: Kiểu nội tuyến
- Ưu tiên 2: Bảng định kiểu bên ngoài và bên trong
- Ưu tiên 3: Mặc định của trình duyệt
Nhưng nếu bạn có hai kiểu có cùng mức độ ưu tiên thì sao? Việc thực thi hai kiểu có mức độ ưu tiên tương tự nhau sẽ làm cho mã chạy từ trên xuống dưới. Do đó, người cuối cùng được ưu tiên cao nhất.
Làm cách nào để bắt đầu học CSS?
CSS, cùng với HTML, rất dễ sử dụng khi bạn muốn bắt đầu học mã. Có rất nhiều tài nguyên có sẵn trên Web để bạn có thể bắt đầu học CSS.
W3Schools và Mozilla Developer Network rất hữu ích khi bạn tìm hiểu các khái niệm về ngôn ngữ lập trình. Họ cung cấp các hướng dẫn và bài viết trực tuyến về các ngôn ngữ như CSS.
Để bắt đầu phát triển trí não bằng cú pháp và học những kiến thức cơ bản, bạn nên sử dụng các ứng dụng như Grasshopper, SoloLearn và Codecademy. Các ứng dụng này có sẵn ở cả định dạng trình duyệt và điện thoại di động. Họ cung cấp nhiều hoạt động để giúp bạn hiểu cơ bản về các ngôn ngữ như HTML và CSS.
Khi bạn cảm thấy muốn đẩy mạnh hơn một chút, hãy xem tài nguyên trực tuyến miễn phí tốt nhất để học phát triển web tại freeCodeCamp. Tổ chức phi lợi nhuận này giúp người mới bắt đầu học viết mã thông qua các khóa học và tài nguyên trực tuyến miễn phí ở nhiều định dạng phương tiện khác nhau.
Tóm lược
CSS cung cấp cách trình bày, ký tự và tính cách trong một trang web. Bạn sẽ không muốn ra ngoài trông đơn giản và nhạt nhẽo. Bạn sẽ không muốn ngôi nhà của mình, ô tô của bạn hoặc bất cứ thứ gì đại diện cho những gì bạn đang có để thiếu phong cách. Ngay cả khi bạn chỉ đặt một lá cờ trên xe hơi của bạn hoặc một vòng hoa trên cửa trước của bạn, đó là một cái gì đó cung cấp phong cách.
Khái niệm tương tự áp dụng cho các trang web của bạn. CSS cung cấp cho bạn khả năng sử dụng màu sắc, phông chữ và bố cục để xây dựng các trang web hấp dẫn cho công chúng. Nó cũng giúp giảm bớt khối lượng công việc cho các nhà phát triển bằng cách tách định dạng kiểu khỏi cấu trúc thực tế của trang web. Vì vậy, nếu bạn gặp bất kỳ vấn đề nào với mã của mình, bạn có thể tìm ra vấn đề của mình nằm ở đâu đơn giản bằng các tệp mã hóa riêng biệt. Không cần phải mất hàng giờ để tìm lỗi cú pháp trong một tài liệu dài.
