CSS "nội dung" không hoạt động

Question

Tôi muốn thêm văn bản cho đoạn văn qua CSS thay vì trong HTML, bởi vì đó là chủ đề thay đổi với sự đáp ứng của trang web.

Bây giờ tôi không thể làm cho nó hoạt động được, và tôi tự hỏi liệu có điều gì đó sai với CSS không?

Ngoài ra, đây có phải là cách duy nhất có thể thực hiện (với HTML và CSS thuần túy) hay có cách nào khác để nhắm mục tiêu văn bản và thay đổi nó bằng mọi độ phân giải không?

HTML:

<p class="title"></p> 

CSS:

p.title { 
     width: auto; 
     height: auto; 
     position: relative; 
     float: left; 
     clear: none; 
     margin: 40px 0 0 0; 
     padding: 0; 
     display: block; 
     font-family: 'Fjalla One', sans-serif; 
     font-weight: 400; 
     font-size: 36px; 
     color: #d76e50; color: rgba(215, 92, 52, 0.9); 
     cursor: default; 
     content:"TITLE GOES HERE"; 
} 

Answer 1

CSS content tài sản duy nhất có thể được sử dụng với :before và :after pseudo-yếu tố. Bạn có thể giải quyết vấn đề này bằng cách tạo phần tử con chỉ có kiểu dáng trên :after ví dụ và cũng bao gồm thuộc tính content cho văn bản phụ thuộc vào độ phân giải thông qua truy vấn phương tiện.

Answer 2

CSS không phải là nơi để đặt nội dung, ngay cả khi bạn muốn nội dung thay đổi như là một phần của thiết kế đáp ứng của bạn.

Toàn bộ điểm của HTML/CSS/JS là phải có sự tách biệt giữa nội dung, kiểu và chữ viết. Đưa nội dung vào CSS hoặc tạo kiểu vào các ngắt HTML, bất kể ý định của bạn là gì.

Nhưng để trả lời trực tiếp câu hỏi của bạn: CSS content chỉ hợp lệ trong một vài trường hợp. Nó không có sẵn trên bộ chọn chung (chính xác vì những điểm tôi đã tạo ở trên).

content chỉ khả dụng cho các bộ chọn dẫn đến các phần tử giả được thêm vào trang. Trong thực tế, điều này có nghĩa là bạn chỉ có thể thực sự sử dụng content với các bộ chọn ::before và ::after.

Và ngay cả trong những trường hợp này, nơi bạn có thể sử dụng, bạn vẫn không nên sử dụng nó theo cách bạn đã mô tả. Với ::before và ::after, nó không nhằm mục đích đưa nội dung thực vào CSS của bạn; nó có nghĩa là thực sự chỉ cho các nhiệm vụ như chèn một điểm đánh dấu bên cạnh một cái gì đó, chẳng hạn như biểu tượng nhỏ bạn nhận được bên cạnh các liên kết bên ngoài trong các trang web như Wikipedia. Kiểu đó vẫn là kiểu dáng, và do đó chính xác là trong CSS, mặc dù nó có thêm 'nội dung'.

Lưu ý rằng nội dung được chèn bằng cách sử dụng ::before và ::after có thể hoạt động khác với nội dung khác trong trang web của bạn. Ví dụ: bạn sẽ không thể truy cập phần tử giả qua Javascript và người dùng của bạn có thể không chọn được văn bản. Cách thức điển hình hơn để đạt được những gì bạn đang cố gắng làm là có hai (hoặc nhiều hơn) thành phần trên trang chứa nhiều chuỗi nội dung khác nhau và để mã CSS đáp ứng của bạn kích hoạt một trong số chúng hiển thị và những người khác bị ẩn theo kích thước trang.

Answer 3

sở hữu nội dung

CSS có thể được áp dụng chỉ pseudo-elements theo nhà phát triển Mozilla Networks Documents, vì vậy bạn có thể thêm dòng mã này vào file css của bạn:

p.title:after{ 
    content:"TITLE GOES HERE"; 
}