CSS là gì?

CSS là gì

CSS là viết tắt của Cascading Style Sheets. Nó là ngôn ngữ để mô tả cách trình bày của các trang Web, bao gồm màu sắc, bố cục và phông chữ, do đó làm cho các trang web của bạn hiển thị thân thiện và đẹp mắt tới người dùng.

CSS được thiết kế để tạo các biểu định kiểu cho web. Nó độc lập với HTML và có thể được sử dụng với bất kỳ ngôn ngữ Markup dựa trên XML nào. Bây giờ chúng ta hãy thử tìm hiểu các từ viết tắt:

        Cascading: Falling of Styles

        Style: Thêm thiết kế / Tạo kiểu cho các thẻ HTML của chúng tôi

        Sheets: Viết phong cách của bạn trong các tài liệu khác nhau

Lịch sử CSS

Trước khi phát triển CSS vào năm 1996 bởi Tổ chức World Wide Web Consortium (W3C), các trang Web rất hạn chế về cả hình thức và chức năng. Các trình duyệt ban đầu trình bày một trang dưới dạng siêu văn bản - văn bản thuần túy, hình ảnh và liên kết đến các trang siêu văn bản khác. Không có bố cục nào để nói, chỉ đơn thuần là các đoạn văn chạy trên trang trong một cột duy nhất.

CSS cho phép một số đổi mới đối với bố cục trang web, chẳng hạn như khả năng:

Chỉ định phông chữ khác với phông chữ mặc định cho trình duyệt

Chỉ định màu sắc và kích thước của văn bản và liên kết

Áp dụng màu sắc cho nền

Chứa các phần tử trang web trong các hộp và chuyển các hộp đó đến các vị trí cụ thể trên trang

Họ đặt "phong cách" trong các trang định kiểu, và lần đầu tiên, các trang Web có thể được thiết kế.

Trình duyệt thương mại đầu tiên đọc và sử dụng CSS là Internet Explorer 3 của Microsoft vào năm 1998. Cho đến ngày nay, việc hỗ trợ các chức năng CSS nhất định khác nhau giữa các trình duyệt. W3C, vẫn giám sát và tạo ra các tiêu chuẩn Web, gần đây đã phát hành một tiêu chuẩn mới cho CSS - CSS3. Với CSS3, các nhà phát triển hy vọng rằng tất cả các trình duyệt chính sẽ đọc và hiển thị mọi hàm CSS theo cùng một cách.

CSS hoạt động như thế nào?

Để hiểu cơ bản về cách hoạt động của CSS, trước tiên bạn phải hiểu một chút về HTML. Các nhà phát triển web sắp xếp các trang theo "mô hình khối". Trang Web là một chuỗi các khối, mỗi khối chứa một phần tử rời rạc. Các khối này được lồng vào nhau, bên trong khối khác.

Ví dụ: tiêu đề của trang là một khối và nó chứa một số khối nhỏ hơn bao gồm tất cả các yếu tố tạo nên tiêu đề: biểu trưng, ​​điều hướng, nút mạng xã hội, nút giỏ hàng, v.v. Bằng cách sử dụng CSS, nhà phát triển chỉ định kiểu cho " hộp tiêu đề ". Trong ví dụ này, giả sử rằng nhà phát triển làm cho văn bản bên trong tiêu đề có màu tím, phông chữ Arial và cao 15px.

Đây là nơi mà phần "xếp tầng" của các lớp kiểu xếp tầng phát huy tác dụng. Các kiểu phông chữ được áp dụng cho tiêu đề phân tầng xuống tất cả các phần tử có bên trong tiêu đề. Các phần tử chứa văn bản như điều hướng, liên kết hoặc lời kêu gọi hành động đều sẽ có màu tím, Arial và 15px

Ưu điểm của CSS

Có nhiều lý do khiến bạn muốn sử dụng CSS trong thiết kế web. Đầu tiên, CSS có thể giúp bạn tiết kiệm thời gian. Khi bạn đã tạo một kiểu xác định, bạn có thể sử dụng nó nhiều lần. Cách tốt nhất cho CSS là lưu nó dưới dạng tệp .css, tách biệt với tệp .html của bạn. Sau đó, biểu định kiểu có thể được liên kết với tệp HTML của bạn. Khi bạn tìm thấy một phong cách mà bạn thích, bạn có thể áp dụng nó cho bao nhiêu trang tùy thích.

Thứ hai, CSS hiệu quả. Chỉ cần một vài dòng mã để xác định phong cách trên trang web, điều này giúp tăng tốc thời gian tải và giữ cho tệp tương đối nhẹ. Cuối cùng, người dùng dễ dàng tìm hiểu và cập nhật, điều này làm cho các thay đổi toàn cầu về phong cách trở nên đơn giản và nhanh chóng.

Các loại CSS

Có ba kiểu tạo kiểu CSS: nội bộ, bên ngoài và nội tuyến. Các loại CSS đề cập đến cách CSS được triển khai. CSS nội bộ, còn được gọi là CSS nhúng, là thực hành chèn mã CSS vào phần của tài liệu HTML để xác định một trang web cụ thể.

Mặc dù biểu định kiểu nội bộ là một cách hay để có tất cả mã trong một tệp, nhưng nó làm cho tệp đó khá lớn và không cho phép áp dụng các thay đổi kiểu trên toàn cầu trên các trang web khác nhau. Bạn có thể thấy rằng nếu bạn muốn thực hiện thay đổi đối với một phần tử trên một vài trang, bạn sẽ dễ mắc lỗi khi sử dụng biểu định kiểu nội bộ.

Loại CSS thứ hai là bên ngoài, trong đó biểu định kiểu được giữ trong một tệp tách biệt với mã HTML. Như chúng ta đã thảo luận trước đó, đây là loại CSS ưa thích của nhiều nhà phát triển và công ty.

Nếu bạn hoặc nhóm của bạn đang làm việc trong một dự án lớn hoặc có một trang web công ty lớn, việc chuẩn hóa phong cách sẽ rất quan trọng. Giữ kiểu riêng biệt với cấu trúc có nghĩa là các thay đổi kiểu toàn cục có thể được thực hiện một cách hiệu quả và chính xác hơn so với bảng định kiểu nội bộ.

Loại cuối cùng, CSS nội tuyến, là nơi mã CSS được áp dụng trong mã HTML nhưng không được áp dụng chung cho một phần tử cụ thể. Thay vào đó, mã CSS được sử dụng trong mã HTML để thay đổi một phần tử.

Nói chung, CSS nội tuyến không được khuyến khích. Nhưng khi bạn đang phát triển một trang web và bạn muốn sửa đổi một phần tử duy nhất, bạn có thể sử dụng CSS nội tuyến. Trong một trường hợp khác, nếu có một lỗi trên một trang web và bạn cần phải sửa nó nhanh chóng, CSS nội tuyến có thể là chiếc vé - nghĩa là, cho đến khi bạn có thể quay lại sau và khắc phục sự cố trên toàn cầu bằng CSS bên ngoài.