Người đóng góp plugin jarnovos
(@jarnovos)
Xin chào @jchrusty,
Complianz áp dụng các quy tắc CSS nhất định cho Văn bản pháp lý. Bạn có thể tắt hoàn toàn CSS tài liệu này, nếu muốn, trong Tuân thủ > Cài đặt > Sử dụng CSS tài liệu của Tuân thủ
Nhưng điều đó sẽ vô hiệu hóa tất cả CSS tài liệu khỏi Complianz và trong trường hợp của bạn, có thể chỉ cần thêm một vài quy tắc CSS bổ sung để đặt các thành phần này thành kích thước phông chữ và chiều cao dòng mong muốn
Bạn có thể áp dụng các kiểu của mình với các lớp CSS như được ghi chú bên dưới
/* titles in Complianz documents */
#cmplz-document h2 {}
/* subtitles */
#cmplz-document .subtitle {}
/* text */
#cmplz-document, #cmplz-document p, #cmplz-document span, #cmplz-document li {}
Ngoài ra, vui lòng tham khảo https. //tuân thủ. io/css-classes-overview/ để biết tổng quan đầy đủ về các lớp có sẵn
Hãy cho tôi biết nếu tôi có thể trợ giúp việc này.
Trân trọng,
Jarno
- Câu trả lời này đã được sửa đổi 11 tháng, 2 tuần trước bởi jarnovos .
Trình bắt đầu chủ đề jchrusty
(@jchrusty)
Xin chào,
cảm ơn bạn, công tắc này làm hầu hết công việc. Nhưng bây giờ tôi hiểu gợi ý của bạn, bởi vì bây giờ bảng 6. Platzierte Cookies lokks không ổn lắm
Có thể chỉ nói cho các lớp CSS mà bạn đã đăng để có được các kiểu chủ đề. Tôi không muốn có hai vị trí cho cùng một kiểu css
Tôi muốn chứng minh một số lợi ích của các kiểu có phạm vi so với CSS ưu tiên thiết bị di động với các giá trị ghi đè cho các điểm ngắt rộng hơn. Tôi sẽ bắt đầu bằng cách giải thích hai cách tiếp cận, trước khi liệt kê các lợi ích
Ưu tiên thiết bị di động với các phần ghi đè cho các điểm dừng rộng hơn
h2 {
color: black;
font-size: 2em;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
@media (min-width: 500px) {
padding-bottom: 0;
border-bottom: none;
font-size: 3em;
}
}Trong mẫu này, tất cả các kiểu bên ngoài truy vấn phương tiện đều là kiểu dành cho thiết bị di động hoặc phổ biến. Chúng tôi ghi đè một số kiểu này để có các điểm dừng rộng hơn
Trước ưu tiên thiết bị di động, ưu tiên máy tính để bàn là một mô hình phổ biến. kiểu cho máy tính để bàn và kiểu ghi đè cho các điểm dừng nhỏ hơn. Mẫu ưu tiên thiết bị di động đã thành công vì nó có nghĩa là ít ghi đè hơn, vì thiết bị di động có xu hướng yêu cầu ít kiểu hơn máy tính để bàn
Một lý do khác khiến mẫu này trở nên thích hợp hơn là vì các trình duyệt không hỗ trợ truy vấn phương tiện có thể dự phòng cho các kiểu di động. Điều này thực sự không còn là vấn đề đáng lo ngại nữa, giờ đây chúng tôi đã hỗ trợ tốt cho các truy vấn phương tiện trong tất cả các trình duyệt
Các kiểu có phạm vi (không chỉ các điểm dừng rộng hơn)
h2 {
color: black;
margin-bottom: 0.5em;
@media (max-width: 499px) {
font-size: 2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
@media (min-width: 500px) {
font-size: 3em;
}
}Trong mẫu này, tất cả các kiểu bên ngoài truy vấn phương tiện đều phổ biến (được chia sẻ cho tất cả các kích thước khung nhìn). Tất cả các kiểu cụ thể của khung nhìn đều được xác định phạm vi, bằng cách sử dụng truy vấn phương tiện max-width hoặc
h2 {
color: black;
font-size: 2em;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
@media (min-width: 500px) {
padding-bottom: 0;
border-bottom: none;
font-size: 3em;
}
}0Tôi nghĩ rằng có rất nhiều lợi ích cho phương pháp này
Ít hoàn tác hơn
Với CSS ưu tiên thiết bị di động, chúng tôi phải hoàn tác bất kỳ kiểu nào mà chúng tôi không muốn trên các điểm dừng rộng hơn
Bằng cách xác định phạm vi các kiểu cụ thể của chế độ xem bằng cách sử dụng truy vấn phương tiện max-width hoặc
h2 {
color: black;
font-size: 2em;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
@media (min-width: 500px) {
padding-bottom: 0;
border-bottom: none;
font-size: 3em;
}
}0, chúng tôi sẽ không phải hoàn tác các kiểu cho bất kỳ điểm dừng nào, e. g. nếu chúng ta có các phiên bản khác nhau của một thành phần. Tôi không thấy bất kỳ lý do nào tại sao chúng ta không nên áp dụng nguyên tắc tương tự với các thành phần đáp ứng
Khi bạn đi xuống một biểu định kiểu, bạn chỉ nên thêm các kiểu chứ không nên xóa
—
Ví dụ, so sánh
h2 {
color: black;
font-size: 2em;
margin-bottom: 0.5em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
@media (min-width: 500px) {
/* Override: undo */
padding-bottom: 0;
/* Override: undo */
border-bottom: none;
/* Override: change */
font-size: 3em;
}
}với
h2 {
color: black;
margin-bottom: 0.5em;
@media (max-width: 499px) {
font-size: 2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
@media (min-width: 500px) {
font-size: 3em;
}
}Bởi vì chúng tôi ít hoàn tác kiểu hơn nên mã cũng dễ đọc hơn. Chúng ta có thể dễ dàng phân biệt giữa các kiểu phổ biến và kiểu cụ thể của khung nhìn
Ít tiếng ồn hơn từ các phần ghi đè khi làm việc với CSS trong các công cụ dành cho nhà phát triển
Ví dụ, so sánh
với
Ví dụ thứ hai dễ xem hơn và hiểu kiểu tính toán cuối cùng sẽ là gì. Bạn không cần phải tính toán các phần ghi đè trong đầu
Dễ bảo trì hơn
Rất thường xuyên trong CSS, tôi bắt gặp các kiểu mồ côi có thể được yêu cầu tại một số điểm, nhưng một bộ tái cấu trúc ở nơi khác đã khiến chúng trở nên dư thừa
Ví dụ: với cách tiếp cận ưu tiên thiết bị di động, nếu sau đó chúng tôi quyết định không cung cấp cho
h2 {
color: black;
margin-bottom: 0.5em;
@media (max-width: 499px) {
font-size: 2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
@media (min-width: 500px) {
font-size: 3em;
}
}0 một h2 {
color: black;
margin-bottom: 0.5em;
@media (max-width: 499px) {
font-size: 2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
@media (min-width: 500px) {
font-size: 3em;
}
}1 trên thiết bị di động, chúng tôi có thể quên xóa tùy chọn ghi đè sẽ hoàn tác điều đóNếu kiểu
h2 {
color: black;
margin-bottom: 0.5em;
@media (max-width: 499px) {
font-size: 2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
@media (min-width: 500px) {
font-size: 3em;
}
}1 trên h2 {
color: black;
margin-bottom: 0.5em;
@media (max-width: 499px) {
font-size: 2em;
padding-bottom: 0.5em;
border-bottom: 1px solid #ccc;
}
@media (min-width: 500px) {
font-size: 3em;
}
}0 của chúng tôi nằm trong phạm vi, sẽ không có ghi đè nào để xóaCác kiểu mồ côi làm cho CSS khó bảo trì hơn, vì không còn rõ liệu các kiểu có cần thiết hay không
Nếu chúng ta có thể viết ít phong cách hơn ngay từ đầu, e. g. bằng cách tránh ghi đè, chúng ta có thể giảm nguy cơ những điều này xảy ra trong quá trình tái cấu trúc
Làm cách nào để xóa CSS kiểu?
Bạn có thể xóa thuộc tính kiểu CSS khỏi một phần tử bằng cách đặt thuộc tính thành giá trị null , e. g. hộp. Phong cách. nềnColor = null;.
Làm cách nào để ghi đè các kiểu CSS?
Để ghi đè các thuộc tính CSS của một lớp bằng một lớp khác, chúng ta có thể sử dụng. chỉ thị quan trọng . Trong CSS,. quan trọng có nghĩa là "điều này quan trọng" và thuộc tính. cặp giá trị có chỉ thị này luôn được áp dụng ngay cả khi phần tử khác có tính đặc hiệu cao hơn.
Ghi đè CSS là gì?
CSS cho phép bạn áp dụng các kiểu cho trang web. Quan trọng hơn, CSS cho phép bạn làm điều này độc lập với HTML tạo nên mỗi trang web. ghi đè. Ghi đè trong CSS có nghĩa là bạn đang cung cấp bất kỳ thuộc tính kiểu nào cho phần tử mà bạn đã cung cấp kiểu .
Làm cách nào để xóa thuộc tính kế thừa trong CSS?
Bạn có thể sử dụng từ khóa chưa đặt để đặt lại thuộc tính. .
Mặc dù vậy, CSS có thể nói 'bỏ qua tất cả các kiểu được kế thừa' không? . .
Không, bạn phải ghi đè các thuộc tính riêng lẻ theo cách thủ công. .
"lớp con css không lấy thuộc tính". Bây giờ tôi đã hiểu tại sao nó bị ghi đè bởi một quy tắc "cao hơn" khác
