توی دنیای فناوری امروز تکنیک ها و ترفند های css زیادی وجود داره که طراح ها میتونن با اون وب سایت ها رو طراحی کنن. این مقاله خیلی مناسب برای افراد مبتدی هست . توی این مقاله نکات و تکنیک های خیلی مهم css رو بهتون توضیح میدیم .
پس در ادمه بایت لرن همراه باشید...
1- موقعیت ثابت
اگر میخواید همیشه بدونید که یک المان در کجایی وب سایت قرار داره باید موقعیت اون رو قطعی و ثابت کنیم ( absolute positioning ) ، با دستور زیر میتونیم موقعیت قطعی و ثابت رو اعمال کنیم .
|
Position: absolute; Top: 20px; Right: 20px; |
2- متوقف کردن تمام استایل ها
ما خیلی کم از این ترفند استفاده میکنیم ، چون اگر این دستور برای هر چیزی استفاده بشه در طولانی مدت با مشکلاتی مواجه میشیم .
|
.section { color: red !important; } |
3- وسط چین
وسط چین کردن گول زننده هست ، چون دقیقا به چیزی که می خوایم وسط چین بشه بستگی داره ، پایین بهتون میگیم چطوری بتونید متن یا هر المانی رو وسط چین کنید .
برای وسط چین کردن متن از دستور text-align: center استفاده میکنیم ، ولی برای وسط چین کردن المان های دیگه میتونیم با اضافه کردن حالت block و استفاده از حاشیه خودکار auto margins در وسط قرار بگیرد .
|
#div { Display: block; Margin: auto; Width: anything under 100%; } |
همچنین لیست کد های Css را در بایت لرن بخوانید.
5- تنظیم عمودی برای یک خط متن
از این تکنیک css قطعا توی منو ها استفاده میشه ، این ترفند ارتفاع منو و ارتفاع خط متن رو یکسان میکنه .
|
.nav li { Line-height: 50px; Height: 50px; } |
7- وضعیت لینک ها
وضعیت لینک ها موضوعی است که بسیاری از طراحان آن استایل ها را فراموش می کنند و باعث مشکلات قابلیت استفاده برای کاربران می شوند. کلاس کاذب :link تمام لینک هایی که هنوز بر روی آنها کلیک نشده است را کنترل می کند. کلاس کاذب :visited کنترل تمام لینک هایی که شما در حال حاضر بازدید کرده اید را به دست می گیرد. این دستور به بازدیدکنندگان وب سایت می گوید که تا به حال در کجای وب سایت بوده اند و از کجای آن هنوز بازدید نکرده اند.
|
a:link { color: blue; } a:visited { color: purple; } |
8- کنترل المان های یک بخش
با استفاده از مثال تصویر بالا، اگر می خواهید تنها تصاویر یک بخش خاص (مانند تصاویر بلاگ خود) را مورد هدف قرار داده و تغییر دهید، از یک کلاس برای بخش بلاگ خود استفاده کنید و آن را با سلکتور واقعی ترکیب کنید. این کد به شما این امکان را می دهد تا فقط تصاویر بخش بلاگ را انتخاب کنید و تصاویر بخش های دیگر مانند لوگو بدون تغییر باقی خواهند ماند. در اینجا می بینیم که کد CSS چطور خواهد بود:
|
.blog img { Max-width: 100%; Height: auto; }
|
9- Direct Children
اگر این ترفند را از ابتدای آشنایی با CSS بدانید، بسیار خوب خواهد بود. این دستور زمان زیادی را برای شما ذخیره خواهد کرد! از > استفاده کنید تا مستقیماً موارد تحت تأثیر یک المان را انتخاب کنید. برای مثال:
|
#footer > a
|
این دستور CSS تمام عناصر لینک فعالی که سریعاً تحت Footer ID هستند را انتخاب می کند و چیزهایی دیگری که در فوتر قرار دارد را انتخاب نمی کند. از این دستور می توان برای ایجاد منوهای حرفه ای استفاده کرد.
همچنین معرفی فری مورک های css را در بایت لرن بخوانید.
10- اجرای کد CSS به چندین کلاس یا سلکتور
برای مثال می خواهید یک مرز یکسان دور تمام تصاویر، بخش بلاگ و سایدبار اضافه کنید. نیازی نیست همان کد دستور CSS را 3 بار بنویسید. فقط کافی است آن آیتم ها را لیست کرده و با ویرگول (,) جدا کنید. برای مثال:
|
.blog , img , .sidebar { Border: 1px solid #000; }
|
چه یک طراح سایت حرفه ای باشید و چه یک تازه کار، یادگیری روش ساخت درست وب سایت ها یک مسیر بی پایان و پرمشقت است. همین که مشخص کنید می خواهید چه زبان هایی یاد بگیرید، باید مهارت های خود را یاد گرفته و تقویت کنید.
مهم نیست چه چیزهایی یاد گرفته اید، CSS یکی از آن مواردی است که حتماً باید یاد بگیرید. اگر تعدادی تکنیک CSS ماهرانه و ناب را برای انجام کار یاد بگیرید، دیگر کار شما خیلی سخت نخواهد بود.
