طراحی یک سایت بدون استفاده از جدول ها با Css
بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام W3C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . در اینجا بود که سر و کله CSS پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و XHTML نیز برای نمایش اطلاعات بگار گرفته شد .
چرا باید بجای جدول از کد CSS استفاده کرد ؟
اول اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف !
دوم اینکه سرعت لودینگ سایت شما بیشتر میشه .
راحت تر تغییر مییابد : شما یک فایل CSS را تغییر می دهید و کل سایت شما تغییر می یابد .
مطالب از قالب سایت میشود .
در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید .
ساخت کلاسی برای عناصر تگ <div> : اولین قدم ساخت کلاس CSS است که المنت های تگ <DIV> از آن استفاده میکنند . بصورت زیر :
کد:
div.leftnav{
background: white;
color: black;
/* other display information here */
/* add Positioning information here */
}
این کلاس بسیار ساده است و در اصل الان کاری انجام نمیدهد . فقط متن سیاه را روی زمینه سفید تعریف میکند . شما باید از این المنت در جایی از صفحه استفاده کنید .
موقعیت یابی وابسته ساده :
این بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه .
کد:
div.leftnav{
background: white;
color: black;
/* Other display information here */
width: 15%;
}
خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید . همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .
موقعیت نمایی مطلق . اضافه کردن border و margin :
موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود :
کد:
div.content{
background: white;
color: black;
position: absolute; /* Says which positioning we are using */
left: 17%; /* 17% from the left side of the screen */
width: 69%; /* This is the width */
}
نکته اینجاست که در کد بالا فقط خاصیت left تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید:
کد:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
}
اساسا در موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:
Left : فاصله از چپ صفحه ، معمولا بر حسب درصد
Right : فاصله از راست صفحه ، معمولا بر حسب درصد
Top: فاصله از بالای صفحه ، معمولا بر حسب پیکسل
Bottom : فاصله از پایین صفحه ، معمولا بر حسب پیکسل
نکته اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4 یا 3 تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV در هر کجا که میخواهید باشید . همچنین در نظر داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .
افزودن Border :
ممکنه شما بخواهید کمی عناصرصفحه را با لبه کنار صفحه یا هر چیز دیگر فاصله دهید ، border ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت
حاشیه ها:
کد:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
border-color: white; /* Keep the border invisible */
border-style: solid; /* It is a solid invisible line which is fine */
border-bottom-width: 2px; /* These attributes are pretty self-explanatory */
border-top-width: 2px;
border-left-width: 3px;
border-right-width: 4px;
}
افزودن حاشیه یا margin :
Margin ها ابزار های قدرتمندی در سایت های css میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین فاصله درصدی از طرفین margin ها در وسط قرار دهید .
کد:
div.content{
background: white;
color: black;
margin-left: 20%; /* 20% from the left side of the screen */
margin-right: 20%; /* 20% from the right side of the screen */
}
نقصان وجود پشتیبانی مرورگر ها :
پشتیبانی نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده . Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .
ناسازگاری بین مرورگر ها :
بیشتر مردم از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css شما را بگونه های مختلف تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .
افزودن تگ DIV :
افزودن تگ DIV برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :
کد:
<div class = "leftnav">
// Insert Links
</div>
همانطور که می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون دارد :
کد:
<div class = "content">
// Content
</div>
<div class = "leftnav">
// Links
</div>
<div class = "rightnav">
// Links
</div>
تغییر دادن فونت متن در Css
در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می دادیم می توانیم با استایل انجام دهیم.
font-family
ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.
در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:
کد:
<div style="font-family: Arial">این متن با فونت Arial نمایش داده می شود.</div>
نتیجه را به صورت زیر مشاهده می کنید:
این متن با فونت Arial نمایش داده می شود.
البته باید به خاطر داشته باشید که اگر بازدید کننده فونت مورد نظر شما را نداشته باشد، مرورگر به جای آن از فونت پیش فرض خود استفاده می کند. برای جلوگیری از بروز این مشکل باید از فونتهایی استفاده کنید که معمولاً به همراه سیستم عامل نصب می شوند و در اکثر سیستمها موجود هستند.
font-size
این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.
فرض کنید می خواهیم متن درون یک DIV با اندازه 30 پیکسل نمایش داده شود:
کد:
<div style="font-size: 30px">این متن با اندازه 5 پیکسل نمایش داده می شود.</div>
نتیجه را ملاحظه کنید:
این متن با اندازه 30 پیکسل نمایش داده می شود.
font-style
کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چون استفاده از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این ویژگی می تواند مقادیر زیر را داشته باشد:
normal
italic
oblique
به یک مثال در مورد این ویژگی توجه کنید:
کد:
<div style="font-style:oblique">این متن به صورت مورب مشاهده می شود.</div>
نتیجه به این صورت خواهد بود:
این متن به صورت مورب مشاهده می شود.
font-weight
این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم:
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
در اینجا به ذکر یک مثال می پردازیم:
کد:
<div style="font-weight: 700">این متن تقریباً ضخیم مشاهده می شود.</div>
نتیجه به این صورت خواهد بود:
این متن تقریباً ضخیم مشاهده می شود.
نحو تغییر رنگ متن با استفاده از Css
نحو تغییر رنگ متن با استفاده از CSS
از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است اهمیت بیشتری پیدا می کند.
البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.
مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:
کد:
color: نام رنگ مورد نظر
color:#معادل هگزادسیمال رنگ
اگر می خواهید از رنگهای معمولی که با نام شناخته می شوند استفاده کنید کافی است تا نام رنگ مورد نظر خود را در این ویژگی استفاده کنید. این روش ساده تر است ولی انعطاف پذیری کمتری هم دارد چون تنها می توانید رنگ مورد نظر خود را از بین تعداد اندکی نام رنگ انتخاب کنید.
در صورتی که می خواهید از رنگهای بیشتری استفاده کنید و بهتر بتوانید رنگ مو رد نظر خود را انتخاب کنید می توانید از معادل هگزادسیمال رنگها استفاده کنید. در این صورت می توانید از 216 رنگ مورد استفاده در وب رنگ مورد نظر خود را انتخاب کنید.
در اینجا به ذکر چند مثال برای استفاده از ویژگی color می پردازیم. ما در اینجا از شناسه style برای تعریف کردن این ویژگی استفاده می کنیم اما به خاطر داشته باشید که می توانیم این ویژگی را برای یک تگ مشخص یا به صورت class و id در بخش HEAD متن یا استایل خارجی نیز به کار ببریم.
برای مثال در استفاده از color برای تغییر رنگ متن یک جدول می توانیم کد جدول را به صورت زیر بنویسیم:
کد:
<table border="1" style="color: red">
<tr>
<td>
این متن به رنگ قرمز نمایش داده می شود.
</td>
</tr>
</table>
نتیجه کد بالا با کدی که در پایین آمده است یکسان است:
کد:
<table border="1" style="color: #FF0000">
<tr>
<td>
این متن به رنگ قرمز نمایش داده می شود.
</td>
</tr>
</table>
نتیجه هر دو کد بالا به صورت زیر است:
این متن به رنگ قرمز نمایش داده می شود.
البته متن بالا در داخل يك جدول ظاهر ميشود.
به یاد داشته باشید که می توانید از ویژگی color برای هر کدام از سطرها یا سلولهای یک جدول به صورت جداگانه استفاده کنید. فقط کافیست تا "style="color: XXX را در هر قسمت قرار دهید و رنگ مورد نظر خود را به جای XXX قرار دهید.
تغییر رنگ و تصویر زمینه عناصر Html با Css
background-color
این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.
در مثال زیر زمینه قسمتی از یک متن را به رنگ زرد در می آوریم:
کد:
<p>متن بدون زمینه. <span style="background-color: yellow">این قسمت زمینه زرد دارد.</span></p>
این هم متن نهایی:
متن بدون زمینه. این قسمت زمینه زرد دارد.
همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:
کد:
<table border="1" style="background-color: #FFC0CB">
<td>سلول اول</td>
<td>سلول دوم</td>
</table>
شما حتی می توانید از این ویژگی برای سلولهای یک جدول به صورت جداگانه استفاده کنید.
یک نمونه دیگر از موارد استفاده این ویژگی در طراحی فرمهاست. به مثال زیر توجه کنید:
کد:
<form action="some_script>
نام : <input type="text" size="30" style="background-color: #009900">
</form>
توجه داشته باشید که در این ویژگی هم می توانیم از نام رنگ ها و هم از معادل هگزادسیمال آنها استفاده کنیم.
شما می توانید با استفاده از این ویژگی در تگ body رنگ زمینه صفحه را هم تغییر دهید. در مورد تصویر زمینه هم که در قسمت بعد به آن می پردازیم می توان به همین صورت عمل کرد.
background-image
این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.
کد:
background-image:url(آدرس تصویر مورد نظر)
بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( " ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:
کد:
<span style="background-image: url(http://www.neopersia.org/css/example1.gif)">برای این span از تصویر زمینه استفاده شده است.</span>
ساخت منوی عمودی بوسیله Css
یکی از مهمترین قسمت های یک سایت ( و وبلاگ ) ستون کناری اون هست. در این مطلب قصد داریم آموزش کوتاهی داشته باشیم در رابطه با یکی ۲ تا ترفند در رابطه با طراحی این ستون با استفاده از زبان CSS.
من برای نوشتن این مطلب از کارهایبرای مشاهده این لینک/عکس می بایست عضو شوید !برای عضویت اینجا کلیک کنید ]استفاده کردم پس می تونید به این برای مشاهده این لینک/عکس می بایست عضو شوید !برای عضویت اینجا کلیک کنید ] برید و نمونه کارها دیدن کنید.
مزیت کار در این هست که هر گزینه یک تصویر داره و وقتی نشانگر موس روی گزینه مورد نظر می ره تصویر دیگری به نمایش در می یاد.
ارزش کار زمانی مشخص می شه که کد استفاده شده بسیار تمیز و کوتاه باشه و از جاوا اسکریپت هم استفاده نشده باشه و از همه جالبتر توی اینترنت اکسپلورر ۶ هم بدون مشکل به نمایش در بیاد.
مسلما راه های مختلفی برای انجام این کار وجود داره ولی این راه می تونه یکی از بهترین گزینه ها باشه. پس با ما باشید در مورد آنالیز کد ها …
تمام کد های بکار رفته در منوهایی که در این صفحه مشاهده می کنید تقریبا به یک صورت می باشد. ما برای آنالیز کد Tab Menu ۲ رو انتخاب کردیم.
منوی ما در داخل یک تگ div با شناسه menu۲ قرار گرفته. در ابتدا ما یک استایل کلی به این تگ می دهیم. استایل داده شده مشابه زیر می باشد:
کد:
#menu۲ {
border: ۱px solid #D۸D۵D۱;
width: ۲۰۰px;
}
در خط اول ما یک خط به دور منوی مورد نظرمون کشیدیم با رنگی که به تصویر به کار رفته بخوره. در خط دوم نیز پهنای مشخص ۲۰۰ پیکسل رو تعیین کردیم. توجه داشته باشید که پهنای داده شده در این قسمت باید هم اندازه با تصویر بکار رفته در این طرح باشه.
همچنین برای فاصله از اطراف هم می تونید از دستور margin استفاده کنید.
حالا به قسمت بعد می رویم. این منو نیز همانند دیگر منو ها در بین تگ های ul قرار گرفته. در اینجا ما باید یک استایل کلی به این تگ بدیم:
کد:
ul {
list-style-type:none;
margin:۰;
padding:۰;
}
در حقیقت ۳ خط کد استفاده شده در قسمت بالا پیش فرض مرورگرها رو صفر و از بین می بره. برای از بین نخوردن طرح باید این دستورات اجرا بشه. با این کد دستورات نوشته شده به تمام تگ های ul اعمال می شه. اگه شما اینو دوست ندارید می تونید به جای استفاده از ul برای استایل دادن از عبارت div#menu۲ ul استفاده کنید که دستورات به کار رفته فقط برای این قسمت اعمال بشه.
طبق اصول کار گزینه ها باید بین تگ li قرار بگیرند. نیازی با دادن استایل برای li نیست پس یک مرحله داخل تر می رویم. جایی که لینک ها مشخص می شه. اصلی ترین قسمت کار همین قسمت یعنی استایل دادن به تگ a هست.
در این قسمت ما باید ۳ استایل به این تگ بدیم. استایل اول به خود تگ a:
کد:
#menu۲ li a {
height: ۳۲px;
voice-family: "\"}\"";
voice-family: inherit;
height: ۲۴px;
text-decoration: none;
}
3 خط اول مربوط به یک هک در CSS برای رفع مشکل مرورگر اینترنت اکسپلورر نسخه ۵.۵ هست.
در خط چهارم ما یک ارتفاع ۲۴ پیکسلی دادیم. در مورد اینکه چرا این ارتفاع انتخاب شده در ادامه توضیح می دهیم. در خط آخر نیز ما تعیین کردیم که لینک ها در این قسمت خط زیرشون حذف بشه.
در ادامه ما به تگ a در زمانی که بصورت لینک است و زمانی که اون لینک بصورت بازدید شده است استایل می دهیم:
کد:
#menu۲ li a:link, #menu۲ li a:visited {
color: #۳۶۸۸BA;
display: block;
background: url(menu۲.gif);
padding: ۸px ۰ ۰ ۳۰px;
}
در خط اول ما به لینک ها رنگ مورد نظر رو دادیم. در خط بعدی با دستور display: block تگ a موجود در این قسمت رو از حالت inline به block تغییر می دهیم. با استفاده از این کار عمل لینک به کل قسمت اعمال می شه.
در خط بعدی ما یک تصویر رو برای پشت زمینه این قسمت قرار دادیم. تصویر ما ۲۰۰ پیکسل عرض و ۶۴ پیکسل طول داره.
در آخرین خط نیز ما با دستور padding ما ۸ پیکسل از بالا به ارتقاع تگ a اضافه کردیم.
اگر توجه داشته باشید ما در قسمت قبل نیز یک ارتفاع ۲۴ پیکسلی داده بودیم که با این ۸ پیکسل مجموعا ۳۲ پیکسل می شه.
بدین صورت و دادن ارتفاع مشخص تنها ۳۲ پیکسل اول تصویر به نمایش در میاد و این یعنی ما دقیقا نصفه اول تصویر رو می بینیم.
در آخرین مرحله هم باید یک استایل دیگه به تگ a زمانی که نشانگر موس روش می ره تعریف بشه:
کد:
#menu۲ li a:hover {
color: #۳۶۸۸BA;
background: url(menu۲.gif) ۰ -۳۲px;
padding: ۸px ۰ ۰ ۳۲px;
}
خط اول و سوم تقریبا کارشون رو توضیح دادیم در قسمت قبل. تنها تغییر مهم در این قسمت خط دوم هست. ما مثل قسمت قبل همون تصویر رو به عنوان پس زمینه به این قسمت دادیم و تنها با اضافه کردن عبارت ۰ -۳۲ طوری نمایش تصویر رو تنظیم کردیم که از ارتفاع -۳۲ پیکسلی به نمایش دربیاد و این یعنی نمایش قسمت دوم تصویر.
همانطور که ملاحظه کردید نحوه کار بسیار ساده و راحت هست.
این یکی از ترفند های بسیار جالب CSS هست که در قسمت های دیگه هم می شه ازش استفاده های جالبی کرد.
× توجه داشته باشید که نسخه ۶ اینترنت اکسپلورر دستور :hover را فقط به تگ a قبول می کنه.
× در کل این دستور بعضی مواقع با اینترنت اکسپلورر ۶ با مشکل مواجه می شه بنابراین حتما بعد از انجام این مراحل حتما کارتون رو در این مرورگر تست کنید.
منبع : سایت عصرونه