یک طراح وب » margin

روش های خلاصه نویسی در سی اس اس

علیها — Tue, 24 Mar 2009 14:32:30 +0000

گاهی اوقات دستورات سی اس اسی که می نویسیم آنقدر زیاد و حجیم می شود که روی سرعت لود شدن سایت تاثیر منفی می گذارد و نظارت و ویراش کردن آن نیز کمی دشوار می شود.

حالا اگر ما بیاییم از این روش های خلاصه نویسی استفاده کنیم، تا حدودی می توانیم از این حجیم شدن و شلوغ پلوغ شدن دستورات بکاهیم.

در ادامه ی این پست، فرض ِ من بر این است که شما می دانید سی اس اس دقیقا چیست و کمی آن را بلد هستید :)

برای شروع، یکی از دستورات ساده را انتخاب می کنم:

/*sample 1*/
body {
background: #ccc url(/images/bg.jpg) right fixed no-repeat;
}

این یک نمونه از دستور خلاصه شده است. یعنی ما همه ی مقدارهای لازم را به ترتیب به خاصیت background دادیم. حالا اگر بخواهیم همین دستورها را به صورت معمولی و مفصل بنویسیم، نتیجه می شود ۵ خط کد:

/*sample 2*/
body {
background-color: #ccc;
background-image: url(/images/bg.jpg);
background-position: right;
background-attachment: fixed;
background-repeat: no-repeat;
}

مورد بعدی کمی مهمتر است. خاصیت های margin و padding را در نظر بگیرید. این دو خاصیت معمولا در لا به لای دستورات، زیاد استفاده می شوند. حالا فرض کنید اگر مقدارهای این دو را به صورت مفصل و کامل بنویسید، چقدر به حجم دستوراتتان اضافه می شود!

/*sample 3*/
#content {
margin: 20px 10px 15px 10px;
padding: 10px 5px 10px 5px;
}

این، شکل خلاصه شده ی این دستورات است. درواقع به ترتیب، چهار جهت ِ top، right، bottom و left را در یک خط، مقدار دادیم. برای اینکه ترتیب جهت ها را درک کنید، به مثال زیر توجه کنید:

/*sample 4*/
margin: top / right / botoom / left;

دو روش دیگر برای خلاصه کردن مقدار های padding و margin وجود دارد که اولی به صورت زیر است:

/*sample 5*/
margin: 20px 10px;

این یعنی دو جهت ِ top و botoom دارای مقدار ۲۰px هستند و دو جهت ِ right و left دارای مقدار ۱۰px. متوجه شدید دیگر؟

آخرین روش خلاصه نویسی برای خاصیت های padding و margin به این شکل می باشد:

/*sample 6*/
margin: 20px;

به این معنی که هر چهار جهت ِ top، right، bottom و left دارای مقدار ۲۰px می باشند.
تمامی موارد گفته شده ی بالا در مورد خاصیت padding نیز صدق می کند.

خب، قضیه ی padding و margin دیگر تمام شد. حالا یک روش نسبتا متفاوت را با هم امتحان می کنیم :)

اکثر اوقات پیش می آید که بعضی از عناصری که در صفحه ایجاد می کنیم، یک سری خاصیت های مشترک دارند. مثلا رنگ زمینه ی آنها مشکی است و یا اندازه ی فونت آن ها ۱۲px است و…

در اینجور مواقع ما می توانیم یک بار همه ی این خاصیت ها را برای این گونه عناصر بنویسیم و از تکرار کردن آن ها بپرهیزیم. چگونه؟

فرض می کنیم که ما دو عنصر داریم که قرار هست خاصیت هایشان یکسان و مشترک باشد. عنصر اول، تگ p و عنصر دوم، تگ h3 است. حالا خیلی زیبا و قشنگ، یک بار خاصیت های موردنظر را می نویسیم برای هردو عنصر. اینگونه:

/*sample 7*/
p, h3 {
background: #ccc;
color: #333;
font: 12px Tahoma;
margin: 10px;
padding: 5px;
}

در اینجا ما با گذاشتن یک (,) بین دو عنصر، این منظور را رساندیم که دستورات نوشته شده هم برای تگ p درنظر گرفته شود، هم برای تگ h3. این را هم بگویم که از این روش می توانید برای بی نهایت عنصر استفاده کنید و محدودیتی از این بابت نیست.

موارد اصلی و مهم همین هایی بود که ذکر کردم و فقط دو مورد جزئی می ماند که برای کامل شدن بحث، به آن ها هم اشاره می کنم.

اولی در رابطه با خلاصه کردن کد رنگ است که از ۶ کاراکتر به ۳ کاراکتر تبدیل می شود.

/*sample 8*/
background-color: #cccccc;

در این مثال ما یک رنگ خاکستری ِ روشن تولید کردیم. همانطور که می بینید از ۶ کاراکتر c استفاده کردم. حالا اگر به جای ۶ کاراکتر c فقط از ۳ کاراکتر استفاده کنم، باز همان رنگ خاکستری روشن تولید می شود.

/*sample 9*/
background-color: #ccc;

برای مورد آخر هم به خلاصه نویسی خاصیت فونت می پردازم. مثال زیر، خود گویای همه چیز است:

/*sample 10*/
#content {
font: bold 12px Tahoma;
}

ترتیب ِ قراردادن ِ مقدارها را باید رعایت کنید حتما:

/*sample 11*/
#content {
font: font-style and font-weight / font-size / font-family;
}

خب، بحث مان دیگر تمام شد. چیزی که قابل توجه است این است که من برای تمامی خاصیت هایی که می توان آن ها را خلاصه نویسی کرد اینجا مثال نیاورم. مثل خاصیت border که دیگر این ها را می گذارم به عهده ی خودتان. با کمی حوصله به خرج دادن و الگو برداری از همین مثال هایی که زدم، می توانید برای خاصیت های دیگر هم خلاصه نویسی کنید.

اگر سوالی بود، در خدمت هستم :)

13 دیدگاه | فرستادن به: del.icio.us

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

علیها — Wed, 08 Oct 2008 21:09:19 +0000

برای ایجاد منوهای زیرمنودار (منوهای پایین افتادنی) در صفحات وب، راه های مختلفی وجود دارد که هرکدام مزایا و معایب خاص خود را دارند. به طور کلی سه روش برای ایجاد منوهای زیرمنودار وجود دارد:

۱٫ فلش
۲٫ جاوا اسکریپت
۳٫ سی اس اس

ابتدا اجازه بدید هرکدام از این روش ها را بررسی کنیم و ببینیم کدام روش اصولی تر و کاربردی تر می باشد.

۱٫ فلش: لازمه ی استفاده از این روش در مرحله ی اول تسلط کافی بر فلش است و باید کار با فلش را بلد بود تا بتوان منوهای جالب ایجاد نمود. البته نرم افزارهایی مانند “۱۲۳ flash menu” در این زمینه ارائه شده اند که منوهایی از پیش طراحی شده را در اختیار کاربر قرار میدهند و با استفاده از ابزارهایی که در خود گنجانده اند، امکان ویرایش منوها را به کاربر میدهند. یکی از معایبی که منوهای فلش دارند، ایندکس نشدن محتوای آن ها در موتورهای جستجوگر میباشد که البته اخیرا گوگل این مشکل را برطرف کرده و محتوای فایل های فلش اعم از همین منوها را نیز ایندکس می کند و این مورد تا حدودی مشکلات سئو را برطرف میکند.

۲٫ جاوا اسکریپت: بگذارید یک چیزی را همینجا بگویم! اگر میخواهید منوهای سایتتان با جاوا اسکریپت باشد، تاکید می کنم که اگر می توانید، خودتان آن را کدنویسی کنید وگرنه از کدهای آماده بپرهیزید، چرا که اگر با مشکلی رو به رو شوید، هرگز نمیتوانید مشکلتان را برطرف کنید، مگر اینکه از کسی کمک بگیرید!

۳٫ سی اس اس: در این بین، تنها منوهایی که با استفاده از سی اس اس ایجاد میشوند، از نظر سئو و ایندکس شدن کاملا بهینه و اصولی می باشند! چرا که محتوای این منوها در پرونده ی اکس اچ تی ام ال موجود است. و البته ایجاد و کدنویسی آن در مقایسه با فلش و جاوا اسکریپت، به نسبت راحت تر می باشد. اما خب مشکل دیگری که سر راه مان قرار می گیرد، عدم پشتیبانی مرورگری مثل IE (نسخه ی ۶ به پایین) از این روش است! در ادامه توضیحات بیشتری در این زمینه می دهم و البته راه حل این مشکل را هم به زودی و در مقاله ای جداگانه منتشر خواهم کرد!

چگونه با استفاده از سی اس اس، منوهای زیرمنودار ایجاد کنیم؟!

خب، چیزهایی که لازم داریم، اینها هستند: یک فایل سی اس اس، یک فایل اکس اچ تی ام ال و یک ویرایشگر متن، مثلا نوت پد ویندوز.
برای ساختن فایل سی اس اس، می توانید یک فایل متنی ایجاد کنید و پسوند آن را به css تغییر دهید و ترجیحا نام فایل را style بگذارید. یعنی در نهایت بشود:

style.css

ساختید فایل رو؟! خب، حالا بریم سراغ کدنویسی…
فایل سی اس اسی رو که ساختید، با کمک یک برنامه ی ویرایشگر متن، باز کنید.
ما باید با کمک لیست ها این منو را طراحی کنیم. فقط کافیست کمی با تگ های ul و li، بازی کنیم. پس در ابتدا یک سلکتور با نام nav می نویسیم و پدینگ و مارجین ِش رو صفر میکنیم و به list-styleش هم مقدار none می دیم:

#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}

حالا یک اینتر بزنید و برید خط بعدی… اینبار باید به تگ li ای که در nav قرار می گیرد، دستورات زیر را بدهیم:

#nav li {
float: right;
position: relative;
width: 90px;
height: 20px;
background-color: #f6f6f6;
color: #f75801;
font: bold 70% Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
direction: rtl;
border: 1px solid #e1e1e1;
text-align: center;
padding-top: 5px;
}

به خاصیت float مقدار right دادیم، چون می خواهیم منو در قسمت راست صفحه و به صورت شناور قرار بگیره.
دوباره اینتر بزنید و برید خط پایین. این دستوری که می خواهیم بنویسیم، برای این هست که وقتی کرسر موس رفت روی عناوین منو، رنگ زمینه اش تغییر کند:

#nav li:hover {
background-color: #f1ff96;
}

باز هم اینتر بزنید. دستورات زیر هم وضعیت ظاهری لینک ها را تعیین می کنند:

#nav a:link, #nav a:visited {
display: block;
text-decoration: none;
color: #868584;
}
#nav a:hover, #nav a:active {
display: block;
text-decoration: none;
color: #f75801;
}

اینتر لطفا! قسمت مهم اینجاست. باید محتوای منو (یعنی همان زیرمنو) را مخفی نگه داریم تا زمانی که کرسر موس رفت روی عناوین منو:

#nav ul {
display: none;
position: absolute;
padding-top: 7px;
}

خاصیت display که با none مقداردهی شده، درواقع دستور میدهد که قسمت زیر منو، مخفی و غیر قابل نمایش بماند!
اینتر بزنید باز هم! خب، حالا باید کمی ظاهر زیرمنو را سبک دهی کنیم. به زمینه و حاشیه اش رنگی بدهیم و موقعیتش را جمع و جور کنیم:

#nav ul li {
float: none;
border: 1px solid #dded6f;
background-color: #f1ff96;
font-size: 100%;
margin: 0;
padding: 0;
padding-top: 5px;
}

اینتر فراموش نشه! باز هم با دستور زیر، رنگ زمینه ی گزینه های زیر منو ها را در زمان حرکت کرسر موس روی آن ها، تعیین می کنیم:

#nav ul li:hover {
background-color: #f9ffcf;
}

آخرین اینتر را بزنید که می خواهیم یک کار قشنگ بکنیم:) یادتان که هست چند خط بالاتر، دستور مخفی کردن زیرمنوها را دادیم؟! حالا باید دستور بدهیم که هر زمان کرسر موس روی یکی از عناوین منو رفت، بی چون و چرا زیرمنوی آن نمایش یابد! فقط کافیست بگوییم:

#nav li:hover ul {
display: block;
}

زیبا نیست؟! خب، فایل سی اس اس تان تکمیل شد. حالا برویم سراغ فایل اکس اچ تی ام ال! خسته که نشدید خدای ناکرده؟!
فایل اکس اچ تی ام ال را بسازید. برای ساختن آن مانند ساختن فایل سی اس اس عمل کنید و نام فایل را بگذارید menu. یعنی باید بشود:

menu.htm یا menu.html

خب. اول کدهای مربوط به هدر را می نویسیم:




creating menus with CSS | Demo!

حالا تگ بدنه رو باز می کنیم و لیست مورد نظر رو ایجاد می کنیم و سلکتور nav رو بهش نسبت می دهیم و بعد از اون، عناوین و زیرمنوها رو اضافه می کنیم:

واضح هست دیگه؟! در اینجا ما یک منو، دو عنوان به نام های “رنگ” و “آموزش ها” و برای هر عنوان، سه زیرمنو داریم. در آخر هم تگ html را ببندید!

پشتیبانی از این روش
همون طور که در ابتدا هم گفتم، این روش در نسخه ها ی ۶ و پایین تر ِ مرورگر IE پشتیبانی نمی شود و کار نمی کند! دلیلش هم روشن است. ما برای این کار از خاصیت hover استفاده کرده ایم که این نسخه ها از مرورگر IE (یعنی نسخه های ۶ به پایین) خاصیت hover را فقط برای لینک ها می شناسند و برایشان جای تعجب دارد که بخواهید با استفاده از خاصیت hover، مثلا متنی را ظاهر و یا مخفی کنید! اما از IE7 به بعد این مشکل رفع شده و این منویی که ایجاد کردیم به درستی کار خواهد کرد. سعی می کنم به زودی مقاله ای را در این رابطه منتشر کنم و در آن به حل این مشکل پردازم. یعنی این منو بتواند در IE6 و حتی پایین تر هم کار کند!

کمک ها
اگر انجام مراحل بالا برایتان مشکل است، می توانید فایل اکس اچ تی ام ال و سی اس اس آماده ی این منو را از اینجا دریافت نمایید.
برای دیدن دموی این منو نیز به این صفحه مراجعه فرمایید.

42 دیدگاه | فرستادن به: del.icio.us