Kiểu thuộc tính css trong html. Thiết kế thẻ html với thuộc tính style (kiểu CSS tích hợp)

Các tờ định kiểu có thể được thêm vào một trang web theo ba cách: những cách khác, khác nhau về khả năng của họ.

Các tờ định kiểu liên quan

Mạnh mẽ nhất và Một cách thuận tiện xác định phong cách và quy tắc cho trang web. Kiểu được lưu trữ trong một tệp riêng biệt có thể được sử dụng cho bất kỳ trang web nào. Để kết nối một bảng gồm các kiểu liên quan, hãy sử dụng thẻ trong tiêu đề trang (ví dụ 1).

Ví dụ 1: Kết nối một style sheet được liên kết

Chào thế giới!

Đường dẫn đến tệp biểu định kiểu có thể là tương đối hoặc tuyệt đối, như được hiển thị trong trong ví dụ này.

Ưu điểm của phương pháp này

1. Một tệp kiểu được sử dụng cho bất kỳ số lượng trang web nào; nó cũng có thể được sử dụng trên các trang web khác.
2. Bạn có thể thay đổi biểu định kiểu mà không cần sửa đổi trang web.
3. Khi bạn thay đổi kiểu trong một tệp duy nhất, kiểu đó sẽ tự động được áp dụng cho tất cả các trang có liên kết tới nó. Chắc chắn là tiện lợi. Chúng tôi chỉ định kích thước phông chữ chỉ ở một nơi và nó thay đổi trên tất cả hàng trăm trang web trở lên trên trang web của chúng tôi.
4. Khi tệp kiểu được tải lần đầu tiên, nó sẽ được lưu vào bộ đệm trên máy tính cục bộ của bạn, tách biệt với các trang web, do đó trang web tải nhanh hơn.

Tờ phong cách toàn cầu

Kiểu được xác định trong chính tài liệu và thường nằm ở phần đầu của trang web. Xét về tính linh hoạt và khả năng, phương pháp sử dụng kiểu này kém hơn phương pháp trước nhưng nó cũng cho phép bạn đặt tất cả các kiểu ở một nơi. TRONG trong trường hợp này, ngay trong phần nội dung của tài liệu. Định nghĩa kiểu được chỉ định bởi thẻ

Chào thế giới!

Ví dụ này cho thấy việc thay đổi kiểu tiêu đề

. Trên một trang web, bây giờ bạn chỉ cần chỉ định thẻ này và kiểu sẽ được tự động thêm vào nó.

Phong cách nội bộ

Kiểu nội tuyến về cơ bản là phần mở rộng cho một thẻ duy nhất được sử dụng trên trang web. Thuộc tính style được sử dụng để xác định một kiểu và các giá trị của nó được chỉ định bằng ngôn ngữ biểu định kiểu (ví dụ 3).

Ví dụ 3: Sử dụng Kiểu bên trong

Chào thế giới!

Bạn nên sử dụng kiểu dáng bên trong cho các thẻ đơn lẻ hoặc hoàn toàn không sử dụng nó vì việc thay đổi một số thành phần sẽ trở thành vấn đề. Các phong cách bên trong không tương ứng với hệ tư tưởng của một tài liệu cấu trúc khi nội dung và thiết kế của nó bị tách biệt.

Tất cả các phương pháp được mô tả sử dụng CSS có thể được sử dụng độc lập hoặc kết hợp với nhau. Trong trường hợp này, cần phải nhớ thứ bậc của họ. Kiểu bên trong luôn được áp dụng đầu tiên, sau đó là biểu định kiểu chung và cuối cùng là biểu định kiểu liên quan. Ví dụ 4 sử dụng hai phương pháp để thêm biểu định kiểu vào tài liệu.

Ví dụ 4. Tổ hợp phương pháp khác nhau phong cách kết nối

Chào thế giới!

Chào thế giới!

Trong ví dụ đã cho, tiêu đề đầu tiên được đặt thành 36 pixel màu đỏ và tiêu đề tiếp theo được đặt thành màu xanh lá và một phông chữ khác.

Để tạo ra sự trình bày của các trang Web, công nghệ của các biểu định kiểu xếp tầng (CSS), hay đơn giản là các biểu định kiểu, được dự định. Bàn phong cách css chứa một bộ quy tắc (kiểu) mô tả thiết kế của chính trang Web và các phần riêng lẻ của nó. Các quy tắc này xác định màu sắc của văn bản và căn chỉnh đoạn văn, thụt lề giữa hình ảnh đồ họa và văn bản bao quanh nó, sự hiện diện và các thông số của khung bảng, màu nền của trang Web, v.v.

Mỗi kiểu css phải được liên kết với một thành phần tương ứng của trang web (hoặc chính trang web đó). Sau khi ràng buộc, được mô tả theo kiểu đã chọn thông số cssđang bắt đầu áp dụng cho phần tử này. Liên kết có thể rõ ràngkhi chính chúng tôi chỉ định kiểu css nào được liên kết với thành phần nào của trang Web hoặc ngầm định khi kiểu css được tự động liên kết với tất cả các thành phần của trang Web được tạo bằng một thẻ cụ thể.

Bàn phong cách css có thể được lưu trữ trực tiếp trong mã HTML của trang Web hoặc trong một tệp riêng biệt. Cách tiếp cận sau phù hợp hơn Khái niệm web 2.0; Như chúng ta nhớ ở Chương 1, nó yêu cầu nội dung và cách trình bày của một trang Web phải được tách biệt. Ngoài ra, riêng biệt phong cách css có thể được đặt trực tiếp vào thẻ HTML để tạo thành phần trang Web; Cách tiếp cận này hiện nay khá hiếm khi được sử dụng và chủ yếu được sử dụng khi thử nghiệm các phong cách.

Các biểu định kiểu CSS được viết bằng một ngôn ngữ đặc biệt gọi là CSS. Tiêu chuẩn mô tả phiên bản đầu tiên của ngôn ngữ này (CSS 1) xuất hiện vào năm 1996. CSS 2 hiện đang được hỗ trợ và sử dụng rộng rãi, còn CSS 3 đang được phát triển, một tập hợp con hạn chế của CSS 3 đã được nhiều trình duyệt Web hỗ trợ.

Chỉ CSS 3 (chính xác hơn là tập hợp con của nó được hỗ trợ chương trình hiện đại) Chúng tôi sẽ học tập.

Tạo kiểu CSS

Định dạng định nghĩa chung Kiểu CSS Liệt kê 7.1 minh họa.

Dưới đây là các quy tắc cơ bản để tạo kiểu css.

Định nghĩa kiểu css bao gồm một bộ chọn và danh sách các thuộc tính kiểu cùng với các giá trị của chúng.

- Bộ chọnđược sử dụng để liên kết một kiểu với thành phần của trang Web mà nó sẽ áp dụng hiệu ứng của nó. Trong thực tế, bộ chọn xác định duy nhất phong cách này.

Theo sau bộ chọn, cách nhau bằng dấu cách, là danh sách các thuộc tính kiểu css và giá trị của chúng, được đặt trong dấu ngoặc nhọn.

Thuộc tính style (không nên nhầm lẫn với thuộc tính tag!) đại diện cho một trong các tham số của thành phần trang Web: màu phông chữ, căn chỉnh văn bản, mức thụt lề, độ dày khung, v.v. Giá trị của thuộc tính style được biểu thị sau nó thông qua ký hiệu: (dấu hai chấm). Trong một số trường hợp, giá trị thuộc tính kiểu css được đặt trong dấu ngoặc kép.

Cặp đôi<атрибут стиля>:<значение>cách nhau bằng ký hiệu; (dấu chấm phẩy).

Giữa cặp đôi cuối cùng <атрибут стиля>:<значение>và biểu tượng dấu ngoặc nhọn đóng; không đặt, nếu không một số trình duyệt Web có thể không xử lý định nghĩa kiểu một cách chính xác.

Các định nghĩa về các kiểu khác nhau được phân tách bằng dấu cách hoặc dấu ngắt dòng.

Không được có khoảng trắng hoặc dòng mới bên trong bộ chọn và tên kiểu. Đối với các khoảng trắng và dòng mới được đặt ở nơi khác trong định nghĩa kiểu, trình duyệt Web sẽ bỏ qua chúng. Do đó, chúng ta có thể định dạng mã CSS để dễ đọc hơn, giống như chúng ta đã làm với mã HTML.

Nhưng quy tắc là quy tắc, và quan trọng nhất là thực hành. Hãy xem một ví dụ về phong cách nhỏ:

P (màu: #0000FF)

Chúng ta hãy nhìn vào nó từng mảnh một.

P là bộ chọn. Nó đại diện cho tên của thẻ

Màu sắc là một thuộc tính kiểu dáng. Nó đặt màu văn bản.

- #0000FF là giá trị của thuộc tính kiểu màu. Nó đại diện cho mã có màu xanh, viết vào định dạng RGB. (Chúng ta sẽ nói nhiều hơn về mã RGB và định nghĩa của nó trong Chương 8.)

Khi trình duyệt Web đọc kiểu được mô tả, nó sẽ tự động áp dụng kiểu đó cho tất cả các đoạn của trang Web (thẻ

). Nhân tiện, điều này ví dụ điển hình Ràng buộc kiểu ngầm định.

phong cách css Kiểu chúng tôi đã xem xét được gọi là kiểu ghi đè thẻ. Bộ chọn ở đây là tên của thẻ HTML được ghi đè theo kiểu này mà không có ký tự< и >. Bộ chọn có thể gõ cả chữ hoa và chữ chữ viết thường; tác giả thích chữ in hoa hơn.

Chúng ta hãy xem xét thêm một vài phong cách này.

Đây là kiểu ghi đè thẻ :