Hướng dẫn why is my css file not being applied? - tại sao tệp css của tôi không được áp dụng?

Question

html, body, div, span, applet, object, iframe,
h2, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

Nội dung chính Show

Bộ nhớ đệm trình duyệt
Định dạng CSS không hợp lệ
Độ đặc hiệu của CSS
Tại sao CSS của tôi không ảnh hưởng đến HTML của tôi?
Tại sao tệp CSS không hoạt động trong Chrome?
Tại sao đôi khi CSS của tôi không tải?

Bạn đã tạo CSS tùy chỉnh cho các biểu mẫu của mình, nhưng thiên đường có thể thấy những kiểu đó khi xem trang web của bạn? Có một vài vấn đề phổ biến có thể khiến CS không xuất hiện chính xác trên một trang web.

Trong hướng dẫn này, chúng tôi sẽ đi qua các tùy chọn để khắc phục lý do tại sao CSS của bạn không hoạt động và cung cấp các giải pháp khả thi.

Bộ nhớ đệm trình duyệt
- Thử một trình duyệt khác
- Hỏi máy chủ của bạn nếu họ có bộ nhớ cache
- Thử một nguồn Internet khác
Định dạng CSS không hợp lệ
Độ đặc hiệu của CSS
- Sử dụng! Quan trọng trong CSS

Bộ nhớ đệm trình duyệt

Thử một trình duyệt khác

Hỏi máy chủ của bạn nếu họ có bộ nhớ cache

Thử một nguồn Internet khác

Thử một trình duyệt khác

Hỏi máy chủ của bạn nếu họ có bộ nhớ cache

Thử một nguồn Internet khác

Định dạng CSS không hợp lệ

CSS phải được viết theo một định dạng cụ thể để trình duyệt hiểu nó. Có nhiều công cụ trực tuyến để kiểm tra xem CSS của bạn có hợp lệ không, bao gồm cả trình xác thực CSS W3School. Đây là một lựa chọn tuyệt vời nếu bạn có nhiều CSS tùy chỉnh và ít nhất một chút kinh nghiệm trước đây tạo CSS.

Tuy nhiên, nếu bạn chỉ sử dụng một lượng nhỏ CSS, đôi khi có thể dễ dàng thực hiện kiểm tra định dạng nhanh của riêng bạn. Hãy bắt đầu bằng cách nhìn vào một đoạn CSS hợp lệ:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Tại đây, tại sao CSS này là hợp lệ, hoặc có thể đọc được bởi các trình duyệt:

Định dạng bộ chọn chính xác: Nếu bộ chọn bao gồm nhiều phần, nó cần được viết từ ’lớn nhất đến’ nhỏ nhất. Trong ví dụ trên, div.wpforms-container-full là phần tử container lớn nhất trong HTML, trong khi .wpforms-form nằm trong thùng chứa đó. Mục nhỏ nhất và cuối cùng trong bộ chọn,
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; margin: 0 0 10px 0; }
0, được chứa bên trong của cả hai yếu tố khác. Theo bất kỳ thứ tự nào khác, trình duyệt đã giành chiến thắng có thể đọc bộ chọn này. If the selector includes multiple parts, it needs to be written from ‘biggest’ to ‘smallest’. In the example above, div.wpforms-container-full is the biggest container element in the HTML, while .wpforms-form is inside of that container. The smallest and last item in the selector,
```
div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}
```
0, is contained inside of both of those other elements. In any other order, the browser won’t be able to read this selector.
Hai dấu ngoặc: Phải có một giá đỡ xoăn mở ({) ngay sau khi bộ chọn CSS và ở cuối danh sách thuộc tính và giá trị. Quên rằng khung đóng (}) là một sai lầm phổ biến và thường sẽ ngăn tất cả các CS bên dưới nó được hiển thị trong trình duyệt. There must be an opening curly bracket ({) right after the CSS selector and at the end of the property and value list. Forgetting that closing bracket (}) is a common mistake, and will usually prevent all CSS below it from being shown in the browser.
Đại tá và dấu chấm phẩy: Hãy chắc chắn bao gồm một dấu hai chấm (:) giữa mỗi thuộc tính và giá trị CSS và dấu chấm phẩy (;) sau mỗi giá trị để trình duyệt có thể đọc CSS của bạn (ví dụ:
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; margin: 0 0 10px 0; }
1). Be sure to include a colon (:) between every CSS property and value, and a semicolon (;) after every value so the browser can read your CSS (for example,
```
div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}
```
1).
Sử dụng chính xác khoảng trắng: Phần lớn, CSS không phải là người rất kén chọn về khoảng trắng (bao gồm các tab và không gian). Một ngoại lệ cho điều này, tuy nhiên, là dành cho các đơn vị.
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; margin: 0 0 10px 0; }
2 sẽ hoạt động, ví dụ, trong khi
div.wpforms-container-full .wpforms-form .wpforms-title { font-size: 26px; margin: 0 0 10px 0; }
3 sẽ không. For the most part, CSS isn’t very picky about whitespace (which includes tabs and spaces). An exception to this, however, is for units.
```
div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}
```
2 will work, for example, while
```
div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}
```
3 will not.

Để biết thêm thông tin về việc viết CSS với cú pháp thích hợp, bạn có thể xem hướng dẫn này từ W3Schools.

Độ đặc hiệu của CSS

Vì tất cả các chủ đề và hầu hết các plugin đều chứa bộ kiểu riêng của họ, bạn sẽ thường thấy rằng các kiểu tùy chỉnh của bạn phải cạnh tranh với các kiểu hiện có. Trong các tình huống như vậy, bộ chọn CSS cụ thể hơn sẽ hầu như luôn luôn giành chiến thắng trong một bộ chọn ít cụ thể hơn.

Ví dụ: ở đây, các CS mặc định đặt kích thước phông chữ của các tiêu đề biểu mẫu trong WPForms:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
}

Hãy để cố gắng ghi đè CSS đó để làm cho phông chữ lớn hơn. Có thể hấp dẫn khi sử dụng bộ chọn CSS ngắn, như thế này:

.wpforms-title {
    font-size: 40px;
}

CSS đó là hợp lệ, nhưng phong cách của nó đã giành được thông qua trong trình duyệt. Các kiểu mặc định sẽ được áp dụng thay thế vì chúng có bộ chọn cụ thể hơn. Thay vào đó, bạn sẽ cần sử dụng cùng một bộ chọn, dài hơn làm kiểu mặc định cho CSS tùy chỉnh của bạn:

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 40px;
}

Sử dụng! Quan trọng trong CSS

Trong một số tình huống, bạn có thể buộc một đoạn CSS ít cụ thể hơn để làm việc bằng cách bao gồm quy tắc

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

4 trước dấu chấm phẩy. Nó luôn luôn tốt hơn để thử một bộ chọn cụ thể hơn (như được mô tả ở trên) trước tiên, nhưng đôi khi điều này có thể cung cấp một sửa chữa nhanh chóng.

Tuy nhiên, điều quan trọng cần lưu ý là việc thêm quy tắc

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

4 won luôn luôn hoạt động. Hãy cùng thử phương pháp này cho CSS mà chúng tôi đã thảo luận trong ví dụ cuối cùng:

.wpforms-title {
    font-size: 40px !important;
}

Trong tình huống này, trình duyệt thích tính đặc hiệu của CSS mặc định so với quy tắc

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

4 và do đó, CSS này sẽ không được áp dụng trên trang web của bạn.

Hãy cùng xem xét một ví dụ trong đó việc thêm quy tắc

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

4 hoạt động. Theo mặc định, dấu hoa thị (*) đánh dấu một trường ’bắt buộc trong wpforms sẽ có màu đỏ:

Dưới đây là CSS tạo ra phong cách đó (

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

8 là mã hex cho màu đỏ):

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #ff0000;
}

Chúng tôi muốn làm cho những dấu hoa thị này xuất hiện màu xanh thay thế. Chúng tôi có thể sao chép bộ chọn đầy đủ đó từ CSS ở trên hoặc chúng tôi có thể sử dụng bộ chọn ngắn và thêm quy tắc

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

4, như trong đoạn trích CSS này:

.wpforms-required-label {
    color: #007acc !important;
}

Có thể khó khăn để biết liệu quy tắc

div.wpforms-container-full .wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

4 có hoạt động hay không, vì vậy bạn có thể cần phải cho nó một phát bắn và kiểm tra nó.

Lưu ý: Nếu bạn thấy rằng bạn muốn viết thêm CSS tùy chỉnh cho các biểu mẫu của bạn hoặc bất kỳ phần nào khác trên trang web của bạn, hãy xem xét kiểm tra CSS Hero, một plugin cho phép bạn tạo kiểu mẫu hoặc trang web của mình một cách dễ dàng mà không cần mã. If you find that you’d like to write more custom CSS for your forms or any other part of your site, consider checking out CSS Hero, a plugin which allows you to style your forms or site easily without code.

Đó là nó! Chúng tôi đã đề cập đến các chiến lược khắc phục sự cố phổ biến nhất để sử dụng khi CSS không hoạt động. Nếu bạn vẫn gặp khó khăn trong việc tạo kiểu cho WPForms của mình, vui lòng liên hệ với sự hỗ trợ để chúng tôi có thể giúp bạn.

Tiếp theo, bạn có muốn tùy chỉnh thêm các biểu mẫu của mình không? Kiểm tra hướng dẫn của chúng tôi về tùy chỉnh các trường biểu mẫu riêng lẻ để biết chi tiết và ví dụ.

Tại sao CSS của tôi không ảnh hưởng đến HTML của tôi?

Nếu bạn đang thêm/sửa đổi CSS nội tuyến hoặc JavaScript và không thấy những thay đổi được phản ánh trong nguồn HTML, trang này có thể sẽ được lưu trữ.Giải pháp có thể là để thanh lọc bộ đệm đối tượng WordPress, lưu trữ bộ nhớ đệm trang (BATCache) của chúng tôi.the page is likely being cached. The solution may be to purge the WordPress object cache, which stores our page caching (Batcache) renders.

Tại sao tệp CSS không hoạt động trong Chrome?

Đảm bảo rằng các tệp CSS và HTM/HTML của bạn sử dụng cùng một mã hóa!Nếu các tệp HTM/HTML của bạn được mã hóa dưới dạng Unicode, bảng kiểu của bạn cũng phải như vậy.IE và Edge không cầu kỳ: Hồ sơ kiểu được hiển thị bất kể mã hóa.Nhưng Chrome hoàn toàn không khoan dung với các mã hóa chưa từng có. ! If your HTM/HTML files are encoded as UNICODE, your stylesheet has to be as well. IE and Edge are not fussy : stylesheets are rendered regardless of the encodings. But Chrome is totally intolerant of unmatched encodings.

Tại sao đôi khi CSS của tôi không tải?

Một trang web có thể không tải tệp CSS do bộ nhớ đệm của trình duyệt.Đó là nguyên nhân phổ biến nhất và là dễ dàng nhất để sửa chữa vì bạn chỉ cần xóa bộ đệm khỏi trình duyệt của mình.Tuy nhiên, có những lúc một dòng mã hoặc xung đột không hợp lệ với các chủ đề và plugin khác cũng có thể làm cho tệp CSS không thể đọc được.browser caching. It's the most common cause and is the easiest to fix because you only need to remove the cache from your browser. Yet, there are times when an invalid line of code or conflict with other themes and plugins can also make the CSS file unreadable.

programming css Css not apply Not working CSS CSS validator