Mặc dù hầu hết các cuộc thảo luận về CSS trên web (hoặc thậm chí ở đây trên Thủ thuật CSS) đều tập trung vào phong cách viết và cách tầng ảnh hưởng đến chúng, nhưng điều chúng ta không nói nhiều là phần trang tính của ngôn ngữ. Vì vậy, hãy làm nổi bật chữ “S” thứ hai cô đơn đó một chút và hiểu ý của chúng tôi khi chúng tôi nói CSS là một biểu định kiểu

Trang tính chứa các kiểu

Tầng mô tả cách các kiểu tương tác với nhau. Các phong cách tạo nên mã thực tế. Sau đó, có trang tính chứa mã đó. Giống như một tờ giấy mà chúng ta viết trên đó, “tờ” của CSS là tệp kỹ thuật số nơi các kiểu được mã hóa

Nếu chúng ta minh họa điều này, thì mối quan hệ giữa ba loại hình thành một tầng

Có thể có nhiều trang tính, tất cả tiếp tục nhiều kiểu, tất cả được liên kết với một tài liệu HTML. Sự kết hợp của những thứ đó và quá trình tìm ra kiểu nào được ưu tiên để tạo kiểu cho phần tử nào được gọi là tầng (chữ “C” đầu tiên đó trong CSS)

Trang tính là một tệp kỹ thuật số

Trang tính là một thứ đặc biệt đến nỗi nó được cung cấp phần mở rộng tệp riêng. .css. Bạn có quyền tự tạo các tệp này. Tạo tệp CSS có thể được thực hiện trong bất kỳ trình soạn thảo văn bản nào. Chúng thực sự là các tệp văn bản. Không phải tài liệu "văn bản đa dạng thức" hoặc tài liệu Word, mà là văn bản thuần túy

Nếu bạn đang dùng Mac, thì bạn có thể kích hoạt TextEdit để bắt đầu viết CSS. Chỉ cần đảm bảo rằng nó ở chế độ “Văn bản thuần túy”

Nếu bạn đang dùng Windows, ứng dụng Notepad mặc định là tương đương. Rất tiếc, bạn có thể nhập các kiểu trong bất kỳ trình soạn thảo văn bản đơn giản nào để viết CSS, ngay cả khi đó không phải là những gì nó nói rằng nó được thiết kế để làm.

Dù bạn sử dụng công cụ nào, điều quan trọng là lưu tài liệu của bạn dưới dạng tệp .css. Điều này thường có thể được thực hiện bằng cách thêm nó vào tên tệp của bạn khi lưu. Đây là giao diện của nó trong TextEdit

Nghiêm túc mà nói, việc lựa chọn sử dụng trình soạn thảo văn bản nào để viết CSS hoàn toàn phụ thuộc vào bạn. Có rất nhiều, rất nhiều để lựa chọn, nhưng đây là một vài cái phổ biến

• Văn bản tuyệt vời
• nguyên tử
• VIM
• PhpStorm
• coda
• thợ dệt mộng

Bạn có thể tiếp cận một trong số đó vì chúng sẽ làm những việc hữu ích cho bạn như đánh dấu cú pháp mã (tô màu các phần khác nhau để giúp bạn dễ hiểu hơn là gì)

Này, tôi đã tạo một số tệp hoàn toàn từ đầu bằng trình soạn thảo văn bản của mình

Những tệp đó hợp lệ 100% trong mọi trình duyệt web, mới hay cũ. Chúng tôi vừa tạo một trang web theo đúng nghĩa đen

Trang tính được liên kết với HTML

Mặc dù vậy, chúng tôi cần kết nối HTML và CSS. Để đảm bảo rằng các kiểu chúng tôi đã viết trong trang tính của mình được tải lên trang web

Một trang web không có CSS ​​là khá đơn giản

Xem trang web Pen Style-less của Geoff Graham (@geoffgraham) trên CodePen

Khi chúng tôi liên kết tệp CSS, voila

Xem trang web Pen With Styles của Geoff Graham (@geoffgraham) trên CodePen

Làm thế nào điều đó xảy ra?

Mặc dù mã bên trong có thể trông kỳ quặc, nhưng thường có một dòng (hoặc nhiều hơn, nếu chúng ta đang sử dụng nhiều biểu định kiểu) tham chiếu đến trang tính. Nó trông giống như thế này

Dòng này cho trình duyệt web biết khi nó đọc tệp HTML này

1. Tôi muốn liên kết một biểu định kiểu
2. Đây là nơi nó nằm

Bạn có thể đặt tên cho trang tính bất cứ điều gì bạn muốn

• phong cách. css
• toàn cầu. css
• nghiêm túc-bất cứ điều gì bạn muốn. css

Điều quan trọng là cung cấp đúng vị trí của tệp CSS, cho dù đó là trên máy chủ web của bạn, CDN hay một số máy chủ khác hoàn toàn

Đây là vài ví dụ

Trang tính không bắt buộc đối với HTML

Bạn đã thấy ví dụ về một trang web barebones ở trên. Không cần trang web để sử dụng biểu định kiểu

Ngoài ra, về mặt kỹ thuật, chúng ta có thể viết CSS trực tiếp trong HTML bằng cách sử dụng thuộc tính HTML style. Đây được gọi là kiểu dáng nội tuyến và nó hơi giống như thế này nếu bạn tưởng tượng mình đang xem mã của tệp HTML

A Headline
Some paragraph content.

Mặc dù điều đó là có thể, nhưng có ba cuộc đình công nghiêm trọng chống lại phong cách viết theo cách này

1. Nếu sau này bạn quyết định sử dụng biểu định kiểu, thì rất khó để ghi đè các kiểu nội tuyến bằng các kiểu trong HTML. Kiểu nội tuyến được ưu tiên hơn kiểu trong trang tính
2. Việc duy trì tất cả các kiểu đó rất khó khăn nếu bạn cần thực hiện thay đổi “nhanh chóng” và điều đó làm cho HTML khó đọc
3. Có điều gì đó kỳ lạ khi nói rằng chúng tôi đang viết CSS nội tuyến khi thực sự không có tầng hoặc trang tính. Tất cả những gì chúng tôi thực sự viết là phong cách

Có một cách thứ hai để viết CSS trong HTML và cách đó trực tiếp trong khối trong khối

Điều đó thực sự làm cho HTML dễ đọc hơn, đã làm cho nó tốt hơn kiểu dáng nội tuyến. Tuy nhiên, thật khó để quản lý tất cả các kiểu theo cách này vì nó phải được quản lý trên từng trang của một trang, nghĩa là một thay đổi “nhanh” có thể phải được thực hiện nhiều lần, tùy thuộc vào số lượng trang chúng tôi đang xử lý

Một tờ bên ngoài có thể được gọi một lần trong thường là lựa chọn tốt nhất của bạn

Trang tính là quan trọng

Tôi hy vọng rằng bạn bắt đầu thấy tầm quan trọng của trang tính vào thời điểm này. Đó là một phần cốt lõi của việc viết CSS. Không có nó, các kiểu sẽ khó quản lý, HTML sẽ trở nên lộn xộn và tầng sẽ không tồn tại trong ít nhất một trường hợp

Trang tính là thành phần cốt lõi của CSS. Chắc chắn, nó thường xuất hiện ở vị trí thứ hai so với chữ “S” đầu tiên nhưng có lẽ đó là vì tất cả chúng ta đều ngầm hiểu về tầm quan trọng của nó.

Lên hạng

Bây giờ bạn đã được trang bị thông tin về biểu định kiểu, đây là nhiều tài nguyên khác mà bạn tham gia để hiểu sâu hơn về cách hoạt động của CSS

Phần mở rộng nào được sử dụng để lưu tệp CSS?

Làm cách nào để tạo tệp CSS cho HTML?