Làm theo lời khuyên trong The 6 Most Important CSS Techniques You Need To Know, tôi đặt số font-size của cơ thể mình thành 62.5%, số font-size của div thành 1.4 em (biến thể nhỏ từ bài viết). p.tags và p.published 's font-size được đặt thành 1em.Kích thước phông chữ không hoạt động ở đây như thế nào?
Tuy nhiên, điều này không hiệu quả đối với tôi. Cả văn bản và văn bản thông thường trong p.tags và p.published đều có cùng kích thước (Firefly) 16,8px. Bạn có thể giải thích tại sao mã của tôi không hoạt động? Tôi đang thử nghiệm trong Firefox 3.6.3. Các sample page được hiển thị bởi tác giả chỉ hoạt động tốt trong cùng một trình duyệt.
Tôi đã sao chép toàn bộ trang bên dưới — xin lỗi vì độ dài của nó, nhưng tôi nghĩ tốt hơn là không bỏ qua bất kỳ thứ gì.
<html>
<head>
<title>Title</title>
<style type="text/css">
body {
font-family: Georgia, "Century Schoolbook", "Times New Roman", Serif;
font-size: 62.5%;
background-color: #2B3856; /* Dark slate blue */
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Helvetica, Tahoma, "Sans Serif";
color: #2B3856;
margin-top: 2px;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
color: #2B3856;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
text-decoration: underline;
}
div#container {
width: 800px;
font-size: 1.4em;
margin: 5px auto;
background-color: #E3E4FA; /* Lavender */
}
#sidebar {
width: 200px;
float: right;
margin: 0px;
padding: 0px;
}
#sidebar div {
padding: 0 5px 5px;
}
#sidebar div.shadowbox { margin-right: 5px; }
#content {
width: 600px;
float: left;
margin: 0px;
padding: 0px;
}
#header {
/*background-color: white;*/
background-color: #2B3856; /* #E3E4FA; Lavender */
margin-bottom: 5px;
height: 100px;
}
#header h1 {
color: #B93B8F; /* Plum */
line-height: 100px;
text-align: center;
font-size: 45px;
}
#description {
color: #7D1B7E /* Dark Orchid */
}
a {
text-decoration: underline;
color: #153E7E;
}
a:hover {
text-decoration: none;
}
div#posts {
padding: 0px;
font-size: 1.2em;
margin: 0px;
}
div#posts div.post {
padding: 5px;
margin: 0px 5px 15px 5px;
}
p.tags, p.published {
font-size: 1em;
}
.shadowbox {
background: repeat 0 0 url('http://www.jawsalgorhythmics.com/images/darkness-100x100-10pct.png');
}
.justifycenter { text-align: center; }
.floatright { float:right; }
.floatleft { float: left; }
.clearright { clear: right; }
.clearleft { clear:left; }
.clearboth { clear: both; }
.halfsidebarwidth { width: 82px; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Odds 'n Ends</h1>
</div> <!-- header -->
<div id="sidebar">
<div class="shadowbox">
<br /><p class="justifycenter"><img width="64" height="64" src="{PortraitURL-64}" /></p>
<div class="floatleft halfsidebarwidth"><a href="/archive" class="archive">Archives</a></div>
<div class="floatleft halfsidebarwidth"><a href="{RSS}" class="rss">RSS</a></div>
<div class="clearboth"></div>
</div>
</div> <!-- sidebar -->
<div id="content">
<div id="posts">
<div class="post shadowbox">
<span class="quote">
"It does not matter how slow you go so long as you do not stop."
<div class="source">Wisdom of <a href="#" title="http://en.wikipedia.org/wiki/Confucius">Confucius</a></div>
</span>
<p class="tags">Tags: #<a href="#" title="http://demo.tumblr.com/tagged/wisdom">wisdom</a> </p>
<p class="published">Posted: Nov 08, 2006 at 2:27 pm
<a href="#" title="http://demo.tumblr.com/post/236/it-does-not-matter-how-slow-you-go-so-long-as-you">Permalink</a> <a href="#" title="http://tumblr.com/xr06k">Short URL</a></p>
</div>
</div> <!-- posts -->
</div> <!-- content -->
<div class="clearboth"></div>
<div id="footer" style="text-align: justify;">
<h1>The footer</h1>
</div>
</div> <!-- container -->
</body>
</html>
Sử dụng tính năng này thay vì đăng toàn bộ danh sách HTML: http://jsfiddle.net/JYfqL/. – Kyle
Điều đó có vẻ như một "kỹ thuật" vô nghĩa và có thể sai đối với tôi. Các tuyên bố như "Bằng cách đặt kích thước phông chữ cơ thể thành 62,5%, điều đó sẽ đặt kích thước phông chữ của bạn thành 10 pixel" là sai và tôi không thể thấy cách thiết kế web trở nên dễ dàng hơn hoặc khác biệt. Nó chỉ dẫn đến các vấn đề như bạn đang gặp phải. – RoToRa