Cách sử dụng nhiều kiểu Cùng với CSS3 - núm vú

Hiểu các quy tắc về thừa kế trong CSS3 giúp bạn tạo các trang web thú vị đòi hỏi bảo trì tối thiểu. Bằng cách làm theo các quy tắc này, khi bảo trì được yêu cầu, bạn thường phải thực hiện một thay đổi, thay vì thay đổi hàng trăm mục riêng lẻ. Nó trả tiền để thử nghiệm, tuy nhiên, vì vậy bạn có thể hiểu được các hiệu ứng đầy đủ của thừa kế và các hiệu ứng của việc sử dụng nhiều phong cách với nhau.

Tạo một tệp HTML5 mới với trình chỉnh sửa văn bản của bạn.

Trình biên tập của bạn có thể không hỗ trợ tệp HTML5. Bất kỳ tập tin văn bản sẽ làm.
Nhập mã sau đây cho trang HTML.
```
Ví dụ kế thừa p {họ font: Arial, Helvetica, sans-serif; màu sắc: màu xanh lam; màu nền: Màu vàng; lề: 0; kiểu chữ: italic; font-size: medium;} div p (kiểu chữ: italic; font-size: larger;}

Ví dụ về CSS inheritance







Đoạn bên ngoài.
Một đoạn bên trong thùng chứa.
```
Trang này chứa một số kiểu nội tuyến, luôn có thứ tự ưu tiên kế thừa cao nhất. Ví dụ, cung cấp một phông chữ của gia đình không gian cho phần tag của câu. Bạn có thể thực hiện cùng một điều bằng cách gán một thuộc tính lớp cho mã, nhưng ví dụ này sử dụng kiểu nội tuyến để thay thế.

Việc sử dụng một phong cách nội tuyến để thiết lập kiểu văn bản-align sang trái. Bởi vì phong cách mặc định đặt liên kết sang trái, bạn sẽ không thấy bất kỳ sự khác biệt nào. Tuy nhiên, nếu một thay đổi kiểu khác sửa đổi liên kết văn bản, phong cách này sẽ có hiệu lực và ngăn chặn chuyển động của đoạn văn này.

Các sửa đổi kiểu nội bộ đều xuất hiện bên trong thẻ trong phần tử. Kiểu đầu tiên đặt các đặc điểm chung cho thẻ
. Lưu ý rằng phong cách này đặc biệt đặt kiểu chữ theo kiểu chữ nghiêng và kích thước phông chữ cho vừa.

Phong cách thứ hai cụ thể hơn. Nó đặt các đặc tính cho
thẻ mà xuất hiện như là một đứa trẻ của a. Do đó, các quy tắc thừa kế cho biết rằng kiểu này sẽ được ưu tiên khi các quy tắc thừa kế được đáp ứng, điều này có nghĩa là kiểu phông chữ và kiểu phông chữ sẽ khác nhau trong trường hợp này.
Lưu tệp dưới dạng Thừa kế. HTML.
Tải ví dụ Thừa kế vào trình duyệt của bạn.

Bạn thấy vai trò của thừa kế và phong cách xếp tầng.
Tạo tệp tin CSS mới với trình soạn thảo văn bản của bạn.

Trình biên tập của bạn có thể không hỗ trợ tệp CSS. Bất kỳ tập tin văn bản sẽ làm.
Gõ thông tin kiểu CSS sau đây.
```
body {text-align: center; màu sắc: DarkRed; màu nền: Khaki; biên giới: inset; border-color: xanh;} h1 {border: ban đầu; border-color: Brown;} p (văn bản trang trí: gạch dưới; phông chữ gia đình: "Times New Roman", Times, serif; kiểu phông chữ: xiên; font-size: xx-large;}
```
Thẻ sẽ xuất hiện như là đối tượng trên cùng trong một trang, vì vậy những thay đổi được ghi nhận theo kiểu cơ thể sẽ ảnh hưởng đến tất cả mọi thứ không được ghi đè cụ thể sau này.Trong trường hợp này, ví dụ này sẽ thay đổi liên kết văn bản giữa và đặt một đường viền màu đỏ đậm xung quanh bất kỳ nội dung nào. Màu nền cũng được thay đổi. Cuối cùng, phong cách thêm một đường viền màu xanh lá cây xung quanh mỗi đối tượng.

Phong cách h1 thay thế bất kỳ kiểu dáng cơ thể nào. Trong trường hợp này, điều đó có nghĩa là sửa đổi kiểu đường biên.

Phong cách p cũng ghi đè bất kỳ kiểu dáng cơ thể nào. Tuy nhiên, không có bất kỳ tài sản nào giống nhau trong trường hợp này, vì vậy các phong cách p tăng cường các phong cách thừa hưởng từ phong cách cơ thể.
Lưu tệp dưới dạng Thừa kế. CSS.
Thêm mã sau vào vùng của tệp HTML.
Đoạn mã này tạo liên kết giữa tệp HTML và tệp CSS.
Lưu tệp HTML và tải lại trang.

Lưu ý rằng tất cả các thay đổi dự kiến đều được áp dụng. Ví dụ, văn bản được căn giữa, ngoại trừ một đoạn văn có kiểu nội tuyến trọng văn bản trung tâm. Văn bản tiêu đề bây giờ bằng màu Đậm đậm - văn bản đoạn văn sẽ ghi đè vùng chọn màu đó, do đó màu xanh lam. Mặc dù có một phong cách p bên ngoài cho kích thước của văn bản, phong cách nội bộ ghi đè lên nó.

Bạn sẽ nhận thấy một điều gì khác về ví dụ. Thân chứa đường viền có màu chính xác và tiêu đề có đường viền ban đầu có màu chính xác vì nó đã ghi đè lên mặc định.

Tuy nhiên, các đoạn văn không có đường biên. Vào một thời điểm, thay đổi thẻ ảnh hưởng đến toàn bộ tài liệu và một số vẫn làm. Tuy nhiên, những thay đổi khác chỉ ảnh hưởng đến cơ thể chứ không phải các yếu tố khối khác. Các phần tử chặn không kế thừa một số cài đặt theo kiểu cơ thể.
Xóa kiểu h1 khỏi Thừa kế. Bảng kiểu CSS.

Bạn cũng có thể bình luận phong cách h1 bằng cách thêm các biểu tượng bình luận bắt đầu (/ *) và kết thúc (* /) vào nó như sau:
```
/ * Nhận xét để hiển thị các thiết lập khối. h1 {border: bắt đầu; border-color: Brown;} * /
```
Lưu tệp CSS và tải lại trang.

Chú ý rằng nhóm này hiện không có đường biên. Nó chỉ ra rằng tiêu đề đã không được overriding biên giới cấp cơ thể - đó là thêm một biên giới mới. Không bao giờ cho rằng một phong cách cơ thể sẽ thực hiện thông qua các phong cách khối cấp khác - một số cài đặt đơn giản là không. Khi bạn thấy rằng trang của bạn trông không giống như bạn mong đợi, hãy thử cấu hình cài đặt ở mức độ chặn thấp hơn.

Bạn cũng có thể thấy một số trang tính truy cập vào kiểu html, ảnh hưởng đến thẻ có chứa thẻ. Đó là sự thật: Bạn có thể làm việc với các phong cách html để đạt được một số hiệu ứng.

Thêm kiểu html hiển thị ở đây vào Thừa kế. Bảng kiểu CSS.

html {border: outset; màu đường viền: Xanh; background-color: White;}

Lưu tệp CSS và tải lại trang.

Bạn hiếm khi phải dựa vào phong cách html bởi vì nó đơn giản là không cần thiết. Khối html là một mức trên khối cơ thể, như được minh họa trong ví dụ này. Khối html không cung cấp cho bạn quyền truy cập vào bất cứ điều gì mà khối cơ thể không thể thay đổi trong hầu hết các trường hợp, ngoại trừ các hiệu ứng đặc biệt như được hiển thị ở đây.