Chủ đề đầu tiên bạn cần nắm vững trước khi viết mã bằng CSS là cú pháp. Từ syntax Nghe có vẻ đáng sợ, nhưng nó chỉ đơn giản là đề cập đến các quy tắc chúng ta sử dụng trong CSS để viết mã. Các quy tắc này là tiêu chuẩn, giúp dễ dàng đọc mã của người khác.
Hai phần quan trọng nhất của cú pháp CSS là bộ chọn và khối khai báo. Các bộ chọn được sử dụng để trỏ đến (các) phần tử mà bạn muốn áp dụng một kiểu trên trang web và các khối khai báo phác thảo các kiểu bạn muốn áp dụng cho các phần tử bạn đã chọn.
Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về cú pháp CSS và cấu trúc của các kiểu CSS. Chúng ta cũng sẽ thảo luận về cách viết nhận xét trong CSS. Khi đọc xong hướng dẫn này, bạn sẽ có kiến thức cần thiết để viết các kiểu CSS của riêng mình.
Quy tắc kiểu CSS
Trong CSS, biểu định kiểu lưu trữ một tập hợp các quy tắc xác định cách một trang web sẽ xuất hiện trên màn hình của người dùng. Ví dụ:biểu định kiểu có thể phác thảo màu của văn bản trên trang web hoặc kích thước phông chữ được sử dụng bởi một tiêu đề cụ thể.
Các quy tắc này tuân theo một cấu trúc tiêu chuẩn, cấu trúc này bao gồm hai phần:bộ chọn và phần khai báo. Nhìn chung, đây là cách quy tắc kiểu xuất hiện trong CSS:
h1 {
color: blue;
}
Kiểu cụ thể này đặt màu của tất cả <h1> các phần tử trên trang web thành màu xanh lam. Bây giờ, hãy chia nhỏ phong cách này thành hai phần thành phần để chúng ta có thể phân tích cách hoạt động của nó.
Khai báo CSS
Phần đầu tiên của kiểu CSS là các khai báo. Declaration là một từ khác để chỉ một kiểu cụ thể mà bạn muốn áp dụng cho một phần tử trên trang web.
Quy tắc kiểu CSS phải bao gồm ít nhất một khai báo và có thể bao gồm nhiều khai báo mà bạn muốn. Vì vậy, nếu bạn muốn đặt chiều rộng và chiều cao của một hộp trên trang web thành 100px và đặt màu nền của nó thành màu xanh lam, bạn có thể làm như vậy trong một khai báo.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Khai báo bao gồm hai phần, như sau:
- Thuộc tính. Đây là các thuộc tính kiểu sẽ được áp dụng cho một phần tử (tức là màu, màu nền, chiều rộng, chiều cao).
- Giá trị. Phần này cho trình duyệt biết thuộc tính sẽ được hiển thị như thế nào (tức là màu của hộp có thể được đặt thành “xanh lá cây” hoặc “đỏ”).
Đây là cú pháp cho một khai báo CSS:
property: value;
Lưu ý rằng thuộc tính CSS của chúng tôi xuất hiện đầu tiên, sau đó được phân tách bằng dấu hai chấm (:). Sau dấu hai chấm là giá trị mà chúng ta muốn gán cho thuộc tính mà chúng ta đã xác định.
Mỗi khai báo CSS phải kết thúc bằng dấu chấm phẩy (;).
Đây là một ví dụ về hai khai báo CSS:
color: blue; font-size: 16px;
Khai báo đầu tiên đặt màu phông chữ của phần tử HTML thành “xanh lam”. Khai báo thứ hai đặt kích thước phông chữ của một phần tử duy nhất là “16px”. Cả hai bộ chọn này đều bắt đầu bằng tên thuộc tính và theo sau là dấu phẩy và giá trị mà chúng tôi muốn gán cho thuộc tính.
Các khai báo được lưu trữ trong dấu ngoặc nhọn.
Bộ chọn CSS
Trong phần trước, chúng ta đã thảo luận về cách sử dụng các khai báo để áp dụng các kiểu cho một phần tử web. Nhưng khai báo chỉ là một phần của cú pháp CSS. Phần khác là các bộ chọn, cho trình duyệt biết phần tử nào mà một tập hợp các khai báo cụ thể sẽ áp dụng cho.
Đây là cú pháp cho bộ chọn CSS:
selector {
// List of declarations
}
Bộ chọn hướng dẫn trình duyệt (các) phần tử nào mà một tập hợp các kiểu sẽ áp dụng. Vì vậy, chẳng hạn, nếu chúng ta muốn đặt chiều rộng của tất cả <div> thành “500px”, chúng tôi có thể làm như vậy bằng cách sử dụng quy tắc này:
div {
width: 500px;
}
div là bộ chọn của chúng tôi trong trường hợp này và nằm ở đầu quy tắc CSS của chúng tôi. Sau đó, chúng ta xác định các khai báo của mình trong dấu ngoặc nhọn, sử dụng cú pháp mà chúng ta đã thảo luận trước đó. Quy tắc này đặt chiều rộng của tất cả <div> các phần tử trên trang web thành “500px”.
Nếu bạn muốn tìm hiểu thêm về bộ chọn CSS, hãy đọc hướng dẫn dành cho người mới bắt đầu của chúng tôi về bộ chọn CSS.
Cùng với nhau, các khai báo và bộ chọn tạo nên một quy tắc kiểu CSS.
Nhận xét CSS
Cho đến nay, chúng ta đã thảo luận về cách viết các quy tắc kiểu trong CSS. Tuy nhiên, không phải tất cả văn bản được viết trong bảng định kiểu đều là quy tắc kiểu.
CSS style sheet cũng có khả năng lưu trữ các bình luận. Nhận xét là các khối văn bản được viết bởi nhà phát triển với mục đích giúp dễ hiểu mã hơn trong biểu định kiểu. Nhận xét bị trình duyệt bỏ qua, vì vậy bạn có thể thêm bao nhiêu nhận xét vào biểu định kiểu tùy thích.
Viết bình luận có lợi vì một số lý do.
Đầu tiên, việc viết nhận xét cho phép bạn theo dõi mã của mình khi bạn viết nó và cung cấp cho bạn bản ghi những suy nghĩ của bạn để bạn có thể tham khảo nếu bạn cần trợ giúp để hiểu một khối mã trong tương lai. Thứ hai, việc viết bình luận sẽ cho phép các nhà phát triển chưa viết một khối mã nào hiểu được mục đích của nó và ý định của bạn đằng sau việc viết mã.
Các chú thích CSS bắt đầu bằng cú pháp / * và kết thúc bằng cú pháp * /.
Nhận xét một dòng và nhiều dòng
Có hai loại nhận xét có thể xuất hiện trong CSS:một dòng và nhiều dòng.
Nhận xét một dòng là nhận xét chỉ kéo dài một dòng trên biểu định kiểu. Dưới đây là ví dụ về nhận xét một dòng trong CSS xuất hiện phía trên quy tắc kiểu:
/* This style sets the font size of all <p> tags to 16px */
p {
font-size: 16px;
}
Trong đoạn mã này, nhận xét của chúng tôi xuất hiện giữa các dấu / * và * /. Bên dưới nhận xét của chúng tôi là một quy tắc kiểu, sử dụng cú pháp mà chúng ta đã thảo luận trước đó.
Nhận xét nhiều dòng là nhận xét kéo dài nhiều hơn một dòng trên biểu định kiểu. Dưới đây là một ví dụ về nhận xét nhiều dòng trong CSS:
/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p {
font-size: 16px;
color: gray;
}
Nhận xét này trải dài trên hai dòng và mô tả một kiểu CSS.
Kết luận
Giống như bất kỳ ngôn ngữ lập trình nào, CSS có một số cú pháp cơ bản để xác định cách bạn có thể viết mã bằng ngôn ngữ này.
Trong CSS, có hai thành phần tạo nên quy tắc kiểu:khai báo và bộ chọn. Khai báo là các kiểu mà bạn muốn áp dụng cho một phần tử và các bộ chọn được sử dụng để chọn các phần tử mà khai báo của bạn sẽ được áp dụng.
Ngoài ra, CSS có tính năng bình luận cho phép bạn viết ghi chú trên mã của mình để tham khảo trong tương lai. Nhận xét bị bỏ qua bởi trình duyệt.
Hướng dẫn này đã thảo luận về các khái niệm cơ bản về cú pháp CSS và cách nhận xét về một CSS style sheet. Bây giờ, bạn đã sẵn sàng để bắt đầu viết các quy tắc và nhận xét kiểu CSS như một nhà phát triển web chuyên nghiệp!