Vị trí được kế thừa trong css?
|
Các mối quan hệ tồn tại trong HTML và các mối quan hệ này giúp chúng tôi có thể chọn và tạo kiểu cho các thành phần của trang web. Khi một phần tử HTML được lồng trong một phần tử khác, phần tử bên ngoài được gọi là phần tử cha, trong khi phần tử bên trong là phần tử con Show
Một phần tử con có thể trở thành phần tử cha của một phần tử khác. Tại sao tất cả lời mở đầu và cốt truyện này? . Khi bạn tạo kiểu cho phần tử cha, trong một số trường hợp, kiểu sẽ được kế thừa bởi các phần tử con của nó. Tôi nói một số trường hợp vì kiểu thừa kế này không phải lúc nào cũng đúng Tầm quan trọng của kế thừa CSSNếu bạn đã từng tạo kiểu cho nội dung của một trang web, rất có thể bạn đã không viết kiểu phông chữ cho mọi thành phần phải hiển thị văn bản. Có thể bạn chỉ thêm các kiểu phông chữ của mình vào phần tử cơ thể, chẳng hạn
Nếu bạn muốn có một kiểu phông chữ thống nhất cho tất cả nội dung này, bạn chỉ phải tạo kiểu cho phần tử nội dung body {
font-family: Arial, Helvetica, sans-serif;
}Điều này có thể thực hiện được do tính kế thừa giữa các phần tử HTML. Và nó rất hữu ích, vì chúng ta không phải lặp lại kiểu
4 giống nhau cho các div và tiêu đề. Điều tương tự cũng áp dụng cho các kiểu _______65, khi được áp dụng cho phần tử gốc sẽ được áp dụng cho các phần tử con của phần tử gốc đó trừ khi một kiểu
5 khác được áp dụng cho các phần tử conMặc dù tính kế thừa khiến mọi thứ trở nên dễ dàng đối với chúng ta, nhưng mọi thứ sẽ không dễ dàng như vậy nếu tất cả các thuộc tính CSS hoạt động theo cách này Đây là một ví dụ khác
Ai biết dưa chuột là quả mọng?. Chúng tôi sẽ triển khai một số kiểu cho danh sách gốc và xem kiểu nào được kế thừa theo huyết thống Các kiểu
4 và
5 được áp dụng cho danh sách không có thứ tự được kế thừa bởi các phần tử con và thậm chí cả các phần tử cháu của nó. Tuy nhiên, đây không phải là trường hợp của kiểu
3. Vậy những thuộc tính nào khác được kế thừa? Danh sách đầy đủ các thuộc tính được thừa kếTheo W3C, đây là các thuộc tính có thể được kế thừa
Bạn có thể tìm hiểu thêm về danh sách này trên trang web của W3C (bạn chắc chắn không cần phải ghi nhớ tất cả những điều này. ) Cách buộc các thuộc tính kế thừaVì một số thuộc tính không thể được kế thừa, nên bạn có thể nghĩ rằng cách giải quyết là áp dụng chúng cho cả các phần tử con. Các phong cách chúng tôi sử dụng ở trên có thể trông như thế này body {
font-family: Arial, Helvetica, sans-serif;
}9Chúng tôi vẫn chỉ có các kiểu đường viền trên danh sách mẹ và danh sách con đầu tiên. Nhưng vấn đề là chúng ta đã phải lặp lại chính mình. Nỗi đau sao chép lặp đi lặp lại cùng một phong cách trở nên rõ ràng Một giải pháp tốt sẽ là giải pháp mà bạn chỉ cần áp dụng kiểu một lần, tốt nhất là cho cha mẹ và thực hiện một chút điều chỉnh cho con để kế thừa. Điều này sẽ giữ cho mọi thứ khô ráo và sạch sẽ Từ khóa người thừa kếTheo Tài liệu MDN “Từ khóa CSS kế thừa khiến phần tử được chỉ định lấy thuộc tính được tính toán của thuộc tính từ phần tử cha của nó. ” – MDN Nói cách khác, đó là một cách để nói rằng giá trị của một thuộc tính cụ thể phải được lấy từ phần tử cha của phần tử. Từ khóa này có thể được sử dụng trên bất kỳ thuộc tính CSS nào Quay trở lại ví dụ của chúng tôi, đây là cách phong cách sẽ xuất hiện
Với điều đó, kết quả sẽ như thế này Vì vậy, nếu các kiểu đường viền của chúng ta cần thay đổi, chúng ta chỉ cần thay đổi chúng ở một nơi Cách buộc các thuộc tính không được kế thừaMặc dù có thể thực thi kế thừa trên các thuộc tính không thể kế thừa theo mặc định, nhưng trong một số trường hợp, có thể không nên làm như vậy. Một cách khác là tận dụng các giá trị ban đầu của thuộc tính Từ khóa ban đầuBạn có thể đặt giá trị mặc định hoặc giá trị ban đầu của thuộc tính CSS bằng cách sử dụng từ khóa CSS
Trong ví dụ này có một vài điều xảy ra. Chúng tôi có hai phần tử
2
22 trở lại bất kỳ màu nào mà trình duyệt đã áp dụng ban đầu. Đây là những gì trông giống nhưCác từ khóa kế thừa CSS khácNgoài các từ khóa
23 và
25 và
26. Trên thực tế, những lựa chọn thay thế này thực sự được khuyến nghị vì
Từ khóa không được đặtTừ khóa không được đặt khác biệt một cách tinh tế. Nó đặt lại giá trị của một phần tử thành giá trị được kế thừa (nếu nó được kế thừa) và giá trị ban đầu của nó nếu không. Đây là ví dụ của chúng tôi một lần nữa
0Trong trường hợp này, thuộc tính
5 của
Hoàn nguyên từ khóaCuối cùng, chúng ta có từ khóa
25, hoạt động tương tự như
26 trong hầu hết các trường hợp. Nó đặt lại thuộc tính về giá trị kế thừa của nó (nếu thuộc tính kế thừa từ cha của nó) hoặc về giá trị mặc định được thiết lập bởi biểu định kiểu riêng của người dùng (nếu nó tồn tại) hoặc sau đó là kiểu của trình duyệtSự kết luậnKhi một quy tắc kiểu được khai báo trong biểu định kiểu, có rất nhiều nơi giá trị của thuộc tính có thể đến từ đó;
Các kiểu được tìm nạp từ đâu tùy thuộc vào cách hoạt động của thuộc tính liên quan đến tính kế thừa. Nếu thuộc tính có thể kế thừa, thì giá trị của nó sẽ đến từ cha của nó, giá trị này sẽ được khai báo trong biểu định kiểu do tác giả web tạo. Nếu không, nó sẽ đến từ nguồn thứ hai hoặc thứ ba Là vị trí cố định so với cha mẹ?Trên thực tế, chúng hoạt động gần như giống nhau, chỉ các phần tử có vị trí cố định luôn liên quan đến tài liệu, không phải bất kỳ phần tử gốc cụ thể nào và không bị ảnh hưởng .
Vị trí là tuyệt đối hay tương đối?Chức vụ. tương đối đặt một phần tử so với vị trí hiện tại của nó mà không thay đổi bố cục xung quanh nó, trong khi vị trí. tuyệt đối đặt một phần tử so với vị trí của phần tử gốc và thay đổi bố cục xung quanh nó
Là vị trí cố định tương đối?Một phần tử có vị trí. đã sửa; . Các thuộc tính top, right, bottom, left dùng để định vị phần tử. , which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Có tệ không khi sử dụng vị trí tương đối trong CSS?Có. Ví dụ: bạn sẽ không thể làm việc với các phần tử được định vị tuyệt đối nữa - vị trí tuyệt đối sẽ luôn liên quan đến phần tử gốc, gần như . |
