نوار کناری در سایت‌های مختلف مکان خوبی است که یک دسته ابزار خاص را که درون یک گروه می‌توان دسته بندی کرد را جای داد. مثلاً پیوند دادن به بایگانی نوشته‌ها یا لینک‌های دوستان همگی از این موارد است که در بیشتر سایت‌های چند ستونه قابل مشاهده است. اما معمولاً هر بخش شامل یک عنوان است که به عنوان ابزارک معروف است. البته شما می‌توانید اسم آن را هر چه می‌خواهید بگذارید یا از این ترفندی که قصد آموزش آن را دارم در هر کجای صفحه‌ی وب‌تان استفاده کنید. ولی این نوع سبک بندی عنوان یا یک متن، معمولاً برای این منظور استفاده می‌شود. در کل، این آموزش که ترفند جاگذاری متن کنج یک جعبه با CSS را به شما می‌آموزد، به نکات زیادی از جمله خاصیت فاصله‌ی بین خطوط در CSS اشاره خواهید کرد.
زمانی که با نمونه‌های مختلف از کارکردهای استایل‌ها روبرو می‌شوید، بهترین کار این است که کدهای آن را برای خود کنکاش کنید. در این صورت است که هم یادگیری CSS برای شما جذاب می‌شود، و هم به صورت کاربردی یک نکته را برای همیشه می‌آموزید.
اگر به عکس بالا نگاهی بیاندازید، مشاهده می‌کنید متنی که در بالای عکس روی پس زمینه آبی رنگ قرار گرفته است، شبیه به یک عکس است. اما باید گفت که این طور نیست. شما با CSS هم می‌توانید چنین کاری را انجام دهید. در اصل تا زمانی که شما بتوانید با CSS کاری را که یک عکس انجام می‌دهد را به انجام رسانید، این بهترین گزینه است. چون CSS معمولاً حجم صفحه وب شما را بالا نمی‌برد. در صورتی که معمولاً عکس‌ها حجم زیادی را اشغال می‌کنند.
مهمترین خاصیتی که ما برای ساخت چنین متنی از آن استفاده کردیم، line-height می‌باشد. این اعلامیه در CSS امکان تعیین فاصله‌ی بین خطوط را محیا می‌کند. حال اگر عرض و طول یک جعبه را ما به صورت ثابت تعیین کنیم، با اعلامیه‌ی مذکور به راحتی می‌توان محل قرارگیری متن را منتهی الیه پایین یا بالا تعیین نماییم. مهمترین نکته‌ی این آموزش همین است. اگر مفهوم این جمله را متوجه نشدید بهتر است که مثال را خودتان ببینید که البته نیاز به نداستن حداقل‌های CSS است. پس اگر این مقدمات را ندارید زمانی را بگذارید و آنها را بیاموزید.
<html>
<head>
<title>Test Page</title>
<style>
#container{
width: 900px;
margin: 0px auto;
border: 2px solid #ececec;
font-family: tahoma;
color: black;
}
#left_sidebar{
float:left;
border: 0px solid red;
margin: 10px;
padding :5px;
width: 250px;
background-color: #ececec;
}
.top_list{
background-color: #15909e;
color: #ececec;
height: 46px;
font-size: 26px;
font-family: Serif;
line-height: 66px;
margin-top: 0px;
padding-top: 10px;
}
.top_list h2{
padding: 0;
margin: 0;
text-shadow: 1px -1px #5ea8a1;
}
.text-sidebar{
margin: 5px;
font-size: 13px;
}
</style>
</head>
<body>
<div id='container'>
<div id='left_sidebar'>
<div class='top_list'>
<h2>The name</h2>
</div>
<div class="text-sidebar">
<p>Now, except for those multi-colored borders I've put around each of my containing divs (they will be removed shortly), I have an XHTML and CSS design that's not half bad. Let's polish it off!</p>
</div>
</div>
<div style="clear:both;"></div>
</div>
<!-- Produce with webnology.ir -->
</body>
</html>
برای مشاهده نتیجه کافی است که کدهای بالا را درون یک فایل با پسوند html ذخیره کنید و آن را با مرورگر خود اجرا کنید. دقیقاً به مانند عکسی که در بالاتر دیدید برای شما متنی در مرورگر بارگذاری خواهد شد. اما سعی کنید که خودتان یک بار دیگر کدها را در ویرایشگر متنی از جمله notepadd++ بازنویسی کرده تا با کارایی هر کد آشنا شوید.
Style به شکل درونی است و در قسمت سربرگ کدها قرار داده شده و پس از آن با Class و id مشخصات به اجزاء صفحه مربوط شده است. انتخابگرهای container و left-sidebar زیاد مهم نیستند و برای بازنویسی می‌توانید از آنها صرف نظر کنید. ولی Class به نام top-list بسیار مهم است و می‌توانید تمرکز خود را روی آن قرار دهید. مثلاً با اعداد و ارقام این بخش بازی کنید تا نتیجه را مشاهده نمایید.
پس بدین ترتیب دیدید که چطور با استفاده از CSS به راحتی توانستیم متن گرافیکی بسیار زیبا و ساده‌ای را بسازیم. با تغییر و تحول بیشتر این کد، به آن چیزی که در ذهن دارید برسید.
با تشکر از مطالب خوبتون
webim.ir
از این مطلب در طراحی سایت های خوب استفاده کردم ممنونم ازت رفیق
webwe.ir
سلام آموزش جامع و کاملی بود ممنون از سایت خوب و عالیتون