Tôi ban đầu muốn bao gồm tệp .css trong tài liệu HTML của mình tải nhiều tệp .css khác để chia một số đoạn mã cho mục đích phát triển.Nhập CSS hoặc nhiều tệp CSS
Tôi đã tạo ra một trang thử nghiệm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Recipe Site</title>
<link rel='stylesheet' href='/css/main.css'>
<link rel='stylesheet' href='/css/site_header.css'>
<!-- Let google host jQuery for us, maybeb replace with their api -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</head>
<body>
<div id="site_container">
<div id="site_header"><?php include_once($r->base_dir . "inc/site_header.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
<div id="site_content">
Some main content.
</div>
<div id="site_footer"><?php include_once($r->base_dir . "inc/site_footer.inc.php"); ?><!-- Include File, Update on ajax request. --></div>
</div>
</body>
</html>
File: /css/main.css
/* Reset Default Padding & Margin */
* {
margin: 0;
padding: 0;
border: 0;
}
/* Set Our Float Classes */
.clear { clear: both; }
.right { float: right; }
.left { float: left; }
/* Setup the main body/site container */
body {
background: url(/images/wallpaper.png) repeat;
color: #000000;
text-align: center;
font: 62.5%/1.5 "Lucida Grande", "Lucida Sans", Tahoma, Verdana, sans-serif;
}
#site_container {
background-color: #FFFFFF;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: left;
width: 100%;
}
/* Some style sheet includes */
/* @import "/css/site_header.css"; */
/* Default Font Sizes */
h1 { font-size: 2.2em; }
h2 { font-size: 2.0em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.6em; }
h5 { font-size: 1.4em; }
p { font-size: 1.2em; }
/* Default Form Layout */
input.text {
padding: 3px;
border: 1px solid #999999;
}
/* Default Table Reset */
table {
border-spacing: 0;
border-collapse: collapse;
}
td{
text-align: left;
font-weight: normal;
}
/* Cause not all browsers know what HTML5 is... */
header { display:block;}
footer { display:block;}
và bây giờ là tập tin: /css/site_header.css:
#site_header {
background-color: #c0c0c0;
height: 100px;
position: absolute;
top: 100px;
width: 100%;
}
Sự cố:
Khi tôi sử dụng mã ở trên, div site_header không có bất kỳ định dạng/nền nào. Khi tôi xóa dòng liên kết khỏi tài liệu HTML cho site_header.css và thay vào đó sử dụng @import url ("/ css/site_header.css"); trong tệp main.css của tôi, cùng một kết quả - không có gì được hiển thị cho cùng một div.
Bây giờ khi tôi đi đánh dấu CSS từ site_header.css và thêm nó vào main.css, div được kết xuất tốt ...
Vì vậy, tôi tự hỏi nếu có nhiều file css là bằng cách nào đó không làm việc .. hoặc có thể có đánh dấu css đó vào cuối css trước của tôi là bằng cách nào đó xung đột, mặc dù tôi không thể tìm thấy một lý do tại sao nó sẽ.
Để tôi chỉ thêm liên kết cho một bài viết thể hiện bằng cách sử dụng nhiều css thông qua nhập: [Sử dụng CSS @import Rule] (http://www.cssnewbie.com/css-import-rule/) – sumid