CSS và hình ảnh trên Trang chính

Question

Tôi có vấn đề khá phổ biến này, nhưng không tìm được giải pháp hoạt động.

Về cơ bản, tôi đang sử dụng một trang Master (/Masterpages/Default.master), trong đó bao gồm

<link href="../css/style.css" rel="stylesheet" type="text/css /> 

Và nó cũng bao gồm một số hình ảnh với các liên kết tương đối giống nhau.

Nhưng khi tôi áp dụng Trang chính cho các trang nội dung (trong các thư mục khác nhau), việc định dạng css và hình ảnh bị mất.

Có cách nào để tự động giải quyết các liên kết thư mục tới css và hình ảnh cho tất cả các trang nội dung bằng cách sử dụng trang chính không?

Cảm ơn trước

UPDATE:

Có một vấn đề nữa. Đó là khó khăn để có được đầu ra để render một cách chính xác trong cả trình duyệt và trong thiết kế xem trong Visual Studio.

tôi đã nhận nó để làm việc bằng cách sử dụng các asp: image giải pháp cho những hình ảnh trong masterpage và bởi đôi nối css trong masterpage, một để làm cho nó render trong VS và một để làm cho nó render một cách chính xác duyệt trang web.

<link href="../css/style.css" rel="stylesheet" type="text/css" /> 
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" /> 

Answer 1

tốt nhất để sử dụng:

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css /> 

vì điều này sẽ đối phó với rễ ứng dụng IIS không giống như:

<link href="/css/style.css" rel="stylesheet" type="text/css /> 

Answer 2

Khá chắc chắn điều này sẽ làm việc

<link href="/css/style.css" rel="stylesheet" type="text/css /> 

/đưa bạn vào thư mục gốc của trang web của bạn

Answer 3

Hình ảnh trong CSS có liên quan đến các tập tin họ được tham chiếu từ.

(Một ngoại lệ từ này là "bộ lọc" quy tắc trong Internet Explorer được sử dụng để sửa chữa PNG Các hình ảnh trong trường hợp này có liên quan đến tài liệu HTML..)

Answer 4

Bạn có thể sử dụng dấu ngã để nhận liên kết làm việc từ bất cứ đâu. Điều này cũng sẽ hoạt động trong Hình ảnh.

<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css /> 

Answer 5

Vâng, vấn đề là các materpage đang sử dụng một URL có liên quan để nạp CSS:

"../css/style.css" 

bạn cần phải thay đổi điều này vào thư mục gốc trang web (tùy thuộc vào vị trí của file css của bạn) giống như:

"/css/style.css" 

hơn tất cả các cấp thư mục khác nhau có thể sử dụng cùng một url.

Answer 6

Bạn có thể tạo liên kết runat = "server" và sử dụng ánh xạ dấu ngã để làm cho đường dẫn CSS liên quan đến gốc trang.

<link runat="server" id="siteStyle" 
     href="~/css/style.css" 
     rel="stylesheet" 
     type="text/css" /> 

Hình ảnh được tham chiếu trong CSS phải liên quan đến vị trí của tệp CSS và nên giải quyết bình thường khi tệp CSS được bao gồm chính xác. Đối với hình ảnh trong các thẻ trên trang, bạn sẽ cần sử dụng điều khiển ASP: Hình ảnh và, một lần nữa, sử dụng ánh xạ dấu ngã cho một đường dẫn liên quan đến gốc.

Answer 7

Thực ra, trang chính sẽ tự động rebase các tệp css cho bạn, mà không cần phải thêm runat = "server". Hãy chắc chắn rằng tệp css của bạn nằm một thư mục trong thư mục bạn đã chỉ định.

Bạn có thể sử dụng đường dẫn tuyệt đối tới tệp css, nhưng studio trực quan dường như không hiển thị kiểu trong chế độ xem thiết kế khi bạn thực hiện việc này. Ngoài ra, đôi khi bạn sẽ không biết liệu bạn có đang chạy trong một thư mục ảo hay không, vì vậy không phải lúc nào cũng lý tưởng để sử dụng đường dẫn tuyệt đối.

Ngoài ra, hãy sử dụng liên kết tương đối với hình ảnh của bạn dựa trên chính tệp css - sẽ hoạt động bất kể cách bạn liên kết với biểu định kiểu của mình.

Answer 8

Bạn cũng có thể quan tâm đến việc tìm kiếm các chủ đề và giao diện.

ASP.NET Themes and Skins Overview