Cascading Style Sheets là gì?
Trang web bao gồm một số phần riêng lẻ, bao gồm hình ảnh, văn bản và nhiều tài liệu khác nhau. Các tài liệu này không chỉ bao gồm các tài liệu có thể được liên kết từ các trang khác nhau, như tệp PDF, mà còn các tài liệu được sử dụng để tự xây dựng các trang, như tài liệu HTML để xác định cấu trúc của trang và tài liệu CSS (Cascading Style Sheet) để đọc chính tả giao diện của một trang. Bài viết này sẽ nghiên cứu về CSS, bao gồm những gì nó được và nó được sử dụng trên các trang web ngày nay.
Bài học lịch sử CSS
CSS lần đầu tiên được phát triển vào năm 1997 như là một cách để các nhà phát triển web xác định sự xuất hiện trực quan của các trang web mà họ đang tạo ra. Nó được thiết kế để cho phép các chuyên gia web tách riêng nội dung và cấu trúc mã của một trang web khỏi thiết kế trực quan, một cái gì đó mà trước đó không thể thực hiện được.
Việc tách cấu trúc và kiểu dáng cho phép HTML thực hiện nhiều chức năng mà ban đầu nó dựa trên - đánh dấu nội dung, mà không phải lo lắng về thiết kế và bố cục của trang, cái gì đó thường được gọi là "giao diện" của trang.
CSS đã không được phổ biến cho đến khoảng năm 2000, khi các trình duyệt web bắt đầu sử dụng nhiều hơn các khía cạnh phông chữ và màu cơ bản của ngôn ngữ đánh dấu này. Ngày nay, tất cả các trình duyệt hiện đại đều hỗ trợ tất cả CSS cấp 1, hầu hết CSS cấp 2 và thậm chí hầu hết các khía cạnh của CSS cấp 3. Khi CSS tiếp tục phát triển và các kiểu mới được giới thiệu, các trình duyệt web đã bắt đầu triển khai các mô-đun mang hỗ trợ CSS mới vào các trình duyệt đó và cung cấp cho các nhà thiết kế web các công cụ tạo kiểu mới mạnh mẽ để làm việc.
Trong (nhiều) năm trước, đã có một số nhà thiết kế web từ chối sử dụng CSS để thiết kế và phát triển các trang web, nhưng thực tế đó là tất cả nhưng đã biến mất khỏi ngành công nghiệp hiện nay. CSS hiện là tiêu chuẩn được sử dụng rộng rãi trong thiết kế web và bạn sẽ khó có thể tìm thấy bất kỳ ai làm việc trong ngành ngày nay, những người không có ít nhất một hiểu biết cơ bản về ngôn ngữ này.
CSS là tên viết tắt
Như đã đề cập, thuật ngữ CSS là viết tắt của "Cascading Style Sheet". Hãy chia cụm từ này xuống một chút để giải thích đầy đủ hơn về những tài liệu này.
Từ "style sheet" đề cập đến chính tài liệu (như HTML, các tệp CSS thực sự chỉ là các tài liệu văn bản có thể được chỉnh sửa với nhiều chương trình). Phong cách tờ đã được sử dụng cho thiết kế tài liệu trong nhiều năm. Chúng là các thông số kỹ thuật cho bố cục, cho dù in hay trực tuyến. Các nhà thiết kế in đã sử dụng các tờ định kiểu dài để đảm bảo rằng các thiết kế của chúng được in chính xác theo các thông số kỹ thuật của chúng. Một bảng định kiểu cho một trang web phục vụ cùng một mục đích, nhưng với chức năng bổ sung cũng cho trình duyệt web biết cách hiển thị tài liệu. Ngày nay, các tờ định kiểu CSS cũng có thể sử dụng truy vấn phương tiện để thay đổi cách trang tìm kiếm các thiết bị và kích thước màn hình khác nhau . Điều này cực kỳ quan trọng vì nó cho phép một tài liệu HTML đơn lẻ được hiển thị khác nhau theo màn hình đang được sử dụng để truy cập nó.
Cascade là phần thực sự đặc biệt của thuật ngữ "cascading style sheet". Một tờ định kiểu web được thiết kế để xếp tầng thông qua một loạt các kiểu trong trang tính đó, giống như một con sông trên thác nước. Nước trong dòng sông chạm vào tất cả các tảng đá trong thác nước, nhưng chỉ những dòng nước ở dưới đáy mới ảnh hưởng chính xác nơi nước sẽ chảy. Điều tương tự cũng đúng với việc xếp tầng trong các tờ kiểu trang web.
Mỗi trang web bị ảnh hưởng bởi ít nhất một trang mẫu, ngay cả khi nhà thiết kế web không áp dụng bất kỳ kiểu nào. Bảng định kiểu này là biểu định kiểu tác nhân người dùng - còn được gọi là kiểu mặc định mà trình duyệt web sẽ sử dụng để hiển thị trang nếu không có hướng dẫn nào khác được cung cấp. Ví dụ: theo các siêu liên kết mặc định được tạo kiểu bằng màu xanh lam và chúng được gạch dưới. Các kiểu này xuất phát từ một biểu định kiểu mặc định của trình duyệt web. Tuy nhiên, nếu nhà thiết kế web cung cấp các hướng dẫn khác, trình duyệt sẽ cần phải biết hướng dẫn nào được ưu tiên. Tất cả các trình duyệt đều có kiểu mặc định riêng, nhưng nhiều kiểu mặc định (như các liên kết văn bản được gạch chân màu xanh) được chia sẻ trên tất cả hoặc hầu hết các trình duyệt và phiên bản chính.
Ví dụ khác về mặc định của trình duyệt, trong trình duyệt web của tôi, phông chữ mặc định là " Times New Roman " được hiển thị ở kích thước 16. Gần như không có trang nào tôi truy cập hiển thị trong họ phông chữ và kích thước đó. Điều này là do các tầng định nghĩa rằng các phong cách thứ hai tờ, được thiết lập bởi các nhà thiết kế mình, để xác định lại kích thước phông chữ và gia đình, trọng các mặc định của trình duyệt web của tôi. Bất kỳ tờ mẫu nào bạn tạo cho trang web sẽ có độ đặc hiệu cao hơn kiểu mặc định của trình duyệt, vì vậy các mặc định này sẽ chỉ áp dụng nếu biểu định kiểu của bạn không ghi đè chúng. Nếu bạn muốn liên kết màu xanh và gạch dưới, bạn không cần phải làm gì vì đó là mặc định, nhưng nếu tệp CSS của trang web của bạn cho biết liên kết phải có màu xanh, màu đó sẽ ghi đè màu xanh mặc định. Gạch dưới sẽ vẫn còn trong ví dụ này, vì bạn không chỉ định khác.
CSS được sử dụng ở đâu?
CSS cũng có thể được sử dụng để xác định các trang web sẽ trông như thế nào khi được xem trong các phương tiện khác so với trình duyệt web. Ví dụ: bạn có thể tạo một bảng định kiểu in sẽ xác định cách trang web sẽ in ra. Vì các mục trang web như các nút điều hướng hoặc biểu mẫu web sẽ không có mục đích trên trang được in, nên có thể sử dụng Bảng Kiểu In để "tắt" các khu vực đó khi in một trang. Mặc dù thực sự không phổ biến trên nhiều trang web, nhưng tùy chọn tạo ra các trang in phong cách là mạnh mẽ và hấp dẫn (theo kinh nghiệm của tôi). ).
Tại sao CSS lại quan trọng?
CSS là một trong những công cụ mạnh mẽ nhất mà một nhà thiết kế web có thể học vì với nó, bạn có thể ảnh hưởng đến toàn bộ diện mạo hình ảnh của một trang web. Các bảng kiểu được viết tốt có thể được cập nhật nhanh chóng và cho phép các trang web thay đổi thứ tự ưu tiên trên màn hình, từ đó hiển thị giá trị và tiêu điểm cho khách truy cập, mà không cần thay đổi gì đối với đánh dấu HTML cơ bản.
Thách thức chính của CSS là có khá nhiều thứ để tìm hiểu - và với các trình duyệt thay đổi mỗi ngày, những gì hoạt động tốt ngày hôm nay có thể không có ý nghĩa vào ngày mai vì các kiểu mới được hỗ trợ và những kiểu khác bị loại bỏ hoặc không được ưu tiên vì một lý do nào đó .
Vì CSS có thể xếp và kết hợp, và xem xét cách các trình duyệt khác nhau có thể diễn giải và thực hiện các chỉ thị khác nhau, CSS có thể khó khăn hơn HTML thuần túy để làm chủ. CSS cũng thay đổi trong các trình duyệt theo cách HTML thực sự không. Một khi bạn bắt đầu sử dụng CSS, tuy nhiên, bạn sẽ thấy rằng khai thác sức mạnh của các tờ định kiểu sẽ cung cấp cho bạn sự linh hoạt không thể tin được trong cách bạn bố trí các trang web và xác định giao diện của chúng. Trên đường đi, bạn sẽ tích lũy một "thủ thuật" về phong cách và cách tiếp cận đã làm việc cho bạn trong quá khứ và bạn có thể quay lại khi bạn xây dựng các trang web mới trong tương lai.
Bài báo gốc của Jennifer Krynin. Biên tập bởi Jeremy Girard vào 7/5/17,