Kiểu và bố cục trực quan của trang web được quyết định bởi CSS hoặc Cascading Style Sheets. Đây là những tài liệu định hình đánh dấu HTML của trang web, cung cấp cho trình duyệt web các hướng dẫn về cách hiển thị các trang có kết quả từ đánh dấu đó. CSS xử lý bố cục của trang, cũng như màu sắc, hình nền, kiểu chữ và nhiều thứ khác nữa.
Nếu bạn nhìn vào một tệp CSS, bạn sẽ thấy rằng giống như bất kỳ ngôn ngữ đánh dấu hoặc mã hóa nào, các tệp này có một cú pháp cụ thể cho chúng. Mỗi tờ định kiểu được tạo thành từ một số quy tắc CSS. Những quy tắc này, khi được lấy đầy đủ, là những gì phong cách trang web.
Các phần của quy tắc CSS
Một quy tắc CSS được tạo thành từ hai phần riêng biệt - bộ chọn và khai báo. Công cụ chọn sẽ xác định những gì đang được tạo kiểu trên một trang và tuyên bố là cách nó phải được tạo kiểu. Ví dụ:
p {
màu: # 000;
}
Đây là một quy tắc CSS. Phần chọn là "p", là bộ chọn phần tử cho "đoạn văn". Do đó, nó sẽ chọn TẤT CẢ các đoạn trong một trang web và cung cấp cho chúng theo kiểu này (trừ khi có các đoạn văn được nhắm mục tiêu bởi các kiểu cụ thể hơn ở nơi khác trong tài liệu CSS của bạn).
Phần quy tắc cho biết "màu: # 000;" là những gì được gọi là tuyên bố. Tuyên bố đó được tạo thành từ hai phần - tài sản và giá trị.
Tài sản là phần "màu" của tuyên bố này. Nó quyết định khía cạnh nào của bộ chọn sẽ được thay đổi trực quan.
Giá trị là thuộc tính CSS đã chọn sẽ được thay đổi thành. Trong ví dụ của chúng tôi, chúng tôi đang sử dụng giá trị hex của # 000, là viết tắt CSS cho "đen".
Vì vậy, sử dụng quy tắc CSS này, trang của chúng tôi sẽ có các đoạn văn được hiển thị bằng phông chữ màu đen.
Khái niệm cơ bản về tài sản CSS
Khi bạn viết các thuộc tính CSS, bạn không thể đơn giản tạo ra chúng khi bạn thấy phù hợp. Đối với các trường hợp, "màu" là thuộc tính CSS thực tế, vì vậy bạn có thể sử dụng nó. Thuộc tính này là cái xác định màu văn bản của một phần tử. Nếu bạn cố gắng sử dụng "màu văn bản" hoặc "phông chữ-màu" làm thuộc tính CSS, chúng sẽ thất bại vì chúng không phải là các phần thực của ngôn ngữ CSS.
Một ví dụ khác là thuộc tính "background-image". Thuộc tính này đặt một hình ảnh có thể được sử dụng cho nền, như sau:
.Logo {
background-image: url (/images/company-logo.png);
}
Nếu bạn cố gắng sử dụng "background-picture" hoặc "background-graphic" làm thuộc tính, chúng sẽ thất bại vì, một lần nữa, đây không phải là các thuộc tính CSS thực tế.
Một số thuộc tính CSS
Có một số thuộc tính CSS mà bạn có thể sử dụng để tạo kiểu cho một trang web. Một số ví dụ:
- Đường viền (bao gồm đường viền, màu đường viền và chiều rộng đường viền)
- Padding (bao gồm padding-top, padding-right, padding-bottom, và padding-left)
- Lợi nhuận (bao gồm margin-top, margin-right, margin-bottom, và margin-left)
- Họ phông chữ
- Cỡ chữ
- Màu nền
- Chiều rộng
- Chiều cao
Các thuộc tính CSS này là các thuộc tính tuyệt vời để sử dụng làm ví dụ, vì chúng rất đơn giản và ngay cả khi bạn không biết CSS, bạn có thể đoán chúng dựa trên tên của chúng.
Có các thuộc tính CSS khác mà bạn sẽ gặp phải cũng có thể không rõ ràng cách chúng hoạt động dựa trên tên của chúng:
- Phao
- Thông thoáng
- Tràn ra
- Chuyển đổi văn bản
- -chỉ số Z
Khi bạn thâm nhập sâu hơn vào thiết kế web, bạn sẽ gặp phải (và sử dụng) tất cả các thuộc tính này và hơn thế nữa!
Thuộc tính cần giá trị
Mỗi khi bạn sử dụng thuộc tính, bạn phải đặt giá trị đó - và một số thuộc tính nhất định chỉ có thể chấp nhận các giá trị nhất định.
Trong ví dụ đầu tiên của chúng tôi về thuộc tính "màu", chúng ta cần sử dụng giá trị màu. Đây có thể là giá trị hex , giá trị RGBA hoặc thậm chí từ khóa màu . Tuy nhiên, bất kỳ giá trị nào trong số đó cũng có tác dụng nếu bạn sử dụng từ "ảm đạm" với thuộc tính này, nó sẽ không làm gì vì, như mô tả như từ đó, nó không phải là một giá trị được công nhận trong CSS.
Ví dụ thứ hai của chúng tôi về "background-image" yêu cầu một đường dẫn hình ảnh được sử dụng để tìm nạp một hình ảnh thực tế từ các tệp của trang web của bạn. Đây là giá trị / cú pháp được yêu cầu.
Tất cả các thuộc tính CSS đều có giá trị mà chúng mong đợi. Ví dụ:
- Màu đường viền mong đợi một giá trị màu
- Kích thước đường viền mong đợi một giá trị kích thước, như pixel hoặc phần trăm
- Kiểu đường viền mong đợi một trong các kiểu được dành riêng cho thuộc tính này, chẳng hạn như "rắn"
Nếu bạn đi qua danh sách các thuộc tính CSS, bạn sẽ khám phá ra rằng mỗi thuộc tính đều có các giá trị cụ thể mà chúng sẽ sử dụng để tạo ra các kiểu mà chúng được sử dụng.
Biên tập bởi Jeremy Girard