20 ترفند و تکنیک CSS که هر طراحی باید بداند

در دنیای فناوری امروز تکنیک و ترفندهای CSS زیادی وجود دارد که طراحان

با استفاده از آن می توانند وب سایت ها را طراحی کنند. اهمیت آگاهی از CSS ثابت شده است.

این مقاله بسیار مناسب افرادی است که به تازگی پا در دنیای CSS گذاشته

اند یا حتی چیزهای بسیاری راجع به آن می دانند. همین که یاد گرفتید مدل جعبه چطور کار می کند و چطور آن جعبه ها را شناور کنید، وقت آن رسیده است که به طور جدی سراغ تکنیک های CSS بروید. برای این کار، ما یک لیست بزرگ از نکات، تکنیک ها و ترفندهای CSS را گرد هم آورده ایم تا به شما کمک کنیم طرحی که مد نظرتان است را بسازید. CSS می تواند گول زننده باشد، بنابراین شما هم باید همانطور عمل کنید. حال تقریباً همه ی چیزهایی که نیاز دارید درباره دنیای CSS بدانید، در این مقاله آورده شده است.

1. موقعیت ثابت

اگر همیشه می خواهید بدانید یک المان در کجای وب سایت شما قرار دارد،

موقعیت قطعی و ثابت (absolute positioning)، کلید عملی کردن آن می باشد. اگر مرورگر خود را به عنوان یک جعبه اتصال بزرگ می دانید، موقعیت ثابت به شما اجازه می دهد این کنترل را داشته باشید که آن المان در کجای جعبه خواهد ماند. از کد دستوری بالا، راست، پایین و چپ همراه با یک مقدار پیکسلی استفاده کنید تا بر جایی که یک المان قرار می گیرد، کنترل داشته باشید.

دستور CSS بالا تعیین می کند که یک المان در موقعیت 20 پیکسلی از لبه های

بالا و راست مرورگر شما باقی بماند. همچنین می توانید از موقعیت ثابت در درون یک div استفاده کنید.

2. * + سلکتور

* به شما این اختیار را می دهد تا تمام المان های یک سلکتور (selector) خاص

را انتخاب کنید. برای مثال، اگر شما *p را استفاده کرده اید و سپس کد

دستورهای CSS را به آن اضافه کرده اید، آن عمل برای تمام المان های موجود در سند

شما که تگ <p> دارد، اعمال خواهد شد. با این روش می توانید همزمان تغییرات

را در بخش های مورد نظر وب سایت خود اعمال کنید.

3. متوقف کردن تمام استایل ها

دقت داشته باشید که از این ترفند باید خیلی کم استفاده کنید، چرا که

اگر از این دستور برای هر چیزی استفاده کنید، در طولانی مدت با

مشکلاتی رو به رو خواهید شد. اما در صورتی که می خواهید بخاطر یک المان

خاص یک استایل CSS دیگر را نادیده بگیرید، در دستور css خود بعد از

استایل!importatnt استفاده کنید. برای مثال، اگر می خواهید سرفصل های H2 در بخش

خاصی از سایت بجای آبی بودن، قرمز باشد، باید از دستور یا کد CSS که در زیر آمده است استفاده کنید:

4. وسط چین

وسط چین گول زننده است، چون به چیزی که می خواهید وسط باشد بستگی دارد. بیایید نگاهی به CSS آیتم هایی که بر اساس محتوا باید وسط باشند، بیندازیم.

متن

متن با استفاده از text-align:center; در وسط قرار می گیرد. اگر می خواهید در یک سمت قرار گیرد، به جای وسط چین از چپ و راست استفاده کنید.

محتوا

div (یا هر المان دیگری) می تواند با اضافه کردن حالت block و استفاده از حاشیه های خودکار (auto margins) در وسط قرار بگیرد. کد دستوری CSS به شکل زیر خواهد بود.

در تصویر بالا به این علت برای عرض، مقدار «هرچیز کمتر از 100% یا anything under 100%» گذاشته شده است که اگر مقدار آن 100% باشد، در آن زمان تمام پهنا را در بر می گیرد و دیگر نیازی به وسط گذاری نبود. بهتر است یک عرض ثابت مثل 60% یا 550 پیکسل یا غیره داشته باشیم.

5. تنظیم عمودی (برای یک خط متن)

از این تکنیک CSS قطعاً در منو استفاده می شود. رمز آن یکسان قرار دادن ارتفاع منو و ارتفاع خط متن است. در زمان ادیت وب سایت ها، با این تکنیک زیاد مواجه خواهید شد.

6. افکت های هاور

از این تکنیک CSS برای دکمه ها، لینک های متن، بخش هایی از سایت، آیکون ها و غیره استفاده می شود. اگر می خواهید وقتی یک فرد موس را بر روی چیزی تکان می دهد رنگ آن تغییر پیدا کند، از همان کد دستوری CSS استفاده کنید، اما :hover را به آن اضافه کنید و استایل آن را تغییر دهید.

این امر به این شکل کار می نماید که زمانی شخصی بر روی تگ

سرفصل شما ( h2 ) می‌رود , رنگ آن از مشکی به قرمز‌رنگ عوض میشود .

مورد جذاب راجع‌به استعمال از : hover این است که دیگر نیازی نیست توشه دیگر میزان ی فونت را معین نمائید ( در حالتی‌که نمیخواهید تغییر تحول دهید ) . این فرمان صرفا آن چیزی که شما معلوم میکنید را تغییر تحول میدهد .

Transition

برای افکت های هاور، مانند منوها یا تصاویر وب سایت، قطعاً نمی خواهید

رنگ ها به سرعت تغییر کنند. اصولاً می خواهید سرعت تغییرات را کم کنید و این همان

جایی است که ویژگی Transition وارد بازی می شود.

این دستور CSS باعث می شود که به جای اینکه رنگ نوشته سریعاً به قرمز

تبدیل شود، این عمل 3 ثانیه به طول انجامد. این کد باعث می شود که افکت هاور برای بیننده لذت بخش تر باشد.

7. وضعیت لینک ها

وضعیت لینک ها موضوعی است که بسیاری از طراحان آن استایل ها را فراموش می کنند

و باعث مشکلات قابلیت استفاده برای کاربران می شوند. کلاس کاذب :link تمام لینک هایی

که هنوز بر روی آنها کلیک نشده است را کنترل می کند. کلاس کاذب :visited کنترل تمام لینک هایی که شما در حال حاضر بازدید کرده اید را به دست می گیرد. این دستور به بازدیدکنندگان وب سایت می گوید که تا به حال در کجای وب سایت بوده اند و از کجای آن هنوز بازدید نکرده اند.

8. تصاویر را به راحتی اندازه کنید.

گاهی زمان ها با وجود این‌که تصاویر صحیح مقیاس بندی گردیده اند , ولی با این حال گشوده نیز می بایست در یک پهنا مطلوب باشند و این قضیه سبب ساز می شود در تنگنا قرار بگیرید . یک منش آسوده برای انجام این عمل این است که از حداکثر پهنا برای در اختیار گرفتن آن به کارگیری کنیم .

این کد دستور CSS به این معنی است که حداکثر تصویر می تواند 100% باشد و ارتفاع آن بر اساس عرض عکس به طور خودکار محاسبه خواهد شد. در بعضی از موارد، شاید مجبور باشید عرض تصویر را 100% مشخص کنید.

9. کنترل المان های یک بخش

اگر می خواهید تنها تصاویر یک بخش خاص (مانند تصاویر بلاگ خود) را مورد هدف قرار داده و تغییر دهید، از یک کلاس برای بخش بلاگ خود استفاده کنید و آن را با سلکتور واقعی ترکیب کنید.

این کد به شما این امکان را می دهد تا فقط تصاویر بخش بلاگ را انتخاب کنید و تصاویر بخش های دیگر مانند لوگو بدون تغییر باقی خواهند ماند.

10. Direct Children

اگر این ترفند را از ابتدای آشنایی با CSS بدانید، بسیار خوب خواهد بود. این دستور زمان زیادی را برای شما ذخیره خواهد کرد! از > استفاده کنید تا مستقیماً موارد تحت تأثیر یک المان را انتخاب کنید.

این دستور CSS تمام عناصر لینک فعالی که سریعاً تحت Footer ID هستند را انتخاب می کند و چیزهایی دیگری که در فوتر قرار دارد را انتخاب نمی کند. از این دستور می توان برای ایجاد منوهای حرفه ای استفاده کرد.

المان های بچه خاص

باور کنید استفاده از این شیوه بسیار راحت و کارآمد می باشد. فقط باید

حساب کنید که چند آیتم وجود دارند که می خواهید به آن استایل بدهید و سپس آن استایل را بر روی آن اعمال کنید.

کد CSS بالا دو‌مین گزینه لیست را مورد انگیزه قرار میدهد و

آن را بولد کرده , ذیل آن را خط میکشد و به رنگ آبی رنگ در میاورد .

در صورتیکه پس از عدد یک «n» در پرانتز بیش تر فرمایید , میتوانید تمام مورد های دوم لیست را مورد انگیزه قرار دهید و این تغییر و تحول را روی آن اعمال نمائید . تصویر نمائید میخواهید هر کدام خط دربین را برای راحت تلاوت مقاله بوسیله یوزرها گوناگون فرمائید .

11. اجرای کد CSS به چندین کلاس یا سلکتور

برای مثال می خواهید یک مرز یکسان دور تمام تصاویر، بخش بلاگ و

سایدبار اضافه کنید. نیازی نیست همان کد دستور CSS را 3 بار بنویسید.

فقط کافی است آن آیتم ها را لیست کرده و با ویرگول (,) جدا کنید.

چه یک طراح سایت حرفه ای باشید و چه یک تازه کار، یادگیری روش ساخت

درست وب سایت ها یک مسیر بی پایان و پرمشقت است. همین که مشخص کنید

می خواهید چه زبان هایی یاد بگیرید، باید مهارت های خود را یاد گرفته و تقویت کنید.

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

Box-sizing:border style;12.

این کد دستوری CSS مورد‌علاقه ی بخش اعظمی از

طراحان اینترنت می‌باشد , چرا‌که مشکلات لبه ی داخلی ( padding ) و دیزاین ( layout ) را حل می نماید . اساساً هنگامی شما یک جعبه را با یک پهنا مختص معلوم میکنید و به آن کناره داخلی بیشتر می‌کنید , این لبه مقدار جعبه را مضاعف می نماید . هرچند با Box – sizing : border style; این دستور منتفی می شود و جعبه ها به عبارتی مقدار هایی که می بایست باشند باقی می‌مانند .

:before.13

این امر CSS سلکتوری است که به شما اذن میدهد یک المان CSS

را گزینش فرمایید و پیشین از هر المان , محتوا بیش تر نمائید . به عنوان مثال

شما یک سایت دارید که میخواهید گذشته از هر تگ H2 یک نوشته یگانه باشد . از این فرمان به کارگیری خواهید کرد :

اگر می خواهید از یک فونت آیکون استفاده کنید، استفاده از این دستور بسیار آسان و کارآمد خواهد بود. می توانید قبل از المان های خاصی آیکون قرار دهید و آن را برای المان های دیگر نیز اجرا کنید.

:after.14

مانند سلکتور : before , می‌توانید از فرمان : after برای افزودن محتوا به المان های یگانه به کارگیری فرمایید . یک به کارگیری عملی از تکنیک , افزودن «read more» پس از هر جدا کردن در وب لاگ است . این امر را میتوانید این چنین اجرا نمائید .

15. محتوا

content یکی از ویژگی خاص CSS است. شما زمانی می توانید از این ویژگی استفاده کنید که قصد اضافه کردن یک المان را دارید و می خواهید کنترل آن را به دست بگیرید. بیشترین کاربرد این دستور، در زمان ایجاد یک آیکون از یک فونت آیکون در یک محل خاص می باشد. در مثال بالا، می توانید ببینید متنی که می خواهید اضافه کنید را باید در گیومه قرار دهید.

16. ریسِت CSS

مرورگرهای متعدد پیکربندی CSS پیش فرض دارااست ,.

براین اساس ریسِت آنان تحمیلی است , براین اساس شما

یک مورد بازی برابر و پایدار دارید . به آن نظیر ساخت یک منزل

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

این متد ریسِت CSS یک اساس ی استاندارد برای تمام تارنما های شما تهیه و تنظیم می نماید و به آن‌ها در نقطه استارت CSS , ثبات می‌دهد . مرزهای تحمیلی , لبه های از پیش تهیه و تنظیم شده , طول خط ها , استایل های لیست و غیره را حذف می نماید .

17. حروف بزرگ اولین پاراگراف

همه ی خواننده ها حروف بزرگ اول پاراگراف را دوست دارند. آن حروف

درشت یادآور کتاب های چاپ شده ی سنتی هستند و یک راه عالی برای شروع یک صفحه ی محتوا می باشند. اولین حرف بزرگ در نوشته، قطعاً توجه شما را جلب خواهد کرد. یک راه آسان برای ایجاد حروف درشت اولین کلمه پاراگراف در CSS وجود دارد و با کمک این دستور انجام می شود: :first letter .

این دستور حرف را 3 برابر سایز حروف دیگر می کند. این دستور 3 پیکسل

دور حرف فاصله می اندازد تا هیچ گونه تداخلی ایجاد نشود و رنگ حرف را قرمز می کند.

18. نمایش نوشته ها به صورت تماماً حروف بزرگ، تماماً حروف کوچک یا فقط بزرگ نوشتن حرف اول کلمات

کار بیهوده ای است که یک بخش کامل را با حروف بزرگ بنویسید. تصور کنید زمانی که فرمت وب سایت تغییر می کند یا به روز رسانی می شود، ملزم هستید تمام متن را اصلاح کنید. در عوض، از تکنیک CSS زیر استفاده کنید تا متن را به فرمت خاص تبدیل کنید. هدف این دستور css تگ h2می باشد.

h2 { text-transform: uppercase; } – all caps
h2 { text-transform: lowercase; } – all lowercase
h2 { text-transform: capitalize; } – capitalizes the 1st letter of each word.

19. ارتفاع عمودی صفحه

گاهی اوقات بدون توجه به سایز صفحه نمایش، می خواهید یک بخش،

کل صفحه نمایش را پر کند. می توانید این کار را با دستور vh یا ارتفاع نمایش کنترل کنید. عدد قبل از vh یک درصد است، بنابراین اگر می خواهید آن متن 100% مرورگر شما را پوشش دهد، باید آن را 100 تنظیم کنید. شاید بهتر باشد مقدار را 85% قرار دهید تا مطابق با یک منو ثابت باشد.

موضوعی که باید به آن اهمیت دهید، کدهای مربوط به فیلم ها برای صفحه نمایش های خاص یا چرخش ها (مانند گوشی ها در حالت چرخش) می باشد. مثلاً اگر تصویر یک منظره را بکشید تا مطابق با حالت چرخش باشد؛ قطعاً خوب به نظر نخواهد رسید.

20. مدل لینک های شماره تلفن

اگر یک لینک دارید که در زمان انگشت زدن کاربر بر روی آن (در گوشی) با یک شماره تماس می گیرد، احتمالاً برای استایل دادن به آن با استفاده از سلکتور لینک فعال قدیمی به مشکل خواهید خورد. برای این مسئله از کد دستور CSS زیر استفاده کنید: