Giá trị mặc định của css là gì?
Điều này là do mọi thuộc tính CSS đều có giá trị mặc định. Giá trị mặc định có thể được thay đổi thông qua kế thừa hoặc khi bạn đặt giá trị rõ ràng Show
Bảng giá trị kế thừa và mặc địnhBảng sau đây cho biết các thuộc tính CSS nào (mà chúng ta đã thấy) được các phần tử con kế thừa từ phần tử cha của chúng Nó cũng hiển thị các giá trị mặc định cho các thuộc tính CSS đó Việc triển khai trình duyệt đôi khi đặt các giá trị khác với giá trị được xác định trong đặc tả CSS. Chú thích cuối trang được cung cấp cho nhiều giá trị và bất kỳ giá trị thay thế nào được cung cấp phải được coi là thông tin hơn là tuyệt đối CSS PropertyInheritedDefault Value màuCó Tùy thuộc vào trình duyệt (thường là đen )1 màu nềnKhôngtrong suốt 2 padding 2 . Không Xem các thuộc tính riêng lẻ padding-leftKhông0 3 padding-rightKhông0 4 padding-topKhông0 55 0 . padding-bottomKhông0 6 lề 6 . Không Xem các thuộc tính riêng lẻ lề tráiKhông0 7 lề phảiKhông0 8 lề trênKhông . 0 9 lề dướiKhông0 10 đường viền 10 . Không Đường viền trong suốt . và có kiểu nonehiển thịKhông Tùy thuộc vào phần tử HTML, nhưng phổ biến nhất là nội tuyến và chặn 11. chiều rộngKhôngtự độngchiều caoKhôngtự độngkích thước hộptự độngkích thước hộpKhônghộp nội dungcỡ chữCótrung bình (thường là 16px)12 họ phông chữCó Tùy thuộc vào trình duyệt trọng lượng phông chữCóbình thường 13 kiểu phông chữCóbình thường 14 chiều cao dòngKhông . bình thườngKhôngbình thườngcăn chỉnh văn bảnKhông Một giá trị không tên đóng vai trò là 'trái' nếu hướng văn bản là từ trái sang phải và 'phải' nếu 'hướng' là từ phải sang trái. phaoKhôngnonexóaKhôngkhôngnội dungKhôngthông thườngGiá trị 'kế thừa'Bạn có thể buộc một phần tử con kế thừa thuộc tính của phần tử mẹ bằng cách sử dụng giá trị CSS inherit .
Khi áp dụng cho HTML sau
Sẽ khiến phần tử con kế thừa thuộc tính đường viền của phần tử gốc. Cái này quan trọng Giá trị 'mặc định'Nếu bạn muốn đặt lại thuộc tính của phần tử về giá trị mặc định, bạn có thể sử dụng giá trị CSS initial 15. Hãy xem xét phong cách sau đây
Khi áp dụng cho đoạn mã sau
Kết quả sau đây. 16 Đây là một số văn bản theo kiểu Đây là một số văn bản theo kiểu mặc định Từ cuối cùngCác phần tử con có thể kế thừa các giá trị CSS từ phần tử cha của chúng – tùy thuộc vào thuộc tính CSS cụ thể Tất cả các phần tử HTML đều có các kiểu mặc định được áp dụng cho chúng. Một số kiểu này được xác định bởi cài đặt trình duyệt, những kiểu khác do đặc tả CSS Trong CSS, mọi thuộc tính đều có giá trị ban đầu. Đôi khi đây được gọi là giá trị mặc định, nhưng thông số kỹ thuật sử dụng thuật ngữ ban đầu, mà tôi nghĩ là một thuật ngữ tốt hơn một chút Về mặt kỹ thuật, giá trị ban đầu của bất kỳ thuộc tính cụ thể nào chỉ cần được khai báo nếu giá trị đó ghi đè một giá trị được xác định trước đó không phải là giá trị ban đầu. Nhưng các giá trị ban đầu thường xuất hiện ngay cả khi chúng không cần thiết Ví dụ: giả sử tôi có một phần tử cấp khối mà tôi muốn chiếm toàn bộ chiều rộng của phần tử gốc của nó. Tôi muốn nó nằm trên “dòng” của riêng nó, có thể nói như vậy, trong bố cục, vì vậy tôi thêm đoạn CSS sau
Điều đó thật tuyệt, phải không? . Ngoài ra, nó không bị ràng buộc bởi giá trị chiều rộng nên chiều rộng được tính tự động dựa trên chiều rộng của cấp độ gốc Nếu bạn là một nhà phát triển CSS có kinh nghiệm hoặc thậm chí là khá mới với CSS, bạn có thể thấy ngay đoạn mã trên có gì sai. Nó thừa. Đó không phải là mã sai; . Mọi phần tử cấp khối không có giá trị 1 được xác định sẽ tự động được đặt thành 2 vì 0 là giá trị ban đầu cho thuộc tính 1. Điều này cũng đúng với 2, vì vậy cả hai dòng đó đều không cần thiếtĐôi khi giá trị ban đầu là cần thiếtNhưng điều gì sẽ xảy ra nếu bạn bắt gặp CSS như trên trong mã của mình hoặc trong mã mà bạn đã kế thừa. Có thể có một vài điều đang diễn ra ở đây
Có thể có một kịch bản khác đang diễn ra ở đây mà tôi chưa từng nghĩ tới, nhưng điều đó ít nhiều bao gồm hầu hết, nếu không muốn nói là tất cả, các khả năng Sau đây là một ví dụ về kịch bản đầu tiên mà tôi đã liệt kê ở trên
Do điều này nằm trong một truy vấn phương tiện, nên mục đích của nó sẽ khá dễ dàng nhận ra (do đó bạn sẽ không nghi ngờ rằng nó thừa và loại bỏ nó), trong khi cách sau sẽ phức tạp hơn một chút ________số 8Ở đây, 3 được đặt thành 0 để ghi đè màu nền đã đặt trước đó trên cùng một thành phần. Các quy tắc kiểu này không nhất thiết phải xuất hiện lần lượt để cho phép bạn tìm hiểu điều gì đang xảy ra. Khi quét CSS, bạn có thể chỉ thấy khai báo 5 và tự hỏi liệu nó có cần thiết không vì các phần tử 6 không có nền theo mặc định(Tôi cần lưu ý ở đây rằng 0 không phải là giá trị ban đầu cho thuộc tính 3. 3 là tốc ký, vì vậy nó không có giá trị ban đầu duy nhất. Tuy nhiên, 0 là giá trị ban đầu cho thuộc tính 1. Và, như bạn có thể biết, thông thường khi bạn viết một hoặc nhiều giá trị trong một khai báo tốc ký, tất cả các giá trị tốc ký khác sẽ được hoàn nguyên về trạng thái ban đầu của chúng. Trong trường hợp trên, thuộc tính 2 sẽ được đặt thành 3, vì vậy kết quả là những gì mong muốn. )Sử dụng Công cụ dành cho nhà phát triển trình duyệt để tìm phần ghi đè ban đầuNếu bạn đang làm việc trong CSS của mình trong khi xem trang trực tiếp mà CSS được đề cập đang xử lý, thì không khó để biết điều gì đang xảy ra nếu bạn bắt gặp một giá trị CSS được khai báo rõ ràng về trạng thái ban đầu của nó Đây là những gì bạn sẽ thấy trong DevTools của Chrome nếu bạn có ví dụ về 4 từ phần trướcDevTools làm rõ ràng rằng giá trị 5 không phải là không cần thiết. Tất cả các công cụ dành cho nhà phát triển trình duyệt sẽ làm như vậy và đây là điều khiến các công cụ này trở nên hữu ích trong việc theo dõi các sự cố CSSRõ ràng trong CSS của bạnBạn sẽ nhận thấy rằng tôi đã đưa ra tùy chọn thứ ba về lý do tại sao bạn có thể tìm thấy các giá trị ban đầu được khai báo trong biểu định kiểu. Tác giả mã đang thực sự rõ ràng về những gì đang xảy ra trong mã (cố ý hoặc thiếu hiểu biết) Tôi không nhất thiết phải đồng ý với việc thêm các giá trị ban đầu vì lý do này, nhưng tôi cũng không nhất thiết phải nói đó là mã xấu. Một ví dụ hoàn hảo về điều này là CSS dành cho các công nghệ tương đối mới có thể được sao chép và dán từ các hướng dẫn trực tuyến hoặc tương đối xa lạ với người viết mã Ví dụ: khi đọc hướng dẫn về các tính năng CSS mới như flexbox, bạn có thể thấy mã giống như thế này 2Tôi đã phóng đại quan điểm của mình trong ví dụ trên, nhưng một số ví dụ mã trực tuyến nhất định có một số điểm tương đồng với điều đó. Nếu bạn là người mới sử dụng flexbox, thì có lẽ bạn sẽ không gặp nhiều vấn đề với mã. Nhưng đoán xem? 3Bảy trong số tám thuộc tính liên quan đến flexbox mà tôi đưa vào trong ví dụ trước đã bị xóa vì tất cả chúng đều được đặt thành giá trị ban đầu, vì vậy những dòng đó là thừa Trong trường hợp này, tôi không ngại thêm những dòng bổ sung đó vì việc xem một số thuộc tính flexbox tiềm năng có sẵn, cùng với một số giá trị, có thể mang tính giáo dục. Vì vậy, đây là trường hợp mã rõ ràng với một số lợi ích đối với việc quét mã. Xét cho cùng, mặc dù rõ ràng trong phiên bản rút gọn rằng phần tử 6 là một bộ chứa linh hoạt, nhưng có thể không rõ ràng ngay lập tức rằng các phần tử 7 lồng nhau với phần đệm 10px là các phần tử linh hoạtChỉ ra các giá trị ban đầu trong các bình luậnVì vậy, nếu chúng ta lấy một ví dụ thực tế hơn sử dụng một số tính rõ ràng với các giá trị ban đầu, tôi nghĩ một số điều như sau có thể hữu ích 6Trong ví dụ trên, có bốn dòng thừa (thực tế hơn bảy dòng) và mỗi dòng được nhận xét để chỉ ra rằng tác giả mã nhận thức được điều này nhưng muốn các dòng ở lại Và tất nhiên, điều này có thể được thực hiện đối với bất kỳ thuộc tính CSS nào được đặt thành giá trị ban đầu, kể cả CSS ghi đè CSS trước đó. Đây lại là ví dụ về 4 8Và tôi cho rằng trong một số trường hợp nhất định, những điều sau đây sẽ còn tốt hơn nữa 9Ở đây tôi đang sử dụng giá trị từ khóa CSS 9 được hỗ trợ khá tốt, đây là một trong những tính năng phổ biến của ngôn ngữ. Trong cả hai trường hợp, ngay cả khi không có nhận xét, giả sử ghi đè là tốt, nhưng việc thêm nhận xét sẽ làm cho nó rõ ràng hơnSuy nghĩ cuối cùngTôi không nhất thiết nghĩ rằng các giá trị ban đầu không cần thiết là một vấn đề lớn trong CSS. Một vài dòng bổ sung sẽ không phá vỡ cơ sở mã hoặc gây ra các vấn đề lớn về hiệu suất Mối quan tâm chính của tôi là với các giá trị ban đầu không rõ ràng rằng chúng được ghi đè và nội dung được đưa vào (hoặc sao chép) vì lý do giáo dục bằng cách sử dụng các tính năng CSS mới đối với tác giả của mã Thuộc tính CSS nào được sử dụng làm mặc định?Tĩnh. Đây là giá trị mặc định cho các phần tử. Phần tử được định vị theo quy trình bình thường của tài liệu. Các thuộc tính left, right, top, bottom và z-index không ảnh hưởng đến phần tử có vị trí. tĩnh .
Giá trị CSS là gì?Cú pháp định nghĩa giá trị CSS, một ngữ pháp chính thức, được dùng để xác định tập hợp các giá trị hợp lệ cho thuộc tính hoặc hàm CSS . Ngoài cú pháp này, tập hợp các giá trị hợp lệ có thể bị hạn chế hơn nữa bởi các ràng buộc ngữ nghĩa (ví dụ: đối với một số hoàn toàn là số dương).
HTML giá trị mặc định là gì?Ghi chú. Giá trị mặc định là giá trị được chỉ định trong thuộc tính giá trị HTML . Sự khác biệt giữa thuộc tính defaultValue và value là defaultValue chứa giá trị mặc định, trong khi value chứa giá trị hiện tại sau khi thực hiện một số thay đổi.
CSS có thể đặt giá trị hiển thị mặc định không?Chúng ta có thể thay đổi giá trị mặc định về cách phần tử HTML sẽ được hiển thị bằng cách sử dụng thuộc tính Hiển thị CSS . LƯU Ý - Phần tử |